In this chapter’s case study you will use the existing JavaJam website as a starting point...

In this chapter’s case study you will use the existing JavaJam website as a starting point to create a new version of the website that incorporates multimedia and interactivity. You have three tasks in this case study:

1. Create a new folder for this JavaJam case study.

---

2. Modify the style sheet (javajam.css) to configure a transition for the navigation hyperlink color.

---

3. Edit the text and configure two audio elements on the music page (music.html), and update the external CSS file as needed.

Task 1: Create a folder called chlljavajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 10 Case Study chlOjavajam folder to your new chlljavajam folder. Copy the following files from the chapterll/casestudystarters folder in the student files and save them in your chlljavajam folder: melanie.mp3, melanie.ogg, greg.mp3, greg.ogg.

Task 2: Configure a Navigation Transition with CSS. Open javajam.css in a text editor. Locate the nav a selector. Code additional style declarations to configure a three-second ease-out transition in the color property. Save the file. Display any of the web pages in a browser that supports transitions and place your mouse over a navigation link. You should see a gradual change in the color of the text in the navigation link.

Task 3: Configure the Audio. Launch a text editor and open the music page (music.html). Look for the paragraph about Melanie. Remove the text, “Check out the podcast!”. Code an audio element before the closing paragraph tag. Configure the audio element to play the melanie.mp3 and melanie.ogg files. Provide a hyperlink to the melanie.mp3 file as fallback content. Configure a second audio element within the paragraph about Tahoe Greg. Configure the audio element to play the greg.mp3 and greg.ogg files. Provide a hyperlink to the greg.mp3 file as fallback content. Save the file. Check your HTML syntax using the W3C validator (http://validator.w3.org). Correct and retest if necessary.

Next, configure the CSS. Launch a text editor. Open javajam.css. Configure a style above the media queries for the audio element selector that clears float and sets the top padding to 20 pixels.

Save the javajam.css file. Launch a browser and test your new music.html page. It should look similar to Figure.

New JavaJam music page.