LAYERS

Layers are another means for laying out a web page. They work much like picture and text frames in InDesign, except you can put a combination of text and images into a single layer.

You can only apply a specific position to one element per document (otherwise, they’d all stack on top of each other!). The way around this is to create one CSS style for positioning, and then duplicate it several times—once for each of the other elements. Then simply edit the duplicated styles to reflect new positions for each.

Or, create layers to control the position of elements.

Click and drag the layer icon from the layout tab of the insert tool bar to create a layer. Do it again to create a second, and so on.

When you first create a layer, the text cursor is placed inside it and you can just begin typing. Use the common tab of the insert tool bar to place an image inside it.

To move a layer, place your cursor over the tab on the top left corner; it changes to a hand. Click and drag the layer to a new position on your page.

Resize a layer by clicking and dragging on any of it’s control points.

Layers can overlap, although that can create problems in some browsers. You can also nest one layer inside another.

Make sure your layers don’t overlap if you later may want to change them into a table (Modify > convert > layers to tables).

Each layer in a document must have a unique ID—a name that’s used in the coding to enable it’s position. It’s a good practice to name your layers in the properties panel as you create them so you know which is which. Layer names must be one word, with no punctuation or spaces.

By default, layers are transparent. You can add a background color or image using the properties panel.

Keep track of your layers in the layers panel (Window > layers). You can also rearrange their stacking order (z-index) here. Click on the name of a layer in this panel to select it in the document.