超鏈接的基本概念.ppt

1、1,第5章 超 鏈 接,5.1 超鏈接的基本概念 5.2 創(chuàng)建超鏈接 思考與練習(xí),2,5.1 超鏈接的基本概念,5.1.1 什么是超鏈接 瀏覽網(wǎng)頁時，移動鼠標，指向某些文本或圖像，光標即會變成小手的形狀，這時單擊鼠標，就會打開另一個頁面，這就是超鏈接。 超鏈接是網(wǎng)頁中由一個地方跳轉(zhuǎn)到另一個地方、網(wǎng)頁、網(wǎng)站或文件的指針，跳轉(zhuǎn)的起點稱為源端點或簡稱源、錨、錨點，跳轉(zhuǎn)的終點即跳轉(zhuǎn)到的頁面稱為目標端點或簡稱目標、目的、目標錨。超鏈接指出了源端點、目標端點以及從源端點到目標端點的路徑即地址。,3,超鏈接按源端點區(qū)分為有文本超鏈接、圖像超鏈接和表單超鏈接。文本超鏈接就是利用文本為源端點構(gòu)建的超鏈接。在瀏覽

2、器中，文本超鏈接的錨點一般顯示為下方帶有下劃線的文字；圖像超鏈接的源端點是圖像；表單超鏈接的源端點可能是菜單或按鈕等表單對象。 超鏈接按目標端點區(qū)可以分為外部鏈接、內(nèi)部鏈接、局部鏈接和Email鏈接。外部鏈接是鏈接到本站點之外的站點或文檔，利用這種鏈接，可以跳轉(zhuǎn)到其他的網(wǎng)站上。內(nèi)部鏈接的目標端點是本站點中的其他文檔，利用這種鏈接，可以跳轉(zhuǎn)到本站點其他的頁面上。局部鏈接的目標端點是文檔中的某個位置，如文檔中間、末尾、開頭或某個指定的位置，也可以是其他文檔中的某一指定位置。 Email鏈接的目標端點是一個Email地址，單擊這種鏈接，可以啟動電子郵件程序，書寫郵件并發(fā)送到指定的地址。,4,5.1.

3、2 超鏈接的路徑 超鏈接的路徑是URL地址。按目標端點所處位置的不同，超鏈接的路徑分為絕對路徑、相對路徑和基于根目錄的路徑。下面以如圖5.1所示站點的目錄結(jié)構(gòu)為例，介紹這幾種路徑的含義。假設(shè)網(wǎng)址是，web是網(wǎng)站的根目錄，index.htm是主頁。 1. 絕對路徑 如果路徑是一個完整的URL地址，則這種鏈接路徑就稱為絕對路徑。其特點是，路徑同鏈接的源端點所處的位置無關(guān)。在圖5.1所示站點中，要創(chuàng)建指向Introduction目錄下index1.htm文件的鏈接，其絕對路徑為,5,圖5.1,6, 絕對路徑的好處是同鏈接的源端點無關(guān)。目標網(wǎng)站的地址不變，無論源端點如何移動，都可以正常實現(xiàn)跳轉(zhuǎn)而不會發(fā)

4、生錯誤。 如果目標端點在其他網(wǎng)站上，就必須使用絕對路徑。而如果目標在本網(wǎng)站上（源端點和目標端點是同一個網(wǎng)站內(nèi)的網(wǎng)頁），則會給移植和測試帶來不便。因此，對內(nèi)部鏈接和局部鏈接最好不要用絕對路徑。 2. 相對路徑 為了避免絕對路徑的缺陷，對于在本站點之中的鏈接來說，使用相對路徑是一個很好的方法。相對路徑是目標端點同源端點之間的相對位置，它的參考點是源端點所在位置，與網(wǎng)站的名稱、地址、以及根目錄的位置和名稱無關(guān)。,7,例如，在圖5.1所示的站點中，如果希望在tuan.htm文檔中創(chuàng)建指向dang.htm文件的鏈接，路徑可以直接寫為dang.htm。如果源端點和目標端點不位于同一個目錄下，則只需要將目錄

5、的相對關(guān)系表達出來。從dang.htm到j(luò)igou.htm的鏈接路徑寫為./administration/jigou.htm，其中“./”表示上一級目錄。從dang.htm到j(luò)iaoxuejihua.htm的相對鏈接路徑為././Education/benkesheng/jiaoxuejihua.htm，其中多個“./”符號可以表示更高的上級目錄。如果鏈接指向的文檔位于當前目錄的子級目錄中，可以直接輸入目錄名稱和文檔名稱。例如，從Index1.htm到dang.htm的相對鏈接路徑為party/dang.htm。 利用相對目錄的優(yōu)點在于：如果站點的結(jié)構(gòu)和文件的相對位置不變，鏈接就不會出錯。將整

6、個網(wǎng)站移植到另一個地址的網(wǎng)站中，不需要對文檔中的鏈接路徑做任何修改。但相對路徑也有缺點：如果修改了站點的結(jié)構(gòu)，或是移動了文檔，則文檔中的鏈接關(guān)系就會失效。,8,3. 基于根目錄的路徑 基于根目錄的路徑可以看作一種特殊的相對路徑，只不過路徑不是相對于源端點的，而是相對于本網(wǎng)站的根目錄的相對路徑。通常用一個斜線“/”表示根目錄，所有基于根目錄的路徑都從該斜線開始。 在圖5.1 所示站點中，到index1.htm 的基于根目錄的路徑為/Introduction/index.htm，到dang.htm的基于根目錄的路徑為/Introduction/party/dang.htm。 基于根目錄的鏈接路徑與

7、源端點所在的位置無關(guān)。也就是說，只要源端點在本站點內(nèi)，不管源端點在哪個文件中，都可以使用以上的路徑正確地鏈接到指定文件。 5.1.3 超鏈接的顏色 為了更清晰地表示超鏈接，特別是文本超鏈接以及它們的鏈接狀態(tài)，在網(wǎng)頁中可以對超鏈接及它們的不同狀態(tài)使用不同的顏色顯示。,9,未訪問鏈接的文本顏色： 表示正常顯示下超鏈接的文本顏色。 已訪問鏈接的文本顏色： 表示已經(jīng)單擊并正確鏈接過的超鏈接的顏色，就是說，對已訪問過的超鏈接可以使用另一種顏色顯示。 正在訪問的鏈接的文本顏色： 表示單擊以后，正在鏈接時，超鏈接顯示的顏色。通常鏈接的網(wǎng)頁很快就顯示出來了，所以，平時不容易看到它的效果。 默認狀態(tài)下，多數(shù)瀏覽

8、器將未訪問的鏈接文本顏色顯示為藍色?？梢岳庙撁鎸傩詠砀淖兂溄拥母鞣N狀態(tài)的顏色。,10,5.2 創(chuàng)建超鏈接,5.2.1 指向頁面的超鏈接 【例5.1】創(chuàng)建文本超鏈接 選中要作為鏈接的文字（圖5.2）。 在屬性面板（圖5.2）的Link(鏈接)后的文本框中輸入鏈接的路徑，即目標端點的URL，可以是絕對路徑，也可以是相對路徑，可以是網(wǎng)站間的鏈接，也可以是站內(nèi)鏈接。如果是局部鏈接，可以單擊Link文本框右邊的文件夾圖標，打開Select File(選擇文件)對話框（圖5.3），從磁盤中選擇鏈接的文件。在該對話框中，打開Relative To（相對于）下拉列表，可以指定URL路徑的類型。Docume

9、nt（文檔）表示使用相對路徑，Site Root（站點根目錄）表示使用基于根目錄的路徑。在URL文本框中顯示當前選中文件的URL，也可以在其中對URL進行編輯。,11,圖5.2,12,圖5.3,13, 在屬性面板上的Target（目標）下拉列表中，可以指定鏈接文檔在哪個框架集中被顯示。 _blank： 表示在新窗口中顯示鏈接指向的頁面。 _self： 表示在當前文檔的框架集中顯示被鏈接頁面。 _parent： 表示在當前頁面的父級框架集中顯示被鏈接頁面。 _top： 表示在鏈接所在的完整窗口中顯示鏈接頁面。 默認情況下，在當前文檔的框架集中顯示被鏈接頁面，如果沒有使用框架結(jié)構(gòu)，則在當前瀏覽器窗

10、口顯示被鏈接頁面。 按照圖5.2和圖5.3的選擇，創(chuàng)建鏈接后的頁面中“秋夕”下面帶有下劃線(圖5.4(a)。用瀏覽器瀏覽該網(wǎng)頁，單擊“秋夕”便可在當前窗口顯示網(wǎng)頁tans_qiuxi.htm（圖5.4(b)）。,14,圖5.4,15,注意： 如果在屬性面板Link后的文本框中輸入，則單擊秋夕后會鏈接到清華大學(xué)的主頁上。這說明，鏈接的提示文字與鏈接的頁面在內(nèi)容上沒有任何關(guān)系，提示文字僅僅是一種提示，就像一個人的名字一樣，叫張三和叫李四都可以是同一個人。 提示： 如果超鏈接指向的文檔不是一個HTML文件，那么單擊鏈接產(chǎn)生的操作也不相同。如果鏈接的文件是gif、jpg或png等能被瀏覽器識別的圖像文

11、件，則仍然會在瀏覽器的窗口中載入并顯示它們。如果鏈接的文件是瀏覽器不能識別的，如帶有zip擴展名的壓縮文件或帶有exe擴展名的可執(zhí)行文件，則瀏覽器會打開該類文件下載對話框，提示用戶是否要下載該文件。在網(wǎng)頁中可以通過這種方式為用戶提供下載文件的服務(wù)。,16,5.2.2 指向頁面段落的超鏈接 超鏈接不但可以指向頁面文件，還可以指向指定頁面內(nèi)的指定位置，這個位置需要起個名字，稱為命名錨。命名錨可以在文檔中指定的位置上創(chuàng)建鏈接的目標端點，通過對文檔中指定位置的命名，允許利用鏈接打開目標文檔時，直接跳轉(zhuǎn)到相應(yīng)的命名位置上。使用命名錨，不僅可以跳轉(zhuǎn)到當前文檔中的指定位置，還可以跳轉(zhuǎn)到其他文檔的指定位置。要

12、建立指向頁面段落的鏈接，首先要為目標端點起一個名字，即創(chuàng)建命名錨。 【例5.2】創(chuàng)建命名錨 將插入點放置到要創(chuàng)建命名錨的文字前，或選中要指定命名錨的文本（圖5.5）；,17,圖5.5,18, 打開Insert菜單，選擇Named Anchor（命名錨）命令，打開Invisibles（不可見）對象面板，單擊Insert Named Anchor（插入命名錨）按鈕，或按組合鍵Ctrl+Alt+A，打開Insert Named Anchor(插入命名錨)對話框； 在Anchor Name(錨名稱)后的文本框中輸入錨的名字，它可以是任何文本，可以與錨點的內(nèi)容相同，也可以不同，最好意義要明確。如果先前選

13、中了文字，則選中的文字會出現(xiàn)在該Anchor Name（錨名稱）文本框中； 單擊OK按鈕，確定操作，一個錨就被插入到文檔相應(yīng)的位置上。如果激活了文檔窗口中對不可見元素的顯示特性（使用Edit|Preferences|Invisible Elements命令），則可以在文檔窗口中看到錨標記 (圖5.5)；,19, 如果要修改錨點的位置，可以將該錨標記作為普通的文字在文檔中拖動。單擊相應(yīng)的錨標記，可以在屬性面板中修改錨的名稱（見圖5.6）。要刪除命名錨，單擊命名錨標記后按Del 鍵。 提示： 建立命名錨后在HTML中標記如下，王熙鳳 ，其中是命名錨標記。 在文檔中定義了錨只是在目標位置做了一個記號

14、，要到達這個位置，還需要建立源端點到目標的鏈接。,20,圖5.6,21,【例5.3】鏈接命名錨 選中要作為鏈接提示的文字，它與命名錨點可以不是同一個文件，如剛才建立錨點的文件為honglouren1.htm，現(xiàn)在源端點在honglouren.htm中； 在屬性面板的Link（鏈接）文本框中，輸入錨名稱及相應(yīng)前綴。 如果要鏈接的目標錨不在當前文檔中，則先輸入該文檔的URL地址和文件名稱，然后輸入“#”號，再輸入錨名稱。如要鏈接當前目錄下honglouren1.htm文檔中的“王熙鳳”錨位置，則需要輸入honglouren1.htm#王熙鳳（見圖5.7）。,22,圖5.7,23,如果要鏈接的目標錨

15、位于當前文檔，則可以在屬性面板的Link文本框中，直接輸入“#”號，然后再輸入鏈接的錨名稱。如果要在honglouren1.htm文件中鏈接命名錨“王熙鳳”，則輸入“#王熙鳳”即可。 瀏覽文件honglouren1.htm，單擊“王熙鳳”，鏈接到honglouren1.htm（圖5.8、圖5.9）。 注意: 圖5.8的狀態(tài)欄中顯示了鏈接地址。 提示： 命名錨的鏈接(或者說到文檔段落的鏈接)首先要命名一個錨點，然后在源端點處創(chuàng)建鏈接。鏈接地址中除URL地址（絕對或相對）外，后面要緊跟“”和命名錨名稱。,24,圖5.8,25,圖5.9,26,注意： 在使用命名錨時，需要遵循如下的一些準則。 一篇文

16、檔中錨的名稱是惟一的，不允許在同一篇文檔中出現(xiàn)相同的錨名稱。 錨名稱的大小寫應(yīng)一致，如名為HongLou的錨和名為honglou的錨不允許出現(xiàn)在同一篇文檔中。 在鏈接錨時，引用的錨名稱的大小寫應(yīng)嚴格一致，例如，如果錨的名稱是#HongLou，而鏈接中指向的錨是#Honglou，鏈接將不一定成功。 5.2.3 電子郵件的超鏈接 【例5.4】創(chuàng)建電子郵件超鏈接 選中要作為超鏈接的文字（圖5.10）；,27,圖5.10,28, 打開Insert菜單，選擇Email Link（Email鏈接）命令，或是在Common對象面板上單擊Insert Email Link（插入Email鏈接）按鈕。打開Ins

17、ert Email Link（插入Email鏈接）對話框（見圖5.10）； 如果在步驟中選定了作為鏈接的文字，則在Text（文本）文本框中會出現(xiàn)選中的文字，也可以在這里修改要作為鏈接的文字； 在E-Mail文本框中，鍵入需要的Email地址。 圖5.11是設(shè)置Email鏈接后的頁面效果和單擊后的效果。 提示： 插入Email鏈接時，不必選定文字，但應(yīng)把插入點放在要設(shè)置Email鏈接的地方，提示文字可以在Insert Email Link（插入Email鏈接）對話框的Text文本框中輸入；,29,圖5.11,30,在顯示效果上，Email鏈接與鏈接到頁面的鏈接沒有任何不同，所以，一般都在文本前加一個郵箱樣子的圖像以作提示； 在文檔窗口中選中帶鏈接的文本，可以在屬性面板的Link文本框中修改Email地址（圖5.12）。 注意： 郵件地址前要有前綴mailto：，也可刪除地址從而刪除鏈接。 可以直接使用屬性面板像建立頁面鏈接一樣建立Email鏈接，但要注意Email地址前要加mailto:。而利用對象按鈕建立則不要mailto； 在屬性面板的鏈接（Link）欄中輸入mailto:?subject=請教問題可以建立帶有Email主題“請教問題”的鏈接。 注意： 在瀏覽器中單擊Email鏈接后出現(xiàn)的“新郵件”窗口不是瀏覽器帶有的，而是Outlook或其他電子郵件軟件的。如果用戶沒有