How to Create a Web Photo Album in Dreamweaver

In this tutorial I will show you how to create a photo album in Dreamweaver. A web photo album can be used for many things. Everything from a simple site showing off your kids to a catalog site, showing items in your store. Though at first glance it looks pretty difficult, it’s not. In this album you will have thumbnails that will show larger images when clicked on. Before we get started you need to take all the images that you plan to use and put them all in one folder. You do not need to shrink your images down. Keep your images large, fireworks will shrink them to thumbnails for you. You will also need to open fireworks before we begin. Follow the steps below to create a awesome looking photo album in dreamweaver.

Step 1 – Open any page within your website in dreamweaver.

Step 2 – You will need to create a special folder for your photo album. Name it album, photo album, or something along them lines.

Step 3 – At the top of your dreamweaver window click on Commands / Create Web Photo Album. The Create Web Photo Album dialog box will appear. There are many options to fill in. I will list each option below and explain each one.

a. Photo Album Title – Type in the name of your photo album in this field. This title will show only on the thumbnail page.

b. Subheading Info – This field is optional. Whatever you type in here will show on the page of the enlarged photo.

c. Other Info – Anything you type in here will also appear at the top of the enlarged photo page.

d. Source Images Folder – Click browse and locate the folder where you have all of your saved photos.

e. Destination Folder – This folder is the special folder I told you to create in step 2. We’ll call it album. So click browse and locate the special folder you created.

f. Thumbnail Size – This field will let you choose what size thumbnails to display on the thumbnails page. So choose the size that you prefer. ( Tip: 100 x 100 is a good size for thumbnails.)

g. Columns – The columns field gives you the choice of how many columns of thumbnails you will have listed on your thumbnails page. ( Tip: 4 or 5 is a good number. )

h. Thumbnail Format – This field gives you the option of using jpeg or gif format for your thumbnails. I would personally use JPEG.

i. Photo Format – This field gives you the option of using jpeg or gif format for your large images. I would personally use JPEG.

Once you are satisfied with your options click OK. Now Fireworks is creating the thumbnails for all the pictures in the folder you stored all your pictures in. This process may take a few minutes depending on how many pictures you have. Once fireworks is done it will display a message telling you that the album has been created and you can view the album. Click OK.

Step 4 – A new window will appear with your thumbnails on the page. This page is called index.htm. This page is plain. You will need to apply your template to the thumbnails page.

Step 5 – Under your album folder there will be three more folders: Thumbnails, Images, and Pages.
a. Thumbnails has all your thumbnails in that folder.
b. Images has all your images in its original size.
c. Pages has all your pages which are linked to the thumbnails.

You can play around with your photo album to get it to look the way you want by using CSS styles or your original template that you are using on your site. You can also open each page in the pages folder and add text to those pages. For example you can explain the picture in more detail.