Creating Pop-down menus in Fireworks

Step 1: Opening a Fireworks document

Open a new document in Fireworks. Make sure that the size of the document is the same as the menu you are planning to create.

Step 2: Creating a Fireworks Button

Create a button in Fireworks. You can create a simple button by choosing the text tool and typing the name of the button in the document.

Then go to the Insert menu and choose 'convert to symbol'.

A symbol window opens. Choose button and give enter a name for the button in the box.

The text you typed is converted to a button and light green rectanglular layer is laid over it.

Step 3: Creating the Pop-Down Menu

Now we are ready to start creating the Pop-down menu. Go to the Insert menu and choose 'Pop-down menu' (Make sure that your button is highlighted with the light-green overlay).

The window for creating Pop-down menu appears. Enter the name of the sub-menu item in the 'Text' box and the corresponding URL in the 'Link' box. Press '+' to enter the item into list below. Then enter the second item and URl. Press '+' to enter it to the list and so on. If you want to delete an entered item press '-'. When you have entered all the submenu items, press 'next'.

In the next window, the background color scheme and text color of the pop-down menu items appear. You can change those colors using the color boxes in the window. When you are satisfied with the appearance of the pop-down menu, press 'Finish'.

The outline of the pop-down menu appears next to your button. You can press the cursor down on the outline and drag it to position it anywhere.

Step 4: Exporting the pop-down menu to Dreamweaver

Go to Edit menu and choose 'Copy HTML Code'.

The next window asks you for the HTML editor you want to export to. Dreamweaver is the default. So click 'Next'.

Firework will now create the necessary images for the pop-down menu. So in the next window you are asked for a prefix for the image names. You can enter any prefix. I have just entered 'pop'.

Next window will ask you where you want to save the images associated with the po-down menu. I suggest that you create a new subfolder within your root folder to save these images.

Open the new subfolder and select it.

That is it. In the final window, just click 'Finish'.

Step 5: Copying the Pop-down menu into Dreamweaver.

Open the Dreamweaver document in which you want the Pop-down menu. Place the cursor where you want the menu to go. Go under the Edit menu and choose 'Copy HTML'. That is it. The Fireworks pop-down menu is pasted to your Dreamweaver document. Preview the page in a browser in order to view the pop-down menu.