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:
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.
Tip:
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.
Tip:
For reasons we'll discuss in the next lesson, the tags
for the rightcolumn division should come before the tags
for the navbar division.