Dreamweaver Using Layers (divs)
Dreamweaver topics:
- Dreamweaver Site Setup
- Dreamweaver Text and Links
- Dreamweaver Adding Images
- Dreamweaver Using Styles
- Dreamweaver Using Layers (divs)
- Dreamweaver Using Templates
- Dreamweaver XHTML Code
- Dreamweaver Frames
Introduction
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.
Select the Layout Toolbar and make sure its in standard mode.
Layers
Use Draw Layer to create a new layer. Drag your mouse to mark the outlines for your layer within the page.
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.
Browsers
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.
