如何在網(wǎng)頁(yè)設計中定義圖像映射

  • 2019-08-12 12:17:01
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

網(wǎng)頁(yè)設計中,圖像映射(Image Map)就是在一張圖片的不同區域建立鏈接,指向不同的URL。圖片上的區域也稱(chēng)為“熱點(diǎn)(hotspots)”。當單擊該熱點(diǎn)區域時(shí),會(huì )觸發(fā)超鏈接,并跳轉到其他網(wǎng)頁(yè)或網(wǎng)頁(yè)的某個(gè)位置。圖像地圖是一種特殊的超鏈接形式,常用來(lái)在網(wǎng)頁(yè)設計時(shí)圖像中設置局部區域導航。

【操作步驟】

第1步,插入圖像,然后選中圖像,打開(kāi)【屬性】面板,并單擊該面板右下角的展開(kāi)箭頭,顯示圖像地圖制作工具。使用【指針熱點(diǎn)工具】、【矩形熱點(diǎn)工具】、【橢圓熱點(diǎn)工具】和【多邊形熱點(diǎn)工具】可以調整和創(chuàng )建熱點(diǎn)區域。

 ?【地圖】文本框:輸入熱點(diǎn)區域名稱(chēng),便于引用。   

?【指針熱點(diǎn)工具】按鈕:調整和移動(dòng)熱點(diǎn)區域。   

?【橢圓熱點(diǎn)工具】按鈕:在選定圖像上拖動(dòng)鼠標指針可以創(chuàng )建圓形熱區。   

?【矩形熱點(diǎn)工具】按鈕:在選定圖像上拖動(dòng)鼠標指針可以創(chuàng )建矩形熱區。   

?【多邊形熱點(diǎn)工具】按鈕:在選定圖像上,單擊選擇一個(gè)多邊形,定義一個(gè)不規則形狀的熱區。單擊【指針熱點(diǎn)工具】按鈕可以結束多邊形熱區定義。

第2步,在【屬性】面板的【地圖】文本框中輸入熱點(diǎn)區域名稱(chēng)。如果一個(gè)網(wǎng)頁(yè)的圖像中有多個(gè)熱點(diǎn)區域,必須為每個(gè)圖像熱點(diǎn)區域起一個(gè)唯一的名稱(chēng)。

第3步,選擇一個(gè)工具,根據不同部位的形狀可以選擇不同的熱區工具,這里選擇【矩形熱點(diǎn)工具】,在選定的圖像上拖動(dòng)鼠標指針,便可創(chuàng )建出圖像熱區。第4步,熱點(diǎn)區域創(chuàng )建完成后,選中熱區。   

?【鏈接】文本框:可輸入一個(gè)被鏈接的文件名或頁(yè)面,單擊【選擇文件】按鈕可選擇一個(gè)文件名或頁(yè)面。如果在【鏈接】文本框中輸入“#”,表示空鏈接。   

?【目標】下拉列表框:要使被鏈接的文檔顯示在其他地方而不是在當前窗口或框架,可在【目標】下拉列表框中輸入窗口名或選擇一個(gè)框架名。   

?【替換】文本框:在該文本框中輸入所定義熱區的提示文字。在瀏覽器中當鼠標移到該熱點(diǎn)區域中將顯示提示文字??稍O置不同部位的熱區顯示不同的文本。

第5步,用【矩形熱點(diǎn)工具】創(chuàng )建一個(gè)熱區,在【替換】文本框中輸入提示文字,并設置好鏈接和目標窗口。

第6步,以相同的方法分別為各個(gè)部位創(chuàng )建熱區,并輸入不同的鏈接和提示文字,保存并預覽,這時(shí)單擊不同的熱區就會(huì )跳轉到對應的頁(yè)面中。

管理鏈接

前面幾節介紹了網(wǎng)頁(yè)制作時(shí)單個(gè)鏈接的建立,而在一個(gè)網(wǎng)站里包含著(zhù)形形色色的多個(gè)鏈接,如何安排和管理這些鏈接,關(guān)系到網(wǎng)站能否良好地運作。

設計結構清晰的鏈接

在網(wǎng)站中建立清晰的鏈接,既提供給瀏覽者一個(gè)良好的訪(fǎng)問(wèn)環(huán)境,也方便網(wǎng)站管理人員的管理與維護。為此,要考慮到以下幾點(diǎn)。

1、設計一個(gè)清晰的網(wǎng)站結構圖

首先要定位網(wǎng)站的主題,如個(gè)人網(wǎng)站、商業(yè)網(wǎng)站、知識類(lèi)網(wǎng)站和娛樂(lè )類(lèi)網(wǎng)站等,然后再來(lái)看這個(gè)網(wǎng)站要包含哪些內容,需要多少網(wǎng)頁(yè)文件??梢援?huà)一個(gè)草圖來(lái)理清思路。

2. 首頁(yè)上的鏈接要“有去有回”

不論網(wǎng)站的鏈接多么豐富,都要隨時(shí)給瀏覽者回到首頁(yè)的可能,使之不會(huì )在互聯(lián)網(wǎng)上迷失方向。

3. 給圖像鏈接做文字說(shuō)明簡(jiǎn)單的文字說(shuō)明可以讓瀏覽者了解要鏈接的目標。為圖像鏈接做說(shuō)明有兩種方法。   

?把文字直接做在圖像上,成為圖像的一部分。   

?把文字直接寫(xiě)在【屬性】面板的【替換】文本框中。

這樣當鼠標指針指向圖像時(shí),就會(huì )出現文字提示。

當前文章標題:如何在網(wǎng)頁(yè)設計中定義圖像映射

當前URL:http://amzcoolest.com/news/wzzz/3072.html

上一篇:如何在網(wǎng)頁(yè)設計中定義電子郵件鏈接

下一篇:在網(wǎng)頁(yè)設計中使用【資源】面板管理鏈接

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看