Problem

JavaJam Coffee House Case StudyIn this chapter’s case study you will use the existing Java...

JavaJam Coffee House Case Study

In this chapter’s case study you will use the existing JavaJam (Chapter 6) website as a starting point to create a new version of the website that uses a two-column layout. Figure displays a wireframe with the new layout.

You have three tasks in this case study:

1. Create a new folder for the JavaJam Coffee House website.

2. Edit the javajam.css external style sheet.

3. Edit the Home page (index.html), Menu page (menu.html), and Music page (music.html) to configure the navigation hyperlinks within an unordered list.

Task 1: Create a folder called ch7javajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 6 Case Study ch6javajam folder.

Task 2: Configure the CSS. Launch a text editor and open the javajam.css external style sheet file.

• The wrapper id selector. Change the background color from off-white (#F5F5DC) to light tan (#E2D2B0).

• The h1 element selector. Add a new style declaration to set the bottom margin to 0.

• The h3 element selector. Add a new style declaration to set the background color to light tan (#E2D2B0).

• The nav element selector. This is the area that will float on the page. Configure left float and a width of 160 pixels.

• The content id selector. Add new style declarations to configure an off-white (#F5F5DC) background color and a 175 pixel left margin.

• Configure the content area.

• Content images. Create a new style rule using a descendant selector that causes the images in the content id (# content img) to float to the left, with 40 pixels of right padding and 40 pixels of left padding.

• Content ul elements. The marker.gif image should only be used in the content id area. Replace the ul element selector with a descendant selector that specifies only ul elements within the content id (#content ul). Also configure the list-style-position: inside; style declaration for this selector.

• Content div elements. Create a new style rule using a descendant selector (# content div) that configures div elements within the content id (such as the announcements on the music page) to display with overflow set to auto, with 40 pixels of left padding, and 40 pixels of right padding.

• Configure the navigation area. Use descendant selectors to configure the unordered list and anchor elements within the nav element.

• Style the unordered list. Configure the ul element selector with no list markers, zero left padding, and 1.2em font size.

• Remove the underline from navigation anchor tags. Configure the a element selector to display text without an underline.

• Style unvisited navigation hyperlinks. Configure the :link pseudo-class with medium tan text color (#795240).

• Style visited navigation hyperlinks. Configure the :visited pseudo-class with medium brown text color (#A58366).

• Style interactive hyperlinks. Configure the :hover pseudo-class with offwhite text color (#F5F5DC).

• Configure the footer area. Use a descendant selector to configure the anchor tags within the footer element to display with dark brown text color (#2E0000) for unvisited hyperlinks, black text color (#000000) for visited hyperlinks, and off-white text color (#F5F5DC) when the :hover pseudo-class is active.

Save your javajam.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

Task 3: Edit the Web Pages. Launch a text editor and open the index.html file. Configure the navigation hyperlinks using an unordered list. Remove the special characters.

Save the file. Test your web page in a browser. Your home page should be similar to the example in Figure with a two-column page layout. Modify the music.html and menu.html files in a similar manner. Test your web page in a browser. The Music page is shown in Figure.

Figure JavaJam two-column page layout.