Working with layers in Dreamweaver

Instructor: Rita Gavelis

MMRLS 2006

Working with Layers

Layers are a quick and easy way to position objects such as images and text on your web page.

There are many ways to create or add layers to your page.

To create a layer, click on “Insert”,“Layout Object”, and “Layer”. A Rectangle appears in your design window. If you click on the layer selection handle, little black boxes outline the layer.

You can change the size and position of the layer by clicking on a black box and dragging it until the layer expands or shrinks to the desired size.

When you see a four-sided arrow appear , you can move the layer to a desired location in your design window.

Once you have created a layer, you can insert images and text onto that layer.

Another way to create layers is to change from the “Common” setting to the “Layout” setting on the tool bar.

From here, you can click on the “Draw Layer” icon.

When you place your cursor on the page, it changes to a “+”. This allows you to draw a layer as large or small as you like.

If you bring your cursor over the corner of the layer, it changes to the Move cursor. This allows you to drag the newly created layer to the desired location.

Controlling Layers Dynamically

Once you have created layers and added text and or images to them, you can make them interactive by adding what is called a behavior. Behaviors are actions your web page performs when the person viewing your web page either clicks or moves the mouse over certain areas of the page.

Some basic behaviors involve the mouse, for example, pressing the left button, releasing the left button, scrolling over an object, and scrolling off an object.

Applying a Behavior to a layer:

onMouseOver: To cause something to happen when the mouse crosses over an object.

One of the easiest ways to show an “onMouseOver” behavior is having an image be replaced by another image when it is scrolled over,i.e. having a button grow lighter, glow etc. This is called an image replacement.

To do this, click inside the layer you wish to add the image to.

Then click on “Insert”, “Image Objects”, and “Rollover Image.”

Name the image.
Select the image that will appear before the rollover.
Select the image that will appear when it is rolled over.
Enter an alternate text (what will appear in a separate text box upon roll over).
Enter the web address of the link you wish to go to upon clicking the image.

This is great for adding buttons and other such objects on your page.

The Behavior Palette shows you what behaviors are attached to the different objects. To see the Behaviors you have added to the button you just created, click on that object and look at the palette on the right-hand side of your screen.

You notice there are two behaviors listed, an “onMouseOut”/ “Swap Image Restore”, and an “onMouseOver” / “Swap Image”. This describes the changing of one image to another upon roll over.

An easy way to add more behaviors to your button, is the click on the “+” sign under the “Behaviors” tag.

When you do this, a drop down menu will appear and you can choose a behavior from that list.

Let’s say you want to add a pop-up message when someone clicks the mouse. Just select it from the list.

When the dialog box appears, type in the message you want displayed & Click “OK”.

When you preview your page, after clicking on the button you have created, the message will appear.

Showing and Hiding Layers

Hiding layers is especially useful when you want a layer to be invisible until the viewer clicks or scrolls over an object, i.e. you are creating an online quiz and you want a message to appear when the person scrolls over the correct answer.

To do this,firstenter the questions you wish to have on the quiz.Preferably, place the questions and answers in their own layer.

Click on the Layers Palette in the right column, so you can see which layers you are working with.

To create an invisible layer, click to the right of the layer name.

A closed eye will appear.

The layer is now invisible.

Go to your quiz and highlight / select the correct answer.

In the Properties box below, place a “#” in the “Link” field.

In the “Behavior Palette”, Click on the “+” and select “Show-Hide Layers”.

Select the layer containing the message you wish to display, and click “Show” to show that hidden layer. Then press “OK”.

When you preview the page, upon clicking the correct answer, the “You are Correct” layer will suddenly appear.

Note:You need to make sure all the answers on the quiz have a non-active link (a “#” in the Link field) and you have selected the desired properties for your links from the “Page Property” button.

If you want the layers to appear or disappear on a Rollover instead of a click, follow the same steps as above, but then in the Behaviors Palette, change the “onClick” to “onMouseOver”. You will also have to add a behavior for “onMouseOut” to make the layer disappear again.

Adding Behaviors directly in the Behaviors Palette

You can add more behaviors directly in the palette by clicking in the left-hand column of the Palette and choosing a behavior from the drop down menu.

You can then press the “+” to add an action to that new behavior.