在Fireworks4中制作弹出菜单全过程技巧大揭密-3

三、 如何在Dreamweaver中修改弹出菜单的外观及定位
　　如果在Fireworks4中您选择的弹出菜单的样式是HTML表格形式，那么输出的站点文件夹中就只会有这么几个图片：arrows.gif图片和菜单本身的图片。此外就是一个HTML文件和一个控制弹出菜单的JS文件。
4 |( i- j# o, s: w9 J" N# w　　在Dreamweaver中打开该HTML文件，切换至Show Code Views模式，此时您看到的将是代码模式的网页文件。Copy了其中一段来进行说明：
. r% ^, N) ^, g1 d; v; L: v0 W　　\"window.fw_menu_0_1 = new Menu(\"艺术字效果\",110,19,\"Georgia, Times New Roman, Times, serif\",12, \"#cccccc\", \"#ffffff\",\"#006699\",\"#009ce8\")；\"
　　这一段讲的是菜单项\"艺术字效果\"所引出的子菜单的格式，\"110\"和\"19\"是指该弹出菜单的宽度，你可以根据实际需要对该值进行修改；\"Georgia, Times New Roman, Times, serif\"是刚才在Fireworks4的向导窗口中选定的字体格式；\"12\"是指字体尺寸大小；\"#cccccc\",\"#ffffff\",\"#006699\",\"#009ce8\"这些颜色值分别代表的是默认的弹出菜单的文字颜色、当鼠标移到弹出菜单上时文字的颜色、默认的弹出菜单的背景颜色、当鼠标移到弹出菜单上时背景的颜色。所有的这些值您都可以根据需要进行修改，然后保存一下就能在浏览器中看到修改后的效果。
　　弹出菜单中的同级菜单的设置标准都是相同的，不同级菜单却可以有不同的外观设置，例如本例?quot;艺术字效果\"和\"动态字效果\"算是同级菜单，而\"卡通艺术字\"、\"变形艺术字\"和\"卷边艺术字\"也是同级菜单。\"艺术字效果\"这一级的菜单和\"卡通艺术字\"这一级菜单可以有完全不同的外观设置及文字属性设置，只要您设计得好，五颜六色的弹出菜单有什么不好吗？这些在Fireworks4中是不能简单地定义的。
6 e; V8 W. b( r3 e3 J0 W' _　　改变弹出菜单的定位。当我们将Fireworks4中输出的弹出菜单插入HTML文档预览时，我们常发现它并不象我们期望的那样出现在指定位置，特别是当插入的位置不是紧靠左和顶端的位置时，情况会显得更加糟糕。其实Fireworks4在输出弹出菜单文件时，会同时生成一个&106avascript文件，并定义一个CSS层，Jvascript代码赋予这个层一个绝对定位，这是为了确保弹出菜单和它的子菜单总是出现在同一个固定位置。但当触发弹出菜单的按钮被移动到其他位置时，由于层是绝对定位的，因此这个弹出菜单就会出现在错误的位置。
　　解决这个问题需要我们修改在Dreamweaver中插入的这个弹出菜单的&106avascript代码。
　　下图指出了弹出菜单的定位和相关代码的对应关系：
8 U& G. a& V: x7 x9 E# u/ R

8 p( M* V5 N, T0 Z3 _

/ Y7 y2 U# `- P* y　　首先我们需要选中触发弹出菜单的按钮，然后打开Dreamweaver中的Show Code Views窗口，相关的代码会高亮显示，在此代码中寻找下面的一句：
8 i+ p: n, {1 U: r1 d) X$ b+ b, D　　\"window.FW_showMenu(window.fw_menu_#,#,#)\"
7 e. `3 c! `/ l7 [4 w/ X1 {　　最后两个数字就是弹出菜单定位点的左边和顶部的坐标绝对位置，将这两个数字修改为您期望的值就可以了。
　　如果在Fireworks4中您选择的弹出菜单的样式是图片形式，那么输出的站点文件夹中就会多这么二个图片fwmenu1_114x26_over.gif、fwmenu1_114x26_up.gif，该图片是以尺寸大小来命名的。而且它在Fireworks4的弹出菜单文件输出时会根据选择的字体的大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态，它在整个弹出菜单中都存在。还有一个arrows.gif文件，该文件是弹出菜单中指示下级菜单存在的箭头。
4 t/ b" h# {. Q8 t* z& A) ]# A　　我们可以将这三个文件都在Fireworks软件中打开，修改为我们所需要的样式，再将它们按原名覆盖回去。值得注意的是，Fireworks输出的菜单上的文字是真正的文本格式，我们不需要每个菜单项都有Up和Over两个状态的图片，fw_menu.js文件只是在重复利用上面的两个图片作为菜单项的背景图片。
! [4 T' x* s8 b* T

: r0 p$ f- [7 z- w1 c- V. t! k
四、 如何定制弹出菜单
　　很一些朋友可能对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象素大小。
/ X2 ]% K" i0 [" w  i( H　　然而还有些属性是我们不能在制作向导中设定的，如果您有些基本的&106avascript知识，您完全可以自己定义它们，接下来我们来介绍一下这些可定制的弹出菜单内容。
（1） 定制外观
0 V$ A5 U2 ~, I( A　　在Dreamweaver或是其他编辑软件中打开fw_menu.js文件，在刚开始的代码中这么一段初始的定义：
4 x4 x& o0 R; s8 I5 w6 J0 c　　function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh) （　　this.version = \"990702 [Menu; menu.js]\";（当前弹出菜单的版本号，这是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表格形式菜单，最终输出的菜单文件其实是以表格形式存在的，我们可以通过修改上面的这些值来改变表格的外观。其中有几个选项的格式如下：
& V* z$ d9 h+ b& o1 V/ r4 k　　·this.fontColorHilite = fhclr||\"#ffffff\";
4 c; S8 Y6 p: ~  {. q! T　　这表示它有一个默认值，是由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也只能调用一个。
; q* p3 e4 H- \9 Q1 m　　如果您对您的定制结果非常满意，并希望将您设置的弹出菜单风格设置为Fireworks弹出菜单输出的默认风格，您可以将您的这个fw_menu.js文件复制到Fireworks的\\ Configuration\\ HTML Code\\目录下，记得先将原来的文件备份一下。
% j# C# e/ M. k, y0 c* Y- `
- A/ N3 ^2 X: E8 K