Dreamweaver: Show-Hide Layers

In this example we're going to take a look at using Layers and how you can use the Show-Hide Layers to create interactivity with menu items.

To preview the final version, click here

Step 1: Defining a New Site

You should define a new site for this tutorial. If you need assistance on Defining Sites, click here to go through that lesson...It will only take 5 minutes and if you haven't already learned to Define Sites, it could possibly be the best 5 minutes you spend in Dreamweaver.

Step 2: Setting Up the Site

My site for this lesson is called "showhidelayers" and in this folder I have an index.html and 4 images: apple.jpg, banana.jpg, peaches.jpg, and strawberry.jpg.

Create a new document and save it.
Type out the following names for links: Apple | Banana | Peaches | Strawberry.

Step 3: Creating a New Layer

Click the Draw Layer button
On the Objects Palette and drag out a new layer.

Don't worry about the size of the layer or the positioning for now. We'll clean that up soon enough.

Step 4: Renaming Layer 1

Go over to the Layers Palette and you'll notice "Layer 1" has been created. That's the layer you just created.
Double click the "Layer 1" to rename the layer to "Apple"

Step 5: Inserting an Image in the Apple Layer

Go back to the layer you just created and position your cursor inside the layer and click once.
On the Objects Palette, click the Insert Image to insert an image into the layer. In this case, I'll insert the image: apple.jpg.

Here you'll see the apple positioned inside the layer.

Page 1 | Page 2 | Page 3 | Page 4

Copyright © 1999-2011 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics