网页设计语言04.pptVIP

数据结构 第4章 使用图像和背景 4.1 常见网络图像格式 4.2 使用图像 4.3 创建图像地图 4.1 常见网络图像格式 GIF图像（扩展名为.gif） Graphics Interchange Format（图形交换格式） GIF是compuServe公司在1987年开发的图像文件格式 GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，不属于任何应用程序 GIF的图像深度从1bit到8bit，也就是说GIF最多支持256种色彩的图像（index color模式） GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画 GIF分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式 其实GIF动画是将多幅图像保存为一个图像文件，从而形成动画，所以归根到底GIF仍然是图片文件格式 4.1 常见网络图像格式（续） JPEG图像（扩展名为.jpeg或.jpg） Joint Photographic Experts Group（联合图像专家组） JPEG由联合照片专家组开发并命名为“ISO-10918-1” JPEG使用有损压缩方式，能够将人眼无法分辨的资料删除，以节省储存空间，但这些被删除的资料无法在解压时还原 JPEG2000的压缩率比JPEG高30%左右 JPEG2000支持有损压缩和无损压缩，无损压缩对保存一些重要图片十分有用 JPEG2000能实现渐进传输，也就是我们对GIF格式影像常说的“渐现”特性。它先传输图像的轮廓，然后逐步传输数据，不断提高图像质量，让图像由朦胧到清晰显示，而不必是像JPEG一样，由上到下慢慢显示 JPEG2000支持“感兴趣区域”特性，可以任意指定影像上感兴趣区域的压缩质量，还可以选择指定的部份先解压缩。这样就可以很方便的突出重点了 4.1 常见网络图像格式（续） PNG图像（扩展名为.png） Portable Network Graphics（可携式网络图像） 1996年由png向国际网络联盟提出并得到推荐认可标准 较晚才得到IE和NetScape两大浏览器支持 兼有GIF和JPEG的色彩模式。不仅能储存256色以下的index color图像，还能储存24位真彩图像，甚至能最高储存48位超强色彩图像 PNG能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息 使用更优化的传输显示。使用Interlaced模式传输图像，浏览者先看到图像一个大略的轮廓，然后再慢慢清晰。还使用CRC检测防止传输时图档信息流失 设置图像背景透明。JPEG不支持透明背景，GIF只有两种方式（透明或不透明）。而PNG提供了0~255的透明信息，可以使图像的透明区域出现深度不同的层次 PNG被设计成可以通过网络传送到任何机种及操作系统上读取 4.1 常见网络图像格式（续） 其它网络上图像格式 BMP位图图像 Flash（扩展名.swf）动画 Scalable Vector Graphics（SVG可升级矢量图像） 图像格式需要浏览器的支持，才能正常显示。否则需要用户单独下载辅助程序或插件才能够正确显示 4.2 使用图像 img /独立标记 src属性设置图像文件的URL（例1） alt属性，如果图片无法在浏览器中显示，用户将看到用来说明这个图片的文本（例2） img标记的主要属性 4.2 使用图像（续） img /标记（续） height和width属性，设置指定图片的高度和宽度（例3） align属性 垂直对齐：top、middle、bottom（例4） 水平对齐：left、right（例5） 4.2 使用图像（续） img /标记（续） border属性对图片加上边框（例6） 为图片创建超链接（例7） 在HTML中使用较大图片会增加页面的载入时间，虽然使用height和width属性可以缩小显示图片尺寸，但图片文件大小并没有变化。为减少载入页面的时间使用缩小略图（例8） 4.2 使用图像（续） body标记 backgroud属性设置背景图片（例9） bgcolor设置背景颜色，text设置页面文字颜色（例10） bgproperties属性设置背景图片固定效果（例11） topmargin、bottommargin、leftmargin、rightmargin属性设置内容与浏览器边框的距离（例12） 4.3 创建图像地图 图像地图是图片链接的一种延伸，在一个图像地图中可以设置多个链接，链接到什么页面主要取决于使用者单击了图片的哪个部分 在一张图像地图中，整张图片被分成多块活动的区域，