Dreamweaver CS3: The Missing Manual

Chapter 9. Page Layout

For much of the Web’s short life, designers have used the HTML <table> tag to control the positioning of elements on a page—to create columns, sidebars, banners, and so on. Unfortunately, since the <table> tag was intended to display information in a spreadsheet-like format, bending it to a Web designer’s will often resulted in complex HTML that downloaded slowly, displayed sluggishly, and was very difficult to modify.

But now that CSS-friendly Web browsers like Internet Explorer 6 and 7, Firefox, Safari, and Opera rule the Web, designers can safely rely on a much better (though often frustrating) method: Cascading Style Sheets. That’s right; not only is CSS great for formatting text, navigation bars, images, and other bits of a Web page, it also has all the tools needed to create sophisticated designs, like the ones shown in Figure 9-1.

CSS provides two methods for laying out a Web page—absolute positioning and floats. Absolute positioning lets you position an element anywhere on the page with pixel level accuracy—or so the theory goes. This kind of total control is exciting, but actually very difficult to achieve. That’s why the vast majority of Web pages use float-based layouts.

Dreamweaver can produce both types of layouts and includes a starter set of 32 CSS Layouts (only two use Absolute Positioning). These CSS Layouts are new in Dreamweaver CS3 and provide Web designers with the files for building the most commonly used page layouts. Theses layout files ...