下拉菜单全攻略 双剑合壁造弹出菜单

Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单作者：POPOEVER
, f# x. h# b0 k4 p3 G& d0 b$ ~; D　　与图形设计制作软件的龙头老大-Adobe公司的Photoshop相比，Macromedia公司的Fireworks 4(以下简称FW4)可谓短小精悍，同时，她对于网页图形制作的强大支持，也使其轻松获取了大批网页设计师的信任和追随。配合Macromedia网页制作三剑客中的另一位大名鼎鼎的剑客Dreamweaver 4(以下简称DW4)，FW4可以轻而易举地做出时下网页中甚为流行的弹出菜单(亦称下拉菜单)。如果你对DHTML网页编程不甚熟悉，看到代码就头疼，不如跟随笔者一起亲身体验FW4的魅力所在吧！
一、 在FW4中制作菜单1．制作母菜单按钮　　打开FW4，选择File菜单下的New，或者按Ctrl+N快捷键，如图一新建一个文件，尺寸200X30像素，精度72像素/英寸，背景透明。

+ W" i5 S; {4 w0 e0 @2 G

: Q( b9 N  S! V0 E　　选择Window菜单下的Tools打开工具面板，从工具面板上选择矩形工具，
9 Y5 C: t+ w' u8 G5 ~3 n3 H$ @
9 f9 s& s; n! d% \3 o- l* g
) Y/ r* P) s( h7 X
, V6 M# G$ I  M3 A! u- b# i　　画一个100X30像素大小的矩形，选择Window菜单下的Info打开信息面板，直接输入数值精确调整尺寸和位置；
& ^) e7 F$ [3 l# C9 F5 Y

' \# R& D* ~) W- O# U
' e% E! [( I8 u9 P: P选中这个矩形，Ctrl+C复制，Ctrl+V原地粘贴，这时候两个矩形重叠，将上面这个矩形拖到旁边，同样使用信息面板定位；


) Z, [* }" D+ _
, J6 y1 n3 T8 W# L, [$ W* }　　然后分别选中这两个矩形，调整它们的填充色和边框色，方法有两种，一是利用工具面板上的Color工具区里的Stroke和Fill按钮，
7 j% J+ u7 D/ F* r& q
  |( ?% o1 _, A; A  K+ p- v! O
: |  a( s/ o7 r+ c- t7 S
1 z; V3 N0 x) t4 ]' {% |* G4 j- x# }　　二是选择Window菜单下的Stroke和Fill分别打开线型面板和填充面板，在面板上选择，注意的是线型要选\"encilà1-Pixel Hard\"或\"BasicàHard Line\"(如图)，
/ `/ d& ?3 F3 J1 M

. \4 o% N6 Q. I" M! `+ o! ?# L' y, m


, o" S7 C* A  c9 `+ f- c　　这样输出后才能做出细边框效果；从工具面板上选择文字工具，输入文字，注意选择文字的平滑度为No Anti-Alias（关闭反锯齿，如图），

- d9 y  g( _( l& l) S! g

( e3 b! f7 n4 b% a0 F　　然后同时选中文字和其中一个矩形，从Modify菜单下的Align中分别选择Center Vertical和Center Horizontal来对齐文字和矩形，效果如图所示。
$ ?7 A1 _( b7 p7 M& v; p
- O5 l, [+ \* ^+ X( l
7 ?3 B! `5 T8 ]
2．制作弹出菜单条目　　同时选中对齐后的文字和矩形，选择Insert菜单下的Convert to Symbol，或在矩形上点鼠标右键，在右键菜单里选Convert to Symbol，或者按F8快捷键，在弹出对话框里的Type中选Button(按钮)，将这个矩形转换成一个按钮对象，
* j0 k& z% ~1 e: K& M" @: B- |
8 p) X! Q/ D' x- n2 b2 o$ i' J8 E$ w

. d! ]% }5 Y8 G2 d# h　　这时，将鼠标移到按钮对象中间的圆形标志上鼠标会变成手形，单击圆形标志，在弹出菜单中选择Add Pop_up Menu…，

4 a* {  F& @% H0 \# W; t

; Z5 ~" ?0 g: d3 |　　然后就可以在弹出的Set Pop-Up Menu设置窗中设置你的弹出菜单了。如下图，笔者已经设置了一些菜单条目。
4 q7 n6 d% G/ O5 u# g$ `
9 W2 |3 i( O$ A+ h$ G' C6 _9 ~
! p  Z* |1 u1 c. ~0 {+ {4 e
　　大家可以在Text中设置条目的文字名称，在Link中设置条目的链接路径，在Target中设置打开链接的目标窗口，设置完后点一下\"+\"按钮就可以生成一个菜单条目了；如果想删掉，点中条目，再点\"-\"按钮就可以删除条目；如果想修改条目设置，只需点中条目，修改各项设置后点Change按钮即可。FW4的弹出菜单是可以做多级子菜单的，只要在根菜单条目下方建立子菜单条目，然后点中子菜单条目，再点窗口上方那两个蓝色图标按钮中的右边一个Indent Menu（菜单缩进，即设为子菜单）就可以了，反之，点左边那个Outdent Menu（菜单伸出，即设为根菜单）就可以将当前的子菜单设置成上一级根菜单。大家可能发现改变菜单条目的顺序好象不方便，其实很简单，只要点住条目并拖拉到你想要的位置就可以了。设置完菜单条目后，点Next进入菜单样式设置窗。3．设置弹出菜单条目样式　　值得一提的是，菜单样式的设置可以分成两种类型，

; U- F5 R$ ]! r5 q
3 p2 h$ ^3 T" e% e
: Y* x, ?( U; e! E: D

　　一种是如前图所示的HTML模式，一种是如后图所示的Image（贴图）模式。它们的区别是，HTML模式下，菜单样式完全由代码控制，即时计算生成，显示速度当然极快，非常流畅；Image模式下，菜单条目的背景可以显示图片，每次菜单弹出时，就会即时下载背景贴图，这样对高速网络用户来说几乎感觉不到，但是对慢速网络用户，就会明显觉察到贴图下载显示的时间滞后，造成不流畅的感觉。但是由于Image模式生成的菜单可以使用漂亮的贴图，虽然FW4种提供选择的贴图样式并不多，共21种，但只要在输出后，找到这些图片，用自定义的尺寸一致图片替换掉，就可以做出完全属于自己的个性菜单，比如在贴图上打上你自己的网站LOGO等等。这里笔者选择HTML模式。样式设置窗中，Up State是用来设置菜单条目处于普通状态时的样式，Over State是用来设置鼠标移到菜单条目上时的样式。另外，Font是用来选择显示的字体，为了在网页上能清晰显示字体，建议大家在字体大小Size中选择12，\"B\"按钮是使用粗体字，\"I\"按钮是使用斜体字。样式设置将即时在下方的Preview区域中显示，完成设置后点Finish按钮生成弹出菜单。4． 调整弹出菜单位置　　如图所示，生成的弹出菜单将以蓝色线框表示，它的位置就是鼠标移到母菜单按钮上它弹出的位置，大家可以点住弹出菜单的蓝色线框，拖拉到你想要它弹出的位置，比如笔者想让它在母菜单按钮下方弹出。
& f; y8 A3 I: `" d& h1 Q
  p, C& U* S  q: F# V4 j  x  N
; S" O, s0 A$ O5 V  X- J
) w; L! G! o# W% e- C4 Q) G5．调整母菜单按钮与弹出菜单样式一致　　 有的朋友说，既然弹出菜单已经有样式了，那么母菜单怎么办？其实笔者早已想到，所以刚开始把母菜单做成了按钮对象，双击母菜单按钮对象，打开按钮对象编辑窗，自己动手改按钮的各个状态吧，这属于FW4的基本操作，笔者这里就不罗嗦了。

! Q  k5 V) c9 A: L# `; D3 l, o8 b

. }) c  j# l0 ~$ X; H6．输出弹出菜单　　 刚才一直跟着做一定很累，所以另外还有一个矩形就留给大家自己练习一下。完成后可以选择File菜单下的Export Preview，或者按Ctrl+Shift+X快捷键打开输出设置窗口。如图十七所示，在Option标签页下方的透底选项中选择Alpha Transparency，Matte（基底色）中选择你实际网页使用的背景色，这样菜单就可以和你的网页天衣无缝地融为一体。
8 g7 c. ^' Q& `" g, i+ n6 r

) K: l7 A; A* ^6 }" ]& A
+ ]0 n- T, _  r2 y　　点Export按钮，如图十八，自己设置输出路径和文件名，并选择保存类型为HTML and Images，HTML选项中选Export HTML File，Slices选项中选Export Slices，最后点保存按钮，弹出菜单就输出完成了。
4 {8 V9 Y* b, m

8 O& n+ m2 @: n- t6 B0 {
7 R2 Q2 g. Q0 u, s, J现在你可以打开你输出的HTML文件看看你的工作成果了。关掉FW4吧，下面没它的事儿了。
! ^  _9 h! q  `4 Q二、 在DW4中设置弹出菜单1． 将弹出菜单导入DW4　　 打开DW4，新建或打开一个站点（Site），在站点中新建一个HTML文件，存盘，然后选择Insert菜单下的Interactive Images中的Fireworks HTML，或者选择Window菜单下的Objects或按Ctrl+F2快捷键打开Objects（对象）面板，从面板上的Common类中选择那个Fireworks的图标（如图十九），
, N1 @# d( I# e! ?5 r& G
& v; c( W! |6 Y( S1 _/ T

在弹出的对话窗中点Browser按钮，选择你刚才FW4中输出的HTML文件，点OK按钮，刚才做好的弹出菜单就导进来了。如果你的FW4弹出菜单输出文件没有在当前的站点中，那么DW4还会问你是否要将这些文件复制到站点中来，一定要选OK，并且最好单独为这些文件在站点中建一个文件夹。现在可以按F12预览一下效果了，是不是不像想象中的那么cool？弹出菜单好象边框很粗！因为当前使用的是默认的样式。没关系，接下来就来动点小手术！2． 在DW4中重新设置菜单样式　　 如图可以看到刚才复制到站点中来的FW4弹出菜单文件中有这样一个文件--fw_menu.js，
% @0 |6 x. P* g0 f$ s3 V
8 A4 v5 B4 d; J% d9 T5 z6 Y; G
% x4 g2 V) M! c4 l
( q% f! z( t8 o2 M$ ~- v用DW4将它打开，在文件的开头部分可以看到这样一段代码：this.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\";　 注意this.后面的变量名，下面是直接影响菜单效果的变量名对应的菜单属性： menuWidth: 菜单宽度menuItemHeight : 菜单条目高度fontWeight: 菜单条目文字粗细fontFamily: 菜单条目文字字体fontSize: 菜单条目文字大小fontColor: 菜单条目文字颜色fontColorHilite: 菜单条目文字高亮色（即鼠标移到菜单上时文字的颜色）bgColor: 菜单暗边背景色menuBorder: 菜单边框宽度menuItemBorder: 菜单条目边框宽度（其实是菜单内各条目之间分隔线的宽度）menuItemBgColor: 菜单条目背景色menuLiteBgColor: 菜单亮边背景色menuBorderBgColor: 菜单边框背景色menuHiliteBgColor: 菜单条目背景高亮色（即鼠标移到菜单上时背景的颜色）childMenuIcon: 子菜单扩展标记（默认是个小黑箭头）　　 弹出菜单的样式是遵循下图中的规则的，大家可以细细研究一下，对照起来修改参数。

* `  B5 L$ n, R5 v! u
+ l" X, ?" \/ [1 a
　　由于篇幅限制，笔者在这里就不赘述了，先给出一个修改其中一些参数的样例，余下的大家可以自行测试：this.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啊！


1 l) w1 j$ N- n  T! G2 Y3 U3． 弹出菜单缩回停留时间的修改　　大家会发现弹出菜单要收回似乎要等待一两秒的时间，没关系，在fw_menu.js中找到这句代码：fwHideMenuTimer = setTimeout(\"fwDoHide()\", 1000);　　将其中的1000改成300，再找到这句代码：if (elapsed 　　将其中的1000改成300，1100改成330，存盘，再回到HTML文件按F12预览一下，是不是快多了。这些数值是以毫秒为单位的，也就是说1000代表1秒，建议这些数值不要设得太小，否则菜单收回太快会导致你点不中弹出菜单。4． 特殊效果的弹出菜单　　运用&106avascript来调用和控制CSS滤镜还可以为菜单带来意想不到的效果。在fw_menu.js中使用这样的参数设置：this.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\";　　并在下面加上一句：this.alpha = \"Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)\";　　然后找到这句：l.style.backgroundColor = menu.menuItemBgColor;　　在它下面加上一句：l.style.filter = menu.alpha;　　存盘，回到HTML文件按F12预览，效果如下图所示，是不是很有趣啊！这样的CSS滤镜还有很多，大家可以自己找一些相关资料实践一下。 顺便提一下，大家在查找代码时可以充分利用DW4的查找替换功能，在页面中按Ctrl+F快捷键调出查找替换窗，输入要查找的代码，按Find Next就可以了。
& n+ m1 x! j/ b" @  I' A
) u* V+ @+ t; Y6 Y/ M0 {+ X! }: E
" l3 k9 t% Z) o- _' s/ r
+ `9 Q( ~/ l' A' E% N4 D: O8 Q　　好了，写到这里写意正浓，但不得不罢笔，免得小编骂我骗稿费，有什么不清楚的大家可以给电脑报的栏目编辑去e-mail询问。　　下一篇我们将讲如何用Flash来制作下拉菜单。
[color=red'][1]