网页制作技术教学课件许莉第5章.ppt

《网页制作技术教学课件许莉第5章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章网页图像处理本章学习目标掌握在FireworksMX2004中处理位图的方法掌握在FireworksMX2004中创建动画的方法掌握切片以及热点的创建方法掌握按钮和导航栏的制作方法掌握图层的使用方法掌握优化图像的方法5.1位图图像处理5.1.1选取图像区域1、选择规则选区“选取框”工具和“椭圆选取框”工具可以用于选择规则选区。2、选择不规则选区“套索”工具、“多边形套索”工具或“魔术棒”工具。用于选择不规则选区。3、调整选区增加选区的方法是：按下Shift键继续选择其他的选区。减少选区的方法是：按下Alt键选择需要删除的选区。另外，在“选择”菜

2、单中，可以对选区进行调整。5.1.2修饰位图使用铅笔或刷子工具使用油漆桶或渐变工具使用模糊、锐化与涂抹工具使用减淡和烙印工具使用橡皮图章、替换颜色与红眼消除工具使用橡皮擦工具5.1.3使用滤镜1、杂点2、模糊3、调整颜色4、锐化5、查找边缘和转换为Alpha5.1.4使用效果1、斜角和浮雕2、阴影和光晕3、其他效果5.2动画的制作5.2.1打开多个图像文件制作动画具体步骤见书。5.2.2手工制作动画具体步骤见书。5.2.3分散到帧生成动画具体步骤见书。5.2.4利用元件和实例制作动画元件是存放在库中可以重复使用的对象。实例是元件在文档中的具体引用。F

3、ireworksMX2004中包含三种元件类型：图形、动画和按钮。新建元件的方法使用实例创建动画具体步骤见书。5.2.5导出动画设置动画循环在“帧”面板中的循环设置决定动画重复的次数。选择【窗口】

4、【帧】显示帧面板，单击面板底部的“Gif动画循环”按钮，可以设置循环的次数。输出动画在优化面板中设置导出为“动画GIF接近网页128”，可以将动画导出为“GIF动画”格式。然后选择【文件】

5、【导出预览】，单击“导出”按钮即可。5.3图像的切割5.3.1切片的创建和使用“切片”是建立交互响应的基础。切片的功能是把Fireworks的编辑文件分割成小的图片，并

6、且将其单独发布为一个文件。在输出过程中，Fireworks会自动创建一个包含

7、【导出】后，会弹出“导出”对话框。在设置导出文件类型时，保存类型要设置为HTML和图像，并将其保存为网页。在HTML下拉列表中，选择“导出HTML文件”可以直接导出HTML文件。在“切片”下拉列表中选择“导出切片”即可根据绘制的切片对象生成多个切片文件。设置完毕后，单击“保存”按钮，即可将切片导出。5.

8、3.3热点的设置热点是包含超级链接的网页图像区域，也就是单击后可以连接到其他位置的区域。图像映射是指在一幅图中有多个对象分别指向不同的链接，这个设置了多个热点的图像就叫“映射图”。在FireworksMX2004中，共有三种热点：矩形热点、圆形热点和多边形热点。具体创建方法见书。5.4按钮、导航栏和弹出菜单制作5.4.1创建按钮按钮通常包括以下4种不同的状态：“释放”：按钮无任何交互时所显示的外观，是一种默认状态。“滑过”：当鼠标移动到按钮之上时所显示出来的外观。“按下”：按钮被单击后的状态，通常出现在目标网页中。“按下时滑过”：鼠标滑过处于“按下”

9、状态下的按钮，按钮所显示的状态，通常极少使用。具体制作方法见书。5.4.2创建导航栏导航栏是一组指向不同链接地址的按钮，用于在一系列具有相同级别的网页间进行跳转。使用一个按钮元件的多个实例排列在一起，再对各个实例进行修改，为它们指定不同的链接地址，一个导航栏就绘制完成了。将刚才制作的按钮元件从库面板中拖到画布，排列成一行或一列，改变每个按钮上的文字及链接后，导航栏就创建完成了。5.4.3创建弹出菜单弹出菜单是在网页中由鼠标来触发的一种菜单导航效果。当鼠标移动到导航菜单上时，或者当鼠标点击导航菜单时，就会显示弹出菜单。当鼠标从导航菜单上面移开时，弹出菜

10、单就会自动消失。具体制作方法见书。5.5图像的优化导出5.5.1图像的优化图像的优化是指在保持图像品质的前提下压缩图像，从而使其在网络上能够快速地下载。1、文件导出格式的选择（1）JPEG图像JPEG用于24位色图像的优化，采用有损压缩法，压缩比很高，压缩效果显著。（2）GIF图像GIF最高支持256种颜色，采用无损压缩法，色彩比较简单，但文件容量比较小，是互联网上常用的图像格式。（3）PNG图像PNG图像采用无损压缩算法，能真实重现原始图像的信息，同时，它又支持真彩色，而且图像的大小和JPEG没有太大差别。5.5.1图像的优化2、优化GIF格式（1

11、）选择调色板（2）选择色彩深度（3）设置失真（4）设置抖动（5）设置交错（6）设置透明3、优化JPEG格式（