| home / authoring / languages / html / cm / joydreamweaver / chap4 |    [previous] [next] |
|
|
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.
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.
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.
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
Assetsfolder in Windows Explorer, you'll notice a subfolder called_notes. Inside this folder is an XML document calledchip.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.
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.
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!
| home / authoring / languages / html / cm / joydreamweaver / chap4 | [previous] [next] |
The Joy of Dreamweaver MX, By Paul Newman
Copyright (c) 2002 by The McGraw-Hill Companies
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: September 16, 2002
Revised: September 16, 2002
URL: http://webreference.com/authoring/languages/html/joydreamweaver/chap4/2.html
