第5单元 图像
课程目标：
● 掌握在网页中插入图像
● 掌握影像地图的使用
怎么制作网页图片
● 掌握轮换图像的使用
● 掌握导航条的制作
● 掌握图片相册的制作
建议学时：理论4学时，实践4学时。
5.1 插入图像及设置图像属性
5.1.1 插入图像
在网页中插入图像的操作十分简单，既可以使用工具栏的【图像】按钮，然后到要插入的图片文件，再也可以使用菜单【插入】|【图像】，还可以直接从文件面板中拖动图像文件到正在编辑的页面上。
虽然图像文件的格式有很多，但在网页上通常只使用三种格式：jpg、gif、png等。将图像插入到网页时，Dreamweaver8会自动在HTML源代码中生成对该文件的引用，打开代码视窗可看到类似如下的代码：
<img src="images/IMG001.JPG" />
即为引用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 插入轮换图像

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。