新网页制作技术 许莉 电子教案 第5章.pptVIP

第5章 网页图像处理 本章学习目标 ?掌握在Fireworks MX 2004中处理位图的方法 掌握在Fireworks MX 2004中创建动画的方法 掌握切片以及热点的创建方法 掌握按钮和导航栏的制作方法 掌握图层的使用方法 掌握优化图像的方法 5.1 位图图像处理 5.1.1 选取图像区域 1、选择规则选区 “选取框”工具和“椭圆选取框”工具可以用于选择规则选区。 2、选择不规则选区 “套索”工具、“多边形套索”工具或“魔术棒”工具。用于选择不规则选区。 3、调整选区 增加选区的方法是：按下Shift键继续选择其他的选区。减少选区的方法是：按下Alt键选择需要删除的选区。 另外，在“选择”菜单中，可以对选区进行调整。 5.1.2 修饰位图 使用铅笔或刷子工具 使用油漆桶或渐变工具 使用模糊、锐化与涂抹工具 使用减淡和烙印工具 使用橡皮图章、替换颜色与红眼消除工具 使用橡皮擦工具 5.1.3 使用滤镜 1、杂点 2、模糊 3、调整颜色 4、锐化 5、查找边缘和转换为Alpha 5.1.4 使用效果 1、斜角和浮雕 2、阴影和光晕 3、其他效果 5.2 动画的制作 5.2.1 打开多个图像文件制作动画 具体步骤见书。 5.2.2 手工制作动画 具体步骤见书。 5.2.3 分散到帧生成动画 具体步骤见书。 5.2.4 利用元件和实例制作动画 元件是存放在库中可以重复使用的对象。 实例是元件在文档中的具体引用。 Fireworks MX 2004中包含三种元件类型：图形、动画和按钮。 新建元件的方法 使用实例 创建动画 具体步骤见书。 5.2.5 导出动画 设置动画循环 在“帧”面板中的循环设置决定动画重复的次数。选择【窗口】|【帧】显示帧面板，单击面板底部的“Gif动画循环”按钮，可以设置循环的次数。 输出动画 在优化面板中设置导出为“动画GIF接近网页128”，可以将动画导出为“GIF动画”格式。 然后选择【文件】|【导出预览】，单击“导出”按钮即可。 5.3 图像的切割 5.3.1 切片的创建和使用 “切片”是建立交互响应的基础。切片的功能是把Fireworks的编辑文件分割成小的图片，并且将其单独发布为一个文件。在输出过程中，Fireworks会自动创建一个包含Table标签的HTML文件，以便在浏览器中重新拼接成完整的图像。 切片的具体创建方法见书。 5.3.2 导出切片 切片创建完成后，还需要经过导出才可以在网页中使用。选择【文件】|【导出】后，会弹出“导出”对话框。 在设置导出文件类型时，保存类型要设置为HTML和图像，并将其保存为网页。在HTML下拉列表中，选择“导出HTML文件”可以直接导出HTML文件。在“切片”下拉列表中选择“导出切片”即可根据绘制的切片对象生成多个切片文件。设置完毕后，单击“保存”按钮，即可将切片导出。 5.3.3 热点的设置 热点是包含超级链接的网页图像区域，也就是单击后可以连接到其他位置的区域。 图像映射是指在一幅图中有多个对象分别指向不同的链接，这个设置了多个热点的图像就叫“映射图”。 在Fireworks MX 2004中，共有三种热点：矩形热点、圆形热点和多边形热点。 具体创建方法见书。 5.4 按钮、导航栏和弹出菜单制作 5.4.1 创建按钮 按钮通常包括以下4种不同的状态： “释放”：按钮无任何交互时所显示的外观，是一种默认状态。 “滑过”：当鼠标移动到按钮之上时所显示出来的外观。 “按下”：按钮被单击后的状态，通常出现在目标网页中。 “按下时滑过”：鼠标滑过处于“按下”状态下的按钮，按钮所显示的状态，通常极少使用。 具体制作方法见书。 5.4.2 创建导航栏 导航栏是一组指向不同链接地址的按钮，用于在一系列具有相同级别的网页间进行跳转。使用一个按钮元件的多个实例排列在一起，再对各个实例进行修改，为它们指定不同的链接地址，一个导航栏就绘制完成了。 将刚才制作的按钮元件从库面板中拖到画布，排列成一行或一列，改变每个按钮上的文字及链接后，导航栏就创建完成了。 5.4.3 创建弹出菜单 弹出菜单是在网页中由鼠标来触发的一种菜单导航效果。当鼠标移动到导航菜单上时，或者当鼠标点击导航菜单时，就会显示弹出菜单。当鼠标从导航菜单上面移开时，弹出菜单就会自动消失。 具体制作方法见书。 5.5 图像的优化导出 5.5.1 图像的优化 图像的优化是指在保持图像品质的前提下压缩图像，从而使其在网络上能够快速地下载。 1、文件导出格式的选择 （1）JPEG图像 JPEG用于24位色图像的优化，采用有损压缩法，压缩比很高，压缩效果显著。 （2）GIF图像 GIF最高支持256种颜色，采用无损压缩法，色彩比较简单，但文件容量