Section 18.2. Creating a Web Photo Album | Dreamweaver 8[c] The Missing Manual

18.2. Creating a Web Photo Album

So you took your digital camera to your nephew's wedding . Your phone's ringing off the hook with family members wanting to see those pictures. Using Dreamweaver's Create Web Photo Album command, you can quickly generate a simple showcase for your digital masterpieces (see Figure 18-2). (This command works only if you have Macromedia Fireworks on your computer.)

To create a photo album, put all the graphics you want featured into a single folder. (It doesn't have to be in your site folder.) Then choose Commands Create Web Photo Album. The dialog box that appears (Figure 18-3) offers these controls:

Photo album title, Subheading info . The title you type appears in a gray box on the thumbnail page, and at the top of each photo page (Figure 18-2). If you type a subheading, it appears in smaller type on the thumbnail page, below the title.
Other info . Use this optional box to provide a short description of the photos. This text appears as plain paragraph type below the subhead.
Browse . Click the top Browse button ( next to the "Source images folder" box) to find and select your folder of graphics files. The graphics files themselves don't have to be in a Web-ready format (GIF, JPEG, or PNG). Fireworks can take GIF, JPEG, PNG, Photoshop (.psd), or TIFF files and convert them into a Web-friendly graphics file format. (That's why you need Fireworks in order to generate Web photo albums.)

Click the lower Browse button (next to the "Destination folder" box) to find and highlight the folder where you want to store the converted graphics (and the album Web pages). This should be an empty folder in your site folder.

Dreamweaver creates a new index.htm page for the album's thumbnail page, as well as additional folders for the thumbnail images, larger images, and photo pages.
Size pop-up menu . You can choose from five preset sizes for the thumbnail images: 36 x 36, 72 x 72, 100 x 100, 144 x 144, or 200 x 200 pixels. These sizes represent the maximum width and height of the thumbnail image. For example, if a photo in its original format is 785 pixels wide and 405 pixels tall, the 100 x 100 option will create a miniature image that's 100 pixels wide by 52 pixels tall (Fireworks doesn't distort the image by turning it into a 100 x 100 pixel square; instead, it preserves the picture's proportions ).
Columns . Specify the number of columns you want for the thumbnail page layout. If you have nine photos, for example, type 3 in the column box. Dreamweaver produces a page that displays your images 3 across and 3 down.

Figure 18-2. Use Dreamweaver's built-in Create Web Photo Album command to whip up a set of Web pages that showcases your photos. The command creates a simple index for your photo album (top), including clickable thumbnail images. When clicked, each opens up an individual page that showcases a larger version of the photo (bottom).
Thumbnail Format . Choose the graphics format for the thumbnail. (You can choose separate formats for thumbnails and the larger photo images.) Fireworks converts the photos in the folder you've specified into either JPEG or GIF images. (JPEG is best for photographic images, while GIF is best with illustrations, logos, and images with large areas of solid color and text.)
Photo Format . You can choose a separate file format for the larger photo images. If your original images are photos, choose JPEG. For line art like logos and illustrations, choose GIF.
Scale . Here, you can type a percentage for scaling the original images. If the original photos are very large, for example, you might want to create smaller versions that fit on a Web page better and are small enough to download quickly. For example, say your original digital photos are 1000 pixels wide really huge for a Web pageyou might type 40 (percent) to bring the images on the resulting Web pages down to a reasonable size.
Create Navigation Page for Each Photo . This useful option creates a separate page for each photo, complete with its title, file name , and previous/next links (Figure 18-2, bottom). If you turn off this box, Dreamweaver merely links the thumbnail images directly to each larger photo. When a visitor clicks the thumbnail, the full-size image still appears, but without the title or navigation controls.

When you click OK, Fireworks opens and creates the thumbnail and larger photo images. This may take a few minutes, depending on how many image files Fireworks must process and how big they are. When it's done, Dreamweaver steps in and creates the pages themselves. An "Album Created" message appears when your new photo gallery is ready to preview; Press F12 (Option F12) to open it in your Web browser.

Figure 18-3. The Create Web Photo Album dialog box lets you define the properties of your photo album. The "Show filenames" box tells Dreamweaver to add the actual file name of the image under each thumbnail. If your images are from a photo CD or stock image disc, you'll probably get uninformative names such as DS3746F7.jpg.

Note: Macromedia offers a free extension called Web Photo Album 2.2. It works similarly to the built-in command described above (you also need Fireworks to use it), but it includes professionally designed templates to jazz up the otherwise humdrum album pages with backgrounds and graphics. You can find it on the Macromedia Exchange Web site at this Web page: www.macromedia.com/cfusion/exchange/index.cfm?view=sn121&extID=1009904. (See Section 19.2 for more information on Dreamweaver extensions and the Macromedia Exchange.)