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:
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.
Create styles for each layer.
The process is the same as creating any other CSS style, as described in Section 6.2.
However, to specify where the layer appears you use CSS's positioning properties
described in 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.5.)
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 content梞any paragraphs, images, lists, and so on梱ou wrap
all of that content within another tag that acts as a container for your layer. This
tag梩he <div> tag梔efines a logical "division" in a page, in other words the new
layer. Dreamweaver MX 2004 includes a new Div tool that greatly simplifies this