CST161: Web Site Design

Project 3:  "Civil War and Reconstruction" Course Outline

The "Civil War and Reconstruction" course outline from the Midwestern University 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 civilwar.htm web document and cw_styles.css style sheet files from the download and insert comments containing your name and the project due date in both
2. Go to the civilwar.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 links in the head section to the cw_layout.css and cw_styles.css style sheet files and save the changes to the civilwar.htm web document
4. Then go to the cw_styles.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. Set the typeface of the page body to the font list Palatino Linotype, Book Antiqua, Palatino, and serif
7. For every h1 through h6 heading, apply styles to:
   1. Set the color to the HSL value of (212, 0%, 0%) with an opacity of 0.4
   2. Set the font family to Trebuchet MS, Helvetica and sans-serif
   3. Remove the boldface
   4. Set the kerning (use the letter-spacing property for kerning) and text indent both to 5 pixels
8. For h1 headings that are direct children of a header element that is a direct child of the body element, set the background color to the HSL value (212, 100%, 29%)
9. For an unordered list within the horizontal navigation list, apply styles to:
   1. Display the text in Century Gothic MS or another sans-serif font
   2. Set the font size to 14 pixels
   3. Display the text in bold
   4. Set the kerning (again use the letter-spacing property) to 3 pixels and the line height to 20 pixels
   5. Remove the markers from the list
10. For hypertext links within the horizontal navigation list, set the text to the HSL value (212, 100%, 70%) and remove the underlining; when the mouse hovers over a hypertext link in this list, change the font color to the HSL value (212, 100%, 29%)
11. Set the background color of the vertical navigation list to the HSL value (32, 100%, 95%)
12. For the h4 element within the vertical navigation list, create a style rule to:
    1. Set the color to the HSL value (32, 0%, 0%) with an opacity of 0.5
    2. Set the font size to 18 pixels and the text indent to 15 pixels
13. Display the ordered list items in the vertical navigation list in an outline style with uppercase Roman numerals for the top level and uppercase alphabetic letters for the second level; set the line height of the lists to 2em
14. Set the color of the hypertext links in the vertical navigation list to the HSL value (212, 100%, 29%) with an opacity of 0.6; remove the underlining from the hypertext links; if the user hovers the mouse pointer over a link in the list, increase the opacity to 1.0 and display the underline
15. Set the background color of the section element to the HSL value (212, 95%, 90%)
16. For the first paragraph after the h2 heading within the article element, create a style rule to display the first letter with a font size of 32 pixels
17. For the paragraph within the page footer, create a style rule that sets the font size to 10 pixels and the line height to 30 pixels and centers the text
18. Save changes to the cw_styles.css style sheet file and then view the civilwar.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

• 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.