CST161: Web Site Design

Project 4:  "Rose Hill Rally" Web Page

The "Rose Hill Rally" web page from the Cycle Pathology bike club website is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.

1. Using an HTML editor, open the race.htm web document and race.css style sheet files from the download and insert comments containing your name and the project due date in both
2. Go to the race.htm file and take some time to review the content and structure of the web page; there are two navigation lists in the document in which the first navigation list is to be displayed horizontally and the second navigation list is to be displayed vertically; add the class attribute to each nav element, setting the class values to horizontal and vertical respectively
3. Create a link in the head section to the race.css style sheet file and save the changes to the race.htm web document (the web document already is linked to the race_layout.css style sheet)
4. Then go to the race.css file in the text editor (as you make changes to this style sheet document, regularly refresh the HTML document in a browser to view the effects)
5. Add descriptive comments to the style sheet to identify the style rules for the different sections of the web page
6. Create a style rule to set the default style for every element (selector is '*') so that it:
   1. Is displayed in a Verdana, Geneva, or sans-serif font
   2. Has a font size of 100%
   3. Has a padding and margin space of 0 pixels
7. Remove the underlining from every hypertext link within a nav element
8. Create a style rule for the page body that sets the page width to 98% of the width of the browser window in a width range from 1000 pixels minimum up to 1400 pixels maximum
9. Create a style rule for the header element that:
   1. Sets the width to 20% of the page body
   2. Changes the background color to black
   3. Adds a 500-pixel padding space to the bottom of the element
10. For inline images within a header element, set the width to 100% of the width of the header
11. Set the width of the horizontal navigation list to 80% (the left margin already is 20%)
12. For list items within the horizontal navigation list, add styles to:
    1. Set the width of each list item to 20%
    2. Set the background color to the value (49, 38, 31)
    3. Set the upper and lower padding space to 5 pixels
    4. Horizontally center the list item text
    5. Transform the text to uppercase letters, setting the font size to 85%
13. Set the color of hypertext links in the horizontal navigation list to white; if the user hovers the mouse pointer over the link, change the color to the value (215, 181, 151)
14. For every list item in the vertical navigation list, set the font size to 85% and remove the list style marker (the bullet); if the list item belongs to the newgroup class, add a top padding space of 25 pixels to add a bigger gap between that list item and the previous list item
15. For every hypertext link within the vertical navigation list, set the font color to white and indent the text 10 pixels; if the user hovers the mouse pointer over the hypertext link, change the background color to the value (51, 51, 51) and add a 2-pixel solid outline with the color value (215, 181, 151)
16. For h1 headings that are direct children of the main section, add styles to:
    1. Set the text color to the value (189, 131, 82)
    2. Set the font size to 180% with normal weight
    3. Set the letter spacing to 5 pixels
17. Set the margins of paragraphs within the main section to 15 pixels
18. For the unordered list within the main section:
    1. Set the list style to a disc marker
    2. Set the margin around the entire unordered list to 25 pixels
    3. Set the bottom margin of each list item to 10 pixels
19. For the aside element, create a style rule to:
    1. Add a 3-pixel solid border with the color value (149, 91, 42) and set the text color to the value (149, 91, 42)
    2. Set the width to 50% of the width of the main section
    3. Add a rounded border with a radius of 30 pixels; for the rounded border include entries with browser extensions for Foxfire and Chrome
20. For paragraphs within the aside element, set the font size to 90% and all margins to 20 pixels
21. For the article element, set a background color to the value (215, 181, 151)
22. For the hgroup element within the article, create a style rule to:
    1. Display a background color with the value (189, 131, 82) with the background image alisha.png displayed in the bottom-right corner with no tiling
    2. Set the text color to the value (215, 181, 151)
    3. Set the bottom margin to 10 pixels
    4. Set the height to 60 pixels
    5. Indent the text 20 pixels
23. In the hgroup element within the article, set the size to 150% for the h1 headings and to 110% for the h2 headings
24. Additionally for paragraphs within the article element add styles to:
    1. Set the font size to 90%
    2. Set the margin to 15 pixels
25. For the figure box, create a style rule to set the background color to the value (149, 91, 42)
26. For images within the figure box, create a style rule to:
    1. Set the margin to 10 pixels
    2. Add rounded corners with a radius of 10 pixels; for the rounded border include entries with browser extensions for Foxfire and Chrome
27. For figcaption element within the figure box, create a style rule to:
    1. Set the back- ground to white
    2. Set the font size to 80%, displayed in italic and centered
    3. Set the top margin to 5 pixels
28. Save changes to the race.css style sheet file and then view the race.htm web document in several browsers to verify that the layout and content resemble that shown in the image above; additionally:
    1. Verify that when the mouse pointer hovers over the links in the horizontal navigation list, the text changes color
    2. Verify that when the mouse pointer hovers over the links in the vertical navigation list, the text color changes and the text is underlined and overlined

• Students may work on all projects in teams of two or three, and, if so, all students in the group must submit the same project to their own dropboxes in Blackboard.  In the text box's dropbox, as well as in the source code documentation (comments), state the name(s) of the classmate(s) with whom you worked.
• The completed project within a .ZIP archive file (check out the link Zip and unzip files using Windows 7) containing the entire folder with all files that make up the website submitted electronically via an attachment to a Brightspace dropbox is due to Prof. Struck no later than 11:59 p.m. on the date listed in the course outline.