网页制作技术——Dreamweaver Flash Fireworks 作者 赵丰年 第4章.pptVIP

（9）在组合图形内输入文字“welcome”。 （10）用“矩形”工具 在刚组合的图形下绘制一个宽度与组合图形相同，高度到底的矩形，在矩形内绘制几条直线（代表文字），并在矩形右小角绘制两条曲线路径（作为修饰性花边），如图4.48 所示。 图4.18 设置动画帧延时 （10）单击“导出”按钮将文件导出，然后保存文档，之后按【F12】键即可在浏览器中预览动画效果。 如果要将动画应用到网页中，请启动 Dreamweaver，打开需要插入动画的网页，在“插入”栏的“常用”选项卡中单击“图像”按钮 将动画插入到网页中即可。 4.3.2 制作按钮 以下通过一个简单实例说明在 Fireworks 中制作按钮的步骤。 （1）按【Ctrl + N】键新建一个文档，在“新建文档”对话框中设置宽度为 80 个像素，高度为 30 个像素，分辨率为 72 像素/英寸，设置画布的颜色为“白”，最后单击“确定”按钮。 （2）单击“工具”面板上的“圆角矩形”工具 ，然后在“属性检查器”中的“矩形圆度”框中输入“60”，在画布上拖动鼠标绘制一个圆角矩形。 （3）单击“资源”面板中的“样式”选项卡，然后选择一种样式应用于刚绘制好的圆角矩形，如图4.19 所示。 图4.19 给按钮图形应用样式 在 Fireworks 中，用户可以通过使用样式将统一的外观应用到任何对象上，样式可以包含许多信息，如笔画、填充、颜色、字体和特效等。在此步骤中还可以在“属性检查器”设置一些特殊的效果，如斜角、浮雕、阴影等。 （4）按【F8】键将圆角矩形转化为按钮元件，在弹出的“元件属性”对话框中选择“类型”为“按钮”，在“名称”文本框中输入“按钮”，最后单击“确定”按钮，如图4.20 所示。 图4.20 “元件属性”对话框 （5）用“指针”工具 双击画布上的按钮元件进入按钮的编辑状态，此时默认是按钮的“释放”帧状态，如图4.21 所示。 图4.21 “按钮”编辑器 （6）单击“工具”面板上的“文本”工具 ，然后在“属性检查器”中设置文本的字体为“华文行楷”，大小为“18”，颜色为“白色”，样式为“粗体” ，其他设置保持默认，最后输入文字“游戏厅”，用“指针”工具 调整文本位置，如图4.22 所示。 图4.22 按钮“释放”状态 （7）单击“滑过”标签，并单击窗口右下角的“复制弹起时的图形”按钮。用“指针”工具 选择按钮图像，在“属性检查器”中或“工具”面板中设置一种填充颜色（其十六进制值为 #CC00FF）。 （8）单击“按下”标签，并单击窗口右下角的“复制滑过时的图形”按钮。用“指针”工具 选择按钮图像，在“属性检查器”中或“工具”面板中设置一种填充颜色（其十六进制值为 #FF00FF）。 （9）单击“完成”按钮，然后选择“修改”菜单中“画布”命令，然后在子菜单中选择“符合画布”命令。 （10）单击“工具”面板中的“隐藏切片和热点”按钮 ，然后单击文件窗口的左上角的“预览”标签，将鼠标移动到按钮上并在按钮上单击鼠标左键预览按钮的效果，如图4.23 所示。 图4.23 预览按钮效果 释放状态 滑过状态 按下状态 （11）按【Ctrl + S】键，在弹出的“另存为”对话框中输入一个文件名，按“保存”按钮将文件保存。 4.3.3 制作翻转图 翻转图是一些可以在浏览器中显示的图形，当鼠标移动到这些图形上或单击这些图形时，就会发生图像的替换效果。 例如，图4.24 就显示了翻转图的效果（鼠标移动到下面和右边的图标时，也会显示相应图片）。 初始状态 鼠标移到上面图标时 鼠标移到左边图标时 图4.24 翻转图效果 4.3.4 制作弹出菜单 4.4 绘 制 图形 4.4.1 绘图工具概览 图4.39 绘制矢量图形工具 4.4.2 绘制页面草图 1．什么是页面草图 2．页面草图实例——轮廓图 在 Fireworks中使用各种绘图工具可以轻松地进行网页草图的绘制，例如，图4.43 所示的就是一个用 Fireworks 绘制的草图。该草图是一个网页的轮廓，可以作为进一步设计的基础，也可直接作为“跟踪图像”来指导网页制作。 图4.43 页面草图最终效果 绘制该页面草图的步骤如下。 （1）新建一个宽度为 750 像素、高度为 700 像素、画布颜色为白色的文档。 （2）单击“工具”面板中的“矩形”工具 ，设置“笔触”颜