網(wǎng)頁制作超級鏈接

1、學(xué)校公共選修課：學(xué)校公共選修課：網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作講義講義 了解超級鏈接的概念了解超級鏈接的概念 了解超級鏈接的類型了解超級鏈接的類型 掌握站點(diǎn)內(nèi)部超級鏈接的方法掌握站點(diǎn)內(nèi)部超級鏈接的方法 掌握電子郵件鏈接掌握電子郵件鏈接 掌握外部超級鏈接的方法掌握外部超級鏈接的方法 掌握錨點(diǎn)鏈接掌握錨點(diǎn)鏈接 掌握熱點(diǎn)區(qū)域鏈接掌握熱點(diǎn)區(qū)域鏈接文字文字圖片圖片按鈕按鈕頁頁面面文字文字圖片圖片按鈕按鈕頁頁面面 所謂鏈接（所謂鏈接（link）就是一個）就是一個web資源到另一資源到另一個個web資源的連接，建立鏈接的目的是為資源的連接，建立鏈接的目的是為了獲取了獲取web的其他資源。的其他資源。 超級鏈接

2、由兩部分組成：鏈接載體（源端超級鏈接由兩部分組成：鏈接載體（源端點(diǎn)）和鏈接目標(biāo)（目標(biāo)端點(diǎn)）。點(diǎn)）和鏈接目標(biāo)（目標(biāo)端點(diǎn)）。 許多頁面元素都可以作為鏈接載體，例如：許多頁面元素都可以作為鏈接載體，例如：文本、圖像、圖像熱區(qū)、輪替圖像、動文本、圖像、圖像熱區(qū)、輪替圖像、動畫畫 而鏈接目標(biāo)可以是任意的網(wǎng)絡(luò)資源，例如：而鏈接目標(biāo)可以是任意的網(wǎng)絡(luò)資源，例如：頁面、圖像、聲音、程序、其他網(wǎng)站、頁面、圖像、聲音、程序、其他網(wǎng)站、Email甚至是頁面中的某個位置甚至是頁面中的某個位置錨點(diǎn)錨點(diǎn)等等。等等。 超級鏈接可以為瀏覽者暢游網(wǎng)絡(luò)提供方便。是超級鏈接可以為瀏覽者暢游網(wǎng)絡(luò)提供方便。是網(wǎng)頁制作中使用得比較多的一種

3、技術(shù)。網(wǎng)頁制作中使用得比較多的一種技術(shù)。 超級鏈接是用預(yù)先準(zhǔn)備好的文本、圖片、按鈕超級鏈接是用預(yù)先準(zhǔn)備好的文本、圖片、按鈕等對象與其他對象建立一種鏈接關(guān)系。也就是等對象與其他對象建立一種鏈接關(guān)系。也就是在源端點(diǎn)和目標(biāo)端點(diǎn)之間建立起一種鏈接。在源端點(diǎn)和目標(biāo)端點(diǎn)之間建立起一種鏈接。 源端點(diǎn)是超級鏈接的起始端點(diǎn)，也稱為源端點(diǎn)是超級鏈接的起始端點(diǎn)，也稱為源錨源錨，目標(biāo)端點(diǎn)是聯(lián)結(jié)的對象，也稱為目標(biāo)端點(diǎn)是聯(lián)結(jié)的對象，也稱為目標(biāo)錨目標(biāo)錨。 按源端點(diǎn)的鏈接劃分：按源端點(diǎn)的鏈接劃分： 超文本鏈接超文本鏈接： 源錨文本下方有下劃線源錨文本下方有下劃線 非超文本鏈接非超文本鏈接： 用除文本之外的其他對象用除文本之外

4、的其他對象構(gòu)建的鏈接構(gòu)建的鏈接(圖像、表格、圖像、表格、列表、表單、多媒體等列表、表單、多媒體等) 按目標(biāo)端點(diǎn)的鏈接劃分：按目標(biāo)端點(diǎn)的鏈接劃分： 外部鏈接外部鏈接 內(nèi)部鏈接內(nèi)部鏈接 電子郵件鏈接電子郵件鏈接 局部鏈接局部鏈接 超文本鏈接超文本鏈接 非超文本鏈接非超文本鏈接 外部鏈接外部鏈接 內(nèi)部鏈接內(nèi)部鏈接 電子郵件鏈接電子郵件鏈接 局部鏈接局部鏈接 URL是英文是英文Uniform Resource Location的縮寫。的縮寫。下面是幾種常見的下面是幾種常見的URL協(xié)議：協(xié)議： 超文本傳輸協(xié)議超文本傳輸協(xié)議Http:/ 文件傳輸協(xié)議文件傳輸協(xié)議Ftp:/ MailtoMailto:/ T

5、elnetTelnet:/ 即被鏈接文檔的完整即被鏈接文檔的完整URL，包括所使用的，包括所使用的傳輸協(xié)議，對于網(wǎng)頁通常是傳輸協(xié)議，對于網(wǎng)頁通常是“http:/”。 例如，例如， http:/ default.asp 就是一個絕對路徑。就是一個絕對路徑。 在創(chuàng)建外部鏈接時，必須使用絕對路徑。在創(chuàng)建外部鏈接時，必須使用絕對路徑。 以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)由的路徑。經(jīng)由的路徑。 例如，例如， “default.asp”就是一個文檔相對就是一個文檔相對路徑。路徑。 同一網(wǎng)站內(nèi)創(chuàng)建內(nèi)部鏈接時，使用相對路同一網(wǎng)站內(nèi)創(chuàng)建內(nèi)部鏈接時，使用相對路徑比較方便。與

6、同文件夾內(nèi)的文件鏈接時徑比較方便。與同文件夾內(nèi)的文件鏈接時只寫文件名即可，如果要與上一級文件夾只寫文件名即可，如果要與上一級文件夾里的文件鏈接，在文件名前加上里的文件鏈接，在文件名前加上“./”即可。即可。 是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑，以前斜杠開頭，例如，路徑，以前斜杠開頭，例如， “/news/default.asp”就是站點(diǎn)根文件夾下就是站點(diǎn)根文件夾下的的“news”子文件夾中的一個頁面文件子文件夾中的一個頁面文件“default.asp”的根相對路徑。當(dāng)我們移動的根相對路徑。當(dāng)我們移動一個包含根相對鏈接的文檔時，不需要對一個包含根相對鏈接

7、的文檔時，不需要對原有的鏈接進(jìn)行修改。原有的鏈接進(jìn)行修改。 超級鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間、站點(diǎn)超級鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間、站點(diǎn)與與Web之間的鏈接關(guān)系，它可以使站點(diǎn)內(nèi)之間的鏈接關(guān)系，它可以使站點(diǎn)內(nèi)的網(wǎng)頁成為一個有機(jī)的整體，還可以在不的網(wǎng)頁成為一個有機(jī)的整體，還可以在不同的站點(diǎn)之間建立聯(lián)系。同的站點(diǎn)之間建立聯(lián)系。 下面以文本為鏈接載體，介紹在下面以文本為鏈接載體，介紹在Dreamweaver MX中如何創(chuàng)建各種類型的中如何創(chuàng)建各種類型的超級鏈接。超級鏈接。 在站點(diǎn)管理器中編輯超級鏈接在站點(diǎn)管理器中編輯超級鏈接 創(chuàng)建錨點(diǎn)鏈接創(chuàng)建錨點(diǎn)鏈接 創(chuàng)建創(chuàng)建E-MAIL鏈接鏈接 創(chuàng)建導(dǎo)航條創(chuàng)建導(dǎo)航條 創(chuàng)

8、建跳轉(zhuǎn)菜單創(chuàng)建跳轉(zhuǎn)菜單 創(chuàng)建映射圖鏈接創(chuàng)建映射圖鏈接 制作一個預(yù)覽效果圖如圖所示的網(wǎng)頁頁面。制作一個預(yù)覽效果圖如圖所示的網(wǎng)頁頁面。 屬性面板上的屬性面板上的“鏈接定位鏈接定位”圖標(biāo)或者圖標(biāo)或者“瀏覽文件瀏覽文件”圖標(biāo)可以用來創(chuàng)建文件的內(nèi)部超級鏈接。圖標(biāo)可以用來創(chuàng)建文件的內(nèi)部超級鏈接。 （1）選擇頁面中的標(biāo)題文字）選擇頁面中的標(biāo)題文字“星火其人星火其人”； （2）在編輯窗口的列表菜單中打開）在編輯窗口的列表菜單中打開“站點(diǎn)站點(diǎn)”管理器；管理器； （3）拖動）拖動“鏈接定位鏈接定位”圖標(biāo)到站點(diǎn)管理器圖標(biāo)到站點(diǎn)管理器中的頁面文件中的頁面文件“autobiography.htm”上方，上方，文件的地址

9、就會出現(xiàn)在屬性面板的文件的地址就會出現(xiàn)在屬性面板的“鏈接鏈接”文本框中；文本框中； （4）松開鼠標(biāo)左鍵，完成內(nèi)部鏈接的創(chuàng)建。）松開鼠標(biāo)左鍵，完成內(nèi)部鏈接的創(chuàng)建。 （1）選擇頁面）選擇頁面pra_05_01.htm中的標(biāo)題文中的標(biāo)題文字字“星火其人星火其人”； （2）點(diǎn)擊屬性面板上的）點(diǎn)擊屬性面板上的“瀏覽文件瀏覽文件”圖標(biāo)，圖標(biāo)，打開打開“選擇文件選擇文件”對話框中，選擇頁面文對話框中，選擇頁面文件件“autobiography.htm”； （3）點(diǎn)擊）點(diǎn)擊“確認(rèn)確認(rèn)”按鈕完成操作。按鈕完成操作。 鏈接外部網(wǎng)站的關(guān)鍵，是在鏈接域正確輸鏈接外部網(wǎng)站的關(guān)鍵，是在鏈接域正確輸入外部網(wǎng)站的網(wǎng)址。入外部

10、網(wǎng)站的網(wǎng)址。 例題：為頁面中的文字例題：為頁面中的文字“信息技術(shù)與軟件信息技術(shù)與軟件工程學(xué)院工程學(xué)院”添加外部超級鏈接，地址為添加外部超級鏈接，地址為“http:/”，并設(shè)置鏈接目，并設(shè)置鏈接目標(biāo)為新窗口打開，標(biāo)為新窗口打開， （1）選中頁面中的文字）選中頁面中的文字“信息技術(shù)與軟件信息技術(shù)與軟件工程學(xué)院工程學(xué)院”； （2）在屬性面板的）在屬性面板的“鏈接鏈接”文本框中輸入文本框中輸入地址地址“http:/” ； （3）在）在“目標(biāo)目標(biāo)”域選擇鏈接目標(biāo)的載入位域選擇鏈接目標(biāo)的載入位置為置為“_blank” 。 在默認(rèn)情況下，鏈接的文件在當(dāng)前窗口或框架中在默認(rèn)情況下，鏈接的文件在當(dāng)前窗口或框架中

11、被打開。要使被鏈接的文件（網(wǎng)頁、網(wǎng)站主頁、被打開。要使被鏈接的文件（網(wǎng)頁、網(wǎng)站主頁、圖像）顯示在其它地方，需要從屬性面板的目標(biāo)圖像）顯示在其它地方，需要從屬性面板的目標(biāo)域彈出菜單上選擇一個選項：域彈出菜單上選擇一個選項： _blank 被鏈接文件在新窗口中打開；被鏈接文件在新窗口中打開； _parent 將被鏈接文件載入到父框架集或包含該將被鏈接文件載入到父框架集或包含該鏈接的框架窗口中；鏈接的框架窗口中； _self 被鏈接文件在與該鏈接相同的框架或窗口中被鏈接文件在與該鏈接相同的框架或窗口中打開（默認(rèn)窗口無須指定）；打開（默認(rèn)窗口無須指定）； _top 將被鏈接文件載入到整個瀏覽器窗口并刪

12、除將被鏈接文件載入到整個瀏覽器窗口并刪除所有框架。所有框架。 在網(wǎng)頁上創(chuàng)建電子郵件鏈接，方便用戶意在網(wǎng)頁上創(chuàng)建電子郵件鏈接，方便用戶意見反饋。當(dāng)瀏覽者單擊電子郵件鏈接時，見反饋。當(dāng)瀏覽者單擊電子郵件鏈接時，可以及時打開瀏覽器默認(rèn)的電子郵件程序可以及時打開瀏覽器默認(rèn)的電子郵件程序處理程序，收件人的郵件地址被電子郵件處理程序，收件人的郵件地址被電子郵件鏈接中指定的地址自動更新，無需瀏覽者鏈接中指定的地址自動更新，無需瀏覽者手工輸入。為頁面添加手工輸入。為頁面添加E-mail地址鏈接，地址鏈接，可以有兩種方法：可以有兩種方法： （1）把光標(biāo)置于文檔窗口的文字）把光標(biāo)置于文檔窗口的文字“E-mail：

13、”右邊；右邊； （2）在菜單欄中選擇）在菜單欄中選擇“插入插入”“電子郵電子郵件鏈接件鏈接”命令，或者在對象面板的命令，或者在對象面板的“插入插入”欄中選擇欄中選擇“常用常用”選項卡，點(diǎn)擊選項卡，點(diǎn)擊“電子郵電子郵件鏈接件鏈接”按鈕，按鈕， （3）打開）打開“電子郵件鏈接電子郵件鏈接”對話框，在對話框，在“文本文本”文本框中輸入郵箱文本框中輸入郵箱 （4）在）在“E-Mail”文本框中輸入文本框中輸入E-Mail地地址址 ； （5）單擊）單擊“確定確定”按鈕完成操作。按鈕完成操作。 （1）把光標(biāo)置于文檔窗口的文字）把光標(biāo)置于文檔窗口的文字“E-mail：”右邊；右邊； （2）輸入文字，并將其選

14、中；）輸入文字，并將其選中； （3）在屬性面板中的）在屬性面板中的“鏈接鏈接”文本框中輸文本框中輸入入“mailto: ABC”。 （4）單擊）單擊“確定確定”按鈕，完成操作。按鈕，完成操作。1. 什么是錨點(diǎn)？什么是錨點(diǎn)？2. 為什么要設(shè)置錨點(diǎn)？為什么要設(shè)置錨點(diǎn)？3. 怎樣實(shí)現(xiàn)錨點(diǎn)鏈接？怎樣實(shí)現(xiàn)錨點(diǎn)鏈接？ 錨點(diǎn)是在網(wǎng)頁文檔中設(shè)置的一個標(biāo)記，便錨點(diǎn)是在網(wǎng)頁文檔中設(shè)置的一個標(biāo)記，便于以后引用。于以后引用。 通過創(chuàng)建錨點(diǎn)，可以使鏈接指向當(dāng)前文檔通過創(chuàng)建錨點(diǎn)，可以使鏈接指向當(dāng)前文檔中指定的位置。中指定的位置。 使客戶可以方便快捷地瀏覽長文本網(wǎng)頁。使客戶可以方便快捷地瀏覽長文本網(wǎng)頁。案例案例1：沒有添加

15、錨點(diǎn)鏈接的文章：沒有添加錨點(diǎn)鏈接的文章案例案例2：添加了部分錨點(diǎn)鏈接的文章：添加了部分錨點(diǎn)鏈接的文章案例案例3：添加了全部錨點(diǎn)鏈接的文章：添加了全部錨點(diǎn)鏈接的文章 在同一網(wǎng)頁內(nèi)有長文檔。比如，人物傳記、在同一網(wǎng)頁內(nèi)有長文檔。比如，人物傳記、小說連載等。小說連載等。 第一步第一步: 將網(wǎng)頁的某一處設(shè)置為錨點(diǎn)，將網(wǎng)頁的某一處設(shè)置為錨點(diǎn)，并為其命名；并為其命名； 第二步第二步: 在源端點(diǎn)處建立該錨點(diǎn)的超級在源端點(diǎn)處建立該錨點(diǎn)的超級鏈接。鏈接。 為滅絕師太設(shè)置錨點(diǎn)為滅絕師太設(shè)置錨點(diǎn) （1）把光標(biāo)置于文章）把光標(biāo)置于文章“最冷酷的尼姑最冷酷的尼姑滅絕師太滅絕師太”的前面；的前面； （2）在菜單欄中選擇）

16、在菜單欄中選擇“插入插入”“命名錨命名錨記記”命令，或者在對象面板的命令，或者在對象面板的“插入插入”欄欄中選擇中選擇“常用常用”選項卡，單擊選項卡，單擊“命名錨記命名錨記”按鈕；按鈕； （3）系統(tǒng)自動打開）系統(tǒng)自動打開“命名錨記命名錨記”對話框，對話框，在在“錨點(diǎn)名稱錨點(diǎn)名稱”文本框中輸入文本框中輸入“nigu01”， （4）重復(fù)上述操作步驟，設(shè)置其余的錨點(diǎn)）重復(fù)上述操作步驟，設(shè)置其余的錨點(diǎn) 最讓人尊敬的尼姑最讓人尊敬的尼姑三定三定 “nigu02”、 最讓人憐愛的尼姑最讓人憐愛的尼姑儀琳儀琳 “nigu03”、 最不能原諒的尼姑最不能原諒的尼姑圓性圓性 “nigu04”、 最前后不一的尼姑

17、最前后不一的尼姑九難九難 “nigu05”； （1）在目錄部分選中標(biāo)題）在目錄部分選中標(biāo)題“最冷酷的尼最冷酷的尼姑姑滅絕師太滅絕師太”； （2）在屬性面板的）在屬性面板的“鏈接鏈接”文本框中輸入文本框中輸入符號符號“#”和錨點(diǎn)名和錨點(diǎn)名“nigu01”， （3）重復(fù)上述操作步驟，實(shí)現(xiàn)其余的超級鏈）重復(fù)上述操作步驟，實(shí)現(xiàn)其余的超級鏈接：接： 最讓人尊敬的尼姑最讓人尊敬的尼姑三定、三定、 最讓人憐愛的尼姑最讓人憐愛的尼姑儀琳、儀琳、 最不能原諒的尼姑最不能原諒的尼姑圓性、圓性、 最前后不一的尼姑最前后不一的尼姑九難；九難； 預(yù)覽，看一下效果。預(yù)覽，看一下效果。 至此，我們已經(jīng)完成了從目錄到文章的錨

18、至此，我們已經(jīng)完成了從目錄到文章的錨點(diǎn)鏈接?？梢詮哪夸涬S心所欲地跳轉(zhuǎn)到長點(diǎn)鏈接?？梢詮哪夸涬S心所欲地跳轉(zhuǎn)到長文本的任意一段文章了。但是當(dāng)我們看完文本的任意一段文章了。但是當(dāng)我們看完某一段文章之后，還不能返回到目錄，怎某一段文章之后，還不能返回到目錄，怎么辦？么辦？ 思考！思考！ 在每篇文章的后面增加幾個文字在每篇文章的后面增加幾個文字“返回頂返回頂部部”； 選中選中“返回頂部返回頂部”這幾個字；這幾個字； 在在 “鏈接鏈接”文本框中輸入文本框中輸入“#top”； 保存文件并預(yù)覽最終效果。保存文件并預(yù)覽最終效果。 除了長文本的頁面可以使用錨點(diǎn)鏈接外，除了長文本的頁面可以使用錨點(diǎn)鏈接外，多圖片的網(wǎng)

19、頁或圖文并茂的網(wǎng)頁是否也可多圖片的網(wǎng)頁或圖文并茂的網(wǎng)頁是否也可以實(shí)現(xiàn)錨點(diǎn)鏈接？以實(shí)現(xiàn)錨點(diǎn)鏈接？ 案例案例1 案例案例2 當(dāng)網(wǎng)頁上的圖像很大時，可以通過在圖像當(dāng)網(wǎng)頁上的圖像很大時，可以通過在圖像上插入多個熱點(diǎn)區(qū)域創(chuàng)建超級鏈接，從而上插入多個熱點(diǎn)區(qū)域創(chuàng)建超級鏈接，從而實(shí)現(xiàn)不同的圖像映射。實(shí)現(xiàn)不同的圖像映射。 在許多旅游類的網(wǎng)頁中經(jīng)常采用熱點(diǎn)區(qū)域在許多旅游類的網(wǎng)頁中經(jīng)常采用熱點(diǎn)區(qū)域鏈接的技術(shù)。鏈接的技術(shù)。 例如：制作一個中國著名風(fēng)景勝地旅游網(wǎng)例如：制作一個中國著名風(fēng)景勝地旅游網(wǎng)站，可以在地圖上為每一個省制作一個熱站，可以在地圖上為每一個省制作一個熱點(diǎn)區(qū)域，然后命名并添加鏈接。點(diǎn)區(qū)域，然后命名并添加鏈

20、接。 在頁面在頁面pra_05_03.htm中選擇圖像文件中選擇圖像文件“map.gif”，單擊圖像屬性面板右下角的，單擊圖像屬性面板右下角的擴(kuò)展箭頭，單擊擴(kuò)展箭頭，單擊“矩形熱點(diǎn)工具矩形熱點(diǎn)工具”按鈕，按鈕，在圖像上畫出矩形熱點(diǎn)區(qū)域，在圖像上畫出矩形熱點(diǎn)區(qū)域， 給圖像熱點(diǎn)區(qū)域命名給圖像熱點(diǎn)區(qū)域命名 在頁面在頁面pra_05_03.htm的中國地圖文件上的中國地圖文件上上點(diǎn)擊廣東省的熱點(diǎn)區(qū)域，此時圖像屬性上點(diǎn)擊廣東省的熱點(diǎn)區(qū)域，此時圖像屬性面板將變?yōu)闊狳c(diǎn)屬性面板，在屬性面板的面板將變?yōu)闊狳c(diǎn)屬性面板，在屬性面板的“地圖地圖”文本框中輸入圖像名稱文本框中輸入圖像名稱“Guangdong”。由于在同一文檔中有