by Tommi West
When you create a new HTML file in Adobe Dreamweaver CS5 software, you can choose from a set of prebuilt CSS starter layouts. These easy-to-use starter pages are designed for cross-browser compatibility to help you build out your site quickly. In this article, I explore these layouts, show you how to leverage them when building sites, and compare them to the previous set of CSS starter layouts in Dreamweaver CS4 software.
To access the CSS starter layouts, launch Dreamweaver CS5 and choose File > New. In the New Document dialog box that appears, select Blank Page, select HTML from the Page Type list, and then select one of the options in the Layout list (see Figure 1).
Figure 1. Select a layout in the New Document dialog box.
As you click each layout in the list, the right column updates with a description and preview of the selected layout. This is a helpful tool for identifying the page regions included in each layout.
The layouts are grouped in sets by the number of columns they contain. Select a one-column, two-column, or three-column design, and then decide if the site will have a header, footer, and sidebar. If you are working with a mockup or wireframe, compare the page elements with the previews of the CSS starter layouts to identify the best match for your design.
Layouts are listed as either fixed or liquid. It's important to understand the difference between these two options when picking the ideal layout for your site project.
Liquid layouts are created with div containers that are set to a percentage; if the width is set to 80%, the page will scale to take up that portion of the browser window. (Using the max-width and min-width rules, you can also define the range of the page's widest and most narrow dimensions, in pixels.) In liquid layouts, the width of the page updates as visitors resize the width of their browser window. Liquid layouts are helpful when you want to ensure that a site appears to fit the entire screen, whether the monitor happens to be a 13-inch laptop or a 30-inch flat screen. A potential downside is that you have less control over the layout of sites with a significant amount of text because the text wrapping changes based on the available width of each div container (see Figure 2).
Figure 2. The width of a liquid layout varies, depending on the width of the browser window; the width is not affected by the users' text settings for their browser.
Fixed layouts are set to a specific pixel dimension. For example, the width of the outer div container of the layout may be set to a numeric value, such as 960 pixels. Fixed layouts do not change based on the users' text settings or the size of the browser window. If the site is wider than the available width of a low-resolution screen, visitors can scroll to the area of the page that is not immediately visible. Conversely, visitors with large monitors or high screen resolution may see a wide column of the site's background when the browser window is fully expanded (see Figure 3).
Figure 3. The width of a fixed layout remains the same, regardless of the width of the browser window.
The CSS starter layouts are completely customizable — you are not limited to using the preset widths of the outer div container. You can use the CSS Styles panel to edit the .container style to reset the width of the page.
Generally speaking, the most common convention used in sites is a fixed layout that uses the margin: 0 auto; style to center the outer div container on the page. The best way to see how the layouts will display is to test them:
The layouts are built with standards-compliant code and well-formed document structure to ensure cross-platform compatibility and improved ranking by search engines. Use the DocType menu to select the desired document type.
As you create a new page in Dreamweaver, you have several options about where the layout's CSS styles will exist. Use the Layout CSS menu to choose Add To Head, Create New File, or Link To Existing File.
If you are working on a site that already has an external CSS style sheet, you can choose the Link To Existing File option and then browse to select the file from within your local root folder. Alternatively, you can choose to create a brand new CSS style sheet; this option prompts you to name the new file and choose the directory to save it in.
When building a new site, I find it is easiest to use the default setting and allow the layout CSS code to be added to the head portion of the document. Using this strategy, you can edit the layout and rules as desired, working in a single document to add the content and create the rules for formatting and positioning. Once you are satisfied with the design, you can export the CSS styles to an external file. Follow these steps:
The CSS starter layouts in Dreamweaver CS5 have been updated and simplified to streamline the production process. When you compare the layouts included in Dreamweaver CS4 and Dreamweaver CS5, you'll notice some dramatic differences:
Figure 4. In Dreamweaver CS5, the comments appear above the code, rather than intermingled with the rules.
Figure 5. These timesaving page elements can be repositioned and customized.
In addition to the updated CSS starter layouts, Dreamweaver CS5 includes Inspect mode, a new feature that enables you to analyze the HTML and CSS elements of a page. Inspect mode makes it easier than ever to find the name of the styles you want to edit, so you can quickly update the properties in the CSS Styles panel.
To use Inspect mode:
Figure 6. Inspect mode makes it easy to find the styles you want to update.
Figure 7. Walk up or down the hierarchy of elements by pressing the left or right arrow key.
Figure 8. The rules for the selected style are listed in the Properties pane of the CSS Styles panel.
After adding content and updating the CSS styles, you can use Live View to preview the results. While Live View is enabled, the Design view of the Document window becomes an emulator that displays the page. In addition to checking rollovers and CSS positioning, Live View makes it easy to preview the dynamic data on a database-driven site because you can see the design as it will appear in a browser without uploading the changes to the live server. To enable Live View, click the Live View button.
As you are editing your pages, also be sure to check out Adobe BrowserLab, an Adobe CS Live online service. Adobe BrowserLab enables you to preview dynamic pages and compare the rendering of CSS styles across a variety of web browsers and operating systems. It's important to test early and often as you develop any project — and testing for incompatibilities is essential when building CSS-based designs.
To learn more about working with CSS starter layouts, read What's new in the Dreamweaver CS5 CSS layouts on the Adobe Developer Connection. You can also visit the Dreamweaver Developer Center to find helpful articles and sample projects.
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.