如何用Fireworks cs5制作下拉导航条

很多网页设计人员经常会用到下拉导航，网上有很多现成的例子，下载即可使用。但是如果想和自己制作的网页比较兼容，就需要不停的进行修改设置，比较麻烦，那么有没有比较方便的方法来实现下拉导航的制作呢?今天我就来分享一下采用FIREWORKS CS5制作下拉导航(菜单)的方法

工具/原料

FIREWOKRS CS5

电脑一台

方法/步骤

1下载安装FIREWOKRS CS5(我目前电脑上已经安装)并启动软件，建议大家购买正版软件，此处不做过多说明。

2新建一个宽950像素X35像素，分辨率为72像素的画布，并且点确定，如下图二

3选择矩形工具，在画布上拖动出一个大小为950X35像素黑白渐变的图形

4渐变的颜色大家可以根据自己网页的风格进行调整)，单击属性面板中的油漆桶工具，调整颜色为红色渐变，调整完毕，画布上的矩形图形的颜色已经发生了变化。

5选择矢量工具内的文本工具，键入导航上需要显示的文字，为了演示方便，我只打了几个导航的.文字。

6下边我们开始正式制作下拉导航，也就是平时常说的下拉菜单。选择切片工具，一次切好对应的大小

7点击产品展示这个切片中心位置的圆形图形，弹出下拉菜单选择“添加弹出菜单”选项，

8选择后台在弹出的面板分别添加产品分类1，产品分类2，产品分类3等下拉菜单的文字内容。链接和打开窗口大家可以根据自己的需要手动添加即可。

9下拉导航添加完成后，在弹出菜单编辑器面板点击继续，分别进行外观、高级、及位置设置，最后点击完成。如下图2所示

10下拉导航的显示位置需要手动拖动进行简单的调整，如下图，用鼠标左键选中红色方框框选的内容，进行左右或者上下拖动，将下拉内容显示的合适的位置进行显示，此处需要进行多次调整并通过导出的页面文件进行测试，直到显示完美即可。

11回到FW主界面，在画布外的任意位置，点击鼠标右键，弹出菜单选择“全选”，全选的目的是为了保证每个切边的状态为选中。

12这里有三种全选的方法，大家可以采取任意一种：

方法1：直接在FW主界面，按下快捷键“CTRL+A”进行快速全选(图示略);

方法2：即上面提到的方法(图示略);

方法3：在画布外的任意位置，按下鼠标左键不放，拖动选择，将画布上的内容可以全部选中，如下图所示：

13导出选项如下图1，导出后的文件如下图2

14双击导出的未命名这个文件进行浏览，最终效果如下。

注意事项

用FW制作导航时，需要注意导航的风格要与网页的风格统一

制作好的导航需要应用时，记得将导出的文件需要全部完整拷贝到网页文件夹对应的目录