天天看點

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

Dreamweaver中如何設定熱區?下面小編就為大家詳細介紹一下,一起來看看吧!

方法/步驟

向平時一樣,這裡我們在設定Dreamweaver熱區的時候。同樣這裡是需要建立一個新的HTML界面的。

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

建立完畢,如下圖中所示的一個新的文檔(HTML)

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

按照同時最為簡潔的方式,我們在新的HTML中插入一個新的圖檔作為熱區設定的底片

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

選擇桌面中的一個圖檔進行添加

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

在建立相對的路徑時我們是需要儲存文檔的

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

這裡大家注意的是我們的根檔案是必須要儲存在一個站點中的。這裡我們将其路徑複制儲存在我們的站點中

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

選擇站點目錄進行儲存即可

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

圖像标簽輔助功能屬性這裡我們是不需要進行設定的,點選确定即可

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

随後就是如下圖中的一個圖檔插入的界面了。

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

點選選中圖檔之後我們選擇底部熱鍵工具

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

選擇我們的一個熱鍵的區域,這裡我們選擇的是圖檔中人物的右眼。“以正方形的形式”

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

随後我們将其眼部的熱鍵區域的連結設定成為百度的一個接入口

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

将滑鼠移至空白處然後點選儲存

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

儲存完畢之後,按鍵盤中的F12進入浏覽區的界面中,這裡我們選擇圖檔中人物之後進行點選

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

随後就可以跳轉到你設定的一個百度的界面中,(注意這裡我們隻有點選了熱建中的區域後才能進行跳轉)

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

同樣的方式,這裡我們用圓形設定圖檔人物的一個左眼

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

按照同樣的方式,這裡我們對圖檔區域的熱鍵進行設定

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

選擇另外的一個圖檔進行跳轉

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

同樣的是這樣我們是需要設定儲存期路徑的

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

點選确定儲存

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

設定儲存完畢之後按F12進入調試,這次我們點選器左眼

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

随後我們就可以跳轉到你所設定的那個界面了。

怎麼在HTML中加入熱區,Dreamweaver中如何設定熱區?DW設定熱區方法圖解

以上就是Dreamweaver中如何設定熱區方法介紹,操作很簡單的,大家學會了嗎?希望能對大家有所幫助!