Dreamweaver Using Layers (divs)

From TOI-Pedia

Dreamweaver topics:


There are various way to arrange the elements in your page. The most appropriate method is to use container elements (divs), called Layers in Dreamweaver.

Dreamweaver layout toolbar.jpg

Select the Layout Toolbar and make sure its in standard mode.


Dreamweaver layout toolbar drawlayer.jpg

Use Draw Layer to create a new layer. Drag your mouse to mark the outlines for your layer within the page.

Dreamweaver layer.jpg

Example os the use of Layouts

You can move and scale the layer afterwards using your mouse. When the layer is selected, you can also enter the position and size (in pixels) in the properties Panel. You can also move the layer using the arrow keys, moving it pixel by pixel.

You'll find a entry for eacht layer in the Layers tab of the CSS Panel at the right.

Layer size and position

When a layer is selected, you'll find settings for the size and position in the Properties panel. You can clear the field for the height of the layer. The layer height will then automatically adjusted to fit all content of the layer. Overflow determines how your browser should handle content that's larger than the layer allows. 'Scroll' will (always) show scrollbars to allow the content to scroll within the layer. Using 'auto' will only show scrollbars when needed.


No browser is the same. The exact size text will take can vary for each browser. This should be taken into account when creating layouts: make sure your page is flexible enough to allow for these (small) variations. Getting the page to look 'exactly' as you want only goes so far and isn't an appropriate base for web design. It will often conflict with personal preferences (consider larger font size for people with a visual disability). This is the real 'art' of web design: to create an attractive layout that is flexible enough.

Layers and Styles

For general comments on Styles, see Dreamweaver Using Styles. The CSS Style tab in the CSS panel has an entry for every layer (the layer name is prefixed by a #). You can use this to determine the visual properties of the layer, such as background color, border, margins, etc.

Personal tools