Unit 4. Review "B" Longs Peak Interactive Map

Unit 4. Review "B" Longs Peak Interactive Map

Tutorial 4 Review - B

Longs Peak Interactive Map

1. Open the longstxt.htm and maptxt.css files in your student data files.  Add your name and the date to the comment section of each file and save the files as longs.htm and map.css, respectively.
2. Return to the longs.htm file in your text editor.  Take some time to study the content and structure of the document.  Link the file to the map.css style sheet and then close the file, saving your changes.
3. Go to the map.css style sheet.  Create a style rule to display the nav, section, figure, and figcaption elements as blocks.
4. The estimated time that a hiker should arrive at each waypoint has been marked with the <time></time> element.  Create another style rule to display the time element inline.
5. Set the margin and padding space of every element to 0 pixels.  Hint: To apply this to every element in the body, add the *.  body*{}
6. Create another body element and set the font family for the page body to Verdana, Geneva, or sans-serif.
7. The entire content of the page is nested within a div element with the #id page.  Create a style rule for this element to:

a)     set the background color to the value (value 255, 255, 128) and display the background image file, bluebar.png, tiled vertically along the left edge;

b)    add a ridge 15 pixel wide border with a color value of (70, 76, 222);

c)     add rounded corners with a radius of 50 pixels;

d)    set the width and height to 900 pixels and 750 pixels, respectively; and

e)     horizontally center the div element within the browser window by setting it’s top margin to 10 pixels, setting it’s bottom margin to 200 pixels, and using auto for the left and right margins.

8. Float the vertical navigation list on the left margin with a width of 230 pixels.  For each list item within the navigation list, remove the list markers, set the top and bottom margins to 25 pixels, and set the left and right margins to 20 pixels.  Set the font color of hypertext links within the navigation list to white, and to yellow in response to the hover event.  Remove the underlining from the hypertext links.
9. The description of the map is contained within the section element with the #id summary. Float the summary section on the left with a left margin of 30 pixels and a width of 600 pixels.

10. Create a style rule for the h1 heading within the summary section to:

a)     set the text color to the value (70, 76, 222);

b)    set the font size to 24 pixels, with normal weight and kerning set to 5 pixels; and

c)     set the margin to 20 pixels.

11. For paragraphs within the summary section, set the margin to 10 pixels.
12. The interactive map has been enclosed in a <section> element with the #id map.  For the map section, create a style rule to:

a)     place it using relative positioning (do not specify the top or left coordinate);

b)    set the background color to white, with the lpmap.jpg image as the background image placed in the top-left corner with no tiling;

c)     add a 1 pixel wide solid black border;

d)    float the section on the left with a left margin of 30 pixels; and

e)     set the width and height to 600 pixels and 294 pixels, respectively.

13. Each of the popup boxes has been placed within a figure box.  Initially, these popup boxes should be clipped so that only the number is shown. First create a style rule for the <figure> element to:

a)     set the background color to the value (70, 76, 222);

b)    set the text color to white;

c)     set the width to 150 pixels;

d)    add rounded corners with a radius of 15 pixels.  Add the progressive enhancement;

e)     position the figure box using absolute positioning (but do not specify a top or left coordinate);

f)     set the z-index value to 1. (This property stacks overlapping objects with the highest z-index on top of the others.) To set the z-index, insert: z-index: 1; and

g)     clip the content using a clipping rectangle that is 20 pixels wide by 20 pixels high and situated in the top-left corner of the figure box.  The clip property is applied by adding the following:  clip: rect (top, right, bottom, left) where the value places the clipping that distance from the edge.  The directions tell you to place the clipping in the top-left corner so the values that you will need to insert are:  clip: rect (0px, 20px, 20px, 0px);

14. If a user hovers the mouse pointer over a figure box, then remove the clipping rectangle                                                  and increase the z-index value to 2 (so that it appears on top of other objects).  To remove the clipping, insert:  clip: auto;
15. For the figure caption within each figure box, set the font size to 12 pixels and the margin to 10 pixels.
16. Set the text color of each <time> element within each figure box to yellow.
17. Each of the 10 figure boxes has an #id, ranging from point0 to point9.  Set the (left, top) coordinates of the figure boxes.  Here is the first one for you:   Continue with all 9 with the following coordinates:                                                                                         #point0{                                                                                                                            left: 560px;                                                                                                                           top: 60px;}                                                                                                                                point0 at (560, 60)                                                                                                         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)  
18. Save your changes to the file and then open longs.htm in your Web browser.  Confirm that when you hover your mouse over each of the 10 waypoints, a description of the waypoint appears on the trail map.