网页制作第5单元 图像

第5单元图像

课程目标：

●掌握在网页中插入图像

●掌握影像地图的使用

●掌握轮换图像的使用

●掌握导航条的制作

●掌握图片相册的制作

建议学时：理论4学时，实践4学时。

5.1 插入图像及设置图像属性

5.1.1 插入图像

在网页中插入图像的操作十分简单，既可以使用工具栏的【图像】按钮，然后找到要插入的图片文件，再也可以使用菜单【插入】|【图像】，还可以直接从文件面板中拖动图像文件到正在编辑的页面上。

虽然图像文件的格式有很多，但在网页上通常只使用三种格式：jpg、gif、png等。将图像插入到网页时，Dreamweaver8会自动在HTML源代码中生成对该文件的引用，打开代码视窗可看到类似如下的代码：

即为引用images文件夹中的img001.jpg文件。

在网页制作中，为了确保文件引用的正确性，图像文件必须位于当前站点文件夹中，如果图像文件不在当前站点文件夹，系统会提问是否要将此文件复制到当前站点文件夹，此时应回答“是”，否则当站点上传后会找不到该图像文件。

5.1.2 设置图像属性

选中插入的图像，属性面板为图像的属性面板，如图5-1所示，使用该面板可对插入的图像进行设置。

图5-1 图像属性面板

宽、高：选定图像的当前尺寸，如果插入后更改过图像的大小，则宽、高旁边的“重设大小”按钮变成可选。

提示：建议不要更改插入后图像的尺寸，这样一是容易产生图像变形，二是即使

插入后尺寸改小，也不可能改变网页文件实际的大小。因此，图像在插入前应使

用专门的图像编辑软件（如Photoshop、Firework等）修改好。

垂直边距、水平边距，是指图像与其它对象（如文字等）之间的距离。

源文件，即插入到网页中的文件全名，包含了图像文件的相对路径和文件名。

替换：在该文本框中可以输入图像的替换文字。这样，当图像没有被显示时，相应区域会显示替换文字以提示浏览者这里将显示的内容。在IE浏览器中，当鼠标移到图像上方时，该文本也会显示出来。

低解析度源：可使用分辨率较低的图片，在浏览时先出现低解析度的图像，然后再显示源文件图像。

地图：是一个文本框，当图像作为影像地图时可给该图像命名一个唯一的名称。

类：应用所定义的类属性（见CSS章节）

边框：在图像周围显示边框

对齐：设置图像的对齐方式（居中、左对齐、右对齐）。

提示：只有当对齐方式设为左对齐或右对齐时，文字才可以绕在图片周围。

5.1.3 本节小结

在网页中插入图像是个很简单的操作，插入后可通过属性面板设置图像的属性，一般设置的属性包括垂直、水平边距和对齐方式等。

5.2 影像地图

利用文字、按钮、图像作为超级链接点，是网页创建链接的主要方式之一，实际上也可以利用图像的一部分区域作为链接点。例如在网页中放置一个地图，地图上划分有若干个行政区域，点击则可以转入到介绍该行政区域的页面，这就是影像地图的来源。

5.2.1 什么是影像地图

影像地图是一幅被划分为多个“热区”的图像，单击“热区”即可进入相应页面。

5.2.2 插入影像地图

影像地图就是一般的图像，因此插入影像地图和插入一般图像是相同的，不同的是插

入后，利用图像属性面板左下角的热区划分工具划分热点。这些工具包含矩形工具、圆形工具和任意多边形工具，使得对热区的划分变得随心所欲。如果在同一页面使用多个影像地图，则应给每个影像地图在属性面板的地图文本框中命名一个唯一的名称。

图5-2 使用多边形工具划分热区及热区链接

5.2.3 本节小结

影像地图是通过分割一张图像，使图像的各部份分别可链接到不同的页面。

5.3 轮换图像

5.3.1 什么是轮换图像

轮换图像，也称为鼠标经过图像，在显示时是一幅图像，当鼠标经过其上面时，自动切换成另一幅图像来显示，鼠标离开时又恢复原图像。由此可看出，轮换图像实际上是两幅图像，通常，用于轮换的图像应大小相同，否则当图像切换时会影响版面布局。在轮换图像上一般可以根据需要设置链接。

5.3.2 插入轮换图像

（1）准备好两幅一样大小的图像，如下图：

图5-3 用于制作轮换图像的两幅图像应大小一致

（2）执行菜单【插入】|【图像对象】|【鼠标经过图像】，出现如图5-4的对话框

图5-4 插入鼠标经过图像对话框

按下【浏览】按钮后找到原始图、鼠标经过图像，并设置“按下时，前往的URL：”（即超级链接）即可。

5.3.3 本节小结

使用Dreamweaver提供的插入鼠标经过图像功能，制作轮换图像是十分简单的，轮换图像的使用有助于改善访问者在浏览网页时视觉效果，制作轮换图像的两张图像一般是一样大小，常态下显示一张，当鼠标经过时自动切换显示另一张。

5.4 导航条

5.4.1 什么是导航条

导航条对浏览者而言是起到一个导游的作用，使浏览者可方便找到要浏览的内容，对网页设计者而言，是组织、规划网站内容的一个手段，通过导航条，连接到其它页面。

导航条有多种形式，从位置上来说，有顶部导航、左侧导航、右侧导航、底部导航等，

一般以顶部导航和左侧导航居多。从使用的链接对象来看，可以是文字、图像、动画等。

5.4.2 插入导航条

在Dreamweaver8中提供了插入导航条的功能，如果要制作出导航条呈轮换图像的动态效果，采用这个方法是最简便的。

（1）预先准备好各导航按钮的原图像和轮换图像。

（2）执行菜单【插入】|【图像对象】|【导航条】，出现图5-5的插入导航条对话框。

图5-5 插入导航条

进行以下设置：

●项目名称：用于给导航按钮命名，一般以字母开头，也可不填，此时Dreamweaver8

会自动命名。

●状态图像、鼠标经过图像、前往的URL等：与前面的轮换图像类似

●按下图像、按下时鼠标经过图像、替换文本等均可省略。

●选项：预先载入图像，表示在浏览时，导航条所用到的按钮图像将在页面下载的

同时全部下载。这样，虽然整个页面打开的速度会稍为慢些，但按钮的不同图像

间切换无须再等待，会显得更加流畅。页面载入时就显示“鼠标按下图像”选项，

则表示在页面载入时先显示鼠标经过图像，否则显示状态图像。

●插入：有“水平”、“垂直”两个选项，即导航条的显示方式。