6.2 设置网页图像
网页中的图片为了满足排版要求，往往需要设置图片的样式。
6.2.1 设置图像路径及文件
路径是定位图像文件的位置，有两种方式，以当前文档为参照点表示文件的位置，是相对路径；以根目录为参照点表示文件的位置，是绝对路径。
为了方便介绍绝对路径和相对路径，假设现有目录结构，如图6-2所示。
图6-2 目录结构
1．绝对路径
例如，在D盘deme目录下的img下有一个01.jpg图像，那么它的路径就是D:\demo\img\01.jpg，像这种完全描述文件位置的路径就是绝对路径，如果想要把01.jpg插入index.html中，绝对路径表示方式如下：
D:\demo\img\01.jpg
如果使用了绝对路径D:\demo\img\01.jpg进行图片链接，那么本地计算机中将一切正常，因为在D:\demo\img下的确存在01.jpg这个图片文件。
2．相对路径
那么如何使用相对路径在index.html中插入01.jpg呢？其实很简单，只需要以index.html为参照点，去寻找01.jpg即可，从目录结构图可以发现，index.html和img属于同一级，路径是一样的，因此可以定位到img，img的下级就是01.jpg，使用相对路径表示图片，如下面代码所示：
./img/01.jpg
使用相对路径，不论将这些文件放到哪里，只要index.html和01.jpg文件的相对位置没有发生改变，就不会出错。
在相对路径中，“./”表示同级目录，“../”表示上一级目录，“../../”表示上级的上级目录，以此类推。
6.2.2 设置图像的宽度和高度
在HTML文档中，图片一般是以原图尺寸来显示的，可以通过width（宽度）和height（高度）属性来设置图片的尺寸。图片的尺寸可以选择数值或者百分比，数值是绝对尺寸，百分比是相对尺寸。
【例6-2】（实例文件：ch06\Chap6.2.html）设置图像的宽和高。
相关的代码实例请参考Chap6.2.html文件，在IE浏览器中运行的结果如图6-3所示。
图6-3 设置图像的宽度和高度
6.2.3 设置图像的提示文字
图像文字的提示效果使用alt和title属性来完成，当图像没有下载完成时，才会显示alt属性所设置的提示文字；当把鼠标指针移动到图片上时，显示title属性设置的提示信息。
【例6-3】（实例文件：ch06\Chap6.3.html）设置图像的提示文字。
相关的代码实例请参考Chap6.3.html文件，在IE浏览器中运行的结果如图6-4所示。
图6-4 设置图像的提示文字