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:
While CSS-Positioning uses precise measurements and
absolute positioning to place elements on a page, many
common design elements條ike a left or right sidebar, or
boxes with pullquotes梒an 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
For accurate drawing, you should hide Dreamweaver's visual aids (like the layer border and selection
handles) which take up space, slightly moving layers out of position in Design view. Shift+Ctrl+I (Shift--I)
does the trick.
Use a menu command. To insert a layer at the insertion point, choose Insert
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
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.
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梑ut only if the layers
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.