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
Step 1: Defining a New Site
You should define
a new site for this tutorial. If you need assistance on Defining
here to go through that lesson...It will only take 5 minutes
and if you haven't already learned to Define Sites, it could
be the best 5 minutes you spend in Dreamweaver.
Step 2: Setting Up the 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.
a new document and save it.
out the following names for links: Apple | Banana | Peaches |
Step 3: Creating a New Layer
- On the
Palette and drag out a new layer.
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.
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.
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