19.2 Create 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 19-2). (This command works only if you have Macromedia Fireworks on your computer.)

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. Each opens up an individual page that showcases a larger version of the photo (bottom).

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 CommandsCreate Web Photo Album. The dialog box that appears (Figure 19-3) offers these controls:

• Photo Album Title, Subheading Info. The title you type will appear in a gray box on the thumbnail page, and at the top of each photo page (Figure 19-2). If you type a subheading, it will appear 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 will appear 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 converts 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.

  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.

  

• 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 size of the height and width 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.)

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

• Thumbnail Format pop-up menu. Choose the graphics format for both the thumbnail images and 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.)

• 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 page—you might type 40 (percent) to bring the images on the resulting Web pages down to a reasonable size.

  EASTER EGG HUNT Would You Like to Play a Game? As today's software programs go, Dreamweaver is delightfully brimming with Easter eggs (Section 5.2.6). The Create Web Photo Album command contains one such diverting surprise: a full-fledged version of the old game MasterMind, for when you want a break from the daily grind. It goes like this: Summon the Create Web Photo Album dialog box. Type the secret, three-word password into the Photo Album Title box with no spaces. (And what's the password, you may well ask? Here's a hint: It's a key phrase in the 1983 Matthew Broderick movie War Games, and it appears somewhere in this sidebar box.) To play the game once it appears, your challenge is to guess the secret four-color pattern that Dreamweaver has dreamed up. Click each of the squares on the bottom left row; click repeatedly until it shows the color you want. When you've arranged the four rectangles in the colors that represent your guess, click Guess. The smaller squares at the right side show you how many of your guesses were "right colors, right positions" (black) and how many were "right colors, wrong positions" (white). Use these clues to guide you in your next guess—in the second row of left-side rectangles. Keep going until you've unveiled Dreamweaver's secret.

  
  

• 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 19-2, right). If you turn off this box, Dreamweaver merely links the thumbnail images directly to each larger photo. When a visitor clicks the thumbnail, the fullsize image will still appear, 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 to open it in your Web browser.