下拉菜单全攻略之Fireworks篇-2

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


' J: M- M* `! _. p2 l
/ T, P# ^0 A1 `5．调整母菜单按钮与弹出菜单样式一致　　 有的朋友说，既然弹出菜单已经有样式了，那么母菜单怎么办？其实笔者早已想到，所以刚开始把母菜单做成了按钮对象，双击母菜单按钮对象，打开按钮对象编辑窗，自己动手改按钮的各个状态吧，这属于FW4的基本操作，笔者这里就不罗嗦了。

5 x- l4 q5 q0 H% F: m; W% P

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

% ]& ~) [7 q- r- C- l4 A& W
; l* V6 I8 b/ }
" x: {7 f" O: \# }- \7 ]: `* W　　点Export按钮，如图十八，自己设置输出路径和文件名，并选择保存类型为HTML and Images，HTML选项中选Export HTML File，Slices选项中选Export Slices，最后点保存按钮，弹出菜单就输出完成了。
2 K% t6 U! `7 u/ V* ]1 t2 n; v; T  P


" @' N) R+ @/ j- z# {% A. D现在你可以打开你输出的HTML文件看看你的工作成果了。关掉FW4吧，下面没它的事儿了。
二、 在DW4中设置弹出菜单1． 将弹出菜单导入DW4　　 打开DW4，新建或打开一个站点（Site），在站点中新建一个HTML文件，存盘，然后选择Insert菜单下的Interactive Images中的Fireworks HTML，或者选择Window菜单下的Objects或按Ctrl+F2快捷键打开Objects（对象）面板，从面板上的Common类中选择那个Fireworks的图标（如图十九），


# J8 |5 _7 A/ x% ^; u7 }; b
, i0 ]! C" J6 |" E  k在弹出的对话窗中点Browser按钮，选择你刚才FW4中输出的HTML文件，点OK按钮，刚才做好的弹出菜单就导进来了。如果你的FW4弹出菜单输出文件没有在当前的站点中，那么DW4还会问你是否要将这些文件复制到站点中来，一定要选OK，并且最好单独为这些文件在站点中建一个文件夹。现在可以按F12预览一下效果了，是不是不像想象中的那么cool？弹出菜单好象边框很粗！因为当前使用的是默认的样式。没关系，接下来就来动点小手术！