Mouse Over Create the Layer in Dreamweaver

http://www.cwd.dk/article.asp?articleid=58&pageno=1

How to create a webpage using layers?

A layer is a container that can hold text, images, tables, other layers and various types of multimedia. It gives more control and flexibility to make the page dynamic. For Example you can make Picture Gallery, Products Catalogue, Portfolios etc.

To make the tutorial practical & easy to understand we have created Products Catalogue as an example in Photoshop & Converted into HTML format. Click here to download the layout.

After downloading the layout follow the steps given below:

1. Open the Layout in Photoshop. Keep separate Guides for each Image, Slice the whole Layout and Save the images in jpeg, gif or png format.

2. After saving the Images in jpeg, gif or png format, then open Macromedia Dreamweaver.

Click the Insert Table Button on the Common Category of the Objects Panel, or Choose Insert > Table.

If the Objects Panel is not visible, Choose Window > Objects.

The Insert Table dialog box appears.

In the dialog box, type the values and click OK to create the table. With the help of tables place the images accordingly to the layout.

Creating Layers

To draw a layer, click the Draw Layer Button in the Objects Panel, then click & drag to draw the layer.

If the Layers Panel is not visible, Choose Window > Layers.

For selecting the layer click the name of the Layer in the Layers panel. You can also resize the layer by dragging it. Just select the layer and drag any of its resize handles.

Layer Properties

If the Property inspector is not visible, Choose Window>Properties

Keep the Mouse Cursor inside Layer 1. Choose Insert Image Button on the Common Category of the Objects Panel. Select the Background Image from the Image Source and click on the select button.

Use the Property inspector to specify the name and location of a layer as well as to set other layer options.

(In this example we have changed width, height, left & top position of the layer)

Draw another Layer ie. Layer 2 from the Objects Panel. Keep the Mouse Cursor inside Layer 2. Choose Insert Image Button on the Common Category of the Objects Panel. Select the Image from the Image Source and click on the select button.

With the help of Property inspector keep the same settings as of Layer 1

With the help of Property inspector you can also set following Properties: Layer ID - allows you to specify a name to identify the layer in the Layers Panel. L AND T (Left and Top) - specifies the position of the layer relative to the top left corner of the page. W and H - specifies the width and height of the layer. Z-Index - determines the z-index of the layer. Higher-numbered layers appear above lower-numbered layers. Values can be positive or negative. Vis - determines the initial display condition of the layer (visible or not). Bg Image - specifies a background image for the layer. Bg Color - specifies a background color for the layer. Tag - determines the HTML tag to be used. span and div are recommended Overflow - determines what happens if the contents of the layer exceed its set size. Clip - defines the visible area of a layer and can be used to cut content from the edges of the layer.

Similarly, make separate layer for each image.

Behaviors

After creating different Layers for each Image Select the Product Catalogue''s first image ie. the Laptop Image.

Then Choose Window>Behaviors

Click the Plus (+) button and choose Show-Hide Layers from the Actions Pop-up menu.

From the Show-Hide Layers list, Select Layer 2 and click on the Show button. Keep all other layers hidden.

	Show button shows the layer
	Hide button hides the layer
	Default button restores the layer''s default visibilty.

Then Click OK.

Note:

The Event in the Behaviors Panel shows (onMouseOver) as the Default Event.

To change the default event (onMouseOver), you will have to make the changes (onClick) in the source code.

There are other Events also such as onClick, onDblClick, onKeyDown, onKeyPress, on KeyUp, onMouseDown, on MouseOut, onMouseOver, on MouseUp.

Repeat the above steps for remaining layers.