University of Washington, CSE 190 M, Spring 2007
Lab 2: CSS Design and Layout (Thursday, April 5, 2007)

The purpose of this lab is to practice writing Cascading Style Sheets to control the appearance and layout of a web page. CSS is very powerful because it allows you to radically change the appearance of a web site without changing (or with minimal changes to) its HTML code. The web site CSS Zen Garden demonstrates this by allowing many designers to restyle the same page entirely using CSS.

You probably won't have enough time to finish all of the exercises; just finish as much as you can within the allotted time.

Exercise 1: Spatula City Company Web Page

You are given a file named spatula.html (right-click and select Save Link As...) that represents the front page of the corporate web site of the company Spatula City. Add a style sheet to this page, stored in spatulacity.css, that improves the appearance of the page. Your design of the page should incorporate the following in some way:

Write your page using valid XHTML 1.0 Strict. Place meta tags on your page to identify its author, date of creation, and information for search engines to index your page. Include a link from your page to the W3C XHTML and CSS validators, using the following image and linking to the following site:

For example, our TA Jeff Prouty designed the following Spatula City web page (between, but not including, the thick black lines):


1
2


When you're satisfied with your page, you may optionally wish to turn it in so that we can see it, or upload it to your UW web space.

Exercise 2: Product Information Page

If you finish writing the Spatula City company web site's front page, create a second page that links to the information about a particular product that the company sells. Your product information page should contain the following elements:

Include a link to your product information page from your spatula.html front page.

Valid XHTML 1.0 Strict Valid CSS!