fw_menu的使用说明——摘录

在Fireworks 4.0中定制弹出菜单（merry　2001年12月06日 09:17）随着动态交互式网页制作技术的发展，不管是商业网站或是个人网站的主页上，一般都有一个导航条，目的是为了便于浏览者能快速方便地浏览到所需的网页。在以前这都必须是具有专业的网页编程技术人员花费一定时间才能制作出来的效果，现在由于Fireworks 4.0在创建网页交互功能上新增加了制作网页弹出菜单(Pop-up menu)一项，所以使我们能够轻松地制作了。弹出菜单的制作是Fireworks 4.0中新增的一项强大的功能，利用它我们可以制作出常见的弹出菜单效果，甚至不需要花一点点的JavaScript编程技术。弹出菜单类似于应用软件中的菜单.这种结构的菜单可以非常清晰的表达出一个网站的架构，节约网页的空间，便网页显得更简洁，这将是一项非常体贴用户的设计。那么我们如何实现这个功能呢？一、制作弹出菜单 1、首先我们先来首先绘制一个作为触发的按钮，并为每个选项增加切片对象。Fireworks 4.0的弹出菜单行为与其他行为一样，只能应用在按钮对象、切片对象或是热区对象上。选择矩形工具，在画布上绘制矩形,并选择菜单 Insert->Slice插入->切片,创建矩形切片. Fireworks中交互元素包括热区和切片两大类.您也可以选择热区或切片工具创建交互元素，如图1。图1 2、为菜单导航条增加弹出菜单行为，首先必须选中按钮上的切片，打开Behaviors面版，点击"+"按钮添加弹出菜单行为命令Set Pop-Up Menu。（你还可以使用菜单命令Insert>Pop-Up Menu或单击鼠标右健，在弹出的命令列表中选择Add Pop-up Menu命令来实现。） 3、选择了增加弹出菜单命令后，Fireworks 4.0会出现弹出菜单制作向导窗口，您可以根据弹出菜单制作向导一步步地执行下去。首先出现的一个向导窗口是用来增加弹出菜单中的子菜单选项和为子菜单添加相关属性的。如图2所示：图2 （1）Menu选项：其右边有“+”、“-”二个按钮，根据Fireworks软件应用习惯，这二个按钮是用来添加或删除一个菜单选项时起作用的。（2）Text选项：定义菜单选项的内容。（3）Target选项：用来选择点击菜单选项链接时打开的窗口位置，其选项和Dreamweaver之类的网页制作软件的链接选项内容一样。（4）Link选项：用来设置菜单选项的链接属性。（5）点击菜单列表中的某一个选项,点击Outdent Menu(左移)按钮和Indent Menu(右移)按钮,可以改变菜单的层次,制作出多级菜单.下面是本文完成的多级菜单，效果如下图。利用这二个按钮可以方便的制作出如图3的多级弹出菜单。图3 （6）如果您改变了某一条菜单项中的Text选项、Target选项或是Link选项中的一些值，可以点击Change按钮确定改变。向导窗口下面的大窗口表格中显示的是弹出菜单的结构，您定义的弹出菜单的各级内容都显示在这里。在本例中我定义了Level1效果和Leve5效果这二个菜单，在Leve1效果菜单中另外还分为Leve2、Leve3、Leve4这三个子菜单，在Leve5效果菜单中也有其子菜单。您可以通过点击Menu 选项中的"+"按钮来增加菜单项，并分别设定它的链接地址和目标窗口；通过"-"按钮来删除选定的菜单项；您还可以选定一个菜单项后，修改已经填好的一些选项值，然后单击Change按钮改变它；您也可以选中一个菜单条目后上下拖动它到一个新的位置，以改变菜单的排序。当您将一个菜单项缩进时，它就自动变为下级子菜单。菜单结构设定好后就，点击Next按钮进入下一步向导窗口。 4、设置菜单样式在弹出的窗口中定义弹出菜单的外观和文字属性，这个窗口有下面这几部分组成。如下图4。图4 （1）Cell选项：该选项用来定义将来输出的弹出菜单格式，有两种格式可以选择，一种是HTML表格形式的，另一种是图片形式的。（2）Font选项：用来指定文字的字体格式的，我们可以从字体下拉列表中选择我们需要的字体。注意：如果想在弹出菜单中使用中文字体，您只能选择最后一项：Georgia，Times New Roman,Times,serif。（3）Size选项：用来定义弹出菜单中的文字大小，默认的为12象素。您可以从其下拉列表中选择合适的字体大小或是自己根据需要在输入框中输入一个字体大小数值。（4）“B”按钮、“I”按钮分别用来设定弹出菜单中应用字体的粗体和斜体。（5）Up State(Up状态)和 Over State(Over状态)用于定义菜单的对应鼠标动作的两种状态:Up状态显示鼠标没有放在菜单选项上,菜单的样式；Over状态显示鼠标放在菜单选项上,菜单的样式.Up State和Over State选项根据选择的菜单输出类型不同而存在不同的选项，分别对应HTML和图形的不同外观。在HTML样式中，左边是Up状态时的菜单外观（既菜单默认的显示状态），右边是Over状态时的菜单外观（鼠标通过时的菜单外观）。我们分别可以定义两种状态下文字和单元格的色彩。在Image样式中时，唯一不同的一点就是我们可定义菜单图片的样式，Fireworks内置了几种样式，除此外我们还可以定制自己的样式，并将它应用到我们的菜单上，通过定制菜单样式，我们可以实现更为个性化的菜单。（6）Preview选项：从该选项窗口中我们可以观察到定义的弹出菜单的外观和文字属性。（7）根据需要选定合适的弹出菜单显示样式及文字颜色和单元格颜色，点击Finish按钮完成弹出菜单的制作过程。 5、返回到弹出菜单页面，您可能会惊奇的发现，看不到做好的弹出菜单，仅仅能看到一级弹出菜单的外框图，这是因为由Fireworks 4.0制作的弹出菜单只能在浏览器中查看到最终的效果，不过你可以按F12键就能在浏览器中看到效果了。 6、将鼠标移动到弹出菜单的位置时，鼠标会变为小手的形状，您可以拖动弹出菜单到任意位置。（注：(菜单甚至可以放置在画布以外,这不影响菜单的输出。)当您取消对该带有弹出菜单行为的切片选择时，弹出菜单会隐藏，再次选择此切片时，弹出菜单会再次显示，如图5。图5 7、如果您对弹出菜单中的内容感觉不满意想再次修改菜单的内容或格式，您可以选中该切片后双击弹出菜单轮廓图，或者打开行为（Behavior）面板，双击POP-Up属性，此时弹出菜单制作向导窗口会再次出现，您可以反复多次修改，直到满意为止。 8、至此在Fireworks 4.0中所能做的弹出菜单的工作算是全部完工了，使用菜单命令File→Export输出HTML和图片到Dreamweaver本地站点的某一个文件夹，输出文件中含有一个fw_menu.js文件,该文件包含了弹出菜单的Javascript源代码。二、对弹出菜单进行整容由于个人主页的设计风格一般是随着每人认识的深入而有所改变，如果你原先制作的弹出菜单的颜色、字体、位置或大小与你目前网页的格局不太协和，那是不是要重新制作呢？其实不然，你可以在Dreamweaver对弹出菜单进行修改。在Dreamweaver中打开该HTML文件，切换至Show Code Views模式，此时您看到的将是代码模式的网页文件。我在这里用其中一段来进行说明： window.fw_menu_0_1 = new Menu("level1",66,19,"Georgia, Times New Roman, Times, serif",12,"#ff3333","#ffff66","#0066ff","#00cc66"); 菜单中"level1"所引出的子菜单的格式，"66"和"19"是指该弹出菜单的宽度，你可以根据实际需要对该值进行修改；"Georgia, Times New Roman, Times, serif"是刚才在Fireworks 4.0的向导窗口中选定的字体格式；"12"是指字体尺寸大小；"#ff3333","#ffff66","#0066ff","#00cc66"这些颜色值分别代表的是默认的弹出菜单的文字颜色、当鼠标移到弹出菜单上时文字的颜色、默认的弹出菜单的背景颜色、当鼠标移到弹出菜单上时背景的颜色。所有的这些值您都可以根据需要进行修改，然后保存一下就能在浏览器中看到修改后的效果。弹出菜单可以有完全不同的外观设置及文字属性设置，这些在Fireworks 4.0中是不能简单地定义的。（注意：弹出菜单中的同级菜单的设置标准都是相同的，不同级菜单却可以有不同的外观设置，至于如何设置大家不妨想一想，试一试，不是很难的。）当你将Fireworks 4.0中输出的弹出菜单插入HTML文档预览时，你可能会发现它并不象我们期望的那样出现在指定位置，那么我们应该如何办呢？这时你就要利用Fireworks 4.0在输出弹出菜单文件时生成的那个一个JavaScript文件了。这个Jvascript代码赋予这个层一个绝对定位，使弹出菜单和它的子菜单总是出现在同一个固定位置，当触发弹出菜单的按钮被移动到其他位置时，由于层是绝对定位的，因此这个弹出菜单就会出现在错误的位置。如果你要改变弹出菜单的位置，可以通过修改JavaScript代码来实现。在本例中：赋予弹出菜单定位的相关代码是“onMouseOver="window.FW_showMenu(window.fw_menu_0,70,121)”，数字70、120就是弹出菜单定位点的左边和顶部的坐标绝对位置，将这两个数字修改为您期望的值就可以了。如果在Fireworks 4.0中您选择的弹出菜单的样式是图片形式，那么输出的站点文件夹中就会多这么二个图片fwmenu1_114x26_over.gif、fwmenu1_114x26_up.gif，该图片是以尺寸大小来命名的。而且它在Fireworks 4.0的弹出菜单文件输出时会根据选择的字体的大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态，它在整个弹出菜单中都存在。还有一个arrows.gif文件，该文件是弹出菜单中指示下级菜单存在的箭头。我们可以将这三个文件都在Fireworks软件中打开，修改为我们所需要的样式，再将它们按原名覆盖回去。值得注意的是，Fireworks输出的菜单上的文字是真正的文本格式，我们不需要每个菜单项都有Up和Over两个状态的图片，fw_menu.js文件只是在重复利用上面的两个图片作为菜单项的背景图片。接触Fireworks 4.0久了的朋友，在制作弹出菜单时可能会注意到这样一个问题：表格边框不能自己控制，有部分颜色也不能通过向导窗口进行设置。真是令人心烦，这时你可以通过手工修改Fireworks生成的fw_menu.js文件来对弹出菜单进行细微调整。用Fireworks 4.0输出的弹出菜单文件的HTML文件中包含着控制菜单的fwLoadMenus()函数，该函数主要包括了我们在设置弹出菜单向导窗口中设定的一些参数，如字体、大小、链接地址等等，以及各级菜单的结构等这些前台显示的数据。然而真正控制菜单交互性行为的是另外的一个命名为fw_menu.js文件，它被一同输出在与该HTML同级的站点文件夹中。fw_menu.js文件里面定义了一个Menu()函数，通过它与HTML文件中的fwLoadMenus()函数相互传递参数来显示我们的弹出菜单。在此函数中设定了弹出菜单的一些缺省参数，例如：如果我们不指定字体，那么最终默认显示的就是"Arial, Helvetica, Verdana,sans-serif"这一类型的字体；如果不定义字体大小，最终显示的就是这里指定的默认12象素大小。在Dreamweaver或是其他编辑软件中打开fw_menu.js文件，在刚开始的代码中这么一段初始的定义： 代码 代码意义 function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh) {this.version = "990702 [Menu; menu.js]" 当前弹出菜单的版本号 this.type = "Menu" 菜单类型 this.menuItemHeight = mh 菜单项的高度，作用与上面菜单的宽度相类似 this.fontSize = fs||12 默认的字体大小为12象素，你可以根据自己要求改变大小 this.fontWeight = "plain" 默认的字体样式 this.menuWidth = mw 菜单项的宽度，当您可以在这儿自定义菜单项的宽度，一般情况默认的是从fwLoadMenus()函数中传递过来的值 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表格形式菜单，最终输出的菜单文件其实是以表格形式存在的，我们可以通过修改上面的这些值来改变表格的外观。如果您对您的定制结果非常满意，并希望将您设置的弹出菜单风格设置为Fireworks弹出菜单输出的默认风格，您可以将您的这个fw_menu.js文件复制到Fireworks的/ Configuration/ HTML Code/目录下，记得先将原来的文件备份一下。此外，在预览时你可能会注意到另一个问题：在浏览器中浏览弹出菜单文件时弹出菜单的弹出速度非常快，但当鼠标离开弹出菜单按钮时，弹出的菜单仍旧会留在原来的位置一段时间，而不像我们希望的那样能够立刻消失，有一种很不协调的感觉。对于这个问题你也可以通过修改fw_menu.js文件来进行解决。在JS的代码中找到下面的几句代码： setTimeout("fwDoHide()", 1000) (elapsed < 1000) setTimeout("fwDoHide()", 1100-elapsed) 这段代码是用来控制弹出菜单显示速度的。默认的数值1000表示当前的延迟时间是1秒，如果想将延迟时间修改为原来的一半，可以将上述代码里的数值减一半。不过你不要把这个延迟时间设置的太短，以避免浏览者还没有看清菜单内容，菜单内容就消失了。如果在弹出菜单的输出格式选择的图片形式的话，那么我们就可以对该图片样式进行定制。Fireworks 4.0弹出菜单的样式文件放在 /Configuration/Nav Menu目录下，文件名是Styles.stl，我们可以定制自己的样式并将它输出为单独的样式文件，然后存放在Nav Menu目录下，当再次打开弹出菜单制作向导时，我们先前定制的样式就可以在制作向导中出现，可以随意选择使用了。小结： Fireworks 4.0提供了功能非常强大的定制方法来制作弹出菜单导航条，利用Fireworks制作弹出菜单,最大的优点在于便捷和多样化，您可以在很短的时间里完成动态页面的设计，制作个性化的菜单样式，以往让网页设计师或是程序员头疼的这一部分工作如今可以通过Fireworks 4.0来轻松地解决。Fireworks制作的弹出菜单在目前的应用也有一个缺点就是生成的代码比较多,会使页面下载需要更多一点时间，这也是很少大型网站不采用的原因之一，不过这也算有得必有失吧。最后，希望这篇文章可以给您带来一个思路，一个启发，对你有所帮助。