Section 8.1. Introducing CSS Layout

8.1. 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 the same in every one of these designs. The only difference is the style sheet used to format the page. The designers of major Web sites like ESPN.com, Wired.com, and Macworld.com have abandoned table designs in favor of CSS, because CSS offers easy format updates and smaller file sizes (which means faster downloads).

Figure 8-1. CSS Zen Garden (www.csszengarden.com), the preeminent showcase for CSS-based layout, has caused many a Web designer to bow down and proclaim "I'm not worthy. I'm not worthy." The site's interesting not only for the great design work it showcases, but also because the only thing that's different between the three Web pages displayed here is the CSS. That's right: The exact same HTML is shared by these three pagesonly the external style sheet and the graphics used in the style sheet differ .

CSS-positioning is akin to working with table cellswithout the tables. You create styles that act like rectangular containers to hold other page materialimages, text, form elements, and even other CSS-positioned elements. In this regard, CSS-P acts like a table cell : you can define the style's width and height, and give it a background color or image. But that's where the similarities end. What really sets CSS-positioned elements apart from other page elements is the way you can assign them an exact position on the page. Want an image to appear exactly 100 pixels from the top edge of the browser window and 200 pixels from the left? With CSS-P, no jury-rigged table scaffolding's required.


Note: CSS-P elements follow the Box model described on Section 6.7.4.1. Each positioned element can have margins, borders, backgrounds, and padding.

Another property of CSS-P has no HTML equivalentthe third dimension. You can layer CSS-positioned elements on top of each other, making elements on a page overlap. For example, you can place HTML text on top of graphics, or vice versa. In this way, CSS-positioned elements act much like layers in graphic programs like Fireworks and Photoshop, and page-layout programs like Quark and InDesign. In fact, Dreamweaver refers to CSS-positioned elements as layers and includes a layer-drawing tool. Because the word "layer" is a lot friendlier than "CSS-positioned element" you'll see the term "layer" from this point on.


Note: While the word "layer" is a great catch-all for this complex concept, it isn't technically correct, nor is it commonly used in non-Dreamweaver Web design circles.


Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net