Dreamweaver MX Tutorial

Created and designed by Vivienne Trulock for ilikecake, 2005

Layers

<DIV> tags created using the Insert > Layer command are an easy way to lay out a web-page.

Exercise - create a layer

First, turn on your invisible elements (View > Visual Aids > Invisible Elements)

Click on 'Insert > Layer' to create a layer.

This is what layers look like. You can then type inside if you want to put text in, or click inside and insert a picture into it.

The most important attribute of a layer, is that you can position it wherever you want, unlike tables which are cumbersome in comparison. Unlike tables, a layer can be moved by clicking on the 'handle' at the top left of the layer and holding the mouse down while moving it. You can place layers anywhere on the page.

Layer properties

Click on the top left-hand corner of the layer to select it. Open your properties window, if it is closed (Window > Properties). You can change various layer attributes here such as the layer name, position etc. It is best however, to use CSS style sheets to maximise accesibility.

Layer Position

The distance from the left edge of the page and the distance from the top of the page in pixels, is set here. These figures automatically update when the layer is moved. They can also be modified by the designer.

NOTE: Layer left and top are defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Width and Height

The width and height of the layer, again in pixels, is set here. These figures automatically update when the layer is resized. They can also be modified by the designer.

NOTE: Layer width and height are defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Z Index

The z-index tells you how near to the front the layer is. Layers with a lower number will be further back, if it overlaps with a layer with a higher z-index.

NOTE: Layer z-index is defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Visibility

The visibility of the layer can be set to the following: default, visible, invisible, inherit. We will look at this attribute in more detail later when doing behaviours.

NOTE: Layer visibility is defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Background Image

A layer can have a background image. Just click on the folder icon and browse to your image file. As with all backround images, these tile. Better control is provided by using CSS style sheets.

NOTE: Layer background images are defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Background Colour

Background colours can also be set on layers.

NOTE: Layer background colour is defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Tag

The tag option allows you to specify which HTML tag you want to use for your layer. The options are DIV or SPAN. DIVs tend to be used as a larger container than SPANs, which are generally used for in-line content.

Overflow

Overflow text occurs when more text is inserted into a layer than the layer has room for. You can choose to ignore the extra text (hidden), show the extra text (visible), put a scroll bar on the layer (scroll), or only put in a scroll bar when there is too much text (auto).

NOTE: Layer overflow is defined by dreamweaver using an an embedded style. while this is supported, it is better practice to use an external style sheet.

Exercise - convert a layer to a table

It is possible to convert tables to layers and vice versa.This conversion will only work if the layers don't overlap.

To convert a page from layers to tables, first save it (File > Save). Next, click on 'File > Convert > 3.0 Browser Compatible'.

Select 'Layers to Tables'. Click OK.

• AA
• XHTML
• CSS

© ilikecake 2005-2008