How to Build a Picture Show Image Gallery in Dreamweaver CS3

Use Dreamweaver framesets to create your image gallery.

A "picture show," or" image gallery," presents photographs in a portfolio-like webpage. While image galleries can have many configurations, a popular format displays thumbnail images along the side, top or bottom of the page. As the user clicks each thumbnail, a corresponding full-size version of the photo displays in the center of the page. Dreamweaver CS3 supports several ways to create image galleries. One of the easier and more common methods is to use a "frameset." A frameset is an HTML webpage container consisting of two or more "frames." Each frame displays an individual page or URL.

Things You'll Need

• Adobe Dreamweaver CS3 or later
• Adobe Photoshop, Apple iPhoto, Windows Paint, or some other image editor

Instructions

Preparing Your Photos

1. Resize the photos in your image-editing software. You'll need two versions of each image---a full-size version (say, 400 by 300 pixels, or whatever works best for the shape and size of your photos) and a thumbnail version (say, 100 by 75 pixels).

2. Set the resolution for each image to "72" dots (or pixels) per inch (or "96" for high-definition monitors).

3. Save each image in a sub-directory of the directory where you plan to create your image gallery website. Name the sub-directory "images." Save the images as JPEGs. Name them "photo1," "photo2," and so on; name the corresponding thumbnails "thumb1," "thumb2," etc.

Creating Your Image Gallery in Dreamweaver

1. Open Dreamweaver, and then click "File" on the menu bar. Choose "New" to display the New Document dialog box.

2. Click "Page from Sample" in the left column of the dialog box, and then click "Frameset" in the "Sample Folder" column. This displays a list of sample framesets in the third column of the dialog box. Chose "Fixed Left."

3. Click "Create." Dreamweaver displays the "Frame Tag Accessibility Attributes" dialog box. Click "OK." The frames are named according to their placement on the page. The left frame is named "leftFrame," and the main frame is named "mainFrame."

4. Click "File" on the menu bar and choose "Save All." Dreamweaver will prompt you to name three files, one after the other: First, the frameset itself---name it "gallery." Second, the main frame---name it "photo1." Third, the left frame---name it "thumbnails."

5. Insert "photo1.jpg" in the main (right) frame, and then click "File" on the menu bar and choose "Save Frame."

6. Create a new HTML file in the main frame for each photo and save it, like this: Delete "photo1.jpg" from the main frame. Insert "photo2.jpg" into the main frame. Click "File" on the menu bar and choose "Save Frame As." Name the file "photo2" and save it. Repeat this procedure for each of your photos, naming each HTML file with the corresponding photo name.

7. Insert your thumbnail images in the left frame. Place the images vertically in the frame in the order you named them---"photo1" first, "photo2" second, etc.

8. Select the first thumbnail. Go to the Properties panel and type the file name and path for the first full-size photo HTML page in the "Link" field, like this: "images/photo1.html" (no quotes).

9. Click the "Target" drop-down in the Properties panel and choose "mainFrame." This tells the user's browser to load photo1.html in the main frame when she clicks the thumbnail.

10. Repeat the two previous steps for each of your thumbnail and full-size image sets.

11. Click "File" on the menu bar and choose "Save Frame" to save "thumbnails.html."

12. Open "gallery.html" in a browser to test your image gallery.

Tips & Warnings

• If you'd rather place your thumbnails across the bottom or top of your page, choose the appropriate frameset from the New Document dialog box, such as "Fixed Bottom" to place the thumbnail frame across the bottom.

• When you upload the image gallery to a web server, make sure to include all of the HTML files and the "images" sub-directory.

References

• EchoEcho.com: Creating a Frameset
• Dreamweaver FAQ:Creating and Managing Framesets in Dreamweaver
• Adobe: Create Frames and Framesets