902第5章 网页图像处理.ppt

《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 利用元件和实例制作动画,元件是存放在库中可以重复使用的对象。实例是元件在文档中的具体引用。Firewor

3、ks 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种不同的状态：“释放”：按钮无任何交互时所显示的外观，是一种默认状态。“滑过”：当鼠标移动到按钮之上时所显示出来的外观。“按下”：按钮被单击后的状态，通常出现在目标网页中。“按下时滑过”：鼠标滑过处于“按下”状态下的按钮，按钮所显示的状态，通常极少使用。具体制作方法见书。,5.4.2 创建导航栏,导航栏是一组指向不同链接地

6、址的按钮，用于在一系列具有相同级别的网页间进行跳转。使用一个按钮元件的多个实例排列在一起，再对各个实例进行修改，为它们指定不同的链接地址，一个导航栏就绘制完成了。将刚才制作的按钮元件从库面板中拖到画布，排列成一行或一列，改变每个按钮上的文字及链接后，导航栏就创建完成了。,5.4.3 创建弹出菜单,弹出菜单是在网页中由鼠标来触发的一种菜单导航效果。当鼠标移动到导航菜单上时，或者当鼠标点击导航菜单时，就会显示弹出菜单。当鼠标从导航菜单上面移开时，弹出菜单就会自动消失。具体制作方法见书。,5.5 图像的优化导出,5.5.1 图像的优化图像的优化是指在保持图像品质的前提下压缩图像，从而使其在网络上能够

7、快速地下载。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 综合制作实例,根据本章所学知识，制作一个简单页面，具体步骤见书。,