TechNote (Archived)

Fireworks 4 Pop-up Menus in Dreamweaver 4 templates

Fireworks 4 Pop-up Menus can be used within Dreamweaver 4 templates, as shown in some of the tutorial sites included with the Quick Start Collection. However, using Dreamweaver 4's Roundtrip HTML feature to make changes to Pop-up Menus placed in a template may prove problematic. In some situations, such as when an indention or images are added to a Pop-up Menu, the Pop-up Menu will not display or will display incorrectly when previewed in a browser. By following one of the techniques described in this TechNote, however, you can incorporate and update Pop-up Menus in a Dreamweaver template.

The suggested method for achieving this, explained in the Starting from a new template section, assumes that you are starting with a newly-created template. If you are trying to change and update Pop-up menus in an existing Dreamweaver template, consult the Troubleshooting section below. For more information on any of the features discussed in this TechNote, including Dreamweaver templates or Fireworks Pop-up Menus, refer toAdditional information.

Starting from a new template
Below is a suggested method for getting Fireworks HTML Pop-up Menus into a template file so that the Pop-up Menus will preview in a browser properly in the pages based upon the template. Note that the template file itself may not preview in the browser properly. Part 2 of this method explains how to use Roundtrip HTML to update the original Fireworks HTML file.

Part 1: Including Fireworks Pop-up Menus in a Dreamweaver template

1	In Fireworks, create your Web page, navigation bar, or button using Pop-up Menus.
2	Save the file and choose File > Export. Browse to the root folder of your predefined Dreamweaver site. Do not export the Fireworks HTML file into the site's Templates folder. Note:This method is structured on the assumption that the Dreamweaver pages based on a template using Pop-up menus in the site are all in the same folder. Because common usage suggests that this folder will often be the root folder of the site, the steps in this TechNote assume that all the template-based pages are located at the site's root level. Users can substitute another folder in their site (in place of the root folder) when following these steps, as long as all their template-based pages, the exported Fireworks HTML file and the external JavaScript file exist in the same folder.
3	Choose HTML and Images from the Save as type pop-up menu and select the Put Images in Subfolder option.
4	Click Options and choose Dreamweaver from the HTML Style pop-up menu. The options in the Export dialog box should match those found in Example 1.
5	Click Save.
6	In Dreamweaver, open a new file (File > New) and save it as a template file into the site's Templates folder (File > Save as Template).
7	Choose Insert > Interactive Images > Fireworks HTML and browse to the site root folder where you previously exported the Fireworks HTML. Select the Fireworks HTML file and click OK. Once the Fireworks HTML has been inserted into the Dreamweaver template file, you can continue to add items to the template, including editable regions (Modify > Templates > New Editable Region). Note: If you preview the template file itself in a browser, the Pop-up Menus will not display as expected. This is because the link to the external JavaScript file that Fireworks generated when you exported the HTML and images has no path from the Templates folder to the site root.
8	Create a new file based upon the template by choosing File > New from Template. Select the template file created above.
9	Save the new page, giving it a name different from the Fireworks HTML file name. This new page should also be saved at the root level of the site. It is critical that the pages based on the template be at the same level as the original Fireworks HTML file. This ensures that the path to the external JavaScript that control the menu behavior file is correct.
10	Open a page based on the template and choose File > Preview to verify that your Pop-up Menus display as expected. The Pop-up Menus should display properly in the pages based on the template, but not necessarily when previewing the template itself.

Part 2: Changing the Pop-up Menus using Roundtrip HTML
If you inserted Fireworks HTML using Pop-up Menus into a Dreamweaver template file, avoid using Roundtrip HTML from the template file itself to update or change the Pop-up menu graphics or behavior. Instead, update the graphics directly from the HTML file generated by Fireworks, as explained below. After the original Fireworks HTML file is updated, the new file is then reinserted into the template file.

Steps:

1	In Dreamweaver, open the original Fireworks HTML file containing the Pop-up Menus and select the table generated by Fireworks. If necessary, you can select an image within the table and then choose Modify > Table> Select Table.
2	Open the Property inspector, if it's not already open, by choosing Window > Properties.
3	Click the Edit button at the bottom of the Property Inspector to launch the original Fireworks (PNG) file. To the left of the Edit button the Src text box displays the path to the source PNG file. If the location of the source PNG file is incorrect, you can browse to reestablish the path.
	Note:If Fireworks does not launch make sure that Fireworks 4 is set as the external Editor for GIF, JPEG, and PNG files in the Preferences dialog box. Choose Edit > Preferences, click on the File Types/Editors category and then associate those file extensions with Fireworks 4.
4	The Document window of the source PNG will have a Done button at the top, along with an Editing from Dreamweaver icon.

5	Make the desired changes to your Pop-up Menus and click Done. The previously-exported Fireworks HTML file as well as the original PNG file automatically updates.
6	Back in Dreamweaver, open the template file containing the Pop-up Menus.
7	Select and delete the existing Fireworks table containing the Pop-up Menus. Reinsert the updated Fireworks HTML containing the Pop-up Menus from the original file (Insert > Interactive Images > Fireworks HTML).
8	Update the pages based on the template by choosing Modify > Templates > Update Pages or choose File > Save and click Yes to update the pages using the template.
9	Open a page based on the template and choose File > Preview to verify that your Pop-up Menus display as expected.

Troubleshooting
For users with Pop-up Menus already inserted into Dreamweaver templates
If you have an existing template that includes Fireworks Pop-up menus, you may have experienced problem when using Roundtrip HTML to update the Pop-up Menu in Fireworks. Examples of some of the problems that occur can be found in a few of the sample sites in the Quick Start Collection, including the Skyline Group, the Online Group, and River Rocket Sports (b2b Sales).

The main problem is that when the Fireworks HTML is changed using Roundtrip HTML a new JavaScript file is exported to the Templates folder and the paths to the arrows.gif image and the images for the Pop-up Menus are set relative to the template file. When the pages which are based on the template file are updated the path to the Pop-up Menu images remains relative to the template file and not relative to the updated pages. This causes broken image links when the updated pages are previewed in a browser. (If the Pop-up Menus do not have submenus or only HTML was chosen for the appearance of the Pop-up Menus, the display problems may not be apparent.)

Following the steps below will reestablish the correct paths in the template file so that when the pages based on the template file are updated the paths to the Pop-up Menu images are correct. This method does not involve changing the paths in the HTML code. However, because of the many variables in users' situations, the steps below may not prove useful in every situation.

Steps for correcting preexisting Fireworks Pop-up Menus in Dreamweaver templates:

1	Take the following preliminary steps: Define your site in Dreamweaver, if you have not already done so. See How to define a site in Dreamweaver (TechNote 14028) for instructions on defining sites. Check your site's Templates folder for a Pop-up Menu JavaScript file (fw_menu.js) and delete if it exists. Check the Templates folder for a folder named 'images' and delete it, as well, if it exists. Note:You should not have to upload your Templates folder to a server because the files in this folder are not referenced by viewer's browsers. Also the Templates folder starts with an uppercase letter and some servers do not support uppercase characters in folders or filenames.
2	Locate the original PNG file from which the Fireworks HTML containing the Pop-ups Menus was generated. For the Quick Start Collection, the Source PNG files will be found in the fireworks folder inside the sample site. The Source PNG file for the Fireworks HTML containing Pop-up Menus for the Quick Start Collection sample files are: Sample file Source PNG for Pop-up Menu HTML Skyline group skyline_header.png Online group navbar.png River Rocket Sports (b2b Sales) toolbar.png
3	Open this Source PNG file in Fireworks (File > Open).Do not open or access the Source PNG file by using Roundtrip HTML in Dreamweaver.
4	Make the desired changes to the Pop-up Menus (if you have not already done so).
5	Export the Fireworks file into the root folder of your predefined Dreamweaver site. Do not export the Fireworks HTML file into the Templates folder.
6	Choose HTML and Images from the Save as type pop-up menu and select the Put Images in Subfolder option.
7	Click Options and choose Dreamweaver from the the HTML Style pop-up menu. The options in the Export dialog box should match those shown in Example 1.
8	Click Save.
9	In Dreamweaver, open the template file. Select the table generated by Fireworks which contains the Pop-up Menus. To select the table you can click on an image in the table and then choose Modify > Table > Select Table.
10	Delete the selected table, leaving the insertion point in the same location on the page after deletion.
11	Insert your Fireworks HTML page containing the Pop-up Menus into the same location in the template file. Choose Insert > Interactive Images > Fireworks HTML and then browse to select the Fireworks HTML file. The Fireworks HTML file containing the Pop-up Menus should, again, be located at the site root level. Do not delete the Fireworks HTML file.
12	Choose File > Save and you will get a dialog box asking to update the dependent files. Click Yes. Example 2 provides an image of this dialog box. Dreamweaver will update the pages based upon the template automatically. Close the update dialog box when the process is complete. Dreamweaver will indicate how many pages were updated.
13	Open a page based on the template and choose File > Preview to verify that your Pop-up Menus display as expected.The Pop-up Menus should preview properly in those pages based on the template, but not necessarily when previewing the template itself.

To make additional changes to your template's Pop-up Menus using Roundtrip HTML refer to Part 2 above.

Additional information
For more information about Fireworks 4 Pop-up Menus consult the following resources:

	Customizing and troubleshooting Pop-up Menu Images(TechNote 14995)
	Changing the location of a Pop-up Menu exported from Fireworks(TechNote 15001)
	How to set the length of time a Pop-up Menu remains visible(TechNote 15007)
	Fireworks Pop-up Menus in Dreamweaver Library files (TechNote 15101)
	Using anchor tags with Fireworks 4 Pop-up Menus (TechNote 15161)

Note:aspects of the Pop-up Menu feature in Fireworks were improved in the Fireworks 4.0.2 Updater. See Fireworks 4 and 4.0.2 release notes for specific information about the updater.

For more information about Dreamweaver templates consult the following resources:

	Adding content to pages from a Template in Dreamweaver 4(TechNote 14908)
	Using links in templates
	Customizing templates with Dreamweaver 3 and Fireworks 3
	Benefits of using templates (TechNote 13876)