Creating a Web Photo Album


If you're a web designer and use images on your website, you've probably visited online stock image websites like Corbis or Photodisc/Getty Images. If you've visited those sites and performed searches for images, you've seen their catalogs of image thumbnails. If you haven't visited these sites, you've no doubt seen functionality such as this. When you click the image thumbnail, a higher-resolution, usually larger image appears; the display usually includes more information about the image. Although the functionality may seem complex, the reality is that Dreamweaver exposes a utility that generates catalogs of thumbnail images, that when clicked, open to a much larger version of the image. The Corbis example I've shown here demonstrates a businesses usage of image catalogs; you might have other uses for this same functionality (perhaps to create a web photo album for your family that functions exactly the same way as this example does).

The Create Web Photo Album command, available from the Commands menu, exposes a unique interface, tied directly into Fireworks, that allows you to generate a web photo album in your web pages. Even better, the Create Web Photo Album command works with a folder of images in any of the following formats: GIF, JPG, TIF, PSD, PICT, BMP, and PNG. The images can be resized for thumbnails anywhere from 36x36 pixels to 200x200 pixels. Traditionally, creating functionality such as this was an extremely tedious task because the user would have to open the many images to use within the site, resize them, resave them, and then import them into some structure in a web page. The Create Web Photo Album command streamlines this functionality into one simple-to-use interface.

In this section, we'll examine the Create Web Photo Album command and create a web photo album for the surfing images located in the Assets folder. To create the web photo album, follow these steps:

1.

Create a new page by choosing File, New. Choose the HTML option from the Basic Page category and click Create.

2.

In the new page, select the Create Web Photo Album option from the Commands menu. The Create Web Photo Album dialog appears, similar to Figure 19.15.

Figure 19.15. The Create Web Photo Album dialog is packed with several options to get your images organized in an easy-to-navigate page.


3.

The first and most obvious option in this dialog is to give your album a title. Enter the text Surfing Album in the Photo album title text box.

4.

If you want to enter a subheading for the photo album, enter that text in the Subheading Info text box. For simplicity, I'll leave mine blank.

5.

If you want more detailed information about the photo album, enter text in the Other Info text box. Again, I'll leave mine blank.

6.

Choose the source folder for the original images. Click the Browse button in the Source Images Folder File field and browse to the Assets folder in the Dorknozzle site.

7.

Choose the destination folder for the thumbnail images (the folder that will contain the minimized thumbnail images Fireworks will create for you). Because all our images are contained in the Images folder, browse to it from the Destination Folder File field.

8.

Choose the size to which you want the thumbnails to be resized. Because we have limited space on the page, I'll choose the 72x72 option from the Thumbnail size menu. Also, we really don't care about displaying the image's filename under the image, so disable the Show Filenames check box.

9.

Change the number of columns we want our thumbnails to appear in on the page. Again, because we have limited space, reduce the default number from 5 to 3.

10.

Choose a thumbnail format for your images. The menu offers four options: GIF WebSnap 128, GIF WebSnap 256, JPEGBetter Quality, and JPEGSmaller File. Choose the appropriate option based on your target audience's connection speed. I'll leave it set to the default (JPEGBetter Quality).

11.

You also have the option of choosing the file type for the larger version of the image. Again, I'll leave mine at the default (JPEGBetter Quality).

12.

Enable the last option, Create Navigation Page for Each Photo, if you want to generate a navigation widget at the top of each page that contains the larger image. I'll leave this option checked. When you've finished configuring the dialog, click OK.

13.

Fireworks launches and processes the images (as you can see in the Batch Process dialog).

14.

After the process is complete, a dialog alerting you that the album has been created appears. Choose OK.

Dreamweaver closes the dialog box and generates a layout of pictures in a web photo album, as shown in Figure 19.16.

Figure 19.16. After the album is created, you'll see all the thumbnails of the images in the folder you specified.


In the Files panel, notice that Dreamweaver generates the three folders (images, pages, and thumbnails) in the Images folder; these new folders represent the various components of the photo album. The index.htm page that's generated as the contact sheet is stored in the root of the Images folder.

Preview this page in a browser by choosing the Preview in Browser option from the Document bar (or by pressing F12). In the browser, click any of the thumbnail graphics; you are linked to a page with a larger version of the image. Figure 19.17 shows that Dreamweaver includes a navigation bar in the top-left corner.

Figure 19.17. After clicking a thumbnail, you're brought to a detail page. You can also navigate through the images in the detail page format.


If you want, you can cut the table out of index.htm page and paste it directly into your custom-designed pages, maybe even the companyevents_surfpics.htm page. Of course, if you do copy and paste the contact sheet into another page, you'll have to run the link checker (choose Site, Check Links Sitewide) to fix the resulting broken references to the thumbnail files and the link between the thumbnail and the larger image's page.




Macromedia Dreamweaver 8 Unleashed
Macromedia Dreamweaver 8 Unleashed
ISBN: 0672327600
EAN: 2147483647
Year: 2005
Pages: 237
Authors: Zak Ruvalcaba

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net