Home Faculty Lab Media Resource
Center
Staff Lab Student Technology
Education Lab
Our Staff

Creating a web photo album in Dreamweaver MX

Creating a web photo album

Installing Dreamweaver MX and Fireworks MX

Dreamweaver has a very useful feature of being able to take images and create miniatures and display them all on one page. This enables the web page to load more quickly and the images can be clicked on to see a full size version. You must also have Macromedia Fireworks installed on your computer for this process to work.

Creating a web photo album

 

Before starting the album, collect all the images you want in the album into one folder. You'll need to make a second folder to store the album. It is a good idea to have these two folders in the same place.
Open Dreamweaver MX, open a new blank file.
 
Go to Commands > Create Web Photo Album
 
The Create Web Photo Album window will now pop up. You can enter information such as the name of the Album and any other information you think important. The title will appear in a grey box at the top of the webpage with the album.
The Source Images Folder is the folder where you collected all your images. Click on the Browse button and navigate to where the folder is saved. Double click on the folder and click the Select button.
In the field for Destination Folder, click browse and navigate to where you wish the album to go. This folder should be saved in the same place as the Source Images Folder, but not the exact same folder.
You can choose how small or large you wish the miniature images, or thumbnails, to appear as, and if you want the file name displayed.
In the Columns field, you can choose how many columns the images will be displayed in on the final webpage.
Lastly, you may select what type of file you wish the images to be. The JPEG smaller file will not have as good image clarity as the JPEG better quality. Either of the GIF choices will preserve the clarity of the image better than a JPEG.
Creating a navigation page for each photo means all the full size images will be displayed on separate pages. Unchecking this box will display all the full size images on one page.
 
Once you have adjusted all the settings, click OK.
 
Dreamweaver will now open Fireworks and start a batch process. A small window will appear saying how many files have been processed, and the image will open in the background.
 
When Fireworks is done, your open Dreamweaver file will now show thumbnails of the images, as well as the layout. You can preview the page by pressing the F12 key or going to File > Preview in Browser.
   
Clicking on any of the thumbnails will open the image in a new window, at it's full size.
Don't forget to save your file and images in the same place, which on Drew's campus should be one of your network drives.
Copyright © 2003-2005, Drew University