网页设计与制作实用教程电子教案、教学建议第16章　使用Fireworks处理图像.pptVIP

第16章　使用Fireworks处理图像 网页设计与制作实用教程 主编：刘艳丽　副主编：许晞 秦高德 高妍 学习目标 掌握图像大小的处理方法； 掌握图像的优化方法； 掌握图像的切割方法； 掌握Dreamweaver和Fireworks联合作业的方法。 目录 优化和导出图像实例 网站相册实例 在网页中插入 Fireworks HTML 代码实例 本章小结 配套实训 练习题 优化和导出图像实例 设计目标 页面分析 实训引导 制作步骤 设计目标 对主页index6_1.html中的logo图像（如下图所示）进行优化。 页面分析 所谓“图像优化”就是通过为图像选择压缩效果最好的格式，并保持尽可能高的质量，从而寻找颜色、压缩和品质的最佳组合。在 Fireworks 中优化网页图形以尽可能地减小文件大小，使其能够快速地加载到网站中。为了避免网页文件过度臃肿，对图像进行合理地优化是非常必要的。 实训引导 （1）本页面用到的图像文件img6_1.jpg由配套光盘webcourse\chapter16\images文件夹提供。 （2）图像优化效果请参见webcourse\chapter16\images文件夹下的img6_logo.jpg文件。 制作步骤 （1）优化图像。 ?　利用“优化”面板对上述处理的img6_1.jpg图像进行优化，操作步骤参见教程P318。 ?　用上述方法对images文件夹下的图像进行优化处理，操作步骤略。 （2）导出图像，操作步骤参见教程P319 。 网站相册实例 设计目标 页面分析 实训引导 制作步骤 设计目标 创建如图所示的网站相册。 页面分析 所谓“网站相册”是指一种特殊的网页。该网页包含若干个小的缩略图像，每一幅缩略图像都包含一个超级链接，单击相册中的缩略图，即可打开该图的导航页。在导航页中单击“前一个”，可浏览上一幅图像；单击“首页”，可返回相册页面；单击“下一个”，可浏览下一幅图像。 实训引导 （1）本页面用到的所有图像文件：zwtk01.gif~zwtk20.gi由配套光盘webcourse\chapter16\images_before文件夹提供，在制作页面之前，先将images_before文件夹拷贝到畅想未来future文件夹中。 （2）页面效果请参见webcourse\chapter16\Albums文件夹下的index.html文件。 制作步骤 （1）在站点的根文件夹下建立两个文件夹：source_images和Albums。其中，source_images文件夹用于存放网站相册中的源图像文件，Albums文件夹用于存放将要建立的网站相册。 （2）统一网站相册中的图像大小，并将处理后的图像存放到source_images文件夹中。 （3）对source_images文件夹的图像进行适当地优化处理。 （4）使用Dreamweaver和Fireworks联合作业创建网站相册。 处理图像 1．处理图像大小 ?　将images_before文件夹中zwtk12.gif图像的高度设置为110像素，操作步骤参见教程P322。 2．裁剪图像 ?　从如图16.11所示zwtk12.gif图像中截取尺寸为120×110的主要画面（如图16.12所示），操作步骤参见教程P323。 ?　用上述方法（“图像大小”命令、“裁剪”工具等）依次对images_before文件夹下的图像进行处理，制作用于网站相册中的系列源图像文件，使所有图像的尺寸统一为120×110。 创建网站相册 ?　使用Dreamweaver和Fireworks联合作业创建“展望太空”网站相册，操作步骤参见教程P325。 在网页中插入 Fireworks HTML 代码实例 设计目标 页面分析 实训引导 制作步骤 设计目标 利用Fireworks为主页index6.html制作具有图像交换效果的导航条。效果如图所示。 页面分析 利用Fireworks制作的导航条是一个完整的图像，为使不同的标题文本链接到相应的网页，需要利用“切片”工具将图像按标题分割成若干部分，以便为不同的标题文本创建交互式效果。同时为了制作具有图像交换效果的导航条，还需要利用复制“帧”的操作。 实训引导 （1）利用Fireworks制作的导航条图像的效果请参见配套光盘webcourse\chapter16\images文件夹下的img16_bar.png文件。 （2）导出切片的效果请参见配套光盘webcourse\chapter16\images\ img16_bar文件夹中的文件。 （3）页面效果请参见webcourse\chapter16文件夹下的index16_bar.html文件。 制作步骤 （1）在Fireworks中制作导航条； （2）利用Fireworks“切