Layout

Layers

Layers are a tool related to CSS (cascading style sheets) which allow you to position elements in a more exact way than just HTML. Just as layers are used to create overlaping sections of an image in photoshop, they are used in Dreamweaver to contain various elements of a web page (text, images, forms, etc.) and line them up on a page. Using layers allows you to specify exact pixel placement of elements and place them on top of each other. There are two types of layer tags, CSS layers and Netscape Layers. CSS layers are supported in 4.0 browsers and later, and Netscape layers are only supported in Netscape 4.0 and later. Earlier browsers will display the layers but not position the contents. One option for more exact positioning and more browser compatibility is to create a page with layers and convert it to table format. First, create your page using layers:

To insert a layer, place the insertion point in the Document window where you want to position the layer and then choose Insert > Layer. This will create a default layer which you can change after placing it.

To drag and drop a layer, drag the Layer button from the Object palette to the Document window.

To draw a layer, click the Layer button in the Object palette; in the Document window, drag to draw a layer. Drawing a layer allows you to specify the exact size and placement of the layer

For each layer you create, a layer marker appears at the top left of the page, in the Document window. Layer markers will appear in other positions on the page if you add layers after adding paragraph returns in the Document window. Once you have created a layer, you can add content to it just as you would a table cell.

If you decide to convert the layers to a table for better browser compatibility, choose Modify > Layout Mode > Convert Layers to Table.

Dreamweaver will convert your page to a Table which generally retains the formatting of the Layers.

For more information on using layers and their properties, see chapter 14: "Layers and Positioning" in the Dreamweaver Visual Quickstart Guide.