Step 1


Open your .png template in Fireworks and 'show' all the slices by selecting 'layers > web layer'. All your slices will be highlighted in light green.

Step 2


Select the navigation button you wish to add a drop-menu to. Lets say, we select the 'Products' button. This will now have a blue border around the button.

Step 3


From the top menu choose 'Insert > Pop-Up menu or right-click on the selected button and choose 'Add Pop-Up'. The Pop-up menu wizard will appear.

Step 4


In the text field, enter the name of your first menu item.

In the example above, we have entered 'product 1'. You can also add the link of the text in the link field. Click the + button above to enter this first drop-menu item in your list.

Step 5


Repeat the same steps for adding further menu items. We have added 4 more.

Step 6


Click 'next' to continue. In the next Pop-Up screen, you can customize the appearance and colors of your drop-menu. By default the colors should already be generated if you have a pop-up menu elsewhere on the template. If not, you will have to define the 'upstate' and 'overstate' colors. Stick to the colors of the template.

Step 7


Click 'Finish' to complete the wizard and create the menu for you.

If the drop-menus seem out of alignment beneath the navigation buttons, you can click on the menu to drag it until you feel that it is correctly aligned. This should be done with 'web layers' selected.

Step 8

Preview the .png template in I.E. from Fireworks, by choosing 'file > preview in browser'.



Once you preview the menu in the browser (from Fireworks) in IE (click View > Source) ..... Notepad or Word for Windows will open, at the top of the html (about 4th line) you will see the function code: 'fwLoadMenus' that begins with:

<script language="JavaScript">

Copy the code from here to just before the head closing tag:

<script language="JavaScript1.2" src="fw_menu.js"></script>

And paste to replace the same code found in the Dreamweaver template. Don't export the entire layout, only preview the code in the browser and cut and paste the code to the Dreamweaver template.

Alternatively, try to figure out the following code that we have used for our example:

Navigation

Products >
Product 1
Product 2
Product 3
Product 4
Product 5

<script language="JavaScript">
<!--
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;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0 = new Menu("root",81,17,"Verdana, Arial, Helvetica, sans-serif",10,"#ffffff","#ffffff","#9999cc","#6b59a5");
fw_menu_0.addMenuItem("About Us");
fw_menu_0.addMenuItem("Our Team");
fw_menu_0.addMenuItem("Our Vision");
fw_menu_0.hideOnMouseOut=true;
window.fw_menu_1 = new Menu("root",80,18,"Verdana, Arial, Helvetica, sans-serif",10,"#ffffff","#ffffff","#9999cc","#6b59a5");
fw_menu_1.addMenuItem("Product 1","location='product-1-page.htm'");
fw_menu_1.addMenuItem("Product 2","location='product-2-page.htm'");
fw_menu_1.addMenuItem("Product 3","location='product-3-page.htm'");
fw_menu_1.addMenuItem("Product 4","location='product-4-page.htm'");
fw_menu_1.hideOnMouseOut=true;
window.fw_menu_2 = new Menu("root",104,17,"Verdana, Arial, Helvetica, sans-serif",10,"#ffffff","#ffffff","#9999cc","#6c59a6");
fw_menu_2.addMenuItem("Training");
fw_menu_2.addMenuItem("Consulting");
fw_menu_2.addMenuItem("Other Services");
fw_menu_2.hideOnMouseOut=true;

fw_menu_2.writeMenus();
} // fwLoadMenus()

//-->
</script>
<script language="JavaScript1.2" src="fw_menu.js"></script>
</head>

Step 9


The final part.

In the same Notepad code, scroll down until you come to the 'mouseover code' of the button with drop-menu you just created that begins with:

<a href="#" onMouseOut="MM_swapImgRestore();FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_1,130,97);MM_swapImage

Note the variables '1,130,97' . The first variable '1' represents the menu, in this example it is the second menu (first one is always 0). The second variable '130' represents the distance to the drop-menu from the left-margin. '97' represents the distance to the drop-menu from the top-margin.

It is the second variable '130' or whatever it is for that particular button that you need to alter if the drop-menu is not aligned correctly in the .dwt template. Try increasing or decreasing this number to align the menu correctly, e.g. you can increase the variable to 140 or decrease to 120.

Copy and paste to replace the existing mouseover code in the .dwt template in Dreamweaver. A good way to do this is to select the navigation button in the .dwt template and then switch to code view. You will see that the code for the navigation button is highlighted, replace the 'mouseover' code just before this.

In the .dwt template the final mouseover code for the navigation button would look like:

<a href="#" onMouseOut="MM_swapImgRestore();FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_1,130,97); MM_swapImage('products','','../images/products_f2.jpg',1)" ><img name="products" src="../images/products.jpg" width="90" height="22" border="0"></a>

Remember, all you need to do is copy paste the code to the Dreamweaver template. Don't export the entire template. Find the same function in the Dreamweaver template and replace it with the above codes.

Ensure that your Javascript file named 'fw_menu.js' is located in the same path as your htm files. If you are creating menus from scratch and you do not have a Javascript file, then you will need to export the modified template as 'html and images' to a temporary folder, extract the Javascript file and place it in your main root site folder.