Create a Web Photo Album in Dreamweaver

01
of 07

Organize the Photos You Want in the Album

NOTE: The Dreamweaver Photo Album Wizard requires that you have Fireworks installed on your computer as well as Dreamweaver.

The Dreamweaver photo album wizard takes every photo in a directory and puts it into your album. While it's fine to use every photo you've taken, unless you're a professional photographer, chances are there are photos that you don't like or shouldn't be included.

  • Create a new directory and put only the photos you want in the album in it.
  • It's a good idea to resize the images to a reasonable Web page size (500x500 pixels is a good benchmark).
02
of 07

Start the Dreamweaver Web Photo Album Wizard

Start the Dreamweaver Web Photo Album Wizard
Start the Dreamweaver Web Photo Album Wizard. Screen shot by J Kyrnin

Go to the Commands menu.

Choose Create Web Photo Album...

NOTE: The Dreamweaver Photo Album Wizard requires that you have Fireworks installed on your computer as well as Dreamweaver.

03
of 07

Fill in the Photo Album Details

Fill in the Photo Album Details
Fill in the Photo Album Details. Screen shot by J Kyrnin

Dreamweaver will create a photo album with a title, sub-title, and descriptive text. The album will have a front page with thumbnails and each image will have a full-size page with links to the previous and next images in the album as well as to the index.

  • Photo album title This is the title of your album. Dreamweaver will add it as the <title> of your document and as the <h1> header on the index page.
  • Subheading info The subheading is placed below the <h1> header on your album index page.
  • Other info Finally, you can add descriptive text about the entire album. This will appear as plain text above the thumbnails on the index page.
  • Source images folder This is the folder where you've saved your images to be put into the gallery. Browse to that location using the Browse button.
  • Destination folder This is the folder on your Web site where you'd like the gallery to live. Dreamweaver will create an images folder as well as all the required HTML files in this folder. Browse to that folder on your hard drive. I recommend putting your album in an empty directory.
04
of 07

Fill in the Photo Album Details - Continued

Fill in the Photo Album Details
Fill in the Photo Album Details. Screen shot by J Kyrnin
  • Thumbnail size You can choose between 5 different sizes for your thumbnails. The default size is 100x100. I like 72x72, but you can also choose 36x36, 144x144, or 200x200.
  • Show filenames I like to leave this checked. It tells Dreamweaver to put the filenames in the index page. I leave them in so that I can easily edit the captions.
  • Columns Dreamweaver builds a table to put your thumbnails in, and you can choose how many columns there should be. Remember that if you use a larger width thumbnail, the page could get very wide if you have a lot of columns.
  • Thumbnail format and Photo format Dreamweaver will convert your images into JPEG or GIF files and you can choose between a faster download or a better looking image.
  • Scale If you didn't resize your images before running the wizard, then they may be extremely large - too large for a Web page. You can choose to scale the original images so that they will load more quickly and be more easily viewed on your Web page.
  • Create navigation page for each photo If you turn this option off, Dreamweaver will link directly to the larger photo. Otherwise, it creates a separate HTML page for the image.

Click OK and Fireworks will open and start processing your images. This can take several minutes if you have a lot of photos for your album.

05
of 07

View Your Album in Dreamweaver

View Your Album in Dreamweaver
View Your Album in Dreamweaver. Screen shot by J Kyrnin

Once you have your album in Dreamweaver you can edit it just like any other Web page.

06
of 07

Change the Captions

Change the Captions
Change the Captions. Screen shot by J Kyrnin

If you selected to show filenames, Dreamweaver will include each filename as a caption for your thumbnails. Select the filename and give your photos real captions.

07
of 07

Test Your Album in Different Browsers and then Upload

Test Your Album in Different Browsers
Test Your Album in Different Browsers. Screen shot by J Kyrnin

Dreamweaver creates a very simple, table-based layout for the photo album, and chances are it won't look bad in any modern browser. But it's always a good idea to test your pages in as many browsers as you have available.

Upload your album using the upload button. This will make sure that all the files, images, and thumbnails are uploaded to the correct location. If you don't have a site defined in Dreamweaver, you'll need to define one to have this work correctly. You'll also need to set up that site to transfer files