Dreamweaver CS6: The Missing Manual

Modifying Dreamweaver’s CSS Layouts

The basic look of a freshly minted Dreamweaver CSS Layout doesn’t have much to recommend it: Fixed-width layouts have a green and tan color scheme, while liquid layouts are grayish-blue. One of the first things you want to do with a CSS Layout is remove some of Dreamweaver’s formatting. In addition, you might want to tweak some of the basic layout properties, like the width of a fixed-width design or the width of sidebars and main columns.

Making General Changes to a CSS Layout

One of your first tasks should be to remove (or change) the background colors for the sidebar and other page elements of a CSS Layout page (unless you really like them, in which case your job is a lot easier). This generally means editing the styles in the Dreamweaver-supplied style sheet. You already know several ways to edit styles—like double-clicking the style’s name in the CSS Styles panel (Manipulating Styles) or using the Properties pane (Fast Style Editing with the Properties Pane). The real trick is locating the correct style to edit. Here’s the fast method:

1. On the CSS Styles panel, click the Current button (see Figure 9-18, right).

   If you don’t have the Styles panel open, choose Window→CSS Styles. The Current view in this panel shows the styles and properties that Dreamweaver applied to whatever you select in the document window.

2. Make sure that, in the Rules pane, you have the Show Cascade button selected.

   The Show Cascade option lists all the styles that affect the ...