Creating a Web Photo Album
using Dreamweaver (Windows)
by Steven Goode

The goal of this tutorial is to provide stepwise instructions for the "Create Web Photo Album" feature in Dreamweaver 4.0. This tutorial requires that the user have basic working knowledge of a PC and Dreamweaver. This tutorial does not require that the user know anything about Fireworks, only that it be installed. This tutorial has been designed for a PC user running Windows 95 or later. A preview of what a finished result would look like can be viewed here. The "Create Web Photo Album" is also available on Mac.

Preparations:

Before you begin make sure you have met the following requirements:

  • Macromedia Dreamweaver 4.0 has been installed on your computer
  • Macromedia Fireworks 4.0 has been installed on your computer
    • It is very important that you have the correct version numbers for these packages (nothing any earlier)
    • If you are missing either of these packages you can try to get a trial version from Macromedia's website.
  • You have either downloaded the sample photos or have your own set of images for this tutorial

top

Getting Started:

  • Begin by creating a folder for each of the following
    1. source images
    2. destination photo album

Picture of the source and destination folders after creation

Picture 1: The folders that you create for the project

  • After creating the folders, move the images you will be using for the photo album into the "source_images" folder

top

Opening the Photo Album:

  • Now open Dreamweaver 4.0
  • Once you have entered Dreamweaver, open a new window
    • File > New Window
    • or press CRTL+N
  • Now open the Photo Album Utility
    • Commands > Create Web Photo Album ...

Location of the Create Web photo Album Command

Picture 2: This shows where the "Create Web Photo Album" command is located.

  • When you click on "Create Web Photo Album..." the following setup window will appear.

Create Web Photo Album Setup
Picture 3: Screenshot of the Web Photo Album setup window.

top


Setting Up the Photo Album:

  • Start by entering the title of the photoalbum in the "Photo Album Title: " input field
    • This can be whatever title you want
    • You may also enter Subheading info and Other info in the following two fields
    • All of this information will be displayed at the top of your photoalbum
  • Enter the location of your source folder in the "Source Images Folder: " input field.
    • You can do this by clicking "Browse..." which is next to the input field.
  • Enter the location of the destination folder in the associated input field.
    • This is where the final product will go
  • Select any options you wish in the following fields
    • Thumbnail Size - Select the dimensions of the preview images that will apear on the index page (Suggested Size: 72 x 72)
    • Show Filenames - If checked, the filenames of the photos will be displayed below the thumbnail images on the index page
    • Columns - Enter the number of columns of photos for the index file to have
    • Thumbnail Format - Select the desired format and quality of the final thumbnail photos, displayed on the index page
    • Photo Format - Select the desired format and quality of the final photos, displayed on the individual enlarged photo pages, which will appear when the thumbnail is clicked
    • Scale - To enlarge or reduce the final images use this field
    • Create Navigation Page for Each Photo - If checked, every individual photo page will have a navigation bar that has links such as "Next photo," "Previous Photo," and "Home."

    top

Creating the Photo Album:

Example of a Completed Setup
Picture 4: Example of a Completed Setup

  • Now click "OK" to create the Web Photo Album
    • Once "OK" has been clicked the creation of the web photo album will begin. The creation process begins by opening Fireworks and resizing all of the photos for both thumbnails and their full sizes. Do not hit anything while this is in progress. You will see the following image overtop of Fireworks which serves as a status window. You will also see Fireworks opening and closing your photos. Once completed Fireworks will close on its own.

Screenshot of the batch process for Fireworks

Picture 5: Screenshot of the batch process for Fireworks

    • Once the Batch process is finished the photo album has been created.

Screenshot of a completed Batch process
Picture 6: Screenshot of a completed Batch process

  • Click "OK"
    • Now all that you will see is the index page in a Dreamweaver window, ready for you to make any apearance adjustments you would like to it.
    • Once you have completed your adjustments save the file (if altered) and you are done!! The photo album will be in the destination folder that you selected earlier. Feel free to remove the source folder that you created earlier in the tutorial; the images have already been copied into the destination folder.

 

Screenshot of the Files created by Dreamweaver's Web Photo Album process

Picture 7: Screenshot of the Files created by Dreamweaver's Web Photo Album process

top

URL: http://ced.ncsu.edu/ltrc/studio/workshops/photo_album/index.html
Page maintained by the Learning Technologies Resource Center.
May 19, 2004
© Steven L. Goode for NC State University. All Rights Reserved.
Best if viewed with IE 5.0 or Netscape 6.0