Fireworks轻松打造下拉导航条

　　Fireworks MX 2004 中的新增功能可以帮助我们非常方便地在网站上添加图形和交互元素。对于对不太熟悉和了解代码编写或JavaScript的新手来说，Fireworks MX 2004 可以最大限度地提高工作效率。

　　今天我们用Fireworks MX 2004来设计一个很酷的弹出式下拉菜单，不需要掌握javascript编程语言，你只需要按照我给你的步骤做下去，你就可以随心所欲地制作自己的弹出式下拉菜单了。文章末尾提供原文件供大家下载参考。

　　完成页面如下：（将鼠标移动到灰色按钮上即可出现下级菜单）

　　对于第一个按钮“设计在线”，鼠标右键单击按钮上的切片，选择“添加弹出菜单”，弹出一个窗口如图：

　　这是一个弹出菜单编辑器，可以对弹出的菜单进行内容、外观、高级和位置四个选项的设置。

　　首先进行内容的编辑，单击“ ”号按钮，添加一个连接内容，在文本字段中输入“网页陶吧”四个字，在链接字段中输入你要链接的网页名称，如web.html，在目标字段中选择web.html页面的显示目标，有_self、_blank、_father等选项，分别代表在原窗口中显示、在新建窗口中显示和在父窗口中显示，读者可以根据自己的需要进行选择。接下来要进行外观的设置，在外观设置窗口中可以对链接进行链接样式（有html格式和图像格式两种选择）设置，菜单样式（有垂直菜单和水平菜单两种选择）设置，链接文字的字体、大小、颜色等进行设置，以及单元格的边框、背景、鼠标滑过时的背景等选项进行设置。这里不妨选择html格式的链接样式和水平菜单的菜单样式，选择宋体字体、居中对齐，然后对弹起状态和滑过状态的文本颜色和单元格颜色进行分别设置，弹起状态文本颜色设为#CCCCCC，滑过状态时文本颜色为#FFFFFF白色，弹起状态单元格背景颜色为#737E90,滑过状态时背景色为#464F5B。外观设置好后接下来对外观进行高级设置，参数窗口如图：

　　选择单元格宽度为65像素，高度为20像素，但与各边框、文字缩进和单元格间距都为0，边框宽度为1，边框颜色为白色，阴影和高亮都选择深色，效果如上图。接下来要进行位置的设置，单击位置设置第二个按钮，将弹出菜单设置在底部，其中有位置的数字定位，在这种情况下X=0，Y=25，读者可根据按钮的高度设置Y值，使之达到最佳效果。另外，读者可以根据自己的爱好设置菜单的外观，包括菜单上的字体、大小、颜色和对齐方式，也可以设置单元格边框以及背景的属性以及鼠标滑过时的字体颜色和单元格背景等属性。除此之外，读者还可以尝试换一种链接样式和菜单样式进行设计，如果你选则的是图像样式的链接样式，你可以根据自己的喜好选择Fireworks自带的多种按钮作为背景，而且你还可以改变菜单样式为垂直样式，以达到你的要求。

　　如此进行上面的步骤，可以分别制作各个按钮的下拉弹出菜单。在这个步骤中，你不需要重新设置菜单的外观、高级和位置等属性，Fireworks MX 2004已经把你制作第一个按钮的弹出菜单的样式记忆了下来，你只需要经过简单的操作便可以完成设计。

　　把所有按钮的下拉菜单制作好后你的工作便完成了90%，最后的工作便是导出你的作品。

　　进入文件－〉导出向导，选中导出格式单选按钮，进入下一步，选中网站单选按钮单击继续按钮，得到分析结果，直接单击退出，系统会告诉你切片将被忽略，此时你需要关闭“导出向导”窗口，直接右键单击任意一个切片，选择导出所选切片如图：

　　弹出导出窗口，保存类型选项选择“ＨＴＭＬ和图像”，选中“将图像放入子文件夹”复选框，这个子文件夹你可以浏览并选择或者创建，输入导出文件的名称如：Myfirst，单击保存按钮，一切OK

　　到此为止，弹出式下拉菜单的制作宣告完成，赶快去体验一下效果吧，打开资源管理器，浏览你刚才保存文件的文件夹，你会发现一个js文件，这个js文件就是你刚才导出文件时自动生成的javascript脚本文件，不能把它搞丢了。单击名为Myfirst的网页文件，把鼠标放到任何一个按钮上，怎么样，效果是不是很棒？！原文件下载