WebReference.com - Chapter 4 from The Joy of Dreamweaver MX, from Osborne/McGraw-Hill (2/8) | WebReference

WebReference.com - Chapter 4 from The Joy of Dreamweaver MX, from Osborne/McGraw-Hill (2/8)

To page 1current pageTo page 3To page 4To page 5To page 6To page 7To page 8
[previous] [next]

The Joy of Dreamweaver MX: Chapter 4

Using Image Placeholders

A convenient new feature of Dreamweaver MX is the ability to use placeholder images when "comping," or prototyping, a web page. This allows you to experiment with the visual layout of the page before you create the final images.

To demonstrate this, launch Dreamweaver MX and open the Chapter4 site (if you haven't defined a site called Chapter4, use an existing site, such as Global Car). Choose File | New, or press CTRL-N, to open the New Document dialog box. Select Page Designs in the Category pane, and select Text: Article D in the Page Designs pane. Click Create.

The New Document Dialog

Dreamweaver MX generates a new document based on the template. Press CTRL-S and save the page as Chapter4.htm. Throughout this chapter, we'll use this template to construct a newsletter for a fictitious real estate agent named Chip Havilmyer (you'll learn more about Chip in Part III). Use the Site panel (Window | Site) to create a new folder in the Chapter4 site called Assets. This is where we'll store the site's images. Create a subfolder of Assets called PNG. This is where we'll store the Fireworks source files.

To create the image placeholder, place your cursor at the start of the paragraph that follows the horizontal rule, and choose Insert | Image Placeholder. This opens the Image Placeholder dialog box. Enter Chip in the Name text box, and set the dimensions to 150x150. Choose a background color for the placeholder and enter Chip Havilmyer in the Alternate Text box. Click OK.

The Image Placeholder Dialog

Dreamweaver MX inserts the image placeholder into the body of the page. Select the image placeholder in the Document window. If you examine the Property inspector, you'll see that it identifies the image as a placeholder, and even enables you to edit some of its attributes. Click Create.

This launches a new document in Fireworks MX sized to the dimensions of the image placeholder. To create the image, copy and paste a photo into the canvas of the Document window. (If you don't have a photograph at hand, use the picture of Chip Havilmyer in the Chapter11 folder of this book's supporting files.) Open the Optimize panel (Window | Optimize) and change the default file format from GIF to JPG (choose JPG - Better Quality from the Settings drop-down menu). When you're finished, click Done.

An image for the placeholder

Fireworks MX prompts you to save the source file, Chip.png, in the root of the Chapter4 site. Instead, save it in the PNG folder we created earlier. The Save As dialog box is replaced with the Fireworks Export dialog box. Save Chip.jpg in the Assets folder of the Chapter4 site.

Focus returns to Dreamweaver MX, and the new image is inserted into the Document window. Using the Property inspector, choose Left from the Align drop-down menu. Notice that in addition to displaying the source of the GIF image, the Property inspector "remembers" where we saved the Fireworks source file. This enables us to edit and re-export this image at any time with the click of a button.

TIP: How does Dreamweaver MX remember where we saved the PNG file? If you open the Assets folder in Windows Explorer, you'll notice a subfolder called _notes. Inside this folder is an XML document called chip.jpg.mno. If you open this document in a text editor, you'll see that it contains four lines, one of which stores the path to the Fireworks source file: <infoitem key="fw_source" value="/Assets/PNG/Chip.png" />.

To demonstrate this, let's add a drop shadow to Chip.jpg. Select the image in the Document window and click Edit on the Property inspector shown next.

Image Properties Display

The image's source file, Chip.png, opens in Fireworks MX. In order to add a drop shadow, we need to make the canvas a little larger. From the Fireworks menu, select Modify | Canvas | Canvas Size. Enter 170 in the width and height text boxes, and select the Anchor button in the upper-left corner. Click OK.

Canvas Size Dialog

Select Chip's photo in Fireworks' Document window and open the Properties panel (Window | Properties). Click the plus (+) button next to Effects and choose Shadow and Glow | Drop Shadow. A drop shadow is added to Chip's photo. Click Done.

The updated image is inserted into Dreamweaver's Document window (you may have to reapply the image's Align attribute). Behind the scenes, Fireworks MX saves the revised source file (Chip.png) and re-exports Chip.jpg to the Assets folder.

Save your work and press F12 to preview the page in a browser. It doesn't get much easier than that!

To page 1current pageTo page 3To page 4To page 5To page 6To page 7To page 8
[previous] [next]

The Joy of Dreamweaver MX, By Paul Newman
Copyright (c) 2002 by The McGraw-Hill Companies

Created: September 16, 2002
Revised: September 16, 2002

URL: http://webreference.com/authoring/languages/html/joydreamweaver/chap4/2.html