Dreamweaver 8: The Missing Manual

Chapter 8. Advanced Page Layout

As you saw in the last chapter, table-based design gets the job done. With an admirable track record and great browser support, tables are still a good layout tool for Web designers. But tables have their disadvantages: Complex table designs download slowly, are difficult to update, and can’t always be deciphered by assistive technologies, like the screen readers used by the visually impaired. In addition, newer devices that now surf the Web—cellphones, palmtops, and even game consoles—frequently choke on complex table layouts.

There’s always more than one way to skin a Web page, however. Newer Web browsers can also take advantage of the golden child of Web page layout, Cascading Style Sheets. In Chapter 6, you saw how CSS provides powerful formatting options for text, images, and other page elements. In addition, a subset of CSS properties known as CSS-P (short for CSS-Positioning) lets you control the placement of elements on a page. Fortunately, Dreamweaver has many features that make building CSS-based layouts a breeze.

Introducing CSS Layout

If a picture’s worth a thousand words, one Web site’s worth at least several pages of explanation. To really grasp the power of CSS-based layout, point your favorite Web browser to www.csszengarden.com (Figure 8-1). Once there, click any of the designs listed in the “Select a Design” box.

Each design is an example of CSS-based layout. In fact, you may be surprised to realize that the HTML code for the page is ...