Dreamweaver CS6: The Missing Manual

Dreamweaver’s CSS Layouts

You’ll contend with many details when you build CSS-based layouts. For example, 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 differently, which sometimes means a design that looks great in Firefox but completely falls apart in Internet Explorer 6. (Remember, even though much of the Windows-loving world has upgraded to IE 8 and IE 9, 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 18 predesigned 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 basic designs intended to lay the foundation for your design talents. Each layout is a simple HTML file and style sheet, each works with 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.

Creating a new CSS layout page takes just a few steps:

1. Choose File→New.

   This is the same first step you take when creating any new web page. The New Document window appears (Figure 9-13). You can also use ...