1 / 31

專業 HTML 網頁設計

P303. 專業 HTML 網頁設計. HTML/DHTML/CSS/JavaScript. 陳錦輝. 第七章　超鏈結. 7.1 超鏈結介紹 7.2 < a> 錨標籤所支援的協定 7.3 鏈結至特定段落 7.4 超鏈結的顏色設定 7.5 路徑的深入探討 7.6 網頁 DIY. 7.1 　超鏈結介紹. 由於超鏈結所提供的功能有許多，因此在正式介紹如何製作『超鏈結』之前，先對超鏈結以及所需要的網路背景知識做一番介紹。. 7.1.1 　什麼是超鏈結？.

wang-rosa
Download Presentation

專業 HTML 網頁設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝

  2. 第七章　超鏈結 • 7.1 超鏈結介紹 • 7.2 <a>錨標籤所支援的協定 • 7.3 鏈結至特定段落 • 7.4 超鏈結的顏色設定 • 7.5 路徑的深入探討 • 7.6 網頁DIY

  3. 7.1　超鏈結介紹 • 由於超鏈結所提供的功能有許多，因此在正式介紹如何製作『超鏈結』之前，先對超鏈結以及所需要的網路背景知識做一番介紹。

  4. 7.1.1　什麼是超鏈結？ • 許多網頁上會出現附帶底線的文字，當滑鼠游標移過去這些文字時，就會變成手指狀的游標 (icon7_01.tif)，這就是超鏈結。 • 按下超鏈結之後，瀏覽器內容會更改為超鏈結的目標，這也就是超鏈結神奇之處。 • 而上述動作實際上是如何運作的呢？當使用者按下超鏈結時，瀏覽器便連上遠端或本地端電腦連結目標的HTML檔案，下載該HTML檔案後加以解讀顯示於瀏覽器中，這是最普遍的一個超鏈結應用，但超鏈結的服務並不只於此。

  5. 7.1.2 URL位置表示法 • URL(Universal Resource Locator)是一種『位址表示法』；中文可以譯為一致資源定位器，這個定位器的功能主要是告訴瀏覽器(Client)，應該以哪一種服務去連結遠端的電腦(Server端)。 • 由於URL所支援的協定有很多種，因此，不適合只用IP位置或Domain Name來加以描述，它的格式如下：

  6. 7.1.2 URL位置表示法 • 通用的URL格式： • 某些協定的URL格式： • URL通用格式適用於各種協定，其中<scheme_dependent_information>為『欲連結該主機的資訊』，其細部格式必須依照<scheme>才能決定。各個術語的內涵說明如下： <scheme>:<scheme_dependent_imformation> <scheme>://<host:[port]>/<path>/<filename>

  7. 7.1.2 URL位置表示法 • <scheme>： • 機制或傳輸協定，例如：HTTP、FTP、FILE、TELNET、等等皆是<scheme>的一種。 • <host:[port]>： • 其中host為主機的名稱(domain name)或IP位置(IP address)，port為連接該伺服器的埠號，由於許多協定皆有預設的埠號，所以當伺服器並未更改預設埠號時，就不需要指定[port]，此時只需要指定<host>即可。 • path： • 被連結檔案的路徑。 • filename： • 被連結檔案的完整檔名。(包含副檔名)

  8. 7.1.2 URL位置表示法 • 以下幾個都是合法的URL表示法。 • http://www.w3c.org/html4/index.htm • http://140.113.10.1/welcome.index • telnet://140.113.23.3 • elnet://bbs.nctu.edu.tw • ftp://ftp.nctu.edu.tw • ftp://140.113.23.100 • file:///C|/XHTML/ch06/ch6-01.htm • mailto:jhchen@cis.nctu.edu.tw • wais://www.edu.tw/SQLdb?w3-html • gopher://gopher.edu.tw • news://news.cis/nctu.edu.tw/tw.bbs.comp.book

  9. 7.2　<a>錨標籤所支援的協定 • 超鏈結是依靠<a>標籤(錨標籤)來製作的，底下是<a>的語法格式。 • 其中href屬性是最重要的一個屬性，用來設定鏈結目標的URL，而URL根據各種不同的協定而有不同的格式。 • 且在部分協定中又可以分為相對路徑與絕對路徑兩種設定方法。

  10. 7.2　<a>錨標籤所支援的協定 • 屬性說明： • (1) href：用來指定鏈結對象，其中包含鏈結協定以及 目標檔案。 • (2) target：用來指定鏈結發生時，所產生的效果處， 例如：是否開新視窗等。(詳見第9章)

  11. 7.2.1 href屬性 - HTTP協定 • HTTP(HyperText Transfer Protocol)；超本文傳輸協定是WWW所使用的一種傳輸協定，其目標是一個檔案(此檔案並不限於HTML檔)。 • 在<a>的href屬性也是絕對路徑與相對路徑的方法，只不過，此處的檔案並不限定為圖檔。 • 範例7-1： • 內容執行結果 • 範例7-2： • 內容執行結果

  12. 7.2.2 href屬性 - FILE協定 • FILE協定的目標是一個檔案(此檔案並不限於HTML檔)，FILE和HTTP協定很像，只不過FILE的目標是本地端的檔案而非遠端伺服器的檔案。 • FILE同樣可以分為絕對路徑與相對路徑表示法。 • 範例7-3： • 內容執行結果 • 範例7-4： • 內容執行結果

  13. 7.2.3 href屬性 - FTP協定 • FTP(File Transfer Protocol)；是一種檔案傳輸協定，可以直接在瀏覽器網址列輸入『ftp://ftp.nctu.edu.tw/』，就會自動連往交通大學的檔案傳輸伺服器(FTP Server)，同樣地，也可以在<a>標籤使用href指定FTP協定。 • 範例7-5： • 內容執行結果

  14. 7.2.4 href屬性 - MAILTO協定 • 可以自動開啟發送E-mail的軟體，並且註明收信人位址。 • 範例7-6： • 內容執行結果

  15. 7.2.5 href屬性 - TELNET協定 • 許多網站的功能都必須透過TELNET遠端登錄協定來傳送，例如：BBS、Linux工作站的遠端登錄等等。 • 可以透過<a>標籤的href屬性來完成一個TELNET協定的超鏈結，鏈結執行後，將會開啟預設的TELNET軟體，並且連結所記載的網站。 • 範例： • 內容執行結果

  16. 7.2.6 href屬性 - NEWS協定 • News是USENET的網路新聞討論群，常見的讀取News軟體為Outlook Express或Netscape，並且將討論區群組名稱設定於使用者的電腦中，如果想要一次鏈結所有討論群的話，可以使用<a href="news:*">...</a>。 • 可以自動開啟讀取News軟體，並登入該討論區群組。 • 範例7-7： • 內容執行結果

  17. 7.2.7 href屬性 - GOPHER協定 • GOPHER是比較早期常使用的一種資料查詢服務與協定，我們可以透過href屬性指定要登入哪一個GOPHER伺服器做資料的搜尋，不過GOPHER服務現在已經很少人使用了。 • 可以連結至gopher伺服器，以便查詢資料。 • 範例： • <a href="gopher://gopher.edu.tw/">這是GOPHER協定範例</a>

  18. 7.2.8 href屬性 - WAIS協定 • WAIS(Wide Area Information Search)；廣域資訊查詢協定，可以輸入正確的搜尋指令，將之送往WAIS伺服器以便搜尋資料。 • 可以將搜尋指令送往WAIS伺服器去搜尋資料。 • 範例： • <a href="wais://www.edu.tw/SQLdb?html-msql">這是WAIS協定範例</a>

  19. 7.3　鏈結至特定段落 • 設定一些索引讓瀏覽者可以快速跳躍到網頁的某一段，省掉許多尋找資料的時間，這是靠<a>標籤來完成的功能。 • 鏈結至某網頁的特殊段落位置可以分為兩種，一種是跳躍到本身網頁的某一段落，另一種則是跳躍到另一個網頁的特殊段落。 • 無論是哪一種，都必須對於目標段落先做好標記，如此一來瀏覽器才能正確地找到目標段落的位置。

  20. 7.3.1<a> - name與id屬性 • 要跳躍至某個網頁的某個特定段落位置，首先必須先對於該位置記錄一個標記，也就是給該位置一個名字，如此一來，才能夠指定超鏈結跳躍至該位置處。 • 指定特定位置的名字，必須使用<a>標籤的name屬性。 • 範例7-8： • 內容執行結果 • 範例7-9： • 內容執行結果

  21. 7.3.3 不同網頁的特殊位置跳躍 • 在定義完畢特殊位置的標記名稱之後，就可以直接透過<a>標籤來跳躍到指定的段落了。 • 範例7-8： • 內容執行結果

  22. 7.3.3 不同網頁的特殊位置跳躍 • 除了可以在同一網頁中，指定跳躍到某一特殊位置之外，在不同的網頁中，一樣也可以完成特殊位置的跳躍(前提是必須特殊位置已經做好名稱標記) 。 • 範例7-9： • 內容執行結果

  23. 7.4　超鏈結的顏色設定 • 在網頁中超鏈結的文字會以藍色或紫色的顏色出現，其中藍色代表未曾讀取過的超鏈結目標網頁，而紫色則是代表已經讀取過的超鏈結目標網頁。 • 除了預設的超鏈結顏色之外，也可以自由指定超鏈結的顏色，方法有兩種：第一種是由瀏覽者自行更改瀏覽器中的設定來改變超鏈結的顏色。第二種則是由網頁設計者在HTML網頁中，設定<body>的link、vlink、alink屬性。

  24. 7.4　超鏈結的顏色設定 • 屬性link功能： • 設定超鏈結目標未曾被瀏覽時的超鏈結文字顏色。(預設為藍色) • 屬性vlink功能： • 設定超鏈結目標已被瀏覽時的超鏈結文字顏色。(預設為紫色) • 屬性alink功能： • 設定超鏈結文字已被按下，但尚未放開滑鼠左鍵時的超鏈結文字顏色。 • 範例7-10： • 內容執行結果

  25. 7.5　路徑的深入探討 • 事實上，對於瀏覽器而言，當它看見相對路徑時，會與目前所在網頁的路徑前半部結合，形成一個絕對路徑，然後再讀取實際的網頁。 • 例如： • (1) 目前所在的網頁為『http://127.0.0.1/HTML/ch07/page1.htm』。 • (2) 超鏈結目標為『page2.htm』。

  26. 7.5　路徑的深入探討 • Step1：瀏覽器會先將前半部路徑取出，也就是『http://127.0.0.1/HTML/ch07/』，這個路徑稱為基本路徑。(請注意最後一個『/』不可省略) • Step2：瀏覽器會將相對路徑表示的超鏈結目標取出，也就是『page2.htm』。 • Step3：當滑鼠游標移至超鏈結文字上方時，瀏覽器會將兩者結合，形成『http://127.0.0.1/HTML/ch07/page2.htm』完整的絕對路徑，並顯示於瀏覽器下方的狀態列中。

  27. 7.5　路徑的深入探討 • Step4：當按下超鏈結時，瀏覽器讀取『http://127.0.0.1/HTML/ch07/page2.htm』。 • 在以上範例中得知，當使用相對路徑表示超鏈結目標時，瀏覽器實際上是將基本路徑與相對路徑結合，產生完整的絕對路徑，然後再讀取目標網頁，而基本路徑是由目前網頁所在位址決定的。 • 基本路徑可以自由指定的，只要透過<base>標籤就可以重新指定基本路徑了。

  28. 7.5.1 設定基本路徑(<base>) • <base>為獨立標籤，功能為設定基本路徑。 • 範例7-11： • 內容執行結果

  29. 7.5.2　基本路徑與相對路徑的計算規則 • 最簡單的絕對路徑計算方式，就是『基本路徑』+『相對路徑』，但是有時候相對路徑若記載了父目錄『../』時，就必須把『基本路徑』的最後一層去除，再與相對路徑做結合，並且每出現一層父目錄『../』就必須把『基本路徑』去除一層。 • 例如： • 基本路徑為『http://127.0.0.1/HTML/ch07/files/allfile/』 • 相對路徑設為『.. /../../PIC/bg1.jpg』 • 則經由計算之後的完整絕對路徑為『http://127.0.0.1/HTML/PIC/bg1.jpg』。 • 範例7-12： • 內容執行結果

  30. 7.6　網頁DIY • 請翻閱至18.7節，在DIY網頁中加入超鏈結，如此一來，網頁就可以與其他的網頁相連，真正應用了HTML網頁互連的特性。

  31. 本章習題

More Related