In this chapter's case study you will use the existing JavaJam (Chapter 4) website as...

In this chapter's case study you will use the existing JavaJam (Chapter 4) website as a starting point while you create a new version of the website that incorporates images.

You have five tasks in this case study:

Task 1: Create a folder called ch5javajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 4 Case Study ch4javajam folder and place them in your ch5javajam folder. Copy the following files from the chapter5/casestudystarters/javajam folder in the student files and place them in your ch5javajam folder: windingroad.jpg, marker.gif, favicon.ico, greg.jpg, gregthumb.jpg, melanie.jpg, and melaniethumb.jpg.

Task 2: The External Style Sheet. Launch a text editor and open the javajam.css external style sheet file.

1. Configure an img element selector not to display a border (see Hands-On Practice 5.2).

2. Configure an h3 element selector to display with a light tan #E6D6A9 background color.

3. Configure a ul element selector to display the marker.gif file as the list marker ("bullet").

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

Task 3: The Home Page. Launch a text editor and open the home page, index.html. Locate the div assigned to the id named content. Configure an h2 element with the text, "Follow the Winding Road to JavaJam," on a new line below the opening div tag. Add an tag on a new line below the h2 element. Configure the tag to display the windingroad.jpg image. Configure the alt, height, and width attributes for the image. Save and test your page in a browser. It should look similar to Figure.

Task 4: The Menu Page. Launch a text editor and open the menu page, menu.html. Locate the div assigned to the id named content. Configure an h2 element with the text, "Coffee at JavaJam," on a new line below the opening div tag. Save and test your page in a browser. It should look similar to Figure.

Task 5: 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 ch5javajam folder. Save the file as music.html.

Modify the music.html file to look similar to the Music page, as shown in Figure:

January Music Performance:

February Music Performance:

Save the music.html file. When you test your page in a browser, it should look similar to Figure.

FIGURE JavaJam Coffee House home page.

FIGURE JavaJam Coffee House menu page.

FIGURE JavaJam Coffee House music page.

Hands-On Practice

You will add image links to the Trillium Media Design Home page in this Hands-On Practice. You should already have the index.html and trilliumbanner.jpg files in your trilliumch5 folder. The graphics used in this Hands-On Practice are located in the student files in the chapter5/starters folder. Copy the home.gif, services.gif, and contact.gif files into your trilliumch5 folder. View Figure to see how your page should look after you are done with this Hands-On Practice.

Let?s get started. Launch a text editor and open index.html. Notice that the anchor tags are already coded?you?ll just need to convert the text links to image links!