Accessibility
 
Home > Products > Dreamweaver > Support > Using Templates
Dreamweaver Icon Macromedia Dreamweaver Support Center - Using Templates
Modifying an image

To modify an image in a template, you select the image in the document window and launch Fireworks directly from within Dreamweaver. You edit the original image in Fireworks, and then use the Dreamweaver-Fireworks integration features to update the image in the Dreamweaver template.

An image in a template can be an object placed directly into a document, a library item, or a an object placed in an HTML table cell created from a slice object in Fireworks. Slices are sections of an image that is divided in Fireworks. Each slice in the Fireworks image becomes a separate image file, and each image file becomes a table cell in the Dreamweaver document. (For more information on slice objects, see Slicing Images in Fireworks Help).

If the image you want to edit is placed directly into the template document, you can edit the original image in Fireworks and update the image in the document in Dreamweaver.

If the image you want to edit is a library item, you can open the file for the library item in Dreamweaver, then edit the original image file for the library item in Fireworks and update the image in the document in Dreamweaver. See Modifying a library item for more information on opening a library item, then use the procedure described in this section to modify the image.

If the image you want to edit is a table cell, you can edit the original image and export updated HTML code for the image from Fireworks to update the HTML for the document in Dreamweaver.

To modify an image placed directly into a template:

1 With the template displayed in Dreamweaver, select the image that you want to modify.
Note the file format (.gif or .jpg) of the selected image in the Property inspector. You'll need to specify the correct format for the image after you update it in Fireworks.
In the E-zine example, open the layout template and select the "generic" header graphic. The header graphic is a library item, so open the library item file. The property inspector indicates that the library item file is a GIF file.

2 Control+double-click (Windows) or Command+double-click (Macintosh) the selected image to launch Fireworks.
3 In the Find Source For Editing dialog box, click Yes to open the existing Fireworks document that was used to create the selected image.
4 In the Open File dialog box, select the .png file for the selected image and click Open.
5 In Fireworks, in the Layers panel click the eye icon next to the Web layer to hide the Web objects (slices or hotspots) in the image.

6 Select a layer in the Layers panel to modify that layer in the image.
7 In the document window, edit objects in the selected layer to customize the graphic. If you modify a layer that contains multiple frames (such as a navigation button), be sure to update all frames in the layer.
In the E-zine header graphic example, select the "generic" text and enter the new text, "bikemania", to retitle the E-zine. To accommodate the longer word, increase the canvas size.

8 Repeat step 7 for each layer in the image that you want to modify. After you apply all needed modifications to the image, click the eye column next to the Web layer in the Layers panel to show the layer. If necessary, resize slices or hotspots on the Web layer to accommodate new content.
9 In the Optimize panel, make sure the correct file format (noted in step 1) is selected as the export file type. For example, if the image selected in step 1 is a .gif file, select GIF. If the selected image is a .jpg file, select JPEG.
10 If you selected GIF file format in step 9 and the image contains transparency, select Index Transparency from the pull-down menu.
11 Select File > Update to save the file with the same name and location as the image selected in step 1. This procedure saves the edited file in the Web file format (not in .png format).
12 Save and close the .png file.
13 Return to Dreamweaver and select the updated image.
14 In the Property inspector, click the expander arrow in the lower right corner, and click the Refresh button.
15 Save the template. Click Yes to update all pages in the site that use the template.
Note: If you update an object in an editable region, you may need to redefine the object as editable. See Editing a template and updating pages.

To modify an image placed in an HTML table cell:

1 With the template displayed in Dreamweaver, select the image you want to modify.
Note the file format (.gif or .jpg) of the selected image in the Property inspector. You'll need to specify the correct format for the image after you update it in Fireworks.
2 Control+double-click (Windows) or Command+double-click (Macintosh) the selected image to launch Fireworks.
3 In the Find Source For Editing dialog box, click Yes to open the existing Fireworks document used to create the selected image.
4 In the Open File dialog box, select the .png file for the selected image and click Open.
5 In Fireworks, in the Layers panel, click the eye icon next to the Web layer to hide the Web objects (slices or hotspots) in the image.
6 Select a layer in the Layers panel to modify that layer in the image.
7 In the document window, edit objects in the selected layer to customize the graphic. If you modify a layer that contains multiple frames (such as a navigation button), be sure to update all frames in the layer.
In the E-zine header graphic shown below, select the "generic" text in the header graphic and enter the new text, "bikemania", to retitle the E-zine. Repeat the process four times to change all four instances of the word "generic".
8 Repeat step 7 for each layer in the image that you want to modify. After you apply all needed modifications to the image, click the eye column next to the Web layer in the Layers panel to show the layer. If necessary, resize slices or hotspots on the Web layer to accommodate new content.
9 Choose Edit > Copy HTML Code.
10 In the dialog box, choose Dreamweaver 3 for Style. For Location choose the Images folder in the site folder.
11 In Dreamweaver, in the document window, select the entire table in the template.
In the E-zine index template, select the entire table.

12 Choose Edit > Paste.
To Table of Contents Back to Previous document Forward to next document