TechNote (Archived)

Using site root-relative paths with Fireworks Pop-up Menus in Dreamweaver templates

You can use Fireworks Pop-up Menus in Dreamweaver templates in either of two ways. The first method, described in Fireworks 4 Pop-up Menus in Dreamweaver 4 templates (TechNote 15088), relies on document-relative paths. The second method (described in this TechNote) uses site root-relative paths. The benefit of using the second method is that the template containing Pop-up Menus can be applied to any page in the site;and where the page based on the template is located won't matter.

Necessary background information

The method outlined in this TechNote assumes that you are already familiar with some of the basics in Dreamweaver and Fireworks, specifically including these areas:

• Defining a site and using the Site window
  See How to define a site in Dreamweaver (TechNote 14028), How to use the Dreamweaver Site window and Template features in creating a site (TechNote 14567), and Use the Site Window to develop site structure (TechNote 14030).
• Working with templates
  See Using Templates Overview and Template tips (TechNote 15809).
• Using site root-relative paths
  Root-relative paths provide the path from the site's root folder to a document. Consult Site Root Relative - Why? (TechNote 13129) and Understanding paths in Dreamweaver templates (TechNote 13842).

  Note: There are issues about previewing a page using root-relative links. Generally, you will need to upload pages to a server to test the links. See the Linking and Navigation chapter inUsing Dreamweaver for more information about previewing pages with root-relative links.

• Creating Pop-up menus
  For more information on how to create a Pop-up Menu in Fireworks, choose Help > Lessons and review Lesson 5 in the Fireworks Tutorials.

Step-by-step instructions

The tutorial-style instructions below will walk you through the process of incorporating Pop-up Menus into a template using site root-relative paths. The instructions will use specific folder and file names for the sake of clarity and organization. You can use your own folder and/or file names if you prefer.

This tutorial also assumes that your local site root folder exactly mirrors the Web site on your server (in other words, that the root folder on your hard drive is the same as the root folder for your Web site). If your local site doesn't exactly map to the server's Web site, these instructions may still be helpful to you but you will have to make sure that all the site root-relative paths you create or change accurately refer back to the root folder of your Web site.

In Dreamweaver: define the site

1. Define your site in Dreamweaver.
2. Open the Site window to view your site's files.
3. Create a folder at the root level named fwnavbar.
4. Inside the fwnavbar folder, create a subfolder named fwnavbarimages.

In Fireworks: create the Pop-up Menu files with root-relative links

1. Create a Fireworks file which has Pop-up Menus. While you are creating the Pop-up Menus in the Pop-up Menu Creator, use site root-relative paths for the URLs in the Link text boxes for all paths that point to files located within your site. ( Example 1 shows site root-relative links in the first section of the Pop-up Menu Creator.)
2. Complete the Fireworks file and optimize it for export.
3. Save your PNG file into the fwnavbar folder in your defined site.
4. After you have completed the design of your Fireworks file containing the Pop-up Menus, you will need to export the HTML file, images, and JavaScript file into your defined site. Choose File> Export to open the Export dialog box.
5. Browse to find and open the fwnavbar folder in your defined site.
6. Name your file fwnavbar.htm.
7. In the Save as type pop-up menu, select HTML and Images.
8. In the HTML pop-up menu, select Export HTML file.
9. If your file has slices, select Export Slices in the Slices pop-up menu.
10. Select the Put Images in Subfolder option.
11. Click Browse. This opens the Select Folder (Choose a Folder for Macintosh) dialog box.
12. Navigate to find and select the fwnavbar_images folder.
13. Click Open (Choose for Macintosh).
14. On the Export dialog box, click Options. This opens the HTML Setup dialog box.
15. On the General tab, select Dreamweaver in the HTML Style pop-up menu.
16. Click OK. Your Export dialog box should match the one displayed in Example 2.
17. Click Save. The HTML file named fwnavbar.htm and the JavaScript file (fw_menu.js) will be saved in the fwnavbar folder. The images will be exported to the fwnavbarimages folder.

In Dreamweaver: incorporate the Pop-up Menus into a template file

1. In Dreamweaver, open fwnavbar.htm.

   Note: Sometimes the more successful route to get Fireworks HTML into Dreamweaver is to create and save a Dreamweaver page and then choose Insert > Interactive Images > Fireworks HTML. For more detailed information about exporting files from Fireworks and importing into Dreamweaver, see Inserting Fireworks files into Dreamweaver: an overview (TechNote 15245).

2. Choose View > Code to access the HTML source code in the fwnavbar.htm file.
3. Change the reference to the Pop-up Menu JavaScript file to a site root-relative path. The code below will be found right before the closing </head> tag.
   
   Change from:
   <script href="fw_menu.js"></script>

To:
   <script href="/fwnavbar/fw_menu.js"></script>
4. Next, you will need to change all of the paths to the images used in your Pop-up Menus from document-relative to site root-relative. A quick way to do this is by using the Find and Replace feature (choosing Edit > Find and Replace).
5. In the Find In pop-up menu, select Current Document.
6. In the Search For pop-up menu, select Source Code.
7. In the text box to the right of the Search For pop-up menu, type the following:

   fwnavbarimages

8. In the Replace With text box, type the following:

   /fwnavbar/fwnavbarimages

9. Your Find and Replace dialog box should match the one displayed in Example 3. Click Replace All.
10. Save the file as a template (choose File > Save as Template to initiate this process). The template file will have a .dwt extension.
11. Select any areas that you wish to reserve as editable regions and choose Modify > Templates > New Editable Region.
12. Choose File > Save.
13. In your site, create the files that will have the template applied to them and then apply the template to each (choose Modify> Templates > Apply Template to Page).
14. Make changes in editable regions to finish out each HTML documents.
15. Upload the files to the remote server. In the Site window, your files will look similar to the ones displayed in Example 4.

Search Support

---