巧妙運(yùn)用Dreamweaver制作地圖連接的方法_Dreamweaver教程
在瀏覽網(wǎng)頁(yè)時(shí),經(jīng)常能看到一些圖片上的非凡超鏈接,即在一張圖片上有多個(gè)局部區(qū)域與不同的網(wǎng)頁(yè)鏈接,比如地圖鏈接。
效果說(shuō)明:地圖中標(biāo)示出了中國(guó)的各個(gè)省市和直轄市,當(dāng)在地圖上單擊某個(gè)特定區(qū)域時(shí),就會(huì)跳轉(zhuǎn)到相應(yīng)地圖區(qū)的說(shuō)明頁(yè)面。
創(chuàng)作思想:本實(shí)例將利用 Dreamweaver 的圖像熱點(diǎn)功能完成地圖鏈接實(shí)例。
操作步驟
�。� 1 )新建一個(gè)HTML文件取名為 map.htm 文件,在頁(yè)面中插入一幅中國(guó)地圖,如圖 1 所示。

提示:本實(shí)例所用到的中國(guó)地圖china.jpg。
�。� 2 )繪制熱點(diǎn)區(qū)域。單擊頁(yè)面上的中國(guó)地圖,然后利用屬性欄中的【矩形熱點(diǎn)】工具在地圖上繪制熱點(diǎn)區(qū)域,如圖 2 所示。

( 3 )當(dāng)繪制完矩形熱點(diǎn)區(qū)域后,圖像屬性面板將變成熱點(diǎn)屬性面板,如圖 3 所示。在鏈接欄處選擇熱點(diǎn)區(qū)域所要鏈接的目標(biāo)網(wǎng)頁(yè),在【替代】框中填入相關(guān)的提示說(shuō)明,并使鏈接的網(wǎng)頁(yè)在新窗口中打開(kāi)。

提示:在這里將【目標(biāo)】設(shè)置為 _blank 代表在新 的瀏覽器窗口中打開(kāi)被鏈接的文檔,并保持當(dāng)前窗口可用。【目標(biāo)】框中其他各選項(xiàng)的含義是, _parent 代表在鏈接所在的父框架集中打開(kāi)鏈接文檔; _self 代表在當(dāng)前框架中打開(kāi)鏈接文檔,替換該框架中的內(nèi)容; _top 代表在當(dāng)前文檔的最外層框架集中打開(kāi)鏈接文檔,替換所有框架中的內(nèi)容。
�。� 4 )繪制其他熱點(diǎn)區(qū)域。使用屬性面板中的另外兩個(gè)熱點(diǎn)工具【橢圓形熱點(diǎn)】工具和【多邊形熱點(diǎn)】工具同樣可以在地圖上繪制熱點(diǎn)并設(shè)置相關(guān)的熱點(diǎn)屬性,其使用方法和【矩形熱點(diǎn)】工具相同。大家可利用這 3 個(gè)熱點(diǎn)工具在地圖上繼續(xù)繪制其他熱點(diǎn)區(qū)域并設(shè)置鏈接,最終效果如圖 4 所示。

�。� 5 )保存頁(yè)面文件并按 F12 鍵進(jìn)行預(yù)覽。至此,本實(shí)例操作完畢。
在這里我只給大家繪制了3個(gè)省的區(qū)域!目的教給大家如何做這種網(wǎng)頁(yè),通過(guò)學(xué)習(xí)這個(gè)實(shí)例,是不是覺(jué)得很簡(jiǎn)單呢?當(dāng)然你要想把整個(gè)地圖都設(shè)置連接可是非常麻煩了�。≈饕抢速M(fèi)時(shí)間!這個(gè)教程就寫(xiě)到這了。
本實(shí)例的操作相對(duì)簡(jiǎn)單,但在制作過(guò)程中,必須細(xì)心的繪制各個(gè)區(qū)域;各個(gè)區(qū)域間最好留有一點(diǎn)空隙,以免在選擇時(shí)出現(xiàn)錯(cuò)誤。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver MX2004視頻寶典教程 網(wǎng)站與網(wǎng)頁(yè)的概述
- 在Dreamweaver中創(chuàng)建或修改 ColdFusion 數(shù)據(jù)源
- 用DreamweaverMX 做圖像熱區(qū)
- DW MX實(shí)例:多彩文字鏈接
- Dreamweaver MX2004視頻寶典教程 菜單概述
- Dreamweaver的小技巧:Dreamweaver應(yīng)用源格式
- 技巧:固定網(wǎng)頁(yè)語(yǔ)言編碼、字號(hào)、字體
- 在Dreamweaver中插入有顏色的直線
- 在Dreamweaver中靈活使用網(wǎng)頁(yè)表格
- Dreamweaver制作網(wǎng)頁(yè)技巧之對(duì)進(jìn)行網(wǎng)頁(yè)優(yōu)化
猜你也喜歡看這些
- DIV+CSS 入門(mén)視頻教程,只用記事本編寫(xiě)代碼演示
- Dreamweaver 8+ASP構(gòu)造動(dòng)態(tài)網(wǎng)站實(shí)例與操作
- 《Dreamweaver CS3網(wǎng)頁(yè)設(shè)計(jì)技能進(jìn)化手冊(cè)》--樣章、樣例、教學(xué)視頻
- Dreamweaver 8 完美網(wǎng)頁(yè)設(shè)計(jì)—CSS網(wǎng)頁(yè)設(shè)計(jì)篇
- Dreamweaver 8完美網(wǎng)頁(yè)設(shè)計(jì): 網(wǎng)頁(yè)特效篇
- 拍拍店鋪裝修視頻教程
- java實(shí)例教程在線支付系統(tǒng)制作
- CSS視頻教程
- Dreamweaver MX 2004 官方簡(jiǎn)體中文版教程
- 通過(guò)Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS 光盤(pán)/教程
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-巧妙運(yùn)用Dreamweaver制作地圖連接的方法
。