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 behaviors to them.

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 a great variety to design.

Layers can be moved from their positions by just clicking on the the white square in its lerft top corner, and whilst keeping the mouse pressed, 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 can contain.

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, and then selecting 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 because 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 the Window menu, and then the Layers option. If the Layers option isn't in the menu, it may possibly be in the 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 layer name to select it.

Layer format

Layer's properties are shown 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 document and the layer.

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

Z-Index is the depth order 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. Visibility can accept 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 color 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 layer would be amplified to make its content fit.

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

Scroll specifies that the browser should add scrolling bars to the layer although they are or 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 Test

Page 12.1