Dreamweaver CS5: The Missing Manual

Dreamweaver’s CSS Layouts

You’ll find yourself contending with many details when building CSS-based layouts. You need to understand the intricacies of the CSS Box Model, as well as the sometimes-bizarre behavior of floats. In addition, different browsers handle some CSS properties different ways, which sometimes means a design that looks great in Firefox completely falls apart in Internet Explorer 6. (Remember, even though much of the Windows-loving world has upgraded to IE 8, there are still plenty of folks cruising around the Web in IE 6 jalopies.) Fortunately, Dreamweaver is ready to give you a helping hand with 16 pre-designed CSS layouts.

Dreamweaver’s CSS Layouts aren’t finished web page designs. They don’t have graphics, fancy text, drop-down menus, or any whiz-bang features. They’re simply basic designs intended to lay the foundation for your design talents. Each layout is a simple HTML file and style sheet, each works in all current browsers, and each design’s handcrafted CSS code irons out the many wrinkles in troublesome browsers (most notably Internet Explorer 6). In other words, instead of spending a day stretching and sizing your own canvas, a Dreamweaver CSS Layout is like going to the art store and buying a ready-made and primed canvas so you can get busy painting.

Note

Adobe completely revamped Dreamweaver’s CSS Layouts for CS5. First, you no longer get 32 layouts to choose from, which is a good thing, since the CS4 layouts included some no-longer-popular layout techniques ...