Fireworks4 弹出菜单制作全攻略

donger 
2001年 21期

#1　　一、什么是弹出菜单
　　　　弹出菜单通常是在Web页中由鼠标来触发的一种菜单导航效果，当鼠标移动到导航菜单上触发条件满足，就会显示出弹出菜单。当鼠标从导航菜单上移开，弹出菜单自动消失。触发条件既可以是鼠标通过（OnMouseOver），也可以是鼠标单击（OnClick），这种结构的菜单使我们能更加灵活地组织我们的菜单结构，而且下载时间又比较迅速。弹出菜单结构非常类似于一个表格，每一个导航菜单条目就好比一个单元格。当然，Fireworks4中提供了四种鼠标动作，还有两种是鼠标移出（OnMouseOut）和页面加载（OnLoad），但显然它们不适合用在这里，因为这通常和浏览者的浏览习惯不符合。
　　#1　　二、在Fireworks4中如何制作弹出菜单
　　　　1.首先我们来制作一个带有三个选项的菜单导航条，如^21040702a^1所示，并为每个选项增加切片对象。Fireworks4的弹出菜单行为与其他行为一样，只能应用在按钮对象、切片对象或是热区对象上。（注：在Fireworks4中按钮对象上会自动添加切片对象，因此可以直接在按钮对象上使用各种行为。）
　　　　2.为菜单导航条增加弹出菜单行为，首先必须选中一个按钮上的切片，以下列举三种方：
　　　　1）打开Behaviors面板，点击“+”按钮添加弹出菜单行为命令Set Pop-Up Menu
　　　　2）使用菜单命令Insert\Pop-Up Menu
　　　　3）单击鼠标右健，在弹出的命令列表中选择Add Pop-up Menu命令
　　　　3.选择了增加弹出菜单命令后，Fireworks4会出现弹出菜单制作向导窗口，你可以根据弹出菜单制作向导一步步地执行下去，其实过程非常的简单，仅仅只有两个步骤，为了照顾初学者，我下面将两个步骤作一个详细说明。
　　　　4.首先出现的一个向导窗口是用来增加弹出菜单中的子菜单选项和为子菜单添加相关属性的，如^21040702b^2所示。
　　　　1）Menu选项：其右边有“+”、“-”两个按钮，用来添加或删除一个菜单选项时起作用。
　　　　2）Text选项：定义菜单选项的内容。
　　　　3）Target选项：用来选择点击菜单选项链接时打开的窗口位置，其选项和Dreamweaver之类的网页制作软件的链接选项内容一样，这儿不再介绍。
　　　　4）Link选项：用来设置菜单选项的链接属性。
　　　　5）在Menu栏右的两个按钮可以控制子菜单的显示层次，分别是上一级和下一级。利用这两个按钮可以方便地制作出多级弹出菜单。
　　　　6）如果你改变了某一条菜单项中的Text选项、Target选项或是Link选项中的一些值，可以点击Change按钮确定内容改变。
　　　　制作向导窗口下面的大窗口表格中显示的是弹出菜单的结构，你定义的弹出菜单的各级内容都显示在这里。本例中我定义了艺术字效果和动态字效果这两个菜单，在艺术字效果菜单中另外还分为卡通艺术字、变形艺术字、卷边艺术字这三个子菜单，在动态字效果菜单中也有其子菜单。你可以通过点击Menu 选项中的“+”按钮来增加菜单项，并分别设定它的链接地址和目标窗口；通过“-”按钮来删除选定的菜单项；你还可以选定一个菜单项后，修改已经填好的一些选项值，然后单击Change按钮改变它；你也可以选中一个菜单条目后上下拖动它到一个新的位置，以改变菜单的排序。当你将一个菜单项缩进时，它就自动变为下级子菜单。菜单结构设定好后就，点击Next按钮进入下一步向导窗口。
　　　　5.接下来进入的向导窗口是用来定义弹出菜单的外观及文字属性的。如^21040702c^3所示，我们将在这个窗口中定义弹出菜单的外观和文字属性。
　　　　1）Cell选项：定义将来输出的弹出菜单格式。
　　　　2）Font选项：指定文字的字体格式，考虑选多数浏览者的系统中都有的字体，值得注意的是，如果想在弹出菜单中使用中文字体，建议选择最后一项（Georgia，Times New Roman，Times，serif）。
　　　　3）Size选项：定义弹出菜单中的文字大小，默认的为12像素。
　　　　4）“B”按钮、“I”按钮分别用来设定弹出菜单中应用字体的样式：粗体和斜体。
　　　　5）Up State和Over State选项根据选择的菜单输出类型的不同而存在不同的选项，分别对应HTML表格形式和图片形式的不同外观。
　　　　在HTML表格形式中，左边是Up状态时的菜单外观（即菜单默认的显示状态），右边是Over状态时的菜单外观（鼠标通过时的菜单外观）。我们分别可以定义两种状态下文字和单元格的色彩。
　　　　在图片形式中，唯一不同的一点就是我们可以定义菜单图片的样式，Fireworks内置了几种样式，除此外我们还可以定制自己的样式，并将它应用到我们的菜单上，通过定制菜单样式，我们可以实现更为个性化的菜单，稍后我们将介绍详细的内容。
　　　　6）Preview选项：从该选项窗口中我们可以预览定义的弹出菜单的外观和文字属性。
　　　　7）点击Finish按钮完成弹出菜单的制作过程。
　　　　6.返回到Fireworks4弹出菜单页面，我们暂时看不到做好的弹出菜单，仅仅能看到一级弹出菜单的外框图，这是因为由Fireworks4制作的弹出菜单只能在浏览器中查看到最终的效果，如果你等不及想看最终的结果，按F12键就能在浏览器中看到效果了。
　　　　7.将鼠标移动到弹出菜单的位置时，鼠标会变为小手的形状，你可以拖动弹出菜单到任意位置。当你取消对该带有弹出菜单行为的切片选择时，弹出菜单会隐藏，再次选择此切片时，弹出菜单会再次显示。
　　　　8.如果你对弹出菜单中的内容感觉不满意想再次修改菜单的内容或格式，可以选中该切片后双击弹出菜单轮廓图，或者打开行为（Behavior）面板，双击POP-Up属性，此时弹出菜单制作向导窗口会再次出现，你可以反复多次修改，直到满意为止。
　　　　9.至此在Fireworks4中所能做的弹出菜单的工作算是全部完工了，使用菜单命令File\Export选择一个站点文件夹进行输出，具体的我们分HTML表格形式和图像形式在定制弹出菜单文件中介绍。
　　#1　三、如何在Dreamweaver中修改弹出菜单的定位
　　　　当我们将Fireworks4中输出的弹出菜单插入HTML文档预览时，我们常发现它并不像我们期望的那样出现在指定位置，特别是当插入的位置不是紧靠页面最左和顶端的位置时，情况会显得更加糟糕。其实Fireworks4在输出弹出菜单文件时，会同时生成一个JavaScript文件，并定义一个CSS层，Jvascript代码赋予这个层一个绝对定位，这是为了确保弹出菜单和它的子菜单总是出现在同一个固定位置。但当触发弹出菜单的按钮被移动到其他位置时，由于层是绝对定位的，因此这个弹出菜单就会出现在错误的位置。
　　　　解决这个问题需要我们修改在Dreamweaver中插入的这个弹出菜单的JavaScript代码。
　　　　首先我们需要选中触发弹出菜单的按钮，然后按F10键，打开Dreamweaver中的Show Code Views窗口，相关的代码会高亮显示，在此代码中寻找下面的一句：
　　　　“window.FW_showMenu（window.fw_menu_#，#，#）”
　　　　最后两个数字就是弹出菜单定位点的左边和顶部的坐标绝对位置，将这两个数字修改为你期望的值就可以了。
　　　　如在Fireworks4中选择的弹出菜单样式是图片形式，那么输出的站点文件夹中就会多两个图片fwmenu1_114x26_over.gif、fwmenu1_114x26_up.gif，该图片是以尺寸大小来命名的。而且它在Fireworks4的弹出菜单文件输出时会根据选择的字体的大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态，它在整个弹出菜单中都存在。还有一个arrows.gif文件，该文件是弹出菜单中指示下级菜单存在的箭头。
　　　　我们可以将这三个文件都在Fireworks软件中打开，修改为我们所需要的样式，再将它们按原名覆盖回去。值得注意的是，Fireworks输出的菜单上的文字是真正的文本格式，我们不需要每个菜单项都有Up和Over两个状态的图片，fw_menu.js文件只是在重复利用上面的两个图片作为菜单项的背景图片。 
 