Home / Articles / Designing CSS Page Layouts with Dreamweaver CS5

Designing CSS Page Layouts with Dreamweaver CS5

Article Description

David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, is enjoying the improved page layout capabilities of Dreamweaver CS5. In this tutorial, he demonstrates some of his favorite features.
New CSS Starter Pages

New CSS Starter Pages

Dreamweaver CS5 also includes some positive changes in the preset layout pages. I won't provide recipes here for using the layouts, but I'll note a few common features to keep in mind as you experiment with and implement them.

To access the preset layouts, choose File > New, click the Blank Page category, select HTML in the Page Type list, and then select the desired preset page layout in the New Document dialog. The Layout CSS drop-down list provides three ways to implement the CSS styles associated with each layout:

  • Add to Head simply adds CSS code to the HTML page you create. This is the simplest solution.
  • Create New File generates a new CSS file, external to your HTML page. The advantage of this approach is that you can link that CSS file to other web pages (using the Attach Style Sheet button in the CSS Styles panel), applying the same page layout to multiple pages.
  • The Link to Existing File option allows you to add the page layout CSS code to an existing style sheet. Use the Attach Style Sheet link in the New Document dialog (see Figure 8) to select a file to which you will add CSS code for the page layout.

Figure 8 Previewing a layout.

The layouts are documented in detail and in a very accessible manner. In Split view, you can read the comments in the CSS coding, but you can also get most of the same information just by reading the dummy text in the preview. (Of course, you'll replace that text with your own content as you develop the page.)

Probably the most important improvement is that the Dreamweaver CS5 layouts are fewer and better. They include easily replaceable placeholders for logos, they're standardized at 960 pixels wide, and they're even supported in that bane of web designers—Internet Explorer 6.

7. Final Notes | Next Section Previous Section