3.5 综合实例——用Dreamweaver精确定位热点区域

上面讲述了HTML创建热点区域的方法，其中最让读者头痛的地方就是坐标点的定位。对于简单的形状还可以，如果边数较多且形状复杂，那么确定坐标点的工程量就很大，因此不建议使用HTML代码去完成。这里将为读者介绍一个快速且能精确定位热点区域的方法，使用Dreamweaver CC可以很方便地实现这个功能。

Dreamweaver CC创建图片热点区域的具体操作步骤如下：

01 创建一个HTML文档，插入一张图片文件，如图3-11所示。

02 选择图片，在Dreamweaver CC中打开属性面板，面板左下角有3个蓝色图标按钮，依次代表矩形、圆形和多边形热点区域。单击左边的【矩形热点】工具图标，如图3-12所示。

03 将鼠标指针移动到图片上，以【创意信息平台】栏中的矩形大小为准，按下鼠标左键，从左上方向右下方拖曳鼠标，得到矩形区域，如图3-13所示。

04 绘制出来的热区呈现出半透明状态，效果如图3-14所示。

05 如果绘制出来的矩形热区有误差，可以通过属性面板中的【指针热点】工具进行编辑，如图3-15所示。

06 完成上述操作之后，保持矩形热区被选中状态，然后在属性面板中的【链接】文本框中输入该热点区域链接对应的跳转目标页面。

07 在【目标】下拉列表框中有4个选项，它们决定着链接页面的弹出方式。这里如果选择了【_blank】，那么矩形热区的链接页面将在新的窗口中弹出。如果【目标】选项保持空白，就表示仍在原来的浏览器窗口中显示链接的目标页面。这样，矩形热点区域就设置好了。

08 接下来继续为其他菜单项创建矩形热点区域。操作方法请参阅上面的步骤，完成后的效果如图3-16所示。

09 完成后保存并预览页面。可以发现，凡是绘制了热点的区域，鼠标指针移上去时就会变成手形，单击就会跳转到相应的页面。

10 至此，使用热点区域制作网站的导航就完成了。此时页面相应的HTML源代码如下：

可以看到，Dreamweaver CC自动生成的HTML代码结构和前面介绍的是一样的，但是所有的坐标都自动计算出来了，这正是网页制作工具的快捷之处。使用这些工具本质上和手工编写HTML代码没有区别，只是使用这些工具可以提高工作效率。