Lab 5: More CSS

Student Learning Objectives

After completion of this lab assignment, you should have demonstrated the ability to

Use HTML-Kit to create externally-linked cascading style sheets
use the XHTML div element to group elements
apply CSS2 style rules to position elements on the screen
Use CSS to create a roll-over menu effect
use the media attribute with linked style sheets to print with an alternative style
Use the W3C CSS Validation Service (on the actions toolbar online tab within HTML-Kit) to eliminate any CSS warnings and errors
Use comments, meta tags, and Tidy within HTML-Kit to create Web and CSS pages that conforms to the CS 350 Coding Standards

Assignment

Create a new folder U:\Lab5. Folder Lab5 will contain three files:
1. your index.html XHTML 1.0 Strict markup file
2. your screen.css style sheet file
3. your print.css style sheet file
Use HTML-Kit to create a Web document with four divisions:
1. a header area,
2. a navigation area,
3. an advertisement area, and
4. the main content area.
Use XHTML to mark-up the content of the page shown below. Non-obvious tags are indicated in square brackets [..]
- The navigation area contains an unordered list with three hypertext anchor links
- The advertisement area contain two text advertisements, each advertisement grouped with <div class="ad">
In your screen.css file, write the style rules to
- Set the page body's margins to 10 pixels on all sides with no padding. Use a Verdana sans-serif font and set the default font-size to 95%
- Set all divisions to display with a 1 pixel, solid, black border (to help with debugging)
- In the Header Area
  - Set its heading 1's text to display centered, in a 'Courier New' monospace font, and a font size of .8 em
  - Set its heading 2's text to display centered with a font size of 1.5 em
- In the Navigation Area
  - Make its width 25% of the screen size and float it left
  - Make its heading 2 element display left-aligned with a font size of 1.2 em
  - Style its unordered list of anchor elements to look like a menu
    - Base it on the instructions given in "A Menu Rollover Effect with CSS" tutorial at SSI Developer
- In the Advertisement Area
  - Make its width 25% of the screen size and float it right
  - Make its heading 2's text display center-aligned in an italic font and a font size of .8 em
  - Write the rules for the div's ad class to
    - specify a margin of 1 em on all sizes of the div
    - use a background color of red and a text color of white
    - center the text
- In the Main Content Area
  - Set the right and left margins to 26% of the screen size
    Note (added 10/10/2007 1:00 PM): on the screen snapshot below, the left-padding is set to 1em. Sorry for the confusion.
  - Make its heading 2's text centered with a font size of 1.2 em
In the print.css style sheet, write the style rules to
- set display to none for the navigation and advertisement areas so that only the header and main content are printed.
- You do not need to specify style rules for the header and main content elements.
- The browser should use the default settings when printing your Web page

To Receive Credit

Print out and staple together four printouts:
- the displayed Web Page printed in Firefox or IE 7.0
  - Note: only the heading and main content areas should be on the printout
  - We will check the navigation and advertisement areas online with a screen browser
- your screen.css style sheet
- your print.css style sheet
- your index.html XHTML 1.0 Strict code
Save your style sheets as screen.css and print.css and your XHTML page as index.html in folder U:\Lab5 in your cs350 account.

Grading Criteria

Labs will be graded on a scale of 0 to 10:
- 10: Excellent, page displays on screen and prints perfectly, no problems detected in the CSS or XHTML code. No validation errors or warnings.
- 9: Very well done: No validation errors or warnings, but one minor problem are present in the CSS or XHTML code
- 8: Well done: Two minor problems or omissions in the CSS or XHTML
- 7 Acceptable: One or two validation errors or legitimate warnings in the CSS or HTML code
- 6 Problems: Three or more problems or validation errors remain
- 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone
- 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score

Screen Snapshot

Screen Snapshot of lab 5