Home > Tutorials > Dreamweaver > Intermediate

Dreamweaver Tutorial 0005 - Setting up a Simple Gallery Page

In this tutorial, we will use Behaviors to create pop up windows to hold larger versions of artwork when a thumbnail image is clicked.

Before beginning, download this archive: dw0005.sit - 428K

In order to focus on Behaviors, the sample pages are already created.

1. Open the dw0005.html file. Notice the 3 thumbnail images on the page. We are going to set this up in such a way that when the user clicks the image, a larger version will appear in a pop-up window in front of the main window.

2. Select the first sample image on the page. Open the Behaviors palette from the WINDOW menu. Click the + sign and choose "Open Browser Window" from the pull down menu.

3. Click the Browse button to select the URL to display in your pop-up window. Select example1.html from the dw0005 folder. Set the window width and height to 400 (pixels). In the Window Name field, type example1.

4. Click OK to accept these settings. Now we need to make a slight change in event handlers. Select the behavior. Click the arrow and change "OnMouseDown" to "(onClick)". Save your file.

5. Preview the page in a browser by either pressing the F12 key or going to the FILE menu and choosing PREVIEW IN BROWSER and selecting a browser from that list. Click the first example image. You should have a new pop-up window that contain the image!

6. Repeat this process for the remaining two windows, setting the URLs as example2. html and example 3.html, and the window names to example2, and example3. Preview in your browser again. Cool!

Tips on creating your own portfolio gallery:

The key to this technique is making sure that your pop up windows are not just slapped together with the default browser background. Make your background compliment the rest of your site, and make sure that you use attributes such as centering. You can even use tables to arrange the image and accompanying text. Use your imagination - just make sure that the images load quickly and look good! Use photoshop to create smaller versions of your images!

Good luck and have fun!