CST161: Web Site Design

Project 5:  "Lincoln's Second Inaugural" Web Page

The "Lincoln's Second Inaugural" web page from the American Rhetoric 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 lincoln.htm web document and history.css style sheet files from the download and insert comments containing your name and the project due date in both
2. Go to the lincoln.htm file and take some time to review the content and structure of the web page; create a link in the head section to the history.css style sheet file and save the changes to the lincoln.htm web document
3. Then go to the history.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)
4. Add descriptive comments to the style sheet to identify the style rules for the different sections of the web page
5. Create a style rule to display the header, section, and nav elements as blocks
6. Set the default padding and margin space for every element (selector is '*') to 0 pixels
7. Define a style rule for the header element to:
   1. Set the background color to the value (51, 51, 51)
   2. Center the contents of the header element
   3. Set the width to 55 em
8. Set the height of the inline image within the header to 4 em
9. Float the navigation list on the left page margin, setting the width to 15 em and the background color to the value (51, 51, 51)
10. For list items within the navigation list, create a style rule to:
    1. Set the typeface to Century Gothic or sans-serif
    2. Set the font size to 0.7 em
    3. Remove the list markers
    4. Set the line height to 1.4 em
    5. Set the left and bottom margins to 1 em and 1.2 em, respectively
11. For hypertext links within the navigation list, set the text color to the value (212, 212, 212) and remove the underlining; when the user hovers the mouse pointer over these links, change the text color to white
12. For the speech section of the page, create a style rule to:
    1. Set the background color to the value (212, 212, 212)
    2. Set the width to 40 em
    3. Float the section on the left
    4. Display the text in a Palatino Linotype, Book Antiqua, Palatino, or serif font
13. For the h1 heading within the speech section, create a style rule to:
    1. Set the background color to the value (51, 51, 51)
    2. Set the text color to the value (212, 212, 212)
    3. Set the font size to 2 em
    4. Center the text
14. For the paragraphs within the speech section, set the font size to 0.9 em and the margin size to 1 em
15. To create the drop-cap effect for the first letter in the first line of the first paragraph in the speech section, use the first-of-type pseudo-class and the first-letter pseudo-element in the style rule selector as follows:
    1. Float the first letter on the left
    2. Set the font size and line height to 4 em and 0.8 em respectively
    3. Set the right margin to 0.3 em
    4. Set the right and bottom padding to 0.2 em
    5. Add a solid black border 0.02 em in width to the right and bottom edge of the letter
16. Display the text of the first line of the first paragraph in the speech section in uppercase letters
17. To create the irregular line wrap shown above, stack the 10 slices of the "Lincoln" image by creating a style rule for the inline image elements within the speech section as follows:
    1. First clear the margin on the right and then float each image on the right
    2. Set the height of each image to 4 em
18. Save changes to the history.css style sheet file and then view the lincoln.htm web document in several browsers to verify that the layout and content resemble that shown in the image above; additionally verify that when the mouse pointer hovers over the links in the navigation list, the text changes color
19. Additionally using the "Options" or "Preferences" dialog window of your browser, increase and decrease the browser's default font size; verify that as the font size changes, the layout and size of the inline images in the page change in proportion

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