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

5.调整母菜单按钮和弹出菜单样式一致
有的朋友说,既然弹出菜单已有样式了,那么母菜单怎么办?其实笔者早已想到,所以刚开始把母菜单做成了按钮对象,双击母菜单按钮对象,打开按钮对象编辑窗,自己动手改按钮的各个状态吧,这属于FW4的基本操作,笔者这里就不罗嗦了。

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

点Export按钮,如图十八,自己配置输出路径和文档名,并选择保存类型为HTML and Images,HTML选项中选Export HTML File,Slices选项中选Export Slices,最后点保存按钮,弹出菜单就输出完成了。

现在您能够打开您输出的HTML文档看看您的工作成果了。关掉FW4吧,下面没他的事儿了。
二、 在DW4中配置弹出菜单
1. 将弹出菜单导入DW4
打开DW4,新建或打开一个站点(Site),在站点中新建一个HTML文档,存盘,然后选择Insert菜单下的Interactive Images中的Fireworks HTML,或选择Window菜单下的Objects或按Ctrl+F2快捷键打开Objects(对象)面板,从面板上的Common类中选择那个Fireworks的图标(如图十九),

在弹出的对话窗中点Browser按钮,选择您刚才FW4中输出的HTML文档,点OK按钮,刚才做好的弹出菜单就导进来了。假如您的FW4弹出菜单输出文档没有在当前的站点中,那么DW4还会问您是否要将这些文档复制到站点中来,一定要选OK,并且最好单独为这些文档在站点中建一个文档夹。现在能够按F12预览一下效果了,是不是不像想象中的那么cool?弹出菜单好象边框很粗!因为当前使用的是默认的样式。没关系,接下来就来动点小手术!
|