8.5 Drawing with the Layer Tool

Dreamweaver wouldn't be Dreamweaver if it didn't give you several ways to perform a certain task, like creating a layer. Dreamweaver also includes several layer creation tools: you can drag to create a layer freehand or use a menu command to insert a full-blown, complete layer. Your choices are:

POWER USERS' CLINIC Floats: An Alternative to Absolute Positioning While CSS-Positioning uses precise measurements and absolute positioning to place elements on a page, many common design elements—like a left or right sidebar, or boxes with pullquotes—can also be achieved with the CSS Float property described in Section 6.7.4. Say you've got four paragraphs of text. You'd like the top two paragraphs to fit in a 200-pixel-wide sidebar at the right edge of the page. You can create a CSS style with a width of 200 pixels and a Float property of Right. This would move those two paragraphs to the right edge of the page, letting the two bottom paragraphs move up and fill the empty space in the left side of the page. (For this kind of scheme to work, you should always set a width for the floated style. Otherwise, the style might span the entire width of the page, not providing any room for other content to appear next to the floated paragraphs.) This method doesn't give you pixel precise positioning, but it does let you create sidebars and other common designs easily. For excellent information on this technique, check out www.complexspiral.com/publications/containing-floats/ or css-discuss.incutio.com/?page=FloatLayouts .

• Use the Layer tool. The Layer tool is in the Insert bar, on both the Common and Layout tabs (see Figure 8-5). Click the Layer button and then drag the + cursor diagonally in the document window to create a box—the outline of the layer.

• Use a menu command. To insert a layer at the insertion point, choose Insert Layer.

  If you don't like the looks of the default layer that Dreamweaver inserts, choose EditPreferences, select the Layers category, and adjust the default layer's properties there. Add a background color, for example, or increase the layer's size. From then on, you can instantly create your favorite kind of layer using the Insert Layer command.

However, Dreamweaver's layer tools have one big drawback: they insert their CSS code into a <div> tag in the page's code. This creates an inline style that can't take advantage of the byte-saving virtues of an external style sheet (see Section 6.1.2). In addition, if you use the layer drawing tool to build many pages that use the same CSS-based layout, updating the design is very difficult. Since each layer on each page has its position set individually, you must update each page individually. With an external style sheet, you can edit a few layer styles and instantly update the layout of the entire site.

So the Draw Layer tool provides ease of use, but it results in some less-than-professional code and designs that are more difficult to edit later. You're better off taking the time to initially create a layer using the CSS Style definition window as described in Section 6.2. And as you'll see below, you can still take advantage of Dreamweaver's WYSIWYG tools for working with layers.

WORKAROUND WORKSHOP Converting a Layer Grid to a Table If the Prevent Overlaps box in the Layers panel is turned on, you won't be able to draw one layer on top of another. Nor will you be able to drag a layer onto or over another layer. Dreamweaver 3 aficionados once exploited this feature to create a layer-based design, assembling various rectangles to hold the different pieces of the Web page, and then converting the finished result into a table. These Dreamweaver veterans took advantage of the fact that the program can convert each layer into a table cell—but only if the layers don't overlap. Layout view (Chapter 7) renders this workaround obsolete. But Dreamweaver still provides a tool for those who still are in the habit of using layers as design tables. To do it, turn on the Prevent Overlaps box, draw your page design using the Layer tool, and then choose ModifyConvertLayers to Tables. Be prepared for some additional labor, however. Tables created this way don't always hold up well after you start adding text and graphics to them, since the cells typically expand in ways that ruin the design. So, if you are in the habit of using this tool, now may be a good time to break it and switch to layers for layout.