Enriching your pages with style sheets and page templates

 

Exercises

The tutorial exercises are in the format of a movie. These movies are controlled by a player bar at the bottom of the screen that works like a set of VCR or CD player controls. You can pause, advance, and rewind the movie at any time.

 

Time required

The movies in this tutorial last about 20 minutes total, depending on whether you decide to pause a movie and explore the product.

 

Prerequisites

To complete this tutorial, you should be familiar with these subjects:

• Basic Web design concepts, such as Web sites, pages, and browsers
• How to create a simple static Web page
• The elements of a Web page, such as tables, hyperlinks, and images

It will also help if you understand these things:

• How to use the perspectives and views of the workbench
• How to edit a Web page's HTML code

 

Exercises and learning objectives

There are six separate exercises in this tutorial, each with its own set of learning objectives. You can watch the movies in any order.

Exercise 1: Creating a page template (3 minutes)


• What is a page template?
• Laying out page templates with free layout tables
• Adding images

  Exercise 2: Adding dynamic navigation and a content area (3 minutes)
  

• Adding a navigation bar
• Common areas and content areas
• Adding text cells
• Setting background colors

Exercise 3: Creating pages and applying the template (3 minutes)


• Applying page templates to newly created pages
• Formatting text in content areas

  Exercise 4: Adding content to pages and editing the page template (2 minutes)
  

• Adding free layout tables to content areas
• Adding a navigation trail to the page template
• Viewing the generated navigation links

  Exercise 5: Creating a style sheet (3 minutes)
  

• What is a cascading style sheet (CSS)?
• Creating style sheets
• Adding style rules

  Exercise 6: Applying the style sheet to the Web site (4 minutes)
  

• Applying style sheets to page templates
• Adding CSS classes
• Adding CSS pseudo-selectors
• Viewing the link colors

To close this tutorial, or return to the Tutorials Gallery home, use the toolbar (

) in the upper right corner.

When you are ready, choose a exercise to begin.

Feedback