Fireworks 4 制作弹出菜单全过程（三）
四、如何定制弹出菜单 很一些朋友可能对Fireworks4生成的弹出菜单不太满意，例如表格边框不能自己控制，有部分颜色也不能通过向导窗口进行设置，诸多的不满积累起来变成了对用Fireworks4制作弹出菜单这个新增行为的反感，甚至不愿意去使用它。其实我们可以通过手工修改Fireworks生成的fw_menu.js文件来对弹出菜单进行细微调整。用Fireworks4输出的弹出菜单文件的HTML文件中包含着控制菜单的fwLoadMenus()函数，该函数主要包括了我们在设置弹出菜单向导窗口中设定的一些参数，如字体、大小、链接地址等等，以及各级菜单的结构等这些前台显示的数据。 然而真正控制菜单交互性行为的是另外的一个命名为fw_menu.js文件，它被一同输出在与该HTML同级的站点文件夹中。fw_menu.js文件里面定义了一个Menu()函数，通过它与HTML文件中的fwLoadMenus()函数相互传递参数来显示我们的弹出菜单。在此函数中设定了弹出菜单的一些缺省参数，例如：如果我们不指定字体，那么最终默认显示的就是\"Arial, Helvetica, Verdana,sans-serif\"这一类型的字体；如果不定义字体大小，最终显示的就是这里指定的默认12象素大小。 然而还有些属性是我们不能在制作向导中设定的，如果您有些基本的JavaScript知识，您完全可以自己定义它们，接下来我们来介绍一下这些可定制的弹出菜单内容。 （1） 定制外观 在Dreamweaver或是其他编辑软件中打开fw_menu.js文件，在刚开始的代码中这么一段初始的定义： function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh) （ this.version = \"990702 \";（当前弹出菜单的版本号，这是Fireworks4默认的） this.type = \"Menu\";（菜单类型） this.menuWidth = mw;（菜单项的宽度，如果不改变的话，默认的是从fwLoadMenus()函数中传递过来的值，当然您可以在这儿自定义菜单项的宽度） this.menuItemHeight = mh; （菜单项的高度，如果不改变的话，默认的是从fwLoadMenus()函数中传递过来的值，当然您可以在这儿自定义菜单项的高度） this.fontSize = fs||12;（默认的字体大小为12象素，您可以自己设置默认的值） this.fontWeight = \"plain\";（默认的字体样式） this.fontFamily = fnt||\"arial,helvetica,verdana,sans-serif \";（默认的字体类型，您可以改变这其中的字体） this.fontColor = fclr||\"#000000\";（默认的字体颜色） this.fontColorHilite = fhclr||\"#ffffff\";（默认的当鼠标移上去时高亮显示的字体颜色） this.bgColor = \"# 555555\";（默认的表格背景颜色） this.menuBorder = 1;（默认的外边框宽度值） this.menuItemBorder = 1;（默认的各单元格之间的间隔值） this.menuItemBgColor = bg||\"#cccccc\";（默认的单元格背景色） this.menuLiteBgColor = \"#ffffff\";（表格亮边框色值） this.menuBorderBgColor = \"#777777\";（表格外框颜色值） this.menuHiliteBgColor = bgh||\"#000084\";（默认的当鼠标移上去时单元格背景色） this.childMenuIcon = \"arrows.gif\";（子菜单箭头标示图片） 此部分定义了弹出菜单的一些颜色设置，当我们制作弹出菜单时，如果选择了HTML表格形式菜单，最终输出的菜单文件其实是以表格形式存在的，我们可以通过修改上面的这些值来改变表格的外观。其中有几个选项的格式如下： ·this.fontColorHilite = fhclr||\"#ffffff\"; 这表示它有一个默认值，是由fhclr变量定义的，如果您想自定义它的色彩您可以修改为： this.fontColorHilite = \"#ffffff\"; · this.menuHiliteBgColor = bgh||\"#000084\"; 该参数代表的是当鼠标移上去时单元格背景色，该值有个默认值，就是您在Fireworks4的弹出菜单向导窗口中设置的Over State中的Cell的颜色值，它通过bgh变量传递值，如果您想自定义它的色彩您可以修改为：this.menuHiliteBgColor = \"#cc0000s\"; 此外该fw_menu.js文件中还有如下两句代码需要引起注意： var defaultHeight = menu.fontSize+6;（这句代码是用来控制单元格中文字的行高值） var defaultIndent = menu.fontSize-5;（这句代码是用来控制单元格中文字的缩进值） 通过以上这些简短的介绍，我们可以看出，通过修改这个js文件，我们完全可以定制弹出菜单的外观、字体、颜色等属性。有一点需要指出 fw_menu.js文件将只被载入一次，然后浏览器将从缓存里调用它，这个23K大小的fw_menu.js文件将从浏览者进入站点后就一直放在缓存中。同理，如果我们的站点中存在多个弹出菜单，fw_menu.js也只能调用一个。 如果您对您的定制结果非常满意，并希望将您设置的弹出菜单风格设置为Fireworks弹出菜单输出的默认风格，您可以将您的这个fw_menu.js文件复制到Fireworks的\\ Configuration\\ HTML Code\\目录下，记得先将原来的文件备份一下。 （2） 定置弹出菜单的弹出速度 或许有些人会觉得在浏览器中浏览由Fireworks4生成的弹出菜单文件时，弹出菜单的显示速度并不像我们预期的那样。往往当鼠标移到弹出菜单的按钮上时，菜单的弹出速度非常快，但当鼠标离开弹出菜单按钮时，刚才触发弹出的菜单仍旧会留在原来的位置一段时间，而不像我们希望的那样能够立刻消失。其实这个问题我们依旧可以通过修改fw_menu.js文件来进行解决。在Dreamweaver 或是其他编辑器中打开该JS文件，我们找到这段代码： setTimeout(\"fwDoHide()\", 1000) (elapsed 五、小结 综上所述，可见Fireworks4提供了功能非常强大的定制方法来制作弹出菜单导航条，以往让网页设计师或是程序员头疼的这一部分工作如今可以通过Fireworks4来轻松地解决。不过每件事情只有通过自己亲手试验以后才会有更深一步的体会，希望这篇文章可以给您带来一个思路，一个启发，既然我们可以通过定制的js文件得到了制作弹出菜单的功能，我们也可以扩充Fireworks来实现更丰富的想法。这就是Fireworks软件的构想，即通过良好的可扩展性实现自身功能的不多扩充。
页:
[1]