CSS Layouts

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.

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

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:

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.

For today, choose a layout, "save as" three + times, and start adding content.  We will learn more about changing colors & styles in the near future.


Site specs:

• DW layout
• 3+ pages
• Banners created in PhotoShop
• Buttons/text created in PhotoShop
• content on each page
• image(s) on each page