Creating a Web Photo Album
Dreamweaver and Fireworks integration goes beyond inserting Fireworks HTML and updating graphics
on-the-fly
. Dreamweaver can actually control Fireworks, and that's what we're going to look at by using the Create Photo Album command. This feature is very powerful and can automate many
tasks
if you need to post large
quantities
of images on the Web. Furthermore, you don't even need to know HTML—less so than working with Dreamweaver alone—to make the most out of this feature.
The Create Web Photo Album command works with a folder of images that can
open
any of the following formats: GIF, JPEG, TIFF, PSD, PICT, BMP, and PNG. The images can be resized for thumbnails
anywhere
from 36x36 pixels to 200x200 pixels. If you would like to follow along for this exercise, navigate to the companion Web site located at http://www.dreamweavermxunleashed.com. Here you can download the
zipped
folder called gato_images. This folder contains several images of my cat, Gato. We're going to create a Web photo album of him.
|
Follow these steps to create your own Web photo album. This exercise illustrates the power of communication between Dreamweaver MX and Fireworks MX.
-
Create a new basic HTML page. In the new document choose Commands, Create Web Photo Album. This launches the Create Web Photo Album dialog box as shown in Figure 15.14.
-
In this dialog box you should give the album a title. In this case, because we're using pictures of my cat, enter the title
Matt's Fat Cat.
-
The
next
text field is looking for
subheading
information. Again, because we're using pictures of Gato, type in
Gato Jobs Weighs 20lbs!
-
For other
info
, type
Gato is now 2
years
old.
All this heading content will appear on the top of the page.
-
Next select the folder you want this command to use to create this Web photo album. Click the Browse button and select the gato_images folder that you've downloaded from the companion Web site.
-
In the next line you need to decide where the thumbnail images that Fireworks is going to create should be saved. Choose a folder located within the local root folder of the site you're currently working with.
-
Determine the
size
in which you want the thumbnail images to appear. Choose 36x36 and leave the option to show the filenames checked.
-
Next, type in a value for how many
columns
you want Dreamweaver to create when laying out the thumbnail graphics. In this case, type in
4.
-
Choose a thumbnail format. For this exercise, choose JPEG-Better Quality.
-
You also have to choose the quality for the actual image in the photo album. Again, choose JPEG-Better Quality. (I don't like to sacrifice quality when it comes to my cat.) You can also leave the scale at 100%.
-
Leave Create Navigation for Each Photo as well. It makes it easier to navigate through the different images in the album.
-
Choose OK. Fireworks will launch, and you'll see a batch dialog box as shown in Figure 15.15.
|
After the process is complete, you'll have an entire layout of pictures in a Web photo album, as shown in Figure 15.16. Preview this page in a browser; you can click any one of the thumbnail graphics and you'll get linked to a page with a larger version of the image, as shown in Figure 15.17. Also notice in Figure 15.17 that a navigation bar is located in the top-left corner.
|
