Dreamweaver-Flash-Fireworks网页制作培训教程第5课.pptVIP

第5课 优化与导出 本课要点 具体要求 本课导读 上机练习 本课要点 优化设置 导出图像 具体要求 掌握GIF动画的优化设置方法 掌握JPEG图像的优化设置方法 掌握通过预览窗口对比查看优化效果的方法 了解快速导出到应用程序的方法 本课导读 优化的目的是在保证品质的情况下尽可能地使网页图像占用更小的空间。它通过寻找颜色、压缩和品质的最佳组合，将不改变图像品质且压缩质量最高的文件格式作为网页图像格式。在Fireworks中，不同的对象也有不同的导出格式。 5.1 优化设置 在不同的图像格式状态下，通过查看图像的品质及文件大小来确定优化结果，最终以不改变品质、文件最小的格式作为导出格式。如果不对图像进行优化，则图像文件太大，会造成网页打开速度变慢，影响访问。 5.1 优化设置 5.1.1 知识讲解 5.1.2 典型案例——优化GIF动画 5.1.1 知识讲解 本节中将学习如何使用【优化】面板和【导出向导】命令对图像进行优化设置并导出，以及怎样用快速方式导出HTML文档和SWF文件等。 5.1.1 知识讲解 1. 认识【优化】面板 2. 用【导出向导】命令进行优化设置 1. 认识【优化】面板 选择【窗口】→【优化】命令或按【F6】键，可打开【优化】面板。下面显示的是网页中常用的两种图像格式的【优化】面板。 2. 用【导出向导】命令进行优化设置 具体操作如下： （1）选中切片或图像，然后选择【文件】→【导出向导】命令，并连续单击两次 按钮，打开【图像预览】对话框。 （2）参照【优化】面板参数的含义，在【选项】选项卡中设置所选图像的优化格式。 按钮用于指定导出图像的文件大小，若选中 复选框，则可使导出图像的颜色最优化。 （3）在【文件】选项卡中设置图像的缩放比例或导出区域。 2. 用【导出向导】命令进行优化设置 （4）在【动画】选项卡中删除动画中无用的帧，修改帧延迟时间和循环次数等。 （5）设置完成后，在右侧窗口中可以预览效果，单击 按钮可分成多个预览窗口显示，并可以分别为各个预览窗口的图像进行单独设置，查看每个窗口中的图像质量和文件大小。 （6）设置好导出图像后，选中该图像窗口，单 击 按钮，在打开的【导出】对话框中设置文件名、路径及切片的选择情况，然后单击 按钮完成优化导出。 5.1.2 典型案例——优化GIF动画 案例目标 本案例将第4课中制作的Logo导出为GIF动画，主要练习GIF动画的优化设置方法，优化后的动画效果如下图所示。 5.1.2 典型案例——优化GIF动画 操作思路： （1）设置不同的文件格式，分别在4个预览窗口中预览。 （2）选定质量与文件大小综合性能最优的格式作为导出格式。 （3）选择【导出】命令导出文件。这里只是简单操作，下节将详细讲解。 操作步骤请老师参照软件讲解 5.1.2 典型案例——优化GIF动画 案例小结 本案例对Logo动画进行了优化，练习了在预览窗口中结合【优化】面板对图像进行设置，并比较图像的优化效果。在优化图像时，不需要对所有参数都进行设置，有时选择其预设选项即可。 5.2 导出图像 导出图像的方法比较简单，但是，针对不同的对象，导出格式也不同。 5.2 导出图像 5.2.1 知识讲解 5.2.2 典型案例——导出弹出菜单 5.2.1 知识讲解 本节将介绍Fireworks可以导出的文件格式类型及快速导出的方法。 5.2.1 知识讲解 1. 导出的格式类型 2. 导出图像 3. 快速导出 1. 导出的格式类型 常见图像、动画和按钮的导出格式如下： 动画的导出格式为GIF或SWF。 图像经常用的导出格式为JPEG或GIF。 按钮、弹出菜单或其他有行为的对象以HTML格式导出。 切片可以导出为图像，也可以导出为HTML格式。 2. 导出图像 如果要导出图像，那么可以选择【文件】→【导出】命令或【导出向导】命令；如果要对所选切片进行导出，那么可以在选取切片后单击鼠标右键，在弹出的快捷菜单中选择【导出所选切片】命令，然后在打开的【导出】对话框中指定导出格式、导出名称等。 3. 快速导出 当完成效果的制作后，可在【优化】面板中进行参数设置，将按钮、图像、动画等通过Fireworks窗口右上角的 按钮导出为某个应用程序中的对象。 对于按钮、整个网页效果、导航栏和弹出菜单的导出，可以单击 按钮，然后从弹出的列表中选择【Dreamweaver】→【导出HTML】命令来完成。 如果要将动画导出为Fl