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.
|