Macromedia Dreamweaver, Fireworks, Flash - Navigation bar overview: Creating a graphical navigation bar in Fireworks

Home > Products > Dreamweaver > Support > Linking and Navigation

Creating a graphical navigation bar in Fireworks

When you want to create a more dynamic or graphical navigation bar, Fireworks makes it easy to turn your original graphics into navigation buttons with multiple rollover states.

View a navigation bar with two rollover states for each button created in Fireworks.

Example 2: Graphical navigation bar made in Fireworks and implemented in Dreamweaver

Create a new document in Fireworks that has the same dimensions that you want for the completed navigation bar. Use the Button Editor to create a button with two rollover states as follows:

	Create or import a graphic for the button's Up state.
	Click the Over tab and modify the Up state graphic or create or import a new graphic for the button's Over state.
	Click the Active Area tab to automatically create a slice the size of the button's bounding box.
	Click the Link Wizard to attach a URL to the rollover.

For detailed information on using the Button Editor, see Creating buttons in Fireworks 3 online Help.

In the example, the button text changes color to indicate the Over state, and the gradient highlight on the button shifts to indicate the Down state. You can achieve similar effects using Live Effects to apply bevels, glows, or drop shadows to buttons. Fireworks includes Live Effects presets for the Inner Bevel and Outer Bevel effects to simplify the creation of common button appearances (see "Using bevel effects to draw button states" in Fireworks 3 online Help).

After creating the first button for a navigation bar, copy the button and modify it to create additional buttons. In the example, the LINK 1 button was copied twice, and the text and background color changed to create the LINK 2 and LINK 3 buttons.

When you've completed the button rollovers, it's easy to optimize the navigation bar graphics in GIF or JPEG format and export the navigation bar for placement on a Web page. When you export a Fireworks document, Fireworks generates the needed HTML and JavaScript to display rollovers and the HTML table containing the image slices (if used).

This excerpt from the Fireworks-generated HTML code contains the JavaScript specifying the Swap Image behavior for rollovers (and hides the Swap Image function from browsers that don't support JavaScript):

<script language="JavaScript">
<!-- hide this script from non-javascript-enabled browsers
function MM_findObj(n, d) { //v3.0
var p,i,x;if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
/* Functions that swaps images. */
function MM_nbGroup(event, grpName) { //v3.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : args[i+1];
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
if ((nbArr = document[grpName]) != null)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
}
// stop hiding -->
</script>

To place your navigation bar on a Web page, copy the HTML and JavaScript code from Fireworks directly into an HTML document in Dreamweaver or another HTML editor (see Exporting" and "Dreamweaver and other HTML editors in Fireworks 3 online Help).

Note: In addition to the simple two-state rollovers described here, you can also use Fireworks to create more advanced visual effects, such as disjoint rollovers, in which a mouse action changes the appearance of an image that is not beneath the mouse (see Creating disjoint rollovers to swap part of an image in Fireworks 3 online Help).