什么是dreamweaver圖像熱區(qū)鏈接
大家在打開帶有圖片的網(wǎng)頁時,有時會看到這樣的情況:當鼠標指向圖片的不同部位時,可以打開不同的超鏈接,這種技術(shù)我們稱之為—網(wǎng)頁圖片熱區(qū)。
dreamweaver圖像熱區(qū)鏈接的設(shè)置(圖文)如下。
?。?)建立網(wǎng)頁文件,如上例的網(wǎng)頁,但只放圖像,而不必定義映射圖像名以及熱區(qū)。
?。?)啟動Dreamweaver,選擇"文件"菜單的"打開"命令,彈出"打開"對話框,在對話框中打開剛才建立的HTML文件,如下圖所示。
?。?)選擇圖片,在屬性面板中設(shè)置"地圖"的值為"taihu",也就是定義圖像要引用的映射圖像名。
?。?)設(shè)置熱區(qū)。為了顯示各種熱區(qū)的效果,這里將不同的熱區(qū)定義為不同的形狀。單擊"矩形熱點工具",按住鼠標左鍵在圖片適當位置拖動,繪制出一個矩形區(qū)域,如下圖所示。
?。?)選中矩形區(qū)域后,在"鏈接"(對應(yīng)href屬性)文本框中添加鏈接地址"chap7_7meiyuan.html",在"目標"下拉列表(對應(yīng)target屬性)中選擇"_blank",在"替代"(對應(yīng)alt屬性)文本框中設(shè)置選區(qū)的提示文字為"梅園",如下圖所示。
?。?)再次單擊圖片,選擇橢圓型熱點工具,用類似的方法,在黿頭渚(讀做:元頭煮)附近設(shè)置一個橢圓型(實際上是圓形)選區(qū),如下圖所示。
(9)選中橢圓形區(qū)域后,在"鏈接"(對應(yīng)href屬性)文本框中添加鏈接地址"chap7_7yuantouzhu.html",在"目標"下拉列表(對應(yīng)target屬性)中選擇"_blank",在"替代"(對應(yīng)alt屬性)文本框中設(shè)置選區(qū)的提示文字為"黿頭渚",如下圖所示。
(10)再次單擊圖片,選擇"多邊形熱點工具",依次單擊熱區(qū)的各個點,創(chuàng)建一個多邊形區(qū)域,如下圖所示。
?。?1)選中多邊形區(qū)域后,在"鏈接"文本框中添加鏈接地址"chap7_7piaomiaofeng.html",在"目標"下拉列表中選擇"_blank",在"替代"文本框中設(shè)置選區(qū)的提示文字為"縹緲峰",這里就不再圖示了。
?。?2)完成后保存文件,軟件會自動生成相應(yīng)的HTML代碼,類似于在例7中顯示的那樣。其實,例7中的代碼就是作者用Dreamweaver做好后簡單修改得到的。
好了,這一課我們講了dreamweaver圖像熱區(qū)鏈接的設(shè)置方法,你都學(xué)會了嗎?
掌握了這些知識,在網(wǎng)頁制作過程中會更加游刃有余!