3.2 图像
图像是网页中不可缺少的元素，它可以美化网页，使网页看起来更加美观大方。
3.2.1 网页图像的格式和使用原则
1.网页图像的格式
虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在Web上常用的图像格式有3种：GIF、JPEG和PNG。
（1）GIF
GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标或其他具有统一色彩和色调的图像。
（2）JPEG
JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。
（3）PNG
PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。
2.网页图像的使用原则
（1）图像的文件大小
高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选择的图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过表格将这些小图像拼合起来。
（2）图像的路径
如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。
3.2.2 图像标签<img>
使用图像标签，可以把一幅图像加入到网页中。用图像标签还可以设置图像的替代文本、尺寸、布局等属性。图像标签的格式为：
标签中的属性说明如下。
src：指出要加入图像的文件名，即“图像文件的路径\图像文件名”。
alt：在浏览器尚未完全读入图像或显示的图像不存在时，在图像位置显示的文字。
title：为浏览者提供额外的提示或帮助信息，方便用户使用。
width：宽度（像素数或百分数）。通常只设为图像的真实大小以免失真。若需要改变图像大小，最好事先使用图像编辑工具进行修改。百分数是指相对于当前浏览器窗口的百分比。
height：设定图像的高度（像素数或百分数）。
hspace：设定图像边沿空白，以免文字或其他图像过于贴近。设定图像左、右的空间水平方向空白像素数。
vspace：设定图像上、下的空白空间，空白高度采用像素作为单位。
align：图像与文本混合排放时，设定图像在水平（环绕方式）或垂直方向（对齐方式）上的位置，包括left（图像居左，文本在图像的右边）、right（图像居右，文本在图像的左边），top（文本与图像在顶部对齐）、middle（文本与图像在中央对齐）或bottom（文本与图像在底部对齐）。
如果不设定图像的大小，图像将按照其本身的大小显示。可使用<img>标签的width和height属性来设置图像的大小。width和height属性的属性值可取像素数，也可取百分数。
【演练3-5】图像的基本用法，本例文件3-5.html在浏览器中正常显示的效果如图3-6所示；当显示的图像路径错误时，效果如图3-7所示。
图3-6 正常显示的图像效果
图3-7 图像路径错误时的显示效果
代码如下：
【说明】
①当显示的图像不存在时，页面中图像的位置将显示出网页图片丢失的信息，但由于设置了alt属性，因此在
的右边显示出替代文字“清新系列”；同时，由于设置了title属性，因此在替代文字附近还显示出来提示信息“清新系列”。
②在使用<img>标签时，最好同时使用alt属性和title属性，避免因图片路径错误带来的错误信息；同时，增加了鼠标提示信息也方便了浏览者的使用。
3.2.3 用图像作为超链接热点
图像也可作为起链接热点，单击图像则跳转到被链接的文本或其他文件。格式为：
例如，制作橱柜图片的超链接，代码如下：
需要注意的是，当用图片作为超链接热点的时候，图片按钮会因为超链接而加上超链接的边框，如图3-8所示。
去除图片超链接边框的方法是为图片标签添加样式“style="border:none"”，代码如下：
去除图片超链接边框后的链接效果如图3-9所示。
图3-8 图片作为超链接热点时加上的边框
图3-9 去除图片超链接边框后的链接效果
3.2.4 案例——制作梦想橱柜图文简介页面
【演练3-6】使用图文混排技术制作梦想橱柜图文简介页面，本例文件3-6.html在浏览器中显示的效果如图3-10所示。
图3-10 页面的显示效果
代码如下：
【说明】如果不设置文本对图像的环绕，图像在页面中将占用一整片空白区域。利用<img>标签的align属性，可以使文本环绕图像。使用该标签设置文本环绕方式后，将一直有效，直到遇到下一个设置标签为止。