CST161: Web Site Design

Project 6:  "Wisconsin Colleges and Universities" Web Page

The "Wisconsin Colleges and Universities" web page from Higher Ed's Directory of Higher Education Opportunities 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 uwlist.htm web document and hestyles.css style sheet files from the download and insert comments containing your name and the project due date in both
2. In the uwlist.htm file directly below the h1 heading, insert a navigation list containing an unordered list with following list items:
   • Private Colleges and Universities
   • Technical College System
   • University of Wisconsin System
3. Add the id values private, technical and public to the three h2 headings that categorize the list of schools
4. Mark each of the school entries on the page as a hypertext link (these are intersite links to different websites); see the URL's provided in the colleges.txt file (Hint–use the copy and paste feature of your text editor to efficiently copy and paste the college names and URL text)
5. Make sure that everything between the end of the <header> block and before the <footer> block remains inside the <section> block as it was in the original uwlist.htm web document
6. So that the links to the school web sites to appear in a new tab or window and since there are so many links on the page, add a base element to the document head specifying target="_blank" so that all links open by default in a new browser window or tab
7. Link the three items in the navigation list to the corresponding h2 headings (these are the intrapage links to another location on the same web page)
8. For each of the three hypertext links you marked in the previous step, set the link to open in the current browser window and not in a new browser window or tab by specifying target="_self"
9. Save the changes to the uwlist.htm web document

   (The steps above are the important part of this assignment, that is the creating of all the hyperlinks within and to the web documents; the remaining steps below are to style the web page so it looks like the document above which is a minimal part of the grade)

10. Then go to the hestyles.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)
11. Add descriptive comments to the style sheet to identify the style rules for the different sections of the web page
12. Create a style rule for the body element as follows:
    1. Set the left and right margins to auto
    2. Set the padding to 0 pixels
    3. Set the line height to 1.5 em
    4. Set the width to 98 percent
    5. Set the maximum width to 780 pixels and the minimum width to 250 pixels
    6. Set the font family to Verdana, Geneva and sans-serif
13. Create a style rule for the header section as follows:
    1. Set the width to 100 percent
    2. Align the text left
14. Create a style rule for the h1 element as follows:
    1. Set the font weight to normal
    2. Set the font size 2.5 em
    3. Set the color to red
15. Create a style rule for the h2 element as follows:
    1. Set the font weight to normal
    2. Set the font size 1.5 em
    3. Set the color to red
16. Create a style rule for the nav block in the section as follows:
    1. First clear the margin on the left and then set display to block
    2. Set the width to 100 percent
    3. Set the bottom margin to 30 pixels
17. Create a style rule for the ul element in the nav block in the section as follows:
    1. Remove the list markers
    2. Set the margin and padding 0 pixels
    3. Set the font size 0.8 em
18. For list items in the ul element in the nav block in the section create a style rule that:
    1. Sets display to block
    2. Floats the margin to left
    3. Sets the width to 32 percent
    4. Sets the font size to 1 em
    5. Sets the height to 3 em
    6. Centers the text
    7. Sets a border of 1 pixel that is solid and red
    8. Sets a background color to the hexadecimal value ffffc0
    9. Sets the line height to 3 em
    10. Sets the right margin to 4 pixels and the bottom margin to 25 pixels
19. Create a style rule for the ul element in the section that removes the list markers
20. Create a style rule for the footer block that:
    1. Sets display to block
    2. Sets the width to 100 percent
    3. Sets the font size to 0.8 em
    4. Centers the text
    5. Displays the text in small caps
    6. Sets the text color to red
    7. Sets a top border of 1 pixel that is solid and red
21. Save changes to the hestyles.css style sheet file and then view the uwlist.htm web document in several browsers to verify that the layout and content resemble that shown in the image above; additionally verify ...

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