Search Query
January
2005

Pop-up Nav Menus in Macromedia Fireworks

I use Adobe Photoshop, and its companion program ImageReady, for a lot of different tasks. The combination will do a lot of the retouching, compositing and general Web graphics work I need, but one thing that you can’t do easily is to create pop-up menus for a Web site. You know what I’m talking about, those menus that drop down when you mouse over a button on some sites. ImageReady can make the buttons with rollover effects, but drop-down menus are not readily available. For this task I like to turn to a Photoshop competitor, Macromedia Fireworks MX 2004.

If you use Macromedia’s Dreamweaver to create Web pages, you already know what kind of handy tool it is. Fireworks works hand-in-glove with Dreamweaver; Macromedia even bundles them together, with Flash and FreeHand, in their Macromedia Studio MX 2004 suite 

Fireworks is a great program for working with Web graphics. For my example, I created a simple Web page template with a navigation bar in Photoshop. Each button on the bar is a separate layer and I saved the file as a Photoshop PSD file to preserve the layers. You can then open this file in Fireworks, although you will need to thereafter save it in Fireworks’ native format, PNG (Portable Network Graphic). The Fireworks PNG file will also preserve the layer information as well as all of the Web-related effects we are about to add.

Now is the time chop up the image into slices. This is a way of subdividing the design to allow different areas to have varying functionality. Just like in Photoshop or ImageReady, you use the Slice tool to box off the individual buttons and the logo. You can make the slice exactly as big as the buttons or they can encompass more of the nav bar. I like to do this to keep from having a lot of little images in an oddly formatted table.

Once you add the slices you will see a green overlay on top of the sliced areas and a new layer for each one under the Web Layer area of the Layers palette (Fig. 1). At this point you can take the time to name each slice layer if you like to be organized about things, but you can leave the default names if you choose. You can now select any of the slices with the pointer tool edit things like link information and alternate text in the Properties palette.

Fig. 1

This is where you can name the slice if you did not using the Layers palette, adjust the size of the slice numerically, set the file type and compression options (the pop-up menu next to the C-clamp icon). Here you see the Properties for the logo slice (Fig. 2) which I want to link back to the main page if you click it. In the Link box I typed index.html, but I could also use an absolute address beginning with http and spelling out the full domain name. You should enter some Alt text. This is the text that shows up in the browser if the image is not downloaded or the viewer is on a slow connection. This is also a great place to put some keywords for search engines. The Target field lets you specify an HTML Frame or spawn a new browser window (_blank). If you don’t use frames, you can leave this blank.

Fig. 2

Use these same settings for the ‘Home’ button and then we are ready for the cool part. We are going to add a pop-up menu to the ‘About Us’ button so that we can have multiple choices listed under the button. Select the ‘About Us’ slice and then from the menu bar pick Modify > Pop-up Menu > Add Pop-up Menu to get to the Pop-up Menu Editor. There are four tabs in the dialog box for you to fill out.

Fig. 3
In the Content tab (Fig. 3), add the Text you want to appear in the menu, the page to which it is to Link and, optionally, the Target. The plus and minus buttons at the top allow you to add or remove menu entries, the icons next to them enable you to indent some menu options. When you have these filled in to your satisfaction, click the Next button to move to the Appearance tab (Fig. 4).
Fig. 4

Here you can choose whether you want the menus to be styled using HTML tags or to use an image for the states of the menu. The image option does increase the download time slightly but looks much nicer and lets you apply some nice emboss effects. This area is also where you set the font and size of the menu text as well as the color of the normal and over states. You can also choose whether the menu pos vertically or horizontally.  When you are finished, hit Next and move on.

The Advanced tab (Fig. 5) gives you settings for borders, spacing and padding. You can set border colors and widths and a couple of other details. You can leave these settings untouched if you don’t want to futz with it.

Fig. 5

The last tab is Position (Fig. 6). This governs whether the menu pops down or up, left or right. Click one of the icons and then the Done button. Now when you have the slice selected, you will see an outline of the menu position. You can click this with the pointer tool and move it as needed. I chose to center mine under the button.

Fig. 6

Once you have set up each button as needed, you can preview it in your Web browser of choice by selecting File > Preview in Browser (F12) (Fig. 7). When you are satisfied with your work, go back to Fireworks and export the page as HTML by choosing Export from the File menu. In the Export box, select Save As HTML and Images and the other options as shown (Fig. 8).

Fig. 7
Fig. 8

While Adobe Photoshop is the best program for a lot of Web work, gems like Macromedia Fireworks MX 2004 offer useful features missing from Adobe’s programs. If you are interested in Macromedia Fireworks, download the 30-day demo from Macromedia’s Web site (www.macromedia.com). Look for the Free Trials section of the site and click on Studio MX 2004.

Paul Vaughn is a freelance graphic artist, writer and web designer. He also writes the Mac Guy column in the Business section of the Sunday Express-News newspaper. If you would like to a specific topic addressed, email Paul Vaughn at paulv@mac.com.

 

|| Home || Graphics Guy || Mac Guy || Gallery || Payment || ||


This site and all images and text contained in it are ©2006 Paul Vaughn.
(Unless otherwise noted)
Questions? Problems?