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