back

Working with the new CSS starter layouts in Adobe Dreamweaver CS5

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).

Select a layout in the New Document dialog box.

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.

Understanding the difference between fixed and liquid

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).

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.

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).

The width of a fixed layout remains the same, regardless of the width of the browser window.

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:

  1. Choose File > New and select one of the CSS starter layouts.
  2. Save the page and choose File > Preview In Browser.
  3. Drag one of the bottom corners of the browser window to resize it.
  4. Notice how the page width updates (or doesn't update) as the window width changes.

Setting the DocType of the layout

The layouts support the latest web technologies, such as HTML, XHTML, HTML5, CSS, XML, JavaScript, Ajax frameworks, PHP, Adobe ColdFusion, and ASP. Choose the corresponding page type in the New Document dialog box. Using Dreamweaver, you can design, develop, and maintain websites and mobile and web applications. Dreamweaver is much more than just an HTML editor. When you are creating a regular web page, choose among HTML, XHTML, or HTML5.

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.

Choosing the location of the CSS styles

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:

  1. Open the CSS Styles panel and select the All tab.
  2. Click the arrow to expand the list of styles, if they are not already expanded.
  3. Shift-click the first style and then scroll down to select the last style in the list, so that all the styles are selected.
  4. Right-click (or Control-click) the selected list to invoke the context-sensitive menu, and choose Move CSS Rules.
  5. In the dialog box that appears, select the option to move the CSS rules to a new external style sheet or add them to an existing style sheet.

Dreamweaver CS4 layouts vs. Dreamweaver CS5 layouts

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:

Identifying styles with Inspect mode

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:

  1. Enable Inspect mode by clicking the Inspect button in the main Dreamweaver toolbar.
  2. A message at the top of the Document window appears asking if you'd like to switch your workspace settings. If you click More Info, a dialog box appears listing the changes that will occur. Click Switch Now (or click Switch in the dialog box) to update your workspace to use Inspect mode.
  3. While Inspect mode is enabled, hover your cursor over the page elements to see the CSS box model. Inspect mode uses different colors to highlight the border, margin, padding, and content of each element. The corresponding HTML and CSS rules are selected in Code view, and the tag selector at the bottom of the Document window creates a breadcrumb trail that lists all of the element's parent containers. In Figure 6, the first link in the navigation is selected; the hierarchy in the tag selector shows that the link is inside a list item, inside an unordered list with a class name .nav, inside a div that uses the .sidebar1 class, which is surrounded by the div container that encompasses the entire page.
  4. Inspect mode makes it easy to find the styles you want to update.

    Figure 6. Inspect mode makes it easy to find the styles you want to update.

  5. To travel up the hierarchy of the nested containers and elements, press the left arrow key. Each time you press it, the parent item is selected. After pressing it four times, the div tag with the .container class is selected (see Figure 7).
  6. Figure 7. Walk up or down the hierarchy of elements by pressing the left or right arrow key.

  7. When you highlight the element you want to change, click once. Clicking disables Inspect mode, and the selected style is displayed in the CSS Styles panel (see Figure 8).
  8. The rules for the selected style are listed in the Properties pane of the CSS Styles panel.

    Figure 8. The rules for the selected style are listed in the Properties pane of the CSS Styles panel.

  9. To make a change to a style, such as changing the width of the page, click the value next to the Width property and enter a different number.

Previewing the pages in your site

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.

‹ Back


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.