下拉菜单全攻略之Fireworks篇(二)

　　一种是如前图所示的HTML模式，一种是如后图所示的Image（贴图）模式。它们的区别是，HTML模式下，菜单样式完全由代码控制，即时计算生成，显示速度当然极快，非常流畅；Image模式下，菜单条目的背景可以显示图片，每次菜单弹出时，就会即时下载背景贴图，这样对高速网络用户来说几乎感觉不到，但是对慢速网络用户，就会明显觉察到贴图下载显示的时间滞后，造成不流畅的感觉。但是由于Image模式生成的菜单可以使用漂亮的贴图，虽然FW4种提供选择的贴图样式并不多，共21种，但只要在输出后，找到这些图片，用自定义的尺寸一致图片替换掉，就可以做出完全属于自己的个性菜单，比如在贴图上打上你自己的网站LOGO等等。这里笔者选择HTML模式。样式设置窗中，Up State是用来设置菜单条目处于普通状态时的样式，Over State是用来设置鼠标移到菜单条目上时的样式。另外，Font是用来选择显示的字体，为了在网页上能清晰显示字体，建议大家在字体大小Size中选择12，\"B\"按钮是使用粗体字，\"I\"按钮是使用斜体字。样式设置将即时在下方的Preview区域中显示，完成设置后点Finish按钮生成弹出菜单。
4． 调整弹出菜单位置
　　如图所示，生成的弹出菜单将以蓝色线框表示，它的位置就是鼠标移到母菜单按钮上它弹出的位置，大家可以点住弹出菜单的蓝色线框，拖拉到你想要它弹出的位置，比如笔者想让它在母菜单按钮下方弹出。
$ d* l. b1 ~) ]1 z
/ c9 c- L. v6 f8 `9 `

5．调整母菜单按钮与弹出菜单样式一致
　　 有的朋友说，既然弹出菜单已经有样式了，那么母菜单怎么办？其实笔者早已想到，所以刚开始把母菜单做成了按钮对象，双击母菜单按钮对象，打开按钮对象编辑窗，自己动手改按钮的各个状态吧，这属于FW4的基本操作，笔者这里就不罗嗦了。
) i- x, k% C6 m/ y" y
/ R3 Y$ |0 R$ p3 `
" L, P6 f1 g7 J) `( q
0 U( Q4 a% X( {! w/ ^6．输出弹出菜单
( Z& U% {5 W- o8 E( I　　 刚才一直跟着做一定很累，所以另外还有一个矩形就留给大家自己练习一下。完成后可以选择File菜单下的Export Preview，或者按Ctrl+Shift+X快捷键打开输出设置窗口。如图十七所示，在Option标签页下方的透底选项中选择Alpha Transparency，Matte（基底色）中选择你实际网页使用的背景色，这样菜单就可以和你的网页天衣无缝地融为一体。

( @! B) W: m# }" H8 ~
6 a- n2 C1 h& A, Z
0 r/ G8 W1 D9 |; z% f8 q　　点Export按钮，如图十八，自己设置输出路径和文件名，并选择保存类型为HTML and Images，HTML选项中选Export HTML File，Slices选项中选Export Slices，最后点保存按钮，弹出菜单就输出完成了。
% L6 Y& I% y! d+ @

) o, P/ b& H7 H/ V
现在你可以打开你输出的HTML文件看看你的工作成果了。关掉FW4吧，下面没它的事儿了。
) A9 q8 K- X) T  i: T; F二、 在DW4中设置弹出菜单
1． 将弹出菜单导入DW4
$ L! V! h. B/ G8 |　　 打开DW4，新建或打开一个站点（Site），在站点中新建一个HTML文件，存盘，然后选择Insert菜单下的Interactive Images中的Fireworks HTML，或者选择Window菜单下的Objects或按Ctrl+F2快捷键打开Objects（对象）面板，从面板上的Common类中选择那个Fireworks的图标（如图十九），
1 m$ y& i: s4 o" L; {
  D; g1 T+ l5 T' j5 |; R0 n4 C
  P" R2 O, q7 l5 `% C  |
- \# U6 e3 h4 L9 g0 K  e在弹出的对话窗中点Browser按钮，选择你刚才FW4中输出的HTML文件，点OK按钮，刚才做好的弹出菜单就导进来了。如果你的FW4弹出菜单输出文件没有在当前的站点中，那么DW4还会问你是否要将这些文件复制到站点中来，一定要选OK，并且最好单独为这些文件在站点中建一个文件夹。现在可以按F12预览一下效果了，是不是不像想象中的那么cool？弹出菜单好象边框很粗！因为当前使用的是默认的样式。没关系，接下来就来动点小手术！
2． 在DW4中重新设置菜单样式
* R& _1 M" C+ E　　 如图可以看到刚才复制到站点中来的FW4弹出菜单文件中有这样一个文件--fw_menu.js，

& R/ F2 D! Q  R% z) ~0 B. S

用DW4将它打开，在文件的开头部分可以看到这样一段代码：
4 q# \9 R& @  J$ Wthis.menuWidth = mw;this.menuItemHeight = mh;this.fontSize = fs||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.menuContainerBgColor = \"#cccccc\";this.childMenuIcon = \"arrows.gif\";
- C) {2 n3 b2 ]0 B4 b$ W　 注意this.后面的变量名，下面是直接影响菜单效果的变量名对应的菜单属性：
menuWidth: 菜单宽度menuItemHeight : 菜单条目高度fontWeight: 菜单条目文字粗细fontFamily: 菜单条目文字字体fontSize: 菜单条目文字大小fontColor: 菜单条目文字颜色fontColorHilite: 菜单条目文字高亮色（即鼠标移到菜单上时文字的颜色）bgColor: 菜单暗边背景色menuBorder: 菜单边框宽度menuItemBorder: 菜单条目边框宽度（其实是菜单内各条目之间分隔线的宽度）menuItemBgColor: 菜单条目背景色menuLiteBgColor: 菜单亮边背景色menuBorderBgColor: 菜单边框背景色menuHiliteBgColor: 菜单条目背景高亮色（即鼠标移到菜单上时背景的颜色）childMenuIcon: 子菜单扩展标记（默认是个小黑箭头）
　　 弹出菜单的样式是遵循下图中的规则的，大家可以细细研究一下，对照起来修改参数。
1 v7 k  A: c" n  _/ O6 l0 c. u( L

: `: M8 D, `2 f' [& P
3 h* ^4 m$ s* p9 m# K　　由于篇幅限制，笔者在这里就不赘述了，先给出一个修改其中一些参数的样例，余下的大家可以自行测试：
" ~) j+ ^: [! T4 I& Bthis.bgColor = \"#000000\";this.menuBorder = 1;this.menuItemBorder = 1;this.menuItemBgColor = bg||\"#cccccc\";this.menuLiteBgColor = \"#000000\";this.menuBorderBgColor = \"\";this.menuHiliteBgColor = bgh||\"#000084\";this.menuContainerBgColor = \"#cccccc\";this.childMenuIcon = \"arrows.gif\";
　　 存盘，回到菜单的HTML文件，F12预览，菜单样式已经发生了变化，菜单边框变细致了，是不是很cool啊！

. r2 @0 ]: M! s2 _" B/ x1 d% h

3． 弹出菜单缩回停留时间的修改
　　大家会发现弹出菜单要收回似乎要等待一两秒的时间，没关系，在fw_menu.js中找到这句代码：
9 N: v- w) ]; lfwHideMenuTimer = setTimeout(\"fwDoHide()\", 1000);
5 ~) U8 G. ^5 D4 ?2 p　　将其中的1000改成300，再找到这句代码：
* [& B: H, H* H' F8 lif (elapsed < 1000) {fwHideMenuTimer = setTimeout(\"fwDoHide()\", 1100-elapsed);return;}
% m. p# |! u$ K4 u9 h0 c$ d, H　　将其中的1000改成300，1100改成330，存盘，再回到HTML文件按F12预览一下，是不是快多了。这些数值是以毫秒为单位的，也就是说1000代表1秒，建议这些数值不要设得太小，否则菜单收回太快会导致你点不中弹出菜单。4． 特殊效果的弹出菜单
　　运用&106avascript来调用和控制CSS滤镜还可以为菜单带来意想不到的效果。在fw_menu.js中使用这样的参数设置：
( f( P7 ?9 n5 zthis.bgColor = \"\";this.menuBorder = 3;this.menuItemBorder = 3;this.menuItemBgColor = bg||\"#cccccc\";this.menuLiteBgColor = \"\";this.menuBorderBgColor = \"\";this.menuHiliteBgColor = bgh||\"#000084\";this.menuContainerBgColor = \"#cccccc\";this.childMenuIcon = \"arrows.gif\";
2 E( z- k7 D: U0 p) y　　并在下面加上一句：
! |% k" j$ I% J: a, |2 f7 d  N$ Ethis.alpha = \"Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)\";
: c# L4 f! [. j1 K% m/ D9 |/ s3 t# r% }　　然后找到这句：
l.style.backgroundColor = menu.menuItemBgColor;
　　在它下面加上一句：
l.style.filter = menu.alpha;
0 f2 u/ n+ ]& Y' t9 ?　　存盘，回到HTML文件按F12预览，效果如下图所示，是不是很有趣啊！这样的CSS滤镜还有很多，大家可以自己找一些相关资料实践一下。 顺便提一下，大家在查找代码时可以充分利用DW4的查找替换功能，在页面中按Ctrl+F快捷键调出查找替换窗，输入要查找的代码，按Find Next就可以了。
4 {: c8 F( N2 J4 W

" T+ d7 r4 \  m8 I* g
?
?