Dreamweaver Photo Album/ Picture Gallery

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.

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.

Read more ...

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).

Related Posts by Categories