One of the
great new features in Macromedia Fireworks 4 is the ability
to create interactive menus practically on the fly. When I reviewed
Fireworks a couple of weeks ago, I touted this feature as one
of the best reasons to upgrade from version 3 to version 4.
I might have jumped the gun there. It seems there are some problems
with the interactive menu feature in Fireworks 4. So let's take
a look.
First off,
when you're in Fireworks itself, the interactive menu feature
is simple and very clean. If you preview it in your browser,
it works great. The problem is that when you actually use the
menus on a Web page, something nasty happens: The menu positions
are written in Fireworks with absolute positions. So, if you
move the menus on your page, they pop up in the wrong place.
Big problem. In other words, you can't really use these menus.
That is, not unless you follow ol' Doc Davey's regimen for fixing
up the JavaScript. It's a lot more labor-intensive than you
might want it to be, but it is a temporary solution while Macromedia
figures out a way to fix it on their end.
We';ll start
off by learning how to create the actual menus in Fireworks.
Then we'll look at how to use Dreamweaver to bring them into
an HTML page and fix up the positioning of the popup elements.
Creating
the menus
Creating the menus themselves is a terribly simple process.
First, just take an image and create hotspots or slices on the
areas of your image you want to trigger the popup menus. For
my example, I'm going to use a text-based navigation bar. You
can use anything you want.
Now all
you have to do is select a slice by clicking on it with the
arrow tool and then choose Insert > Pop-up Menu.
You will
get a dialog box asking you to fill in a few blanks so that
Fireworks can know what to do with your menu. Notice that in
my example below, several of the menu items are indented. This
indentation turns these items into submenus of the item above
them. You can indent again to make sub-submenus, apparently
without limit.
If you created
your menus out of order, you can just drag them around in this
dialog box to position them correctly. If any become indented
against your will, just click on the outdent button to return
them to a normal state. When you're done filling in the information,
click "Next."
All that's
left to do is pick your style. You can choose from text or images,
with a few different options for each.
Lather,
rinse and repeat for each hotspot you created on your original
image.; When you're done, you can preview your work directly
from Fireworks in your browser to make sure that everything's
right.
Of course,
as we already know—and contrary to what you see previewed
in your browser—everything is not all right. This will
become clear when you try to place your new menu into an HTML
document.
