2.4 在网页中应用图像

图像具有形象、直观的特点。在网页设计中恰当地应用图像，能够引起访问者的关注，并有助于表现站点的主题。

2.4.1 在网页中添加图像

在HTML语言中，使用<img>标记在网页中插入一个图像文件，语法如下：

        <img src="URL" alt="替换文字" width="数字" height="数字" border="数字"
          hspace="数字" vspace="数字" align="对齐方式" />

img元素是一个行内元素。除了通用属性之外，该元素具有以下属性。

● src属性：指定图像文件的路径，图像可以是JPEG、GIF或PNG格式。

● alt属性：指定替代图像的文本信息，在浏览器不能显示图像时显示出来或图像加载时间过长时先显示出来。当鼠标指针悬停在图像上方时显示文本信息。

● width属性和height属性：分别指定图像的宽度和高度，以像素或百分比（相对于父元素的宽度或高度）为单位。若只给出高度或宽度，则图像将按比例进行缩放。

● border属性：指定图像的边框宽度，以像素为单位。若将该属性设置为0，则不显示边框。

● hspace属性和vspace属性：分别指定图像与文本之间在水平方向和垂直方向上的间距，以像素为单位。

● align属性：指定图像与文本的对齐方式或绕排方式，有以下取值。“left”表示图像居左、文本居右，“center”表示图像居中，“right”表示图像居右、文本居左，“top”表示图像顶部与文本对齐，“middle”表示图像中央与文本对齐，“bottom”表示图像底部与文本对齐。

在Dreamweaver CS3中，可以通过以下操作在网页中插入图像。

1 在文档窗口中，把插入点放置在要显示图像的位置。

选择【插入】→【图像】命令，或者在插入栏的【常用】类别中单击【图像】按钮 并选择【图像】命令。此时将出现【选择图像源文件】对话框，如图2-52所示。

3 选择【文件系统】选项，然后选择要插入的图像文件（指定scr属性）。

4 在【相对于】列表框中选择【文档】或【站点根目录】，这将影响【URL】框的内容。例如，若当前网页位于站点根目录下的chap02文件夹中，要插入站点根目录下images文件夹中的图像文件image07.gif，选择【文档】时图像文件路径为“../images/image07.gif”，选择【站点根目录】时图像文件路径则为“/images/image07.gif”。

图2-52 选择图像源文件

5 若要更改图像文件的默认路径类型，可单击【更改默认的链接相对于】链接。

6 若要在对话框中预览图像的效果，可选取【预览图像】复选框。

7 单击【确定】按钮，此时选定的图像插入网页中。

2.4.2 设置图像的属性

使用Dreamweaver在网页中插入图像之后，可以利用属性检查器或标签检查器对图像的属性进行设置，也可以使用内置的图像处理功能对图像进行编辑。

1.利用属性检查器设置图像的属性

利用属性检查器可以图像的常用属性进行设置，操作方法如下。

1 在文档窗口中，通过单击选择一个图像。

2 在属性检查器中，使用缩略图下面的文本框设置图像的名称（id），以便在脚本代码中引用该图像，如图2-53所示。

图2-53 利用属性检查器设置图像的属性

3 在【宽】和【高】框中，以像素为单位指定图像的宽度（width属性）和高度（height属性）。当在网页中插入图像时，Dreamweaver自动用图像的原始尺寸填写这些文本框。

若要将【宽】和【高】的值重设为图像的原始大小，可单击【重设大小】按钮 。该按钮只有在设计者改变了图像的原始大小后才会出现。

在【源文件】框中指定图像的源文件（src）以更改图像，可以直接键入图像文件的路径，或者单击文件夹图标 以找到图像文件。

在【链接】框中指定图像链接的URL，可将【指向文件】图标 拖到【文件】面板中的某个文件，或者单击文件夹图标 以找到站点上的某个文档，或者手动键入URL。此时，将使用<a>标记创建基于图像的超链接。

7 在【对齐】列表中选择一个选项（align属性），以对齐同一行上的图像和文本。

8 在【替代】框中指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本（alt）属性。当鼠标指针滑过图像时也会显示该文本。

9 使用地图名称和热点工具，可以标注和创建客户端图像地图。

10 在【垂直边距】框中指定图像顶部和底部的边距（vspace属性），以像素为单位。

11 在【水平边距】框中指定图像左侧和右侧的边距（hspace属性），以像素为单位。

12 在【目标】列表框中，指定链接的页应当在其中载入的框架或窗口（即设置<a>标记的target属性）。当图像未链接到其他文件时，此选项不可用。当前框架集内所有框架的名称都显示在【目标】列表中。也可以选用以下列保留目标名。

● _blank：将链接的文件载入一个未命名的新浏览器窗口中。

● _parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。

● _self：将链接的文件载入该链接所在的同一框架或窗口中。这是默认值。

● _top：将链接的文件载入整个浏览器窗口中，因而会删除所有框架。

13 在【低解析度源】框中，指定在载入主图像之前应该载入的图像（lowersrc属性）。

14 在【边框】中，指定以像素为单位的图像边框的宽度（border属性）。border属性的默认值为0，即图像无边框。

若要启动外部图像编辑器并打开选定的图像，可单击【编辑】按钮 。

若要打开【优化】对话框对图像进行优化处理，可单击【使用Fireworks最优化】按钮 。

若要修剪图像的大小，从所选图像中删除不需要的区域，可单击【裁剪】按钮 。

若要重新取样已调整大小的图像，可单击【重新取样】按钮 。

若要对图像的亮度和对比度进行调整，可单击【亮度和对比度】按钮 。

若要对图像的清晰度进行调整，可单击【锐化】按钮 。

21 若要对图像应用CSS类样式，可从【类】列表中选择所需要的CSS类样式。

2.利用标签检查器设置图像的属性

利用标签检查器可以对图像的更多属性进行设置，操作方法如下。

1 按F9键打开标签检查器。

2 在文档窗口单击图像，或在标签选择器中单击<img>标记。

3 在标签检查器中对<img>标记的相关属性进行设置，如图2-54所示。

例2-15 设置图文绕排效果，网页效果如图2-55所示。

图2-54 用标签检查器设置图像的属性

图2-55 设置图文绕排结果

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-15.html，把网页标题设置为“实现图文绕排效果”。

2 在页面上输入“实现图文绕排效果”，并设置为“标题3”格式。

3 创建一个新的文本段落，并在此段落中插入一个图像。

4 选择该图像，把垂直边距和水平边距都设置为10，把对齐方式设置为右对齐。

5 创建另一个文本段落，并在其下方设置一个无序列表。

6 在浏览器中查看网页效果。