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 ”many paragraphs, images, lists, and so on ”you wrap all of that content within another tag that acts as a container for your layer. This tag ”the <div> tag ”defines a logical "division" in a page, in other words the new layer. Dreamweaver MX 2004 includes a new Div tool that greatly simplifies this process.
