Task 1: Create a Folder. Create a folder called javajam6. Copy all of the files from your Chapter 4 javajam4 folder into the javajam6 folder. Copy the heroroad.jpg, heromugs.jpg, and heroguitar.jpg files from the chapter6/starters folder. You will modify the javajam.css file and each web page file (index.html, menu.html, and music.html) to implement the two-column page layout shown in Figure 6.49. See the new JavaJam Home page, as shown in Figure 6.50. Task 2: Configure the CSS. Open javajam.css in a text editor. Edit the style rules as follows: 1. Configure the universal selector with a box-sizing: border-box style declaration. * { box-sizing: border-box; } Figure 6.50 The new JavaJam two-column layout (index.html) 294 Chapter 6 Page Layout 2. Configure id selectors for the hero image on each page. a. Configure an id selector named heroroad . Set the background image to heroroad. jpg. Configure 100% background-size and height of 250 pixels. b. Configure an id selector named heromugs . Set the background image to heromugs. jpg. Configure 100% background-size and height of 250 pixels. c. Configure an id selector named heroguitar . Set the background image to heroguitar. jpg. Configure 100% background-size and height of 250 pixels. 3. Edit the style rules for the main selector so that the hero image will fill the entire area. Change left padding to 0. Change right padding to 0. Also configure a 200px left mar- gin, 0 top padding, and #FEF6C2 background color. 4. Since the main content area no longer has any left or right padding, configure descen- dant selectors to configure style rules for the following elements within the main ele- ment: h2, h3, h4, p, div, ul, dl. Set left padding to 3em and right padding to 2em. 5. Configure the left-column navigation area. Add style declarations to the nav element selector to configure an area that floats to the left and is 200 pixels wide. 6. Configure the :link , :visited , and :hover pseudo-classes for the navigation hyper- links. Use the following text colors: #FEF6C2 (unvisited hyperlinks), #D2B48C (visited hyperlinks), and #CC9933 (hyperlinks with :hover ). For example, nav a:link { color: #FEF6C2; } 7. You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area in Figure 6.50 does not show list markers. Code a nav ul descendant selector to configure unordered lists in the navigation area to display without list mark- ers and with 0 left padding. 8. Modify the wrapper id. Configure a dark background color (#231814) which will dis- play behind the column with the navigation area. 9. Modify the h4 element selector style rules. View the Music page shown in Figure 6.52 and notice that the

tags are styled differently, with all uppercase text (use text-transform ), a bottom border, and 0 bottom padding. Also configure a style declaration to clear floats on the left. 10. Refer to the Music page shown in Figure 6.52 and notice how the images float on the left side of the paragraph description. Configure a new class named floatleft that floats to the left with 20 pixels of right and bottom padding. 11. Modify the style rules for the details class and add the overflow: auto; style declaration. 12. Add the following CSS to be compatible with most older browsers: header, nav, main, footer { display: block; } Save the javajam.css file. Task 3: The Home Page. Open index.html in a text editor. Edit the code as follows: 1. Add the following HTML5 shim code in the head section of the web page after the link element (to assist Internet Explorer 8 and earlier versions): 295 Website Case Study 2. Configure the left-column navigation area, which is contained within the nav element. Remove any characters that may be present. Code an unordered list to orga- nize the navigation hyperlinks. Each hyperlink should be contained within

tags. 3. Remove the img tag for the windingroad.jpg image. Configure a div element assigned to the heroroad id between the opening main tag and the opening h2 tag. There will be no HTML content in this div, which is a container for a background image you configured with CSS in Task 2. Save the index.html file. It should look similar to the web page shown in Figure 6.50. Remember that validating your HTML and CSS can help you find syntax errors. Test and correct this page before you continue. Task 4: The Menu Page. Open menu.html in a text editor. Configure the left-column navi- gation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Remove the img tag for the mugs.jpg image. Configure a div element assigned to the heromugs id between the opening main tag and the opening h2 tag. Save your new menu.html page and test it in a browser. It should look similar to the web page shown in Figure 6.51. Use the CSS and HTML validators to help you find syntax errors. Figure 6.51 The new JavaJam Menu page Task 5: The Music Page. Open music.html in a text editor. Configure the left-column navi- gation area, navigation hyperlinks, and HTML5 shim in the same manner as the home page. Configure a div element assigned to the heroguitar id between the opening main tag and the opening h2 tag. 296 Chapter 6 Page Layout Configure the thumbnail images to float to the left. Add class="floatleft" to the image tag for each thumbnail image. Save your new music.html page and test it in a browser. It should look similar to the web page shown in Figure 6.52. Use the CSS and HTML valida- tors to help you find syntax errors. In this case study, you changed the page layout of the JavaJam website. Notice that with just a few changes in the CSS and HTML code, you configured a two-column page layout.