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代碼沒有區別，只是使用這些工具可以提高工作效率。