MostarNetworks

One of easiest ways to add some dynamic life to your web page is by using Dreamweaver set of built-in features called “Behaviors”. In our example we will use behavior called ‘Show-Hide Layers’ to make a small photo album but the technique can be applied to any site that showcases products or just as another way of showing information dynamically. Using Dreamweaver is all you will need so put away your heavy books and stop your database server. Before we begin you may wish to download files (466.89 Kb) used in this tutorial and follow along.

1. Creating a basic layout and inserting layers

Start fresh by creating a new document File -> New -> Basic HTML Document.

Next we will tackle the basic idea of our layout and where we want to display our photos.Insert a new layer by going to Insert -> Layout Objects -> Layer and double-click on its name to rename it into ”Thumbnails”.

To view Layers Tab go to Window -> Layers (F2) and while you are at it Window -> Insert tab is available.

Next we will Draw a New Layer right next to the one we inserted. Go to your Layout tab and while in Standard Mode click on the icon to select the ’Draw Layer‘ tool. Name this layer “Greeting” as it will be used to show a quick message to our visitor.



Layer “Greeting” will hold only a few lines of text so there is no need to make it overly large in height. Click inside of it and type in some instructional text such as “Move your mouse over the images to view them in full size”...or whatever makes sense to your project.

Right under this layer draw another layer and name it ”FullSize-1”.

And you are right, this layer will hold our 1st larger image related to the the thumbnail images we are going to place in the very first layer we made ("Thumbnails").

To the right of this layer lets draw another called ”FS1-Info” where this layer is going to be shown along the full size image and will hold some extra info about our image.

Right about now would be a good time to save your document as you are done with your basic layout.

Here is how your layout and layers should look by now:



Being how our photo album will have 3 images lets create last 2 layers that will hold or ‘large images’ and name them in the convention we established in first step.

In other words create layers “FullSize-2” and “FullSize-3” and try to position them right on top of the initially created “FullSize-1” layer.

Repeat the same process to add corresponding ‘info’ layers ("FS2-Info" and “FS3-Info") while trying to place them over “FS1-Info” layer we used in our basic layout.

You can select layer and then adjust its position on “Properties” tab to position them to the pixel.

If everything went well you should be done with your entire layout and have 7 layers at your disposal.