CSS-based layouts in Dreamweaver MX 2004

The Web Standards Project (www.webstandards.org) has battled with browser and web design software developers in an attempt to encourage them to support W3C (World Wide Web Consortium) standards. As a result, it’s now possible to author to web standards straight out the box using software such as Dreamweaver and create sites that are still compatible with current web browsers.

The next hurdle is to convince web designers to use the standards. But many continue to use tables for layout, considering CSS too “techie” and unintuitive. However, once the basics of CSS are understood, the advantages become clear. The modular nature of CSS layouts enables concepts to be reused; presentational aspects (padding, margins, backgrounds) are defined in an external fi le. You can amend an entire site’s design by uploading one file; and CSS encourages a semantic, logical structure, making layouts much more accessible than their tables based equivalents.

This tutorial assumes prior knowledge of Dreamweaver. Before you start, create a new site with a default XHTML document and attach a blank CSS file to it using the Import option (see CSS declaration).