Computer Science 180
Web Design

Fall 2011, Siena College

Home     Syllabus     Schedule

This week, we will make great strides toward creating better-looking web pages by using styles. There are several tasks you will complete in lab to learn more about style properties and their values and the ways we can specify them.

You may work alone or with a partner for the in-lab exercises, but you must develop and publish your own pages and style sheets for the last two parts.

Note: formatting requirements for HTML and CSS submissions are now posted on the course home page.

In Lab: Practice with Styles

Please use the "Try it yourself" examples on the w3schools.com site to experiment with CSS properties. We saw some, but not all, of these properties in class examples.

Start at http://www.w3schools.com/cssref/default.asp and follow the links to experiment with the following:

• All items under "Background Properties" with a "1" in the "CSS" column.
• All items under "Border and Outline Properties" with a "1" or a "2" in the "CSS" column.
• All items under "Dimension Properties".
• All items under "Font Properties" with a "1" in the "CSS" column (we looked at most of these in class).
• All items under "List Properties".
• All items under "Margin Properties".
• All items under "Padding Properties".
• All items under "Positioning Properties".
• All items under "Text Properties".

Next, read the "Pattern Matching" section on the Selectors section of the CSS2 Specification at W3C

In Lab: Using Styles

Create one or more HTML documents that meet the following requirements. The content of the page or pages is not part of the grading criteria, but interesting content will make your work and the final product more interesting.

1. At least one style attribute on an HTML tag.
2. Some style properties and values defined in a style element in the document's header.
3. Some style properties and values defined in a cascading style sheet connected to your document by a <link> tag.
4. A background image.
5. At least one color and one background-color property, using at least two of the ways we saw to specify an RGB color.
6. At least three different fonts, specified using styles.
7. At least two different bordered elements.
8. Lists using at least two different list styles than the usual bulleted and enumerated types.
9. At least one element with modified margins.
10. At least one element containing text modified with a text-transform property.

You may work with a partner on this part of the lab.

Stylizing Your Resume Document

Now that you know a lot more about styles, you can make your resume page from last week look a lot nicer. Make a copy of what you did last week and improve its appearance using styles. You may use style attributes, style elements, or style sheets, but you should choose appropriately.

You are to work individually on this part of the lab.

A New Course Web Page Style Sheet

As we saw in class, our course web site makes use of a cascading style sheet to maintain a consistent look across all pages on the site. Your challenge is to improve upon this style sheet. Use the course syllabus page as your testbed. Save a copy of the syllabus and change the <link> tag in the document header to use your style sheet instead of the commonstyle.css that is used on the site. You may start from scratch or use the commonstyle.css file as a starting point You may add class= attributes to the syllabus.html file, but you should not make other changes there. Let the CSS do the work.

Hopefully, some of your improvements will make it into the real style sheet used by our course pages.

You are to work individually on this part of the lab.

Submitting Your Work

Before 1:30 PM, Monday, October 3, 2011, submit your files for grading. There are three things you need to do to complete the submission: (i) make sure your pages are uploaded properly to the class web space and are available at your URL, (ii) update your main index on the class web space to have links to all documents you have created for this lab, and (iii) email a copy of your files to me at jteresco AT siena.edu. If you worked with a partner on the first few items, you need only upload to the account of one of the team members, but each team member should link to the pages on his or her own main index.

Grading Sheet

This lab is worth 30 points, which are distributed as follows: