With the correct plug-ins your DreamWeaver should be able to create photo albums for your site. Additionally, you will need to have Fireworks 4 or higher installed on your machine.

This process will create a thumbnail and a larger-sized image for each of the images in the your album. Dreamweaver will create a web page containing all the thumbnails, as well as links to the larger images.

The resulting photo album will then need a little fine-tuning from you to make it look and function at its best.

• How It Works
• Organize
• Create the Photo Album
• Fine Tuning
  • Fine Tuning the Index Page
  • Fine Tuning Individual Images Pages
• Test and Publish

How It Works

The Create Web Photo Album command in Dreamweaver lets you automatically generate a web site that showcases an album of images from a given folder.

Dreamweaver will create an index page in your photo album folder, with a .htm extension, containing a grid displaying the thumbnails of your photos. You will copy the contents of this file and paste them into a new page created from your template and saved in the same folder as an .aspx page.

Your user will be able to click on the thumbnails to launch pages containing larger versions of the thumbnails and will be able to use these pages to navigate through the whole array of images. These separate pages are located in the 'pages' folder in the photo_album.

Organize

1) Create a folder named photo_album within your site. Important: If you will have more than one photo album, create subdirectories in this site for each one. Add an images folder into each photo album, separate from the main images folder for your site.

2) Select and optimize the photos you would like included in the photo album. Optimizing may entail cropping, resizing and file compression. Place the optimized images in their image folder in the appropriate photo album.

• Crop
  Crop the photos to contain the most interesting area of the image. Exclude extraneous or distracting details.

1. Resize
   We have found that 450x450px or so is a good size. (Photos should never be larger than a standard 600x800px browser.) Try to keep all your images the same size, it will improve the look of the finished photo album.
   
2. Compress
   To the extent possible with the software you are using, save the file with as small a file size as possible without sacrificing quality. Remember: Use .jpg format for photographic-type images and gif format for art with solid lines such as logos and cartoons.
   

3) Rename the images. DW will create the photo album using your images in alphabetical order. For this reason I suggest you number your images. A good notation would number the images sequentially in this manner: 01example.jpg, 02example.jpg, etc..

Also remember to use good file naming techniques. In particular, omit spaces, punctuation and special characters. (In this case, it is not crucial that each name have a unique and recognizable name, but simpler is always better.)

Create the Photo Album

1) Choose Commands > Create Web Photo Album in DreamWeaver.

2) Enter a title in the Photo Album Title text field. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails. If desired, you can enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and Other Info text fields. (You will need to update the formatting of this page title later.)

3) Choose the folder containing source images by clicking the Browse button next to the Source Images Folder text field. These source images are the images which you have just placed in your photo album.

4) Select the final destination of the photo album's home page by clicking the Browse button next to the Destination Folder text field. This will be at the root of your photo album.

5) Set thumbnail size to 100x100px.

6) Deselect the Show Filenames checkbox.

7) Select 3 column format.

8) Leave other selections at their default settings.

9) Click OK to create the HTML and image files for the web photo album. This may take several minutes if you’ve included a large number of image files.

Fine Tuning

This last step is simple and quick and will greatly enhance the appearance of your photo album, bringing it into the School of Medicine style.

Fine Tuning the Index Page

As you can see, it displays the Photo Album Title, Subheading Info, and Other Info from your earlier settings at the top of the page.

1) Your next step is to copy this formatting from this page and paste it into a new page made from your template. Save this page as index.aspx in the photo album.

Now delete the extraneous index.htm page.

2) Clean up the default formatting of the Title elements:

Remove the font formatting from the head elements which has been generated by DreamWeaver, by selecting the element, right clicking on it in the status bar, and choosing 'Remove Tag'.

Remove the gray background from the table, by selecting the table and deleting the background color from the properties panel.

Apply our School of Medicine classes. Apply the SiteTitle class to the title. Apply the Header class to the subheading and the default Content class to the 'other info' text.

3) You may also wish to add captions to the thumbnails using the smalltext style. Default captions may have been automatically added, these will be the file names of the images and are not descriptive. They should be either deleted or changed.

Fine Tuning Individual Images Pages

These images pages are located in the 'pages' folder of your photo album. Their names coincide with the names of the images which you originally placed in the images folder of your photo album.

The page titles for these pages are derived from the photo album title you originally entered followed by the name of the image.

You will want to replace the non-descriptive photo name with something more descriptive. If you are using captions on the index page, I suggest you use this same caption here.

Test and Publish

You are now done. Remember to test by clicking through your photo album on integration. Then publish it, remembering to upload all its components:

• index.aspx
• entire images folder
• entire pages folder
• entire thumbnail folder