1、第 10 章 网页制作基础知识Fireworks 界面的 认识及其工具面板和属性的使用Flash 界面的认识及工具面板、时间轴和属性的使用熟练掌握 Fireworks 工具面板的使用熟练掌握 Fireworks 制作简单的图像了解图像文件的导出与优化方法熟练掌握 Flash 工具面板的使用掌握使用 Flash 创建运动和变形动画的方法掌握 Dreamweaver 与 Fireworks 和 Flash 的调用方法使用 Fireworks 制作广告词使用 Fireworks 对图像进行优化使用 Flash 制作运动动画和变形动画10.1 图像的制作与优化对于网页来说，图像和动画的精美漂亮是网页制
2、作成功的关键，Macromedia 公司除了提供 Dreamweaver 这个专业的网页制作工具外，还提供了图像制作工具 Fireworks 和动画制作工具 Flash。10.1.1 Fireworks 8.0 简介Fireworks 是集创建、编辑和优化图像为一体的软件，它不仅可以创建、编辑位图和矢量图，而且可以优化图像。运行 Fireworks 8.0 以后看到操作界面，其 顶 部 是 菜 单 栏 ， 包 含 了 该 软 件 中 大 部 分 的 命 令选 项 。 左 侧 是 工 具 箱 ， 其 中 的 按 钮 用 来 对 图 形 、 图 像 、 颜 色 和 文 本 等 对 象 进 行 编
3、辑 处 理 ； 中 间 是171“起始页”对话框；右侧是功能面板的组合；底部是“属性”面板，用来设置当前所编辑对象的各项属性参数，如 图 10-1 所 示 。图 10-1 Fireworks 8.0 操作界面10.1.2 制作漂亮的广告词使用 Fireworks 制作漂亮的广告文字 “保护水资源，生命真永远。 ”。打开 Fireworks 8.0 的操作界面，在“起始页”对话框中单击“Fireworks 文件”选项，打开“新建文档”对话框，或执行【文件】【新建】菜单命令打开“新建文档”对话框，按照 图 10-2 所示的内容进行设置。图 10-2 新建文档功能面板组合工具箱属性面板菜单栏起始页1
4、单击2新建文档画布参数3单击172单击“确定” 按钮后，打开新建文档窗口，如 图 10-3 所示。图 10-3 新建文档窗口在 Fireworks 8.0 操作界面的左侧工具箱中单击“文本”工具按钮 ，在新建文档的窗口中单击鼠标左键，输入如 图 10-4 所示的文本。图 10-4 在文档中输入文本选中输入文字，在“ 属性”面板的“字体”下拉列表中选择“华文新魏”，在“大小”选项文本框内输入“62 ”。在“颜色” 调 色板中选择黑色“ #000000”，并且单击字体加粗按钮 ，其他选项为默认设置即可，如 图 10-5 所示。新建文件4 “文本” 工具输入文字内容173图 10-5 设置文字属性选
5、中画布上的文本，在操作界面右侧的“ 资源”/“ 样式”面板中，单击其中 1 个样式，例如 Style 25，如 图 10-6 所示。图 10-6 设置文字属性在“属性”面板中单击“ 滤镜 ”右边的 按钮，在弹出的菜单中选择【斜角和浮雕】【凸起浮雕】命令，如 图 10-7 所示。图 10-7 设置浮雕效果5设置字体6设置字体大小7设置颜色调色板8字体加粗9样式面板10选择样式12选择滤镜效果11单击174接着在底部弹出的面板中， 调整各个文本框的参数，设置效果如 图 10-8 所 示 。图 10-8 调整参数值按【Enter】键，给文本添加浮雕效果，如 图 10-9 所示。图 10-9 添加浮雕
6、效果执行菜单栏中的【文件】【图像预览】命令，打开 “图像预览”对话框。在“图像预览 ”对话框的“格式”下拉列表中选择“ JPEG”，在“保存的设置”下拉列表中选择“JPEG-较高品质” 选项。单击 按钮，打开 “导出”对话框， 选择保存文件的文件夹，然后 为文件命名，单击 按钮，图像文件就保存了，如 图 10-10 所示。13调整参数175图 10-10 图像预览参数设置及导出本节主要介绍了如何使用文本、文本样式和图像导出等知识，大家要善于利用文本“属性”面板中的“滤镜”效果，利用它可以设置各种特殊效果。在导出图像时， “GIF”“GIF 动画”和“JPEG”这 3 种格式是常用的，要根据不同
7、的图像来选择，一般透明图像选择 GIF 格式，照片选择 JPEG 格式。制作“欢迎参观我的主页”文字，并添加浮雕效果。10.1.3 Fireworks 中的图像优化Fireworks 除了可以制作文字和图像外，还可以对已有的图像进行优化，使图像在不影响视觉效果的前提下，体积变小，更有利于网络上传和下载。在制作网站时对主页广告条进行优化，观察图像优化后的效果，如 图 10-11 所示。14选择格式15选择保存设置类型16单击 17输入文件名18单击176图 10-11 优化后的效果打 开 Fireworks 8.0 的 操 作 界 面 ，执 行 【文件】【打开】 菜 单 命令。在“打开”对话框中
8、，选中要优化的图像， 单击“ 打开”按钮，如 图 10-12 所示。图 10-12 选择目标图像在工作窗口中打开图像， 执行【窗口】【优化】菜单命令或快捷 键【F6】，打开 “优化”面板，如 图 10-13 所 示 。图 10-13 打开“优化”面板在 “优 化 ”面 板 中 单 击 第 1 个 下 拉 列 表 框 ，在 下 拉 列 表 中 选 择 “GIF 接 近 网 页 256 色 ”。在“优化”面板中有许多参数值， 单击各个设置栏的下拉列表项目，可以调整优化效果，1选择菜单命令2选择图像3单击4选择菜单命令5优化面板177如 图 10-14 所示。图 10-14 图像优化设置执行【文件】
9、【导出】菜单命令，打开 “导出”对话框，在“导出”对话框中输入文件名，单击“导出”命令将图像导出，如 图 10-15 所示。图 10-15 导出优化图像打开导出文件的文件夹，可以 发现优化后的图片比优 化前的图片容量要小得多，可见优化效果对制作网页上的图像是非常重要的。8选择菜单命令9输入导出文件名10单击6选择优化类型7设置优化参数178优化 1 张自己的相片，上传到自己的个人主页上。10.1.4 Fireworks 与 Dreamweaver 互动应用在 Dreamweaver 操作中，随时可以打开 Fireworks，对网页中的图像进行编辑和优化时，选中 Dreamweaver 窗口中的图像，然后在 “属性”面板中单击“编辑”右边按钮 ，即可打开 Fireworks， 如 图 10-16 所 示 。图 10-16 单击按钮打开 Fireworks 软件Fireworks 窗口中可以打开在 Dreamweaver 被选中的图像，图像编辑区有“编辑自Dreamweaver”字样，表明该图像来自 Dreamweaver。对图像进行编辑和优化后，单击 “完成”按钮，Fireworks 编辑窗口也自动关闭， 如 图 10-17 所 示 。图 10-17 对 Dreamweaver 图像优化10.2 3单击2单击1选中
