TechNote (Archived)

1

In Fireworks, choose File > Export.

2

In the Export dialog box, browse to the Dreamweaver Site folder defined as the local root folder. Choose HTML and Images from the Save as type menu and select the Put Image in Subfolder option. Click Save.

3

Launch Dreamweaver and open a new or existing file to contain this content. Save this file to the root level of the site directory.

4

Choose Insert > Interactive Images > Fireworks HTML.

5

Browse to the folder containing the HTML file exported from Fireworks. Select the file, then choose Open.

6

Click OK in the Insert Fireworks HTML dialog.

1

Within an HTML file containing the Fireworks images, select the table containing those elements. Dreamweaver's Property inspector should display Fireworks Table in the top left corner.

2

With the Fireworks table selected, click the Edit button in the lower right corner of the Property inspector. This will launch the PNG file in Fireworks.

3

Make the edits required to the images or to the pop-up menus in Fireworks, then click Done. Those changes will now appear in the open HTML file.

4

In every HTML file containing these images, follow steps 1 and 2. Since the saved PNG file already contains the edits, choose the Done button immediately within the Fireworks file.

Note: It is recommended that Fireworks PNG files be saved in a folder at the root level of the site directory so they may be easily accessed by Dreamweaver.

1

From Fireworks, choose File > Export.

Note: Testing with these steps has shown that if a fw_menu.js file from another Fireworks export operation exists in the Dreamweaver site root directory, then that file needs to be deleted before exporting from the new Fireworks file containing a Pop-up Menu. Renaming an existing fw_menu.js and then fixing the name in the call to the .js file in existing HTML files is possible workaround for this. Best results are achieved by exporting to an empty site folder.

2

In the Export dialog box, browse to the Dreamweaver site folder defined as the local root folder. Choose HTML and Images from the Save As menu and select the Put Images in Subfolder option (see illustration above). Do not export as Dreamweaver Library (.lbi).

3

In Dreamweaver, create a folder named Library at the root level of the site folder, if one is not already present.

4

Create a new file and save it to the Library folder with an .lbi extension.

5

With this new library file open, launch the Code Inspector (Window > Code Inspector). Highlight all of the code in the Code Inspector and delete it. Close the Code Inspector. (You can also do this in Code View).

6

Once in the document window's Design view, choose Insert > Interactive Images > Fireworks HTML. Browse to locate the file that was exported from Fireworks into the site root folder, then click Open. Click OK in the Insert Fireworks HTML dialog.

7

Save the LBI file. Now you will be able to use the Library file in an HTML file that is saved to the Site Root.

8

Open a file that is in the Site Root folder or create a new HTML document and save it to the Site Root folder.

9

Choose Window > Library to view the Library panel and find the new Library item in the list. Click on it to see the preview at the top of the panel.

10

Drag the preview of the Library object onto the page and release it in the desired location.

Note: Pop-up Menu locations are absolute to the top left corner of the page. Inserting a Library object into any other location will result in the Pop-up Menus being displayed improperly. You can edit the location of the Pop-up menus in the HTML file before inserting it into the Library file (step 6 above). for more information on adjusting the location of Pop_up Menus in Fireworks, see Changing the location of a Pop-up Menu exported from Fireworks (TechNote #15001).

11

Save the Dreamweaver HTML file.

1

Open the HTML file created from Fireworks in step 2.

2

Select the table containing the Fireworks images. Dreamweaver's Property inspector should display Fireworks Table in the top left corner.

3

With the Fireworks table selected, choose the Edit button in the lower right corner of the Property inspector. This will launch the PNG file in Fireworks.

4

Make the edits required to the images or to the pop-up menus in Fireworks, then click Done. Those changes will now be apparent in the open HTML file.

5

Open the existing library item in Dreamweaver.

6

Within the library file, launch the Code Inspector by choosing Window > Code Inspector. Highlight all of the code in the Code Inspector and delete it. Close the Code Inspector.

7

Once in the document window, choose Insert > Interactive Images > Fireworks HTML. Browse to locate the file exported from Fireworks into the site root folder, then choose OK.

8

Apply the changes in the library item to the HTML pages by choosing Modify > Library > Update Pages.

Changing the location of a Pop-up Menu exported from Fireworks (TechNote 15001)