Case Study Chapter 4 Web Development and Design Foundations with HTML 5, 8th edition

JavaJam Coffee House See Chapter 2 for an introduction to the JavaJam Coffee House Case Study. Figure 2.30 shows a site map for the JavaJam website. The Home page and Menu page were created in earlier chapters.

Using the existing website as a starting point, you will modify the design of the pages and create a new page, the Music page. You have five tasks in this case study:

1. Create a new folder for this JavaJam case study, and obtain the starter image files.

2. Modify the Home page to display the winding road image as shown in Figure 4.47.

3. Modify the Menu page, shown in Figure 4.48, to be consistent with the Home page.

4. Create a new Music page, as shown in Figure 4.49. 5. Modify the style rules in the javajam.css file as needed.

Task 1: Create a folder on your hard drive or portable storage device called javajam4. Copy all the files from your Chapter 3 javajamcss folder into the javajam4 folder. Obtain the images used in this case study from the student files. The images are located in the chapter4/casestudystarters/javajam folder. The images are background.gif, greg.jpg, gregthumb.jpg, javajamlogo.jpg, melanie.jpg, melaniethumb.jpg, mugs.jpg, and windingroad.jpg. Save them in your javajam4 folder.

Task 2: The Home Page. Launch a text editor, and open the index.html file from your javajam4 folder. Modify the index.html file to look similar to the web page shown in Figure 4.47. 1. Replace the Relax at JavaJam text contained within the h2 element with Follow the Winding Road to JavaJam. 2. Code an img tag for the windingroad.jpg image above the h2 element in the main content area. Be sure to include the alt, height, and width attributes. Also configure the image to appear to the right of the text content by coding the align="right" attribute on the tag. Note: The W3C HTML validator will indicate that the align attribute is invalid. Well ignore the error for this case study. In Chapter 6 youll learn to use the CSS float property (instead of the align property) to configure this type of layout. 3. Add a paragraph with the following text below the h2 element: Were a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. Youll feel right at home at JavaJam! 4. Configure the text JavaJam Coffee House features: within an h3 element below the paragraph and above the unordered list. Save and test your new index.html page. It will be similar to Figure 4.47, but youll notice that a few final touches (including the background image and logo image) are missing; youll configure these with CSS in Task 5.

Task 3: The Menu Page. Launch a text editor, and open the menu.html page from your javajam4 folder. Modify the menu.html file to look similar to the web page shown in Figure 4.48. Figure 4.48 JavaJam menu.html M04_FELK0746_03_SE_C04.indd 191

1. Code an img tag for the mugs.jpg image above the h2 element in the main content area. Be sure to include the alt, height, and width attributes. Also configure the image to appear to the right of the text content by coding the align="right" attribute on the tag. Note: The W3C HTML validator will indicate that the align attribute is invalid. Well ignore the error for this case study. In Chapter 6, youll learn to use the CSS float property (instead of the align property) to configure this type of layout. 2. Add a paragraph with the following text below the h2 element: Indulge in our locally roasted free-trade coffee and enjoy the aroma, the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you

purchase ask the barista for details. Save and test your new menu.html page. It will be similar to Figure 4.48, but missing a few final touches (see Task 5).

Task 4: The Music Page. Use the Menu page as the starting point for the Music page. Launch a text editor, and open the menu.html file in the javajam4 folder. Save the file as music.html. Modify the music.html file to look similar to the Music page, as shown in Figure 4.49:

1. Change the page title to an appropriate phrase. 2. Delete the image and description list from the page. 3. Configure Music at JavaJam as the text within the h2 element. 4. Configure the following as the text within the paragraph element: The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music you wont want to miss! 5. The rest of the content in the page will consist of two areas describing music performances. The area describing each music performance consists of an h4 element, a div assigned to the class named details, and an image link.

Figure 4.49 JavaJam music.html

M04_FELK0746_03_SE_C04.indd 192 12/21/15 7:08 PM

193Website Case Study

January Music Performance: Configure an h4 element with the following text: January Code an opening div tag. Assign the div to the class named details. Configure the melaniethumb.jpg as an image link to melanie.jpg. Code appropriate attributes on the tag. Configure the following text within the div after the image link: Melanie Morris entertains with her melodic folk style. February Music Performance: Configure an h4 element with the following text: February Code an opening div tag. Assign the div to the class named details. Configure the gregthumb.jpg as an image link to greg.jpg. Code appropriate attributes on the tag. Configure the following text within the div after the image: Tahoe Greg is back from his tour. New songs. New stories.

Save the music.html file. If you test your page in a browser, youll notice that it looks different from Figure 4.49you still need to configure style rules.

Task 5: Configure the CSS. Open javajam.css in a text editor. Edit the style rules as follows: 1. Modify the body element selector style rules. Configure background.gif as the background image. 2. Modify the style rules for the wrapper id. Configure the background color to be #FEF6C2. Configure a minimum width of 900px (use min-width). Configure a maximum width of 1280px (use max-width). Use the box-shadow property to configure a drop-shadow effect. 3. Modify the header element selector style rules. Remove the text-align declaration. Code a declaration to set the height to 150px. Configure declarations to display the javajamlogo.jpg image as a background image without repeating. 4. Modify the h1 element selector style rules. Remove the line-height declaration.

Configure declarations to set the top padding to 45px, left padding to 220px, and font size to 3em. 5. Modify the nav element selector style rules. Configure declarations for 1.5em font size size and 10px of top padding. 6. Code a new style rule to prevent the hyperlinks in the nav area from displaying the default underline. Use nav a { text-decoration: none; } 7. Modify the footer element selector style rules. Configure declarations for 10px of bottom padding and a solid 2px top border (use #221811 as the color). 8. Add a new style rule for the h4 element selector that configures a background color (#D2B48C), font size (1.2em), left padding (10px), and bottom padding (5px). 9. Add a new style rule for the main element selector to configure 2em of padding on the left, right, and bottom. Also configure display: block; (this will prevent rendering issues in versions of Internet Explorer that do not support the HTML5 main element).

M04_FELK0746_03_SE_C04.indd 193

10. Add a new style rule for the class named details to add 20% left and right padding. Notice how this rule adds empty space on either side of the music performance description and image on the music.html page. 11. Add a new style rule for the img element selector that configures 10px left padding and 10 px right padding. Save the javajam.css file. Test your pages (index.html, menu.html, and music.html) in a browser. If your images do not appear or your image links do not work, examine your work carefully. Use Windows Explorer or Mac Finder to verify that the images are saved in your javajam4 folder. Examine the src attribute on the tags to be sure you spelled the image names correctly. Another useful troubleshooting technique is to validate the HTML and CSS code. See Chapters 2 and 3 for Hands-On Practice exercises that describe how to use these validators.