Dreamweaver 中图片热点连接的制作 （热点工具）

一、Dreamweaver中的制作方法

　　DreamWeaver是MacroMedia公司出品的一个所见即所得的网页制作工具，它

提供了非常强大的主页制作功能，而且使用起来非常的顺手、方便，目前正日益

成为专业及业余网页制作人员的首选，在其最新版3.0中，有关“热点”的制作

较2.0版又更为方便了些。

　　(一)、制作步骤

　　1、选择“Insert”->“Image”插入一张图片，使用鼠标左键单击选中此图

片，此时可在“属性”控制面板中看到此图片的相关特性(可通过“Window”->

“Properties”来打开/关闭“属性”控制面板)。

　　2、初次使用“属性”控制面板时其默认为“简化”形式，单击右下方的向

下箭头可打开其扩展属性模式，此时可见到左下方“Map”的相关工具。

　　3、DM3提供了矩形、圆、多边形等三种热点图形方式，使用鼠标左键单击选

择其中一种，此时将鼠标移至图片其光标将变为细十字光标，单击之后拖动鼠标

就可画出一淡蓝色热点区域，此时“属性”窗口内容也随之变化，在“Link”中

输入链接的目标页地址(或单击其后打开按钮选择文件)，“Target”为新页面的

打开方式，“Alt”为此热点的文字说明，这样，一个热点链接就算制作完成，

依此类推可制作出任意多热点链接。

　　(二)、修改与删除

　　若对所建的热点链接不满意，我们也可以任意修改或删除。选中图片“属性

”窗口“map”中的箭头，指向已建热点区域并单击即可选中它(四周出现节点)

，然后指向中部按住不放并拖动鼠标可将此热点图形移至图片的任意位置，从而

重新调整图片的热点链接部位；选中热点区域后将鼠标指向节点，此时可见鼠标

箭头变为黑色，单击后拖动可改变此热点区域的大小；单击“DEL”键可删除所

选的热点链接。

　　二、MapEdit应用

　　也许某些朋友嫌使用DM3制作主页“麻烦”，而热衷于手工编写HTML文件，

那么MapEdit将会对你制作图片的热点链接时提供方便。该工具可谓是一个所见

即所得的专用图片热点编辑器，其制作方法也非常的简单方便，它可自动生成

HTML语句并插入到文件的相关位置。

　　(一)、制作步骤

　　1、启动MapEdit，首先它会打开网页文件选择窗口，选取好一个HTML文件后

，程序会自动提取出该文件中包含的所有图片，从中选取一张需要增加热点链接

的图片，然后返回至主窗口。

　　2、同DM3一样，MapEdit也为我们提供了矩形、圆、多边形等三种热点区域

选择方式，从工具栏中选择其中一种，然后在图片中的某一位置单击并拖动鼠标

就会拖出一块热点区域，之后自动弹出其属性窗口。

　　3、在热点“属性”窗口中，“URL for clicks on this object”为单击此

链接后打开的文件地址；“ALT (Alternative) Text”为热点文字提示信息；“

TITLE (Pop-Up) Text”当你的鼠标停留在此区域内一定时间将要显示的信息，

若选中其右边的“Same As ALT”项，则其内容与上述“ALT Text”中的内容完

全相同；

　　“TARGET”中确定链接页面的显示方式，默认为在新窗口中打开；最下面的

“onMouseOver”和“OnMouseOut”则是MapEdit为高级用户添置的对该区域链接

增加JavaScrip功能，意为鼠标移入或移出该区域将要执行的内容，熟悉

　　JavaScrip的朋友可以一试。所有项目输入完毕后，单击OK即完成一个链接

的建立，若想为此图片中建立多个热点链接可依次类推。

　　(二)、热点修改

　　选择工具栏中的箭头按钮(第三组第1个)，然后单击热点区域，该区域将以

反显(黑色透明)方式显示出来，并且再次弹出此其属性窗口，根据需要可对其进

行修改，单击属性窗口中的“Delete”将删除此热点链接。

　　选择工具栏第三组中的第二个按钮，选定一热点区域后，我们可像在DM3中

一样移动其在图片中的位置以及改变其大小范围，工具栏第三组后两个按钮是用

来增加和减少所选热点图形的节点，从而精确划定热点区域。

　　所有热点制作完成后，不要忘了选择“File”->“Save HTML Document”将

其保存至源文件中。