HTML與CSS教學-第七章 建立超連結

 

第七章 建立超連結
本章要點
超連結的概念
串連標記
使用CSS樣式設定書籤格式
圖片串連
圖片映射

目錄：
  7.1 超連結概述
  7.2 超連結標記a及其屬性
  7.3 利用CSS樣式設定書籤格式
  7.4 圖片連結
  7.5 圖片映射連結
 

7.1 超連結概述
  超連結是一個網站的靈魂。一個網站是由多個頁面組成的，建立超連結有利於頁面與頁面之間的跳轉，從而將整個網站中的頁面有機地串連起來，它是網頁中至關重要的元素。一般情況是將滑鼠游標移至超串連處時顯示為底線，單擊滑鼠即可跳轉到超連結的相應頁面。
 每一個網頁都有獨一無二的地址，即URL。

7.2 超連結標記a及其屬性
超連結標記雖然在網頁設計製作中佔有不可替代的地位，但是其標記只有一個，那就是<a>標記。本章介紹的超連結應用都是基於<a>標記基礎上的。
<a href=”file_url” >連結文字</a>

href指定連結地址
name給連結命名
title給連結提示文字
target指定連結的目標視窗
accesskey連結熱鍵

 每一個檔案都有自己的存放位置和路徑，理解一個檔案到要連結的檔案之間的路徑關係式建立超連結的根本。 
 URL——統一資源定位器，指的就是每一個網站都具有的獨立的地址。同一個網站下的每一個網頁都屬於同一個地址下，但是，當建立網頁時，不可能也不需要為每一個連結都輸入完全的地址。我們只需要確定當前文檔同網站根目錄之間的相對路徑關係。因此，連結可以分為以下3種：
  
  絕對路徑
  相對路徑
  根路徑

1.絕對路徑
  
  絕對路徑為檔案提供完全的路徑，包括適用的協議，如http,ftp,rtsp等。一般常見的有：
  http://www.163.com
  ftp://202.136.254.1
  當連結到其他網站中的檔案時，必須使用絕對連結。

2.相對路徑
  相對路徑是最適合網站的內部連結的。只要是屬於同一網站之下的，即使不在同一個目錄下，相對連結也非常適合。
  相對連結的使用方法為：
  如果連結到同一目錄下，則只需輸入要連結文檔的名稱。
  如連結到下一級目錄中的檔案，只需先輸入目錄名，然後加“/”，再輸入檔案名稱。
  如連結到上一級目錄中的檔案，則先輸入“../”，再輸入目錄名、檔案名稱。

3.根路徑  
  根目錄相對位址同樣適用於建立內部連結，但大多數情況下，不建議使用此種地址形式。它在下列情況下使用：
    當網站的規模非常大，放置於幾個伺服器上時
    當一個伺服器上同時放置幾個網站時
  根目錄相對位址的書寫形式也很簡單，首先以一個斜杠開頭，代表根目錄，然後書寫檔案夾名，最後書寫檔案名稱。

7.2.1 內部連結
  所謂內部連結，指的是在同一個網站內部，不同的HTML頁面之間的連結關係。在建立網站內部連結的時候，要考慮到使連結具有清晰的導航結構，使使用者方便地找到所需內容的HTML檔案。

7.2.2 書籤連結
  建立書籤連結分為兩步，一是建立書籤，二是為書籤製作連結。
  建立書籤：<a name=”name”>文字</a>
  書籤連結：<a href=”#name”>文字連結</a>
7.2.3 外部連結
  所謂外部連結，指的是跳轉到當前網站外部，與其他網站中頁面或其他元素之間的連結關係。這種連結在一般情況下需要書寫絕對位址。
  製作外部連結的時候，使用URL統一資源定位器來定位全球資訊網資訊，這種方式可以簡潔、準確地描述資訊所在的地點。
  常見的URL格式如表所示。
www http://  進入全球資訊網
ftp ftp://  進入檔案傳輸伺服器
news news:// 啟動新聞討論群組
email mailto: 啟動郵件

1.連結外部網站
 <a href=”http://”>文字連結</a>

2.連結FTP
 <a href=”ftp://”>文字連結</a>

3.連結到news新聞群組
 <a href=”news://”>文字連結</a>

4.發送e-mail
 <a href=”mailto:a@b.c”>發送郵件</a>
 <a href=”mailto:a@b.c?subject=content”>郵件主題</a>
 <a href=”mailto:a@b.c?cc=a@b.c”>抄送</a>
 <a href=”mailto:a@b.c?bcc=a@b.c”>密件副本</a>

7.2.4 檔案（非HTML頁面）連結
  
  除了連結到HTML頁面的超連結外，還可以製作提供檔案下載的連結。如果希望製作下載檔案的連結，只需在連結地址處輸入檔案所在的位置即可。當瀏覽器使用者單擊連結後，瀏覽器會自動判斷檔案的類型，以做出不同情況處理。
  <a href=”file_url”>文字連結</a>
  file_url代表檔案所在的路徑，可以寫下相對路徑，也可以寫下絕對路徑。

7.3 利用CSS樣式設定書籤樣式
  超連結在預設情況下，連結被顯示為帶底線，未被查看過時為藍色，訪問過的為紫色。我們可以通過CSS來設定連結不同狀態中的樣式 。連結分為5個狀態，它們的視覺外觀根據目前狀態而改變。這些狀態如下：
  link連結在沒有任何操作之前的標準狀態
  visited連結被單擊之後的狀態
  hover滑鼠指標懸停在串連上時的狀態
  focus連結獲得焦點時的狀態
  active連結正在被單擊時的狀態
  在預設面板中，link為藍色，visited為紫色，active為紅色，三者都帶有底線。
  使用CSS可以調節不同狀態下連結的字型、大小、顏色、加粗斜體、底線等格式。

7.4 圖片串連
雖然連結主要是基於文本的，但是可以用一個連結來封裝一個映像，從而使其變成一個連結。映像的連結標記和文字是相同的。都是<a>標記。
 區別在於，文本的連結在超連結標記<a></a>之間輸入文本
 <a href=”file_url” >連結文字</a>
 圖片的連結在<a></a>之間輸入的是圖片的代碼。
 <a href=”file_url” ><img src=”img_url”></a>
 另外，圖片預設情況下沒有邊框，一旦添加連結後會有藍色邊框，想要去掉邊框，可在<img>標記中將border屬性值設為0，如<img src=”img_url” border=”0”>，或者在CSS樣式表中將圖片標記img的樣式統一設成img{border:0;}。

7.5 圖片映射連結
影像地圖（image map）使你可以在一個單獨映像中定義多個連結。例如，如果你有一個氣象圖，可以使用一個影像地圖連結到各個地區的氣象預報。影像地圖中可單擊的範圍可以是基本形狀（矩形或者圓形），也可以是複雜的多邊形。