Chapter 9. Page Layout

Web design, unfortunately, isn’t like most other forms of graphic composition. For magazine and book projects, software like InDesign lets you place text and images anywhere you want—and even rotate and overlap them. But web designers are stuck with the basic technology of HTML, which wants to flow from the top of the window to the bottom, in one long column. To place elements around the page and create multiple columns of content, you need to resort to some fancy footwork.

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

Now that CSS-friendly web browsers like Internet Explorer, Firefox, Safari, Chrome, 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 you need to create sophisticated designs, like the ones shown in Figure 9-1.

CSS Zen Garden (www.csszengarden.com) is the original showcase for CSS layout. Although the designs haven’t been updated in a while, in its day it caused many a web designer to bow down and proclaim, “I’m not worthy, I’m not worthy.” The site not only demonstrates great design, it shows you the power of CSS-based layout. Each page includes the same content and the same HTML. The only difference is their external style sheets and graphics.Making drastic visual changes like these to an old table-based layout required a lot of tinkering with the underlying HTML. CSS, by contrast, lets you redesign sites without rewriting any HTML.

Figure 9-1. CSS Zen Garden (www.csszengarden.com) is the original showcase for CSS layout. ...

Get Dreamweaver CS5.5: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.