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.

CST161 Project 6

  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; 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. 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
  6. Link the three items in the navigation list to the corresponding h2 headings
  7. For each of the 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"
  8. Save the changes to the uwlist.htm web document
  9. 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)
  10. Add descriptive comments to the style sheet to identify the style rules for the different sections of the web page
  11. 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
  12. Create a style rule for the header section as follows:
    1. Set the width to 100 percent
    2. Align the text left
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. Create a style rule for the ul element in the section that removes the list markers
  19. 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 border of 1 pixel that is solid and red
  20. 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 ...