Dreamweaver Photo Album/ Picture Gallery

Written by Rachna

Requirements: You need the Dreamweaver and Fireworks software and basic knowledge of Dreamweaver

In this tutorial you will learn how to create a complete web photo album in Dreamweaver within minutes! The photo album will contain thumbnails that when clicked on will show the larger size of the pictures with navigation to go forward or backward to view the entire album. A web photo album can be used to showcase products, portfolios, art and photography galleries and more. Examples of web photo albums we designed and developed can be seen at NWFloridaland.com and Sunbeam4Kids.com. Click on the images thumbnails to navigate between the pictures.

Click here for Ready Made Flash Photo Gallery Website Templates

Click here for Free Dynamic Flash & XML Photo Galleries that can be updated using Notepad!

To get started keep all the images you would like to use in one folder. You only need the large size images. Fireworks will automatically create the thumbnails.

Once you have all your images stored in a folder, here are the steps you need to follow to create a photo album in Dreamweaver.

1. Open your Dreamweaver site.
2. Create a folder for your photo album (e.g. album)
3. Open any page within the site
4. Choose Commands/Create Web Photo Album from the toolbar
   1. Give the album a title (this will show in the thumbnail page only)
   2. You can enter subheading info if you like (this will show in the pages with the enlarged pictures)
   3. Choose the Source images folder by using the folder icon to browse to the relevant folder (this will be the folder where you have stored all the images)
   4. Choose the destination folder (from our example 'album')
   5. Choose the thumbnail size from the drop-down menu
   6. You can enter the number of columns you would like to display the thumbnails
   7. The rest can be left as is or changed according to your requirements for optimization
   8. Click on OK
   9. You will see Fireworks creating the thumbnails for all the pictures
   10. Once this is done, you will receive a message saying that the photo album has been created and you can view the album.
5. The album will now be in it's simple unformatted state. You will have a folder called album under which there will be 3 folders as follows:
   1. thumbnails - contains the thumbnails
   2. images - contains the images in its original form
   3. pages - contains the pages in which the larger images are inserted along with the navigation to navigate between pictures and go back to home
   4. index.htm page which will have all the thumbnails with links to the larger images
6. You can now go to the index page and apply your template (if you have one) to format the page and also use CSS Styles to format the text. The gallery now will look like its part of the site. You can do this for all the pages in the pages folder (under the gallery folder).

You can view completed examples of web photo albums at www.sunbeam4kids.com. These are pages we have developed with the Dreamweaver Web Photo Album. Once the album was created we applied the template and formatted the text with CSS Styles. Click on the images thumbnails to navigate between the pictures.

Take a look at some of our ready made Flash Photo Gallery Website Templates here.