Unit 12. Working with Layers

We're going to a look at some of the characteristics of layers, and then work with them and apply some behaviours.

Introduction

Layers are squares that can be placed wherever you want in the Page, we can insert HTML content in them. Those layers can be hidden and overlapped between them. This gives you variety to design.

Layers can be moved from their positions by just clicking on the the white square, and whilst keeping the mouse depressed dragging it to the new position.

They can also can be resized by clicking on the black squares and dragging them until the size you want is reached.

You can insert text, tables, images, and flash animations inside the layer's square, and also all the elements that an HTML file might contain.

Layers are not only represented by the previous square. The image appears in the document when Dreamweaver is open.

This icon is used to select the layer when you click on it, and when you clear it, you are also clearing the layer.

Inserting a layer

Layers can be inserted in a Page through the Insert menu, then the Design object option, and Layer.

Once the layer is inserted, you can edit its attributes by selecting it.

You can select layers through many different ways. One of them is clicking on the icon. This is not useful when there are many layers in the same file bacause all layers have an image like this one associated, and it's very easy to select the wrong one.

When there are many layers in the same file, it's recommendable to select them through the Layers tab in the Design panel, which can be opened through Window option, and then the Layers option. If the Layers option isn't in the menu, it may possibly be in Others option. Also, it can be opened just by pressing F2.

In the panel are the names of all existing layers in the actual file, and you only need to click on the panel name to select one of them.

Layer format

Layer's properties are show through its properties inspector

Layer ID is the layer's name. You can change it through the Layers panel, and double-clicking it.

L and T indicate the pixels distance between left and top limits of the file and the layer.

W and H indicate the layer's width and the height.

Z-Index is the place number of of the layer. This value can be changed through the Layers panel. A layer will be overlapped by others which greater Z-index.

Vis indicates the inital view of the layer. View can have four types.

Default (Browser view),

Inherit (the layer of the Page that is being displayed is shown)

Visible (It shows the layer although the Page isn't being seen)

Hidden (the layer is hidden).

You can also change the view through the Layers panel by clicking on the eye image. The open eye indicates Visible, and the closed eye indicates Hidden.

Through Bg Image and Color you can indicate an image or a background colour for the layer.

Overflow controls how the layers appear in a browser when the content exceeds the specified size of the layer.

Visible indicates that the additional content is in the layer and that this is amplified to make it fit.

Hidden specifies the additional content will not be shown in the browser.

Scroll specifies that the browser may add scrolling bars to layer although they are or are not needed.

Auto makes the browser show the scrolling bar when they are needed (when the layer content is bigger than its limit).

To practice you can perform the Step by step exercise on Inserting a Layer.

  Unit 12 exercises

  Unit 12 evaluation test

Page 12.1