DW第5章.ppt

* 5.2.7图像热点链接 热点链接也称热区链接，也有的称图像地图。 图像热点链接用来划分同一张图像上不同区域的超链接。图像热点就是带有预先定义区域的图像，这些区域包含了指向其他文档或锚点的链接。例如在网页版中国地图中，单击某省的名称，便会打开新网页以显示该省的地图或介绍。 1. 运行Dreamweaver CS4，打开网页文件，并选择文件内的图像，如下图所示。选中图像后在如下图所示的【属性】面板中选择“矩形热点工具”、“圆形热点工具”、“多边形热点工具”之一，在图像相应位置上给四个直辖市分别绘出不同的区域，即有四个热点或热区。 * 使用热点工具绘制热点 * 设置图像热点的热点工具 * 【属性】面板的4个热点工具按钮名称说明如下表所示： 热点工具按钮 名 称 说 明 指针热点工具按钮 用来选择或移动链接区域范围 矩形热点工具按钮 用来绘制图像地图中的矩形区域 圆形热点工具按钮 用来绘制图像地图中的圆形区域 多边形热点工具按钮 用来绘制图像地图中的多边形区域 * 2.选择“北京”上面的热点，在“链接”文本框中添加链接地址“beijing.htm” 在“替换”文本框设置选区的提示文字为“北京市”，如图所示： 3.同样方法，将其它三个直辖市的热点也分别链接到不同的网页：tainjin.htm、shanghai.htm、chongqin.htm。 4.保存，预览效果。 * 5.2.8 鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。必须用以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以与第一个图像的属性匹配。鼠标经过图像自动设置为响应 onMouseOver 事件。您可以将图像设置为响应不同的事件（例如，鼠标单击）或更改鼠标经过图像。其步骤如下： 在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 * 使用以下方法之一插入鼠标经过图像： 在【插入】面板的【常用】模式中，单击【图像】展开式按钮 ，然后选择【鼠标经过图像】图标按钮 。【插入】面板中显示【鼠标经过图像】图标按钮 后，您也可以将该图标拖到“文档”窗口中。 在菜单栏中选择【插入】→【图像对象】→【鼠标经过图像】命令。 * 执行上述方法之一后，会弹出下图： * 设置选项，然后单击【确定】按钮。 图像名称：鼠标经过图像的名称。 原始图像：页面加载时要显示的图像。在文本框中输入路径，或单击“浏览”并选择该图像。 鼠标经过图像：鼠标指针滑过原始图像时要显示的图像。输入路径或单击“浏览”选择该图像。 预载鼠标经过图像：将图像预先加载浏览器的缓存中，以便用户将鼠标指针滑过图像时不会发生延迟。 替换文本： 这是一种（可选）文本，为使用只显示文本的浏览器的访问者描述图像。 按下时，前往的 URL：用户单击鼠标经过图像时要打开的链接网页文件。输入路径或单击“浏览”并选择该文件。 * 注： 如果您不为该图像设置链接，Dreamweaver 将在 HTML 源代码中插入一个空链接 (#)，该链接上将附加鼠标经过图像行为。如果删除空链接，鼠标经过图像将不再起作用。 在菜单栏中选择【文件】→【在浏览器中预览】，或按【F12】键。 在浏览器中，将鼠标指针移过原始图像以查看鼠标经过图像。 注： 不能在“设计”视图中看到鼠标经过图像的效果。 提示：鼠标经过图像的链接文件路径可在【属性】面板的“链接”框中更改。 * 5.2.9导航条 导航条实际上是一组动态图像按钮，单击它后，可在浏览器中调出HTML文件和其他（如图像）文件。使用插入导航条功能可以方便地完成网站的导航系统制作，而且变化多样、简单易学。制作导航的具体操作方法如下： 将光标放在需要插入导航条的位置。 在菜单栏中选择【插入】→【图像对象】→【导航条】命令,如下图所示。或在【插入】面板【常用】中，单击【图像】展开式按钮 ,在其选择【导航条】按钮 ,如下图所示。 * * 打开【插入导航条】对话框,如图所示。此对话框用于命名导航条元件并选择导航条元件所用的图像。 * 在【项目名称】文本框中输入导航条项目的名称,每一个元件都对应一个按钮,该按钮最多可达4个状态图像。项目名称在【导航条元件】列表框中显示。 单击【状态图像】文本框右侧的【浏览】按钮,在弹出的[选择图像源文件]对话框中选择一个图像文件。分别设置【鼠标经过图像】、【按下图像】、【按下时鼠标经过图像】。在【替换文本】右侧的文本框中,输入项目的描述名称,如下图所示。 * * 提示：替换文本在纯文