《HTML5+CSS3网页制作教程》课件_第4章.pptx

模块4网页中的多媒体;

4.1网页中插入图像

;

4.1.1?图片格式

网页图片格式分为两种：一种是位图，另一种是矢量图。

1.位图

位图，又称为点阵图像，是由像素(图片元素)的单个点组成的。通常位图又分为8位、16位、24位和32位。所谓8位图并不是指图像只有8种颜色，而是有28(即256)种颜色，8位图是指用8个bits来表示颜色。

;

位图有三种格式：JPEG、PNG和GIF。

(1)JPEG格式。

JPEG可以很好地处理大面积色调的图像，如相片、网页中一般的图片。相比于Windows支持的BMP格式的图像，一般情况下同一图像的BMP格式的大小是JPEG格式的5～10倍，而GIF格式最多只能是256色，因此载入256色以上图像的JPEG格式成了Internet中最受欢迎的图像格式之一，但JPEG是一种不支持透明和动画的图片格式。

;

(2)PNG格式。

PNG支持透明信息。所谓透明，即图像可以浮现在其他页面文件或页面图像之上。可以说，PNG是专门为Web创造的图像，通常大部分页面设计者在页面中加入Logo或

者一些点缀的小图像时，都会选择使用PNG格式。由于JPEG格式图片容量较大，在保证图片清晰、逼真的前提下，网页中不可能大范围使用文件较大的JPEG格式图片，而PNG格式图片体积小，且无损压缩，能保证网页的打开速度，所以PNG格式图片是很好的选择。PNG由于其优秀的特点，被称为“网页设计专用格式”。

;

(3)GIF格式。

GIF只支持256色以内的图像，所以，GIF格式的颜色效果是很差的。但是，GIF有个最大的特点，就是可以制作动画。图像作者利用图像处理软件，将静态的GIF图像设置为单帧画面，然后把这些单帧画面连在一起，设置好一个画面到下一个画面的间隔时间，最后保存为GIF格式就可以了。这就是简单的逐帧动画。GIF图像具有图像文件短小、

下载速度快，可用许多同样大小的图像文件组成动画等优点，此外，它还可以在GIF中指定透明区域，使图像具有非同一般的显示效果。GIF是支持透明、动画的图片格式，但只

是256色。;

2.矢量图

矢量图，???称为“向量图”，是一种以数学描述的方式来记录图像内容的图像格式如一个方程y=kx，当这个方程体现在坐标系上时，设置不同的参数可以绘制不同角度的直线，这就是矢量图的构图原理。

矢量图最大的优点是，无论放大、缩小或旋转等，图像都不会失真；最大的缺点是难以表现色彩层次丰富的逼真图像效果(图片效果差)。

;

4.1.2?绝对路径和相对路径

HTML文档支持文字、图片、声音、视频等多媒体格式。在这些格式中，除了文本是写在HTML中的，其他都是嵌入式的，即HTML文档只记录了这些文件的路径，这些文件能够正确显示，路径至关重要。

路径的作用是定位一个文件的位置。文件的路径可以有两种表达方式：以当前文档为参照物表示文件的位置，即相对路径；以根目录打头表示文件的位置，即绝对路径。

为了方便讲述绝对路径和相对路径，以如图4-1所示的目录结构来说明。

;

;

1.绝对路径

如图4-1所示，在E盘的website目录下的images下有一个photo.jpg图像文件，那么它的绝对路径就是E:\website\images\photo.jpg，像这种完整地描述文件位置的路径就是绝对路径。

如果将图片文件photo.jpg插入网页index.html中，绝对路径表示方式如下：

E:\website\images\photo.jpg

;

2.相对路径

所谓相对路径，顾名思义就是以当前位置为参考点，自己相对于目标的位置。

例如，在index.html中链接photo.jpg就可以使用相对路径。如图4-1所示，index.html和photo.jpg图片的路径可以这样来定位：从index.html位置出发，它和images属于

同级，路径是通的，因此可以定位到images，而images的下级就有photo.jpg，所以使用相对路径表示图片如下：

images/photo.jpg

;

使用相对路径时，无论将这些文件放到哪里，只要photo.jpg和index.html文件的相对位置没有变就不会出错。

在相对路径中，“..”表示上级目录，“../..”表示上级的上级目录，依次类推。例如，将photo.jpg图片插入b