使用图像

一、 图像的格式

说明：网页中图像的格式通常有3种，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的网页图形都是最适合的，但是Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG图像的显示。建议使用GIF或JPEG格式，以满足更多人的需求。

1. GIF格式

• GIF是英文单词Graphic Interchange Format的缩写，即图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。

• GIF格式的最大优点就是可制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一个动画文件。

• GIF格式的另一优点就是可以将图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大略猜出下载图像的雏形。

2. JPEG格式

• JPEG是英文单词Joint Photographic Experts Group的缩写，它是一种图像压缩格式。此文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。
• JPEG格式是一种压缩的非常紧凑的格式，专门用于不含大色块的图像。JPEG图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的区别，而JPEG文件只有GIF文件的1/4。JPEG对图标之类的含大色块的图像不是很有效，不支持透明图和动态图，但它能够保留全真的色调板格式。如果图像需要全彩模式才能表现效果的话，JPEG就是最佳的选择。

3. PNG格式

• PNG（Portable Network Graphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF图像格式的大部分优点，而且还支持48-bit的色彩，更快地交错显示，跨平台的图像亮度控制，更多层的透明度设置。

二、 插入图像

说明：插入图像的标签只有一个，那就是 img 标签。

1. 插入图像标记 img

img 标签相关属性见下表：

属性	描述
src	图像的源文件
alt	提示文字
width，height	宽度和高度
border	边框
vspace	垂直间距
hspace	水平间距
align	排列
dynsrc	设定 avi 文件的播放
loop	设定 avi 文件循环播放次数
loopdelay	设定 avi 文件循环播放延迟
start	设定 avi 文件播放方式
lowsrc	设定低分辨率图片
usemap	映像地图

2. 图像的源文件 src

<img src="图像文件的地址">

说明：src 属性用于指定图像源文件所在的路径，它是图像必不可少的属性。在该语法中，src参数用来设置图像文件所在路径，这一路径可以是相对路径，也可以是绝对路径，还可以是https://为关键字的网络图像。

3. 图像的提示文字 alt

<img src="图像文件的地址" alt="提示文字的内容">

说明：当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

4. 图像的宽度和高度 width、height

<img src="图像文件的地址" width="图像的宽度" height="图像的高度">

说明：width和height属性用来定义图片的高度和宽度，如果 img 元素不定义高度和宽度，图片就会按照它的原始尺寸显示。在该语法中，图像的宽度和高度的单位是像素。

提示：无论在width和height属性中指定什么值，整个图像都会被下载，即使width和height属性值设置得很小，图像也不会下载得更快。

5. 图像的边框 border

<img src="图像文件的地址" border="图像边框的宽度">

说明：默认情况下，图像是没有边框的，通过border属性可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。在该语法中，border的单位是像素，值越大边框越宽。

6. 图像的垂直边距 vspace

<img src="图像文件的地址" vspace="垂直边距">

说明：垂直边距 vspace 用来调整图像与文字的垂直边距。在该语法中，vspace 属性的单位是像素。

7. 图像的水平间距 hspace

<img src="图像文件的地址" hspace="水平边距">

说明：图像与文字之间的水平距离可以通过 hspace 参数进行调整。通过调整图像的边距，可以使文字和图像的排列显得紧凑，看上去更加协调。在该语法中，水平边距hspace属性的单位是像素。

提示：使用 hspace 和 vspace 属性会在图像周围对称加入空格。hspace 属性在图像两侧加入空格，而 vspace 属性在图像顶部和底部加入相同的空格。

8. 图像的排列 align

<img src="图像文件的地址" align="文字的对齐方式">

说明：图像和文字之间的对齐是通过 align 属性来设定的，align 的对齐方式有两种，即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有三种 ”居中“，”居左“，”居右“。相对对齐方式是指图像与一行文字的相对位置。

align 的属性取值表如下：

属性	描述
bottom	图片的底部和当前行的文字底部对齐
top	图片的顶端和当前文字的顶端对齐
middle	图片水平中线和当前行的文字中线对齐
left	图片左对齐
center	图片水平中线和当前行的文字中线对齐
right	图片右对齐

三、 图像的超链接

说明：除了文字可以添加超链接外，图像也可以设置超链接属性。同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。

1. 图像的超链接

<a href="链接地址"><img src="图像文件的地址"></a>

说明：图像的链接和文字的链接方法是一样的，都是用 a 标签来完成，只要将 img 标签放在 a 和 /a 之间就可以了。在该语法中，href 参数用来设置图像的链接地址。

2. 图像热区链接

<img src="图像地址" usemap="映射图像名称">

<map name="映射图像名称">
    <area shape="热区形状" coords="热区坐标" href="链接地址">
</map>

说明：在HTML中可以把图片划分成多个热点区域，每一个热点区域链接到不同的网页。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接，这就是映射地图。在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在 area 标记中定义了热区的位置和链接，其中shape参数用来定义热区形状，coords 参数则用来设置区域坐标，对于不同形状来说，coords 设置的方式也不同。

[关于如何设置热区](Dreamweaver如何创建图形热区链接-百度经验 (baidu.com))