一、准備一張圖片。
准備一張需要給不同區域添加不同熱點的圖片。
二、插入圖片：
打開Dreamweaver，新建一個網頁，將圖片插入到頁面中。
三、找到地圖工具：
單擊鼠標左鍵點擊圖片，這時候軟件下方的屬性面板就會變成和圖片相關的屬性，注意看左下角部分，如圖一中的紅色框內所示。
注：如果沒有上圖顯示的熱點地圖工具，是地圖工具屬性隱藏了，可以點擊屬性面板右側的三角符號打開，如下圖：
四、繪制熱點：
注意方塊、圓形、多邊形三個小圖標，它們就是我們要用的“圖片熱點”工具，不同的熱點工具可以繪制出不同形狀的熱點區域。
先點擊方塊按鈕，將鼠標移動到圖片上，這時候鼠標就變成了十字，在你想加鏈接的地方畫一個方塊。添加熱點后的圖片區域會出現一個淺藍色蒙版，意味着該區域已經添加了熱點。依次添加其他區域的熱點。
五、給熱點添加鏈接：
熱點區域畫好后，下面的屬性面板就會變成該熱點區域的屬性，如下圖：
“鏈接”就是點擊此處跳轉的鏈接地址；
“目標”就是點擊此處時窗口的打開方式；
“替換”就是鼠標懸浮在該區域時提示的文字。一般使用"_blank"，指超鏈接將在新窗口打開。
注：可以采用畫一個區域，添加對應的連接，也可以依次把所有的區域熱點畫完，然后點擊熱點區域，依次添加對應的連接。初學者建議一個一個的添加。
六、修改熱點：對熱點區域進行拖動或者局部調整
如果需要修改熱點區域，或者需要進行微調，如中國地圖添加熱點，不可能把所有的熱點區域都做到剛好覆蓋對應的區域，那就需要對已經添加熱點的區域進行調整。
點擊熱點區域，熱點區域四周會出現淺藍色的點。光標放在淺藍色的點，點擊鼠標左鍵，即可調整熱點區域的大小。
七、對個圖片添加熱點：
如果一個頁面中有多個圖片需要添加熱點，那么久需要給每一張圖片對應的熱點設置不同的熱點名稱，如圖示，地圖（M）處的文本框中的字符就是當前熱點的名稱。
可以使用map1、map2、map3。。。也可以使用不同圖片的內容對熱點進行命名，如top_map,foot_map,act_map。。。總之，不同圖片的熱點名稱不同即可。
八、熱點的原理
圖片通過usemap="#Map"屬性將名稱為"Map"的熱點區域及連接映射到圖片上。
熱點添加完畢后，查看頁面源代碼，你會發現在代碼最底下多出幾行內容，這些就是熱點生成的：
<img src="1.png" width="667" height="354" border="0"usemap="#Map"/>
<mapname="Map"id="Map">
<area shape="rect" coords="212,3,452,186" href="鏈接1" target="_blank" />
<area shape="poly" coords="674,190" href="鏈接2" />
<area shape="poly" coords="675,177" href="鏈接3" />
</map>
一般來說，圖片的usermap屬性對應的是map熱點的name的屬性值。所以如果頁面中如果有多個圖片添加熱點，那么每一個圖片的usemap值跟對應的熱點地圖的name值一定要一樣，且不同的熱點區域name值不可以相同，如果相同，那么圖片上的熱點區域將會以相同名稱的第一個熱點區域為准。
