用DreamweaverMX 做圖像熱區(qū)_Dreamweaver教程
大家在打開帶有圖片的網(wǎng)頁時(shí),有時(shí)會看到這樣的情況:當(dāng)鼠標(biāo)指向圖片的不同部位時(shí),可以打開不同的超鏈接,這種技術(shù)我們稱之為—網(wǎng)頁圖片熱區(qū)。
下面我們以Dreamweaver MX和FrontPage 2003為例,來看看網(wǎng)頁圖片熱區(qū)的具體建立過程。
一、在Dreamweaver MX中為圖片建立熱區(qū)
1、啟動Dreamweaver MX(其他版本請仿照操作),打開需要建立圖片熱區(qū)的網(wǎng)頁文件,選中相應(yīng)的圖片,此時(shí)“屬性”面板自動切換到“圖片屬性”狀態(tài)(如圖1)。
2、選中一種熱區(qū)類型(如“多邊形”),然后在圖片上依次點(diǎn)出一個熱區(qū)來(參見圖1)
圖1
注重:熱區(qū)相當(dāng)于是在圖片上增加了一個圖形層,象調(diào)整圖片一樣,可以通過選擇工具調(diào)整熱區(qū)的大小和位置。
在一頁中有多個圖像地圖時(shí),要注重不同的地圖名字。另外假如不是非凡復(fù)雜的圖形鏈接時(shí),要盡量少用圖像地圖來加鏈接。
3、在“鏈接”右邊的方框中輸入要鏈接的網(wǎng)址(如“http://www.yesky.com”);在“替代”后面的方框中輸入一些說明字符(如“天極網(wǎng)”);按“目標(biāo)”右邊的下拉按鈕,在隨后出現(xiàn)的下拉列表中選擇一種鏈接頁面的打開方式(如需要讓鏈接的頁面在新窗口中打開,就選擇“_blank”選項(xiàng))。
注重:“替代”方框中輸入的字符,在以后瀏覽網(wǎng)頁時(shí),當(dāng)鼠標(biāo)指向該熱區(qū)時(shí),在頁面上會顯示出該字符(如圖2)。
圖2
4、重復(fù)上述2、3步的操作,在圖片的不同部位建立多個熱區(qū)。
二、在FrontPage2003中為圖片建立熱區(qū)
1、啟動FrontPage2003,打開需要建立圖片熱區(qū)的網(wǎng)頁文件。
2、執(zhí)行“視圖→工具欄→圖片”命令,展開“圖片”工具欄(如圖3)
圖3
3、選中一種熱區(qū)類型(如“長方形”),然后在圖片上拖來出一個熱區(qū),此時(shí)系統(tǒng)自動彈出“插入超鏈接”對話框(如圖4)。
圖4
4、在“地址”欄上輸入要鏈接的網(wǎng)址(如“www.yesky.com”);點(diǎn)擊“屏幕提示”按鈕打開“設(shè)置屏幕超鏈接提示”對話框(如圖5),輸入一些說明字符(如“天極網(wǎng)”)。
圖5
注重:此處的“屏幕提示”同Dreamweaver MX“替代”功能一樣。
4、同理,重復(fù)上述3、4步的操作,可以在圖片的不同部位建立多個熱區(qū)。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 解決Dreamweaver中關(guān)于應(yīng)用CSS的小問題
- 用Dreamweaver8搞定web標(biāo)準(zhǔn)
- Dreamweaver8創(chuàng)建自定義代碼片段的方法
- 用Dreamweaver輕松實(shí)現(xiàn)個性化鼠標(biāo)指針
- 網(wǎng)頁中插入Flash按鈕與文本
- 站點(diǎn)統(tǒng)計(jì)-Dreamweaver構(gòu)建Blog
- Dreamweaver MX全新接觸
- DW做ASP程序時(shí)關(guān)于數(shù)據(jù)庫的幾個常見問題
- Dreamweaver MX2004視頻寶典教程 配色原則
- 解決Dreamweaver 8 無法啟動
猜你也喜歡看這些
- 中文版Dreamweaver 8入門必練
- 網(wǎng)站重構(gòu)&web標(biāo)準(zhǔn)設(shè)計(jì)教程
- 巧學(xué)巧用Dreamweaver8制作網(wǎng)頁
- 拍拍店鋪裝修視頻教程
- CSS設(shè)計(jì)徹底研究視頻教程
- 精通Javascript+jQuery
- 呂聰賢網(wǎng)頁三劍客視頻教程FlashMX,DreamweaverMX,F(xiàn)i
- 視友工作室網(wǎng)站頁設(shè)計(jì)制作全面通
- 網(wǎng)頁制作三劍客經(jīng)典實(shí)例Flashmx,Dreamveaver,Fireworks
- 別具光芒:DIV+CSS網(wǎng)頁布局與美化
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用DreamweaverMX 做圖像熱區(qū)。