TechNote (Archived)

Using anchor tags with Fireworks 4 Pop-Up Menus

Pop-Up Menus can give users easy access to web content and are easy to make with Fireworks 4.Anchors can be great ways to get users exactly where you want them to go in your web site. An anchor represents a region of a hypertext document (a button or link) which is linked to another anchor in the same or a different document. Using the new Fireworks 4 Pop-up Menu option and anchor tags can create a more dynamic experience.

This TechNote shows how to create a very simple web page in Fireworks that will be exported to Dreamweaver. Once the basics are understood, more dynamic results can be achieved with more practice. In this simple example, small buttons were used to attach behaviors, but the same behaviors can be attached to any image or text by adding a slice or hotspot to it and following the directions accordingly. To achieve links to anchors placed on external pages, refer to the additional information that follow the first set of steps.

Pop-Up menu example with anchors attached

A Pop-up Menu that points to internal anchors:

A Pop-up Menu that points to external anchors:

Example 1: a Pop-up Menu that points to internal anchors.
Example 2: a Pop-up Menu that points to external anchors.

This process has two key areas:

	Create the pop-up menu in Fireworks 4.
	Using Dreamweaver, add anchor tags to the HTML to make it work with Netscape browsers.

Step One: Creating the Pop-up in Fireworks
The following will walk you through creating your Pop-up menus that link to named anchors in the same page. If you will be pointing to anchors that are on different pages, it is recommended that you create the HTML file that contains the named anchors before starting this procedure.

To create the Pop-Up menu in Fireworks 4:

1	Create a document that is 500 width X 2000 length. Fireworks will zoom out of the document so that it fits the screen. You can zoom back in to 100% by choosing View > Magnification > 100%
2	Create a button to hold your Pop-Up Menu (Insert > New Button) and give it only an Up and Over state. You can create a slice or a hotspot as mentioned above if you wish. For more information on how to create a button, see Using the Button Editor in Fireworks 3 (TechNote #14302).
3	Using the Info panel, place this button at 50x, 70y and size it to 65w, 60h. If the Info Panel is not visible, choose Window > Info.
4	Alt-click and drag down from the first button to duplicate it and place the new button at 50x,1000y. You can change the text on the buttons if they have text by using the Object panel's Button Text field at this point. If the first object is a hotspot, the second object must be a slice. For external anchors, skip this step and move to step 6.
5	For the second button, do the following:
	a Select the button b In the Object panel, click on the Link Wizard button. If the second object is a slice instead of a button, then click on the Link field in the Object panel. The second object can not be a hotspot. c In the Link Wizard or the Object panel, change the URL in the Link field (found in the Link tab of the Link Wizard) to "#" and uncheck the Auto-Name Slices (in the Filename tab of the Link Wizard) and name the slice "one". This is your anchor name. d Optional: If you want the button to return the user to the top of the page you can put # in the URL box on the Object panel/Link Wizard. If you want to link it back to the first button, add a Pop-up Menu to the button and set the link to be"#two" as shown in the instructions in step 7 below.
6	Select the first button from step 2
7	Choose Insert > Pop-Up Menu
	a For the Text field, type in the text that will show on the button. For this example, the button will be named simply "one". b For the Link, type # plus the anchor name from step 5 (i.e. "#one"). For external links, type the relative or absolute URL path followed with # plus the anchor name (i.e.../folder/file.html#one). c Click Next. d Select the text and background styles for the Pop-up menu. If you want your buttons to bounce back and forth to each other, create a Pop-up Menu for the second button following these steps, but name the Pop-up"two" and link to "#two". To make the first button an anchor, select it and then open the Link Wizard from the Object panel and set the link to "#" and the filename to"two".
8	In Fireworks, this is all that is needed. Choose File > Preview in Browser to check out the action. When you roll over the first button, the Pop-up Menu appears and when you click on the Pop-up Menu item, the second button appears. If you added a Pop-up Menu to the second button that linked to the button named "two", roll over the second button to reveal the Pop-up Menu and click on the menu item to jump back to the first button. Now you can export the page. Choose File > Export and enter the following options:
	a Name your fileanchorpage.html and set the location to be a defined Dreamweaver site folder. b Save As Type: HTML and Images c HTML: Export HTML File d Slices: Export Slices e Make sure "Include Areas Without Slices" is checked so your table will maintain its height. f Click the Options button and make sure the HTML style is set to Dreamweaver. FrontPage or Generic styles will also work. Fireworks Pop-up Menus do not export as GoLive code. Click OK to exit the HTML Setup. g Click the Save button to export your file.

At this point, the page created in Fireworks will work in Internet Explorer. To make it work in Netscape browsers, the HTML needs to be tweeked just a little in Dreamweaver.

To make the anchors work in Netscape:

1	Insert the Fireworks HTML into Dreamweaver using the Import Fireworks HTML icon in the Objects panel set to Common, or choose Insert > Insert Interactive Images > Fireworks HTML. You can also just open the HTML directly in Dreamweaver.
2	Turn on "Show Code and Design Views" on the main tool bar at the top or choose View> Code and Design
3	Scroll down the page in the Design view, find and click on the first button. The code in the Code View will move to the area in the code where this button sits. The code should be similar to this:
	<td ><img name="one" href="one.gif" ></td>
4	Now add the following code IN FRONT of the code above:
	<a name="one"></a>
	You can also click in an area above the button and insert a named anchor from the Objects panel's Invisibles set. Make sure the anchor is named"one". If you are creating a Pop-up Menu on the second button to jump back to the first, repeat this step for that button.

This should tested thoroughly to make sure it works. The most common error is not typing in links or anchor names correctly.

Additional information
For more details on how to build a Pop-Up Menu, there is a Lesson built into Fireworks and can be found by choosing Help > Lessons and then choose Creating a Pop-up Menu.