COURSE CALENDAR | WEEK 14 CLASS OUTLINE | Homework

Topics covered in class:

  1. Review alternate stylesheets in progress
  2. Horizontal Lists:
    • Some students are interested in creating a horizontal list for navigation in their alternate style sheet. If you are having trouble with the existing CSS, I would recommend sticking with your vertical navigation list.
    • If you would like to implement a horizontal navigation bar for your final project, please do the following:
      1. For horizontal menu with horizontal nested list, I suggest experimenting with horizontal nested list.
      2. For a horizontal menu with vertical nested list, I suggest experimenting with a vertical dropdown list. Remember that a pure CSS drop-down may not work in all browsers. To create a dropdown that works in all browsers try one these javascript tutorials (not for the faint of heart)
  3. Defining your style sheets' purpose and title (screen, print, handheld, etc.)
    1. Open index.html
    2. Modify your style rule as follows:
      <link type="text/css" rel="stylesheet" href="portfolio.css" title="standard" media="screen" />
  4. Building a print style sheet
    1. Open index.html
    2. Create a new style sheet named print.css
    3. Create a style for body. Set the font and font size (use points) for printing.
    4. Define any styles that have a background image and set the background: none.
    5. Create a grouped style for #sidebar, #sidebar-content. Set the style to display: none.
    6. Define generic type styles for a:link, a:visited. Set text-decoration: underline.
    7. Add a style rule to the head of the document as follows:
      <link type="text/css" rel="stylesheet" href="portfolio.css" media="print" />
    8. Try printing (or print preview) your web page from the browser and see what happens.
  5. Adding an alternate style sheet. You must use the link tag in order for the user to load alternate stylesheets. Make the changes as follows:
    1. Open index.html
    2. Make sure your first style sheet looks like this:
      <link type="text/css" rel="stylesheet" href="portfolio.css" title="standard" media="screen" />
    3. Add your second style sheet, but change the rel, href and title attributes:
      <link type="text/css" rel="alternate stylesheet" href="alt.css" title="alternate" media="screen" />
    4. Preview your page in the Firefox browser. Choose View > Page Style. You should see two styles: standard and alternate. *NOTE: you will not be able to view the alternate stylesheet in IE, Safari, etc. unless you use a style switcher.
    5. Copy and paste both stylesheet links to all the pages in your site.
  6. Style Switchers for the very brave
  7. Using Tables for tabular data:
    1. HTML tables are used and abused to layout pages (We have used CSS to layout our pages.) The correct use for tables is to layout tabular data.
    2. Create a blank HTML document using Default.html and add the code from the HTMLDog tutorial on tables.
    3. A summary can be applied to a table using the summary attribute in the opening table tag. This won't be displayed, but can aid in a non-visual representation of a table.
      <table summary="This is a summary of my table">
    4. More information on creating advanced tables for tabular data.
Homework | Week 14

Final Projects are DUE!!!

Final Exam will be given for those students who wish to take it, otherwise an additional stylesheet is required (see the Final Project description for details)

If you miss the last class, you will receive a failing grade.