AnswersSearchHelp
Boston University home page
Fireworks: Creating Navigational Graphics
 
 
 
    Our Project
 
 
 
    Up State Graphics
 
 
    Over State Graphics
 
 
 
 
    Down State Graphics
 
 
 
    Slicing
 
 
 
 
 
    Intelligent Navbar
 
 
    Integrate with DW
 
 
 
 
    Also See
   
   
   

Applying behaviors to slices

So far we have told the slices their names and how they should be exported. We have not assigned any behaviors. What are behaviors?

Behaviors are things that "happen" when you mouse over an element. A language called JavaScript makes these things happen. Fireworks will create automatically the necessary JavaScript code, so you don't have to learn JavaScript.

The behavior we will assign to the slices is called Set Nav Bar Image. We have to open the behavior panel, which is on the right of the Object panel.

We still have all slices selected so we can assign the behavior to all of them at once. In the behavior panel we need to press the plus icon .

This will give you the list of predefined behaviors shown in the screen shot on the left.

Select the Nav Bar Image behavior. A dialog window will open in which a preview of the nav bar is shown.

You can see that there are five navigational elements, namely the five slices we created earlier.
The white part on the left is not part of the navbar and therefore is not included in the behavior.

Although there is an options panel we don't have to select any of the option, we are all set. The behaviors panel will look like this:

The panel reflects the settings of the selected slices. Since all the slices we have currently selected have the same behavior Fireworks is able to display it.

If there were one slice with a different behavior attached, Fireworks would say "multiple Selections".

For now our navbar is finished and we should be able to preview the behavior before we go and export it to HTML. We will use the Fireworks internal preview.

Previewing the nav bar

Select the preview tab from the document tabs in the left upper corner. This will allow you to actually see the functionality within Fireworks. The Web layer will be displayed in the preview unless you turn it invisible. You can do that through the layers panel or the quick way by using the view portion of the tools panel.

The left selection turns the Web layer off. The right icon makes the slices visible. This feature works both in the document mode and the preview mode.

 

WebCentral UsingPublishingLearningTrainingConsultingWebCentral
AnswersSearchHelp
NIS  |  OIT  |  Boston University  |   October 24, 2002