下载掌阅APP，畅读海量书库
立即打开
图像是HTML网页中另一个非常重要的信息承载对象。无论是背景图像，还是网站logo，甚至是网页中的各种图标，都需要通过插入的方式才能在网页中显示，下面我们来详细介绍如何在网页中插入图像。
使用Dreamweaver在网页中插入图像的方法非常简单，可以参照以下步骤在网页中插入一幅图像。
新建一个HTML网页，切换到“设计”视图。
选择“插入”→“图像”→“图像”命令，如图4.4所示。
图4.4
（3）在打开的“选择图像源文件”对话框中选择要插入的图像，如图4.5所示。
图4.5
（4）单击“确定”按钮后，选中的图像就插入到了网页中，效果如图4.6所示。
图4.6
使用Dreamweaver在HTML页面中插入图像后，我们再切换到“代码”视图，此时可以在<body>标签中看到下面新增加的一行代码：
这行代码由一个<img>标签组成，在HTML中，<img>标签主要用于在网页中插入一个图像，标签中的src属性指定要插入图像的位置。在上例中，因为图像和HTML网页在同一个文件夹中，所以可以直接写图像的名称，如果图像和HTML网页不在同一个文件夹中，则需要使用绝对路径或相对路径来指定图像的位置。
如图4.7所示，将图像img01.jpg移动到img文件夹中，这样HTML页面与图像所在路径分属不同的目录级别，如果要在HTML页面中正确显示图像，则需要使用如下所示代码：
图4.7
举一反三，如果HTML页面与图像分属于不同的磁盘下，在制定图像路径的时候，则需要使用图形的绝对路径。例如，图像img01.jpg位于D盘下的img文件夹中，可以使用如下所示代码，在HTML页面中插入图像。
另一种情况，如果要插入的图像并非存储在本地，而是来源于网络，那么该图像就会有一个网络地址，在指定图形路径时，必须使用正确的网络地址才能正确显示图像，例如下面的代码：
<img>标签中有一个alt属性，该属性用于指定当图像无法显示时的替代文本。以下4种情况下图像将无法显示。
（1）网速太慢。
（2）src属性错误。
（3）浏览器禁用图像。
（4）用户使用的是屏幕阅读器。
当图像无法显示时，网页中图像所在位置会根据不同的浏览器显示不同的效果，如图4.8是谷歌浏览器中图像无法显示的效果，图4.9是IE浏览器中图像无法显示的效果。
图4.8
图4.9
以上两幅图中，HTML页面显示的文字就是alt中指定的内容，详细代码如下所示：
在这段代码中，需要将图像的名称修改成“img002.jpg”。因为在img文件夹中无法找到“img/img02.jpg”对应的图像文件，所以src指定的图像位置无效。HTML页面中的图像无法正常显示，就会在图像显示的位置用alt属性中指定的内容替代图像。
需要注意的是，<img>元素的alt属性和title属性都可以指定文字内容，alt属性用于指定当图像无法显示时的替代文本，而title属性用于显示一段描述性文字，当鼠标移动到图像所在位置时，在鼠标位置附近会显示这段描述性文字，如图4.10所示。
图4.10
细心的同学也许已经发现这样一个问题，我们在Dreamweaver中插入的图像始终显示在HTML页面中的左上角。如果想让插入的图像显示在HTML页面的中间位置，应该如何操作呢？
让我们返回到Dreamweaver操作界面，切换到设计视图。单击选中插入的图像，然后选择“格式”→“对齐”→“居中对齐”命令，如图4.11所示，这样我们在HTML页面中插入的图像就调整到了中间位置，效果如图4.12所示。
图4.11
图4.12
返回到代码视图，我们发现在<img>元素的外边新添加了一个<div>元素，并且设置了该元素的align属性为center。也就是说，此时<img>元素作为<div>元素的内嵌元素，并且居中显示，这样就可以达到图像居中显示的效果。相关代码如下所示：
以上设置图像位置的方法比较局限，如果要更加灵活的设置图像的位置，可以使用下面的这种设置，效果如图4.13所示。
图4.13
在这段代码中，我们添加了style属性，并设置position为absolute，表示当前图像以绝对位置显示，然后设置left属性为100px，top属性为50px，表示当前图像的左上角位置坐标为距离左边界100个像素，距离上边界50个像素，这样就可以灵活控制图像显示的位置了。
在Dreamweaver中插入图像后，默认以图像原始尺寸插入图像，并且在代码中用width表示图像的宽度，用height表示图像的高度，图像尺寸单位为像素（px）。我们还可以根据需要，手动调整图像的高度和宽度。例如，上例中插入的图像宽度为960，高度为640，这个图像在网页中显示的效果太大了，我们需要调整它的尺寸宽度为400，高度为200，刷新页面后的效果如图4.14所示。
图4.14
调整后的图像效果发生了扭曲变形，这是因为相对图像的原始尺寸，调整后的尺寸失去了宽比约束，我们可以通过等比例缩放图像尺寸避免这种情况。
在HTML页面中，文字和图像是最重要的信息承载对象。当文字和图像必须同时出现在同一个区域时，就需要使用图像的绕排功能。
<img>元素的align属性用于指定图像及其周围元素的排列方式，align可指定的值为left、right、top、middle和bottom。left和right会将图像浮动到周围元素的左边或者右边的边界上，top、middle和bottom会将图像与周围文字在垂直方向上对齐。
图片左对齐效果如图4.15所示。
图4.15
图片右对齐效果如图4.16所示。
图4.16
垂直居上对齐效果如4.17所示。
图4.17
垂直居中对齐效果如图4.18所示。
图4.18
垂直居下对齐效果如图4.19所示。
图4.19
图像映射是指将一个图像划分成多个区域，每一个区域都可以指定一个超链接，点击不同的区域会跳转到不同地址。图像映射最经典的应用就是导航地图，当鼠标移动到地图上一个区域时，该区域的背景颜色呈现为灰色，并显示当前区域的名称，如图4.20所示。
图4.20
在HTML中，创建图像映射的关键在于使用<map>和<area>这两个元素。<map>元素用于指定图像映射的区域，必须为其指定一个name值，该值用于在<img>元素中设置使用哪个图像映射，<area>元素用于在图像地图中划分作用区域。
一个<map>元素中可以有多个<area>元素，每个<area>元素指定一个映射区域。<area>元素中有两个非常重要的属性，shape和coords。shape用于指定映射区域的形状，目前可以设定的值有矩形（rect）、圆形（circle）和多边形（poligon），coords用于指定坐标点，详细使用方法如下：
<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（x1,y1），右下角顶点坐标为（x2,y2）。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（x1,y1），半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（x1,y1）、（x2,y2）、（x3,y3） ......
在Dreamweaver中，通过可视化操作，可以非常方便地为图像创建映射，详细操作步骤如下：
在Dreamweaver中插入一幅图像。
切换到设计视图，选中插入的图像，在窗口的下面的属性面板中可以看到用于设置映射的区域，如图4.21所示。
图4.21
单击绘制圆形映射的图标
，在插入的图形中绘制一个圆形，然后单击
图标，移动圆形到合适的位置，效果如图4.22所示。
用同样的方法绘制其他映射区域，效果如图4.23所示。
图4.22
图4.23
（5）用鼠标选中一个绘制的映射区域，在属性面板中的“链接”位置输入一个链接地址，这样当鼠标单击该区域位置时，就会跳转到指定的页面，效果的图4.24所示。
图4.24
（6）用同样的方法为其他映射区域添加链接地址，切换到代码视图，我们可以看到如下所示代码：
不难看出，使用Dreamweaver创建的图像映射，其实质还是以代码的形式来创建的。在实际的使用过程中，为了提高工作效率和准确性，使用Dreamweaver比直接使用代码效率更高。