在网页设计中，经常使用各种各样的按钮。按钮作为网页的导航元素有4种不同的状态，每种状态表示该按钮在响应鼠标事件时的一种外观。这4种状态是：

●释放状态：按钮的默认外观或静止时的外观。

●滑过状态：当指针滑过按钮时的外观。此状态提醒用户单击鼠标会引发一个动作。

●按下状态：表示单击按钮后的外观。通常使用按钮的下凹图像表示按钮已按下。

●按下时滑过状态：指针滑过处于按下状态的按钮时的外观。

下面以一个简单的实例介绍在Fireworks中制作动态按钮的步骤。

【例13-2】制作一个动态按钮。当鼠标指针经过按钮时，文本的颜色发生改变；当鼠标指针移到按钮上时，会出现说明文字；单击按钮，会打开相应的网页，效果如图13-28所示。

图13-28　动态按钮实例效果

1.新建文档

单击“文件”菜单→“新建”命令，在“新建文档”对话框中，如图13-29所示，设置宽度为80像素，高度为30像素，分辨率为72像素/英寸，设置画布的颜色为白色，最后单击“确定”按钮。

图13-29　新建文档

2.绘制按钮基本形状和改变按钮的样式

单击工具箱中的“圆角矩形”工具，在画布上拖动鼠标绘制一个圆角矩形，如图13-30所示。单击“资源”面板中的“样式”选项卡，从中选择一种样式应用于刚绘制好的圆角矩形上。

图13-30　绘制圆角矩形

3.将按钮转换为元件

右键单击按钮图形，在快捷菜单中选择“转换为元件”命令，在弹出的“元件属性”对话框中选择“类型”为“按钮”，在“名称”文本框中输入“按钮”，最后单击“确定”按钮即可将按钮转换为元件，如图13-31所示。

图13-31　“元件属性”对话框

4.添加按钮文字

选择“指针”工具，双击画布上的按钮元件进入按钮的编辑状态，此时默认为按钮的释放状态，如图13-32所示。为便于查看设置情况，可以单击工作区窗口的“还原”按钮，使工作区成为独立的窗口。

选择“文本”工具，然后在“属性”面板中设置文本的字体为“隶书”，大小为20，颜色为“白色”，样式为“粗体”，其他保持默认设置，最后输入文字“产品介绍”，再用“指针”工具调整文本位置，如图13-33所示。

图13-32　按钮释放状态

(www.daowen.com)

图13-33　在按钮中添加文本

5.设置按钮的滑过效果

选择“滑过”选项卡，单击“复制弹起时的图形”按钮，如图13-34所示。用“指针”工具选择按钮图像，在“属性”面板或工具箱中设置一种填充颜色。

6.设置按钮的按下效果

选择“按下”选项卡，单击“复制滑过时的图形”按钮。用“指针”工具选择按钮图像，在“属性”面板或工具箱中设置一种填充颜色，如图13-35所示。

图13-34　按钮滑过效果

图13-35　按钮按下效果

7.设置按钮的按下时滑过效果

选择“按下时滑过”选项卡，单击“复制按下时的图形”按钮。用“指针”工具选择按钮图像，在“属性”面板或工具箱中设置一种字体颜色，效果如图13-36所示。

8.设置按钮的活动区域和超链接

活动区域是指通过一个链接到按钮的切片对象来定义此按钮的活动的（单击）区域。选择“有效区域”选项卡，Fireworks自动为按钮创建活动区域，如图13-37所示。

图13-36　按下时滑过效果

图13-37　设置按钮的活动区域

选中切片，在“属性”面板中设置超链接。在“链接”框中输入链接的地址，例如，http：//www.taobao.com。在“替代”框中输入说明文字（如“种类繁多呀！”），在“目标”框中设置链接页面的打开方式（如设置为blank，即在新的窗口中打开链接页面），最后单击“完成”按钮。

9.调整画布大小

选中画布，在“属性”面板中单击“符合画布”按钮，使画布和图像的大小完全一致。

10.预览按钮效果

单击工具箱中的“隐藏切片和热点”按钮，然后选择文档窗口的“预览”选项卡，测试按钮。

最后，将文件导出时选择保存类型为“HTML和图像”，将HTML网页文件命名为button.htm，该文件在浏览器中的效果如图13-38所示。

图13-38　导出文件