Section 8.2. The Basics

8.2. The Basics

Creating a CSS-based layout isn't much more involved than using CSS for text or images. It does require a little planning and a clear road map. The basic process requires three steps:

1. Identify the building blocks of your page .

   Start by determining how you want to organize your page. For example, you may want a banner that's 150 pixels tall and spans the entire top of the page, a 200-pixel-wide sidebar on the left edge of the page, and a main content area that fills the remaining space.

2. Create styles for each layer .

   The process is the same as creating any other CSS style, as described on Section 6.2. However, to specify where the layer appears, you use CSS's positioning properties, described on Section 8.3.1. In addition, instead of using a tag style or class style, you'll frequently create an advanced type of style known as an ID selector , described below. (Dreamweaver has its own layer-drawing tool as well. See Section 8.6.)

3. Wrap each building block with its style .

   Finally, you apply the style to all of the content that appears within the layer. With a normal style, you'd select the content and apply the style. However, since you may have lots of contentmany paragraphs, images, lists, and so onyou wrap all of that content within another tag that acts as a container for your layer. This tagthe <div> tagdefines a logical "division" in a page, in other words, the new layer. Dreamweaver includes a Div tool that greatly simplifies this process.