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 
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
With the help of Property inspector keep the same settings as of Layer 1
 |
| ||||||||||||||||||||||||||||||||
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.
