New Perspectives on HTML and XHTML Tutorial 4 Case Problem 3 Solution

New Perspectives on HTML and XHTML Tutorial 4 Case Problem 3 Solution

Data Files needed for this Case Problem: image0.jpg – image9.jpg, longstxt.htm, and lpmap.jpg
Longs Peak Interactive Map Longs Peak is one of the most popular attractions of Rocky Mountain National Park (RMNP). Each year during the months of July, August, and September, thousands of people climb Longs Peak by the Keyhole Route to reach the 14,255-foot summit. Ron Bartlett, the head of the RMNP Web site team, has asked for your help in creating an interactive map of the Keyhole Route. The map will be installed at electronic kiosks in the park’s visitor center. Ron envisions a map with 10 numbered waypoints along the Keyhole Route, displaying photos and text descriptions of each waypoint when a mouse pointer hovers over its corresponding numbered point. Figure 4-59 shows a preview of the online map with the first waypoint highlighted by the user.

Ron also wants to create a print version of the waypoint descriptions. Users can print the map elsewhere on the park’s Web site, so he wants the print style sheet to display just the list of waypoints in a bulleted list.

Complete the following:
1. Use your text editor to open the longstxt.htm file from the tutorial.04\case3 folder included with your Data Files. Enter your name and the date in the comment section at the top of the file. Save the file as longs.htm in the same folder. Take some time to study the contents of the file. Notice that the waypoint descriptions are nested within the online_map div container. Each waypoint description has been placed in a separate div container with the class name notes and id names ranging from point0 to point9.
2. To create a rollover effect for the nine waypoints, you need to mark the waypoint contents as hyperlinks.Within each of the nine div containers, enclose the img element and paragraph element within a single <a> tag. Point each link to the longs.htm file so that if a user clicks the link, it will simply refresh the currentWeb page.
3. Add a style to the embedded style sheet at the top of the file to remove underlining from all hypertext links.
4. Currently the online_map div container does not display the Longs Peak map. Add the following style to the embedded style sheet to display the map:
• Set the width of the container to 600 pixels wide by 294 pixels high.
• Add a 1-pixel-wide solid black border to the container.
• Apply the lpmap.jpg graphic file as the background image.
• Use relative positioning to place the container on the page. Set the top and left coordinates to 0 pixels.
5. In the embedded style sheet, add the following styles for all of the div containers belonging to the notes class:
• For paragraphs nested within each note, set the font size to 8 points and the margin to 5 pixels.
• Set the font color to yellow for each span element nested within a note.
6. For each link nested within a notes class element, apply the following styles:
• Set the width and height of the link to 20 pixels.
• Hide any content that overflows the boundary of the link.
• Set the background color to blue and the font color to white.
• Set the z-index value to 1.
7. When the mouse hovers over a link within a notes class element, have the browser apply the following style:
• Change the width to 150 pixels and the height to 170 pixels.
• Change the overflow property to visible.
• Set the z-index value to 2.
8. Use absolute positioning to place the link nested within the #point0 selector at the coordinates (560, 60).
9. Repeat Step 8 for the nine remaining waypoints:
• #point1 at (277, 90)
• #point2 at (175, 0)
• #point3 at (110, 115)
• #point4 at (55, 165)
• #point5 at (5, 180)
• #point6 at (15, 222)
• #point7 at (50, 245)
• #point8 at (100, 245)
• #point9 at (90, 220)
10. Go to the top of the file and add a media attribute to the embedded style sheet indicating that the sheet is designed for screen and tv media.
11. Save your changes to the file and then open longs.htm in your Web browser. Verify that the placement of the waypoints follows the locations shown in Figure 4-59. Confirm that when you hover your mouse over each of the nine waypoints, a description of the waypoint appears on the top of the trail map.
12. Return to the longs.htm file in your text editor. Create a new embedded style sheet designed for print media.
13. Scroll down to the “Longs Peak Online Trail Map” h2 heading and enclose the text “Online Trail Map” within a span element.
14. Add the following styles to the embedded print style sheet:
• Set the font family for the page body to sans-serif.
• Remove underlining from all hypertext links.
• Do not display the #instructions selector, the span element nested within the h2 element, or the img element nested within elements belonging to the notes class.
• Display the notes class of elements as list items with a disc marker. Set the margin to 20 pixels.
• Change the display property of paragraphs nested within the notes class of elements to inline.
• Display span elements nested within the notes class of elements in a bold font.
15. Add a style that inserts the text string “Trail Itinerary” after the h2 heading.
16. Save your changes to the file.
17. Refresh the longs.htm file in your Web browser. By either printing the page or viewing the page within the Print Preview window, confirm that the printed page only shows a bulleted list of the waypoint descriptions. If you are running Firefox, Opera, or Safari, confirm that the heading at the top of the page reads “Longs Peak Trail Itinerary.” (If you are using Internet Explorer, the title will simply read “Longs Peak.”)
18. Submit your completed files to your instructor.