《902-第5章 网页图像处理.ppt》由会员分享，可在线阅读，更多相关《902-第5章 网页图像处理.ppt（18页珍藏版）》请在三一文库上搜索。
1、第5章 网页图像处理,本章学习目标 掌握在Fireworks MX 2004中处理位图的方法 掌握在Fireworks MX 2004中创建动画的方法 掌握切片以及热点的创建方法 掌握按钮和导航栏的制作方法 掌握图层的使用方法 掌握优化图像的方法,5.1 位图图像处理,5.1.1 选取图像区域 1、选择规则选区 “选取框”工具和“椭圆选取框”工具可以用于选择规则选区。 2、选择不规则选区 “套索”工具、“多边形套索”工具或“魔术棒”工具。用于选择不规则选区。 3、调整选区 增加选区的方法是：按下Shift键继续选择其他的选区。减少选区的方法是：按下Alt键选择需要删除的选区。 另外，在“选择”
2、菜单中，可以对选区进行调整。,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 利用元件和实例制作动画,元件是存放在库中可以重复使用的对象。 实例
3、是元件在文档中的具体引用。 Fireworks MX 2004中包含三种元件类型：图形、动画和按钮。 新建元件的方法 使用实例 创建动画 具体步骤见书。,5.2.5 导出动画,设置动画循环 在“帧”面板中的循环设置决定动画重复的次数。选择【窗口】|【帧】显示帧面板，单击面板底部的“Gif动画循环”按钮，可以设置循环的次数。 输出动画 在优化面板中设置导出为“动画GIF接近网页128”，可以将动画导出为“GIF动画”格式。 然后选择【文件】|【导出预览】，单击“导出”按钮即可。,5.3 图像的切割,5.3.1 切片的创建和使用 “切片”是建立交互响应的基础。切片的功能是把Fireworks的编辑
4、文件分割成小的图片，并且将其单独发布为一个文件。在输出过程中，Fireworks会自动创建一个包含标签的HTML文件，以便在浏览器中重新拼接成完整的图像。 切片的具体创建方法见书。,5.3.2 导出切片,切片创建完成后，还需要经过导出才可以在网页中使用。选择【文件】|【导出】后，会弹出“导出”对话框。 在设置导出文件类型时，保存类型要设置为HTML和图像，并将其保存为网页。在HTML下拉列表中，选择“导出HTML文件”可以直接导出HTML文件。在“切片”下拉列表中选择“导出切片”即可根据绘制的切片对象生成多个切片文件。设置完毕后，单击“保存”按钮，即可将切片导出。,5.3.3 热点的设置,热点
5、是包含超级链接的网页图像区域，也就是单击后可以连接到其他位置的区域。 图像映射是指在一幅图中有多个对象分别指向不同的链接，这个设置了多个热点的图像就叫“映射图”。 在Fireworks MX 2004中，共有三种热点：矩形热点、圆形热点和多边形热点。 具体创建方法见书。,5.4 按钮、导航栏和弹出菜单制作,5.4.1 创建按钮 按钮通常包括以下4种不同的状态： “释放”：按钮无任何交互时所显示的外观，是一种默认状态。 “滑过”：当鼠标移动到按钮之上时所显示出来的外观。 “按下”：按钮被单击后的状态，通常出现在目标网页中。 “按下时滑过”：鼠标滑过处于“按下”状态下的按钮，按钮所显示的状态，通常
6、极少使用。 具体制作方法见书。,5.4.2 创建导航栏,导航栏是一组指向不同链接地址的按钮，用于在一系列具有相同级别的网页间进行跳转。使用一个按钮元件的多个实例排列在一起，再对各个实例进行修改，为它们指定不同的链接地址，一个导航栏就绘制完成了。 将刚才制作的按钮元件从库面板中拖到画布，排列成一行或一列，改变每个按钮上的文字及链接后，导航栏就创建完成了。,5.4.3 创建弹出菜单,弹出菜单是在网页中由鼠标来触发的一种菜单导航效果。当鼠标移动到导航菜单上时，或者当鼠标点击导航菜单时，就会显示弹出菜单。当鼠标从导航菜单上面移开时，弹出菜单就会自动消失。 具体制作方法见书。,5.5 图像的优化导出,5
7、.5.1 图像的优化 图像的优化是指在保持图像品质的前提下压缩图像，从而使其在网络上能够快速地下载。 1、文件导出格式的选择 （1）JPEG图像 JPEG用于24位色图像的优化，采用有损压缩法，压缩比很高，压缩效果显著。 （2）GIF图像 GIF最高支持256种颜色，采用无损压缩法，色彩比较简单，但文件容量比较小，是互联网上常用的图像格式。 （3）PNG图像 PNG图像采用无损压缩算法，能真实重现原始图像的信息，同时，它又支持真彩色，而且图像的大小和JPEG没有太大差别。,5.5.1 图像的优化,2、优化GIF格式 （1）选择调色板 （2）选择色彩深度 （3）设置失真 （4）设置抖动 （5）设置交错 （6）设置透明 3、优化JPEG格式 （1）设置图像品质 （2）JPEG的选择性压缩 （3）柔化边缘 （4）锐化色彩边缘和细节 （5）渐进JPEG,5.5.2 图像的导出,1、导出文件 选择菜单命令【文件】|【导出】，在导出对话框中选择导出文件的位置，在“文件名”文本框中命名该文件，在“保存类型”下拉列表中选择导出文件的类型。 2、使用导出向导 使用导出向导可以轻松导出图形，而无需了解优化和导出的细节。 具体步骤见书。,5.6 综合制作实例,根据本章所学知识，制作一个简单页面，具体步骤见书。,