零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

第12课 优化与导出 课本课要点 具体要求 本课导读 上机练习

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

本课要点优化设置 导出图像

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

具体要求掌握GIF动画的优化设置 动画的优化设置 掌握 掌握JPEG图像的优化设置 掌握 图像的优化设置 掌握预览窗口对比查看优化效果的方法 了解快速导出到应用程序的方法

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

本课导读优化的目的是使导出的网页图像在保证品 质的情况下尽可能小地占用空间。 质的情况下尽可能小地占用空间。它是一 个通过寻找颜色、压缩和品质的最佳组合， 个通过寻找颜色、压缩和品质的最佳组合， 找到以图像品质不改变且压缩质量最高的 文件格式为网页图像导出格式的过程。在 文件格式为网页图像导出格式的过程。 Fireworks中，不同的对象有不同的导出 中 格式。 格式。

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1 优化设置在不同的图像格式下， 在不同的图像格式下，用户可以通过查看 图像的品质及文件大小来确定优化结果， 图像的品质及文件大小来确定优化结果， 最终以品质不改变、 最终以品质不改变、文件最小的文档作为 导出格式。如果不对图像进行优化， 导出格式。如果不对图像进行优化，图像 文件太大会造成网页打开速度变慢，影响 文件太大会造成网页打开速度变慢， 访问。 访问。

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1 优化设置12.1.1 知识讲解 12.1.2 典型案例——优化 优化GIF动画 典型案例 优化 动画

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1.1 知识讲解本节主要介绍如何使用【优化】 本节主要介绍如何使用【优化】面板和 导出向导】命令优化图像并导出， 【导出向导】命令优化图像并导出，怎样 用快速方式导出HTML文档和 文档和SWF文件等。 文件等。 用快速方式导出 文档和 文件等

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1.1 知识讲解1. 认识【优化】面板 认识【优化】 2. 用【导出向导】命令进行优化设置 导出向导】

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

1. 认识【优化】面板 认识【优化】选择【窗口】 【优化】命令，或按【 】 选择【 窗口】→【优化】命令，或按【F6】 键可以打开【优化】面板。 键可以打开【优化】面板。如下图所示是网 页中常用的两种图像格式的【优化】面板。 页中常用的两种图像格式的【优化】面板。

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

1. 认识【优化】

面板 认识【优化】

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

2. 用【导出向导】命令进行优化设置 导出向导】使用【导出向导】 使用【导出向导】命令进行图像优化的具体操作 如下： 如下：(1)选中切片或图像，然后选择【文件】→【导出 )选中切片或图像，然后选择【文件】 【 向导】命令， 按钮，打开【 向导】命令，并连续两次单击 按钮，打开【图像预 对话框。 览】对话框。 选项】选项卡中设置所选图像的优化格式。 (2)在【选项】选项卡中设置所选图像的优化格式。 ) 其中， 按钮用于指定图像导出的文件大小， 其中， 按钮用于指定图像导出的文件大小，若选 删除未使用颜色】复选框， 中【删除未使用颜色】复选框，将最优化导出图像 的颜色。 的颜色。 文件】 (3)在【文件】选项卡中设置图像的缩放比例或导 ) 出区域。 出区域。Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

2. 用【导出向导】命令进行优化设置 导出向导】动画】选项卡中可删除动画中无用的帧、 (4)在【动画】选项卡中可删除动画中无用的帧、 ) 修改帧延迟时间和循环次数等。 修改帧延迟时间和循环次数等。 (5)设置完成后，在右侧窗口中可以预览效果，单 )设置完成后，在右侧窗口中可以预览效果， 按钮可分成多个预览窗口显示， 击 按钮可分成多个预览窗口显示，并可以分别为 各个预览窗口的图像进行单独设置， 各个预览窗口的图像进行单独设置，查看每个窗口 中的图像质量和文件大小。 中的图像质量和文件大小。 (6)设置好导出图像后，选中该预览窗口，单击 )设置好导出图像后，选中该预览窗口， 导出】按钮，在打开的【导出】 【导出】按钮，在打开的【导出】对话框中设置文 件名、路径及切片的选择情况，单击【确定】 件名、路径及切片的选择情况，单击【确定】按钮 完成优化导出操作。 完成优化导出操作。Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1.2 典型案例 典型案例——优化 优化GIF动画 优化 动画案例目标本案例主要要将前面制作的LOGO导出为 导出为 本案例主要要将前面制作的 GIF动画 ， 主要介绍 动画， 动画 主要介绍GIF动画的优化设置方 动画的优化设置方 优化后的动画效果如下图所示。 法，优化后的动画效果如下图所示。

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1.2 典型案例 典型案例——优化 优化GIF动画 优化 动画

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1.2 典型案例 典型案例——优化 优化GIF动画 优化 动画操作思路： 操作思路：(

1)设置不同的优化格式，分别在 个预览窗 )设置不同的优化格式，分别在4个预览窗 口中预览。 口中预览。 (2)选定品质与文件大小综合性较好的格式作 ) 为导出格式。 为导出格式。 (3)选择【导出】命令导出文件。 )选择【导出】命令导出文件。

操作步骤请老师参照软件讲解Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程

零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案

12.1.2 典型案例 典型案例——优化 优化GIF动画 优化 动画案例小结本案例对Gif动画进行了优化， 介绍了在4幅 本案例对 动画进行了优化，介绍了在 幅 动画进行了优化 图像比较窗口中结合【优化】 图像比较窗口中结合【优化】面板对图像进 行优化设置，比较图像的优化效果操作。 行优化设置，比较图像的优化效果操作。在 优化图像时， 优化图像时，有时不需要对所有的参数都进 行设置，可以直接应用预设设置。 行设置，可以直接应用预设设置。

Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程