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