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

* _2 |7 J1 v5 M/ `0 t2 k- g二、 在Fireworks4中如何制作弹出菜单
, Q  E. P; x6 N. U5 d, d　　5、接下来进入的向导窗口是用来定义弹出菜单的外观及文字属性的。
　　如下图所示，我们将在这个窗口中定义弹出菜单的外观和文字属性，这个窗口有下面这几部分组成。

4 c& @0 Z( Z/ R8 x7 G! e3 W) G
; K# b! q" P: N- X% i* q' V. O, m　　（1） Cell选项：该选项用来定义将来输出的弹出菜单格式，有两种格式可以选择，一种是HTML表格形式的，另一种是图片形式的。需要说明的是，很多人以为使用图形格式的弹出菜单将比使用HTML格式的弹出菜单载入速度要慢许多，其实不然，不论您的图形格式的弹出菜单有多么复杂，Fireworks仅仅使用两个图片来定义它们：一个是Up状态，一个是Over状态，所以您可以根据您的实际情况挑选自己满意的弹出菜单格式。
　　（2） Font选项：用来指定文字的字体格式的，我们可以从字体下拉列表中选择我们需要的字体，此时我们会发现可选的字体种类非常少。这主要是因为我们输出的弹出菜单中的文本，不管您选择的弹出菜单是图形形式还是HTML表格形式，其实文字都是纯文本格式，我们必须考虑大多数浏览者的系统中都有的字体，以使弹出菜单的内容在大多数人的机器上都能正常显示。值得注意的是，如果想在弹出菜单中使用中文字体，您只能选择最后一项（Georgia，Times New Roman,Times,serif）。
　　（3） Size选项：用来定义弹出菜单中的文字大小，默认的为12象素。您可以从其下拉列表中选择合适的字体大小或是自己根据需要在输入框中输入一个字体大小数值。
　　（4） “B”按钮、“I”按钮分别用来设定弹出菜单中应用字体的粗体和斜体。
　　（5） Up State和Over State选项根据选择的菜单输出类型不同而存在不同的选项，分别对应HTML和图形的不同外观。
　　在HTML样式中，左边是Up状态时的菜单外观（既菜单默认的显示状态），右边是Over状态时的菜单外观（鼠标通过时的菜单外观）。我们分别可以定义两种状态下文字和单元格的色彩。
& k3 Y3 z( V; S
　　在Image样式中时，唯一不同的一点就是我们可定义菜单图片的样式，Fireworks内置了几种样式，除此外我们还可以定制自己的样式，并将它应用到我们的菜单上，通过定制菜单样式，我们可以实现更为个性化的菜单，稍候我们将介绍详细的内容。　　（6） Preview选项：从该选项窗口中我们可以观察到定义的弹出菜单的外观和文字属性。
9 A7 [4 w$ F% d" k  I& _/ F　　（7） 根据需要选定合适的弹出菜单显示样式及文字颜色和单元格颜色，点击Finish按钮完成弹出菜单的制作过程。

二、 在Fireworks4中如何制作弹出菜单
　　6、 返回到弹出菜单页面，您可能会惊奇的发现，什么也没出现，我们看不到做好的弹出菜单，仅仅能看到一级弹出菜单的外框图，这是因为由Fireworks4制作的弹出菜单只能在浏览器中查看到最终的效果，如果您等不及想看最终的结果按F12键就能在浏览器中看到效果了。
. I9 e- ]/ V3 a; T- J' H0 T- N
0 e6 m$ \  _' I* J+ h5 o　　7、 将鼠标移动到弹出菜单的位置时，鼠标会变为小手的形状，您可以拖动弹出菜单到任意位置。当您取消对该带有弹出菜单行为的切片选择时，弹出菜单会隐藏，再次选择此切片时，弹出菜单会再次显示。

8 T3 `1 o4 @7 I; N- X8 I

! e8 y9 m0 u$ f( a" P' M6 R0 c) S　　8、 如果您对弹出菜单中的内容感觉不满意想再次修改菜单的内容或格式，您可以选中该切片后双击弹出菜单轮廓图，或者打开行为（Behavior）面板，双击POP-Up属性，此时弹出菜单制作向导窗口会再次出现，您可以反复多次修改，直到满意为止。
　　9、 至此在Fireworks4中所能做的弹出菜单的工作算是全部完工了，使用菜单命令File→Export选择一个站点文件夹进行输出，具体的我们分HTML表格形式和图像形式在定制弹出菜单文件中介绍。
三、 如何在Dreamweaver中修改弹出菜单的外观及定位
　　如果在Fireworks4中您选择的弹出菜单的样式是HTML表格形式，那么输出的站点文件夹中就只会有这么几个图片：arrows.gif图片和菜单本身的图片。此外就是一个HTML文件和一个控制弹出菜单的JS文件。
' o+ o& Y6 K% d  [6 M- C" Y4 R　　在Dreamweaver中打开该HTML文件，切换至Show Code Views模式，此时您看到的将是代码模式的网页文件。Copy了其中一段来进行说明：
　　\\\"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中是不能简单地定义的。
7 {( z0 _; h1 n$ K2 C9 ^/ k; q- p& P  V　　改变弹出菜单的定位。当我们将Fireworks4中输出的弹出菜单插入HTML文档预览时，我们常发现它并不象我们期望的那样出现在指定位置，特别是当插入的位置不是紧靠左和顶端的位置时，情况会显得更加糟糕。其实Fireworks4在输出弹出菜单文件时，会同时生成一个&#106avascript文件，并定义一个CSS层，Jvascript代码赋予这个层一个绝对定位，这是为了确保弹出菜单和它的子菜单总是出现在同一个固定位置。但当触发弹出菜单的按钮被移动到其他位置时，由于层是绝对定位的，因此这个弹出菜单就会出现在错误的位置。
　　解决这个问题需要我们修改在Dreamweaver中插入的这个弹出菜单的&#106avascript代码。
　　下图指出了弹出菜单的定位和相关代码的对应关系：

. _' |2 X! f& k% V4 l' V7 [, e2 ^  X

$ V& Q" q) E2 A2 o

5 H" S5 p. Q' R5 w( T; S7 R　　首先我们需要选中触发弹出菜单的按钮，然后打开Dreamweaver中的Show Code Views窗口，相关的代码会高亮显示，在此代码中寻找下面的一句：
: v$ V3 Q6 r% S2 E% \# t　　\\\"window.FW_showMenu(window.fw_menu_#,#,#)\\\"
3 ?6 K% A3 }9 p4 Q" v　　最后两个数字就是弹出菜单定位点的左边和顶部的坐标绝对位置，将这两个数字修改为您期望的值就可以了。
9 Y2 g# o! L; w) z　　如果在Fireworks4中您选择的弹出菜单的样式是图片形式，那么输出的站点文件夹中就会多这么二个图片fwmenu1_114x26_over.gif、fwmenu1_114x26_up.gif，该图片是以尺寸大小来命名的。而且它在Fireworks4的弹出菜单文件输出时会根据选择的字体的大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态，它在整个弹出菜单中都存在。还有一个arrows.gif文件，该文件是弹出菜单中指示下级菜单存在的箭头。
5 T% C9 U% N2 {　　我们可以将这三个文件都在Fireworks软件中打开，修改为我们所需要的样式，再将它们按原名覆盖回去。值得注意的是，Fireworks输出的菜单上的文字是真正的文本格式，我们不需要每个菜单项都有Up和Over两个状态的图片，fw_menu.js文件只是在重复利用上面的两个图片作为菜单项的背景图片。