超鏈接的基本概念.ppt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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