Lesson 03

Ready for a hands-on challenge? Suppose a client comes to you with an idea for a Web site. The client wants a three-column layout with a branding bar, two sidebar columns, a navigation bar, and a footer. It should be an elastic layout that uses modern CSS and XHTML techniques (no tables). Together you sketch up a rough draft of the layout shown below:

clientlayout.htm sketch

Sketch for clientlayout.htm

Here is your first challenge:

Create a new folder named ClientSite in your main Documents folder or whatever folder you normally use for your Web sites.

Add to your ClientSite folder a new Web page named clientlayout.htm. Make sure clientlayout.htm contains all of the required XHTML tags. Add to that page the following:

  • A link to an external style sheet named clientstyles.css.

  • A wrapper division to constrain the width of the layout.

  • A named division for each major portion of the layout. Be sure to include a little sample text for each of these divisions and some comments to help keep track of the <div> and </div> pairs.

importantTip: For reasons we'll discuss in the next lesson, the tags for the rightcolumn division should come before the tags for the navbar division.

Here is the second part of your challenge.

In the same ClientSite folder as clientlayout.htm, create a style sheet named clientstyles.css. Add to that style sheet:
  • A universal style rule that cancels out all browser default margins and padding.

  • A style rule for the wrapper division that limits its width to 45em, centers it horizontally on the page, and gives it a background color of #E2E6E0.

The answers are below (but try not to peek).

Click here to view the answers.
Claudia's Results      Back to Studies Index