Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running quickly, they also help you learn by providing extensive inline comments in the code. Most site designs on the web can be categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers, footers, etc.).

Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start using CSS with the click of the mouse.

In this article, Stephanie Sullivan, who created the CSS Layouts in Dreamweaver CS3, will discuss what they are, how to access them, and what to watch for as you utilize them in your projects.

What are the CSS Layouts?

One of the new features in Dreamweaver CS3 is the CSS Layouts. These layouts were created to help you, as a new CSS user, get a quick start on the layout portion of your site. They contain no styling at all. They are heavily commented so that, as you adapt them to your own design, you’ll be aware of the changes you’ll need to make and how those might affect other parts of the layout. The CSS Layouts are also useful for those who understand, and already use CSS for positioning. Think of them as a quick start that gives you a solid base to begin. Previously, I used snippets with my own custom quick starts. Now I have a lot more choices already packaged within Dreamweaver CS3.

Dreamweaver CSS Layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0, 9.0; and Safari 2.0. When writing the code for the CSS Layouts, care was given to avoid hacks for specific browsers. Though these current, and older browsers have been thoroughly tested, it does not mean the CSS Layouts will not work in earlier browsers. If you need to support an older browser like IE 5 Macintosh, there is very little that actually needs to be added. This is one of the things that will be covered in the book Greg Rewis and I are writing for New Riders called “Mastering CSS with Dreamweaver CS3.”

The CSS Layouts are accessed in one of two ways:

• Choose File > New and go to the Blank Page pane of the dialog.
• On the Dreamweaver Welcome Screen, go to the Create New column and choose the More… link at the bottom.