How to add a Layer in Dreamweaver

[Magneto]

Layers are DHTML components and are similar to tables with a few different properties. Like tables they are containers where you put text or images. Unlike tables layers allow you to position an image or text in a particular point on the page and dreamwever automatically derives the x and y coordinates for the layer. You can reposition the layer by selecting and dragging it on the screen. Layers can be hidden or made visible, this is an added advantage in layers. Layers are viewed differently in different browsers.

Create and add content to a layer

Click on Insert>Layout Objects>Layers from the menu bar. The following image is displayed on the screen. This is the layer into which content will be added.

layer1.gif (687 Bytes) Viewed 2267 times

Click inside the frame and add content or insert an image.

Changing properties

Go to the properties window where you can give a background color, background image, edit the size of the layer, etc.
Naming a layer

Naming a layer

Dreamweaver gives a generic name such as Layer1, Layer2, etc. when layers are created. You can give your own name for easy reference. To do this goto the Layers panel, if it is not displayed, goto windows and select layers, the panel will appear towards the right. Double click on the name of the layer and enter the new name.

layer2.jpg (6.78 KiB) Viewed 2267 times

Changing the visibility of a layer

In the above image you can see that all the three layers have the open-eye icon, meaning that the three layers are visible. While working on layers, specially overlapped layers, you can hide or show the layers by clicking on the eye icon.

Changing the order of the layers

The above image shows a column name Z below which are numbers. This column stores the stacking order of the layers, i.e. the order in which they are drawn in a browser. The layer with the highest number will top the stack and that'll be the first layer. You can change this order by dragging the layer names up or down. Another way of doing this is by changing the number of Z-index.