超連結

§ 超連結

超連結(HyperLink)是 www 能風行全球的最大功臣，網頁中也絕對少不了這個主角。透過超連結的無限延伸能力，我們才能存取網路各伺服器上所提供的各種資源。
超連結在使用上大致可以分為幾種情形：

1.連結到自己網站中的另一個網頁。

2.連結到網站中網頁中的錨點(anchor)，有人稱它為「書籤」。

(1、2項都是連結在自己的網站內，故又稱「內部超連結」)

3.連結到別人網站中的網頁。(因連結到自己網站之外，故又稱「外部超連結」)

4.連結到電子郵件。

5.連結到檔案。

§ <a href="url">..連結文字(圖片、按鈕等)..</a>

<a> 是超連結的標籤，可是它是無法單獨使用的，需配合其他的屬性才有意義。
被<a href="....">及<a>所包圍的就是一個超連結的設定。注意：結束標籤不要忘了。
只要改變上面語法中的 url，再加上一個連結的媒介(文字、圖形、按鈕等)，即可以設定一個超連結，連結到各個不同網頁。
預設的情形下，凡是有設定超連結，會改變文字的顏色、會出現底線、游標指上去時會變成手狀。圖片邊框則會出現超連結的顏色。
url 的指定可以用兩種方式：

1.絕對位址：網頁上傳後，在網路伺服器主機中的位址。也就是http://主機位置/檔案路徑
例如：https://members.tripod.com/tngina/notebook/dh44.htm 就是本頁的絕對位址。
例如：https://www.tripod.com/" 代表Tripod的絕對位址。
(主機後不寫檔案路徑，內定是找該主機下的首頁)
2.相對位址：相對於「目前網頁」的位址。
若要連結的檔案和目前網頁在同一目錄下，則直接指定檔名即可。
若要連結的檔案和目前網頁不在同一目錄，則需指定該檔案的相對路徑。
../ 代表回上一目錄。
例如：要連結的檔案是位在上一層目錄中的aa.htm，則上面的 "url"就是寫成 "../aa.htm"

除了連結到別人的網站，要用絕對位址來設定外，通常我們都會以相對位址的方式來指定連結位址，方便我們在網頁上傳前在自己的電腦中可以做測試。

＊範例 (文字連結範例)

<a href="../index.htm" >回首頁</a>

＊範例 (圖片連結範例)

<a href="../index.htm" ><img src="../images/logo999.gif" ></a>

＊ Tips:

在 FrontPage 中，只要在網頁中直接打上正碓的網址，再按下一個空白鍵，即使不設定超連結，也會將它自動解讀成一個超連結。

＊ Tips:

可以在<head> 區中，以<base href="....">的方式把網頁中的超連結全部指向絕對路徑。
例如：

<html>
<head>
<title>絕對路徑練習</title>
<base href="https://members.tripod.com/tngina/">
</head>
<body>
<a href="aaaa.htm">連結文字</a>
</body>
</html>

經由上面的指定，以上的連結就會變成 http://home.kimo.com.tw/tnginaaaaa.htm

§ 連結目標視窗

target 連結目標視窗的設定( frame 中的設定，在下一單元再做說明)

target="_blank"	開新視窗(另外開啟一個新的瀏覽器視窗來顯示文件)
target="_top"	整頁(佔滿整個瀏覽器視窗)
target="_self"	目前的視窗(出現在目前網頁的視窗中，在frame中才能顯現效果)
target="_parent"	父視窗(回到上一層的視窗設定，在frame 中使用才能顯現效果)
target="視窗名稱"	將文件顯現在指定的視窗名稱中(在frame 中使用)

＊範例 (開啟新視窗)

<a href="../index.htm" target="_blank">回首頁</a>

＊範例 (整頁顯示)

<a href="../index.htm" target="_top">回首頁</a>

＊ Tips:

連結到別人的網站時，最好用開新視窗 (targer="blank") 的設定。不僅是可以避免訪客一去不回，如果將別人的網站放在自己的分割視窗中，有「侵犯智慧財產權」之慮(將別人網站視為己有)。

§ 超連結文字的顏色

還記得 <body> 指令內的超連結顏色設定嗎？(若忘了！請翻翻前面吧！)
link 可以設定連結文字的顏色。(設預是藍色)
alink (active link)可以設定使用中的連結文字顏色。(設預是紅色)
vlink (visited link)可以設定已造訪過的連結文字顏色。(設預是紫色)

§ 連結到「書籤」

當文件很長，或想直接跳到某一位置時，可以利用書籤的設定方法。
先在欲連結處設定書籤位置(錨點)。
語法：

<a name="書籤名稱"></a>

再到連結媒介上設定連結。
語法：

<a href="#書籤名稱">連結說明文字</a>

應用同樣的方法，我們也可以讓使用者閱讀完該段文字後(在該處設定連結文字，如"回最前面")，再到起始處設定一個書籤名稱，讓"回最前面"設定連結。)
注意：和一般連結不同的是加上了一個 # 符號。
書籤名稱在文件中必需是唯一的，每一個書籤的名稱必需是不相同的。
如果，設定了相同的書籤名稱，就會以第一個位址為跳躍的目標。

＊範例 (同一網頁中的書籤)

書籤不只是用在同一網頁中，也可以連到不同的網頁的書籤位置。
語法：

<a href="網頁位址#書籤名稱">連結說明文字</a>

＊範例 (不同網頁中的書籤)

§ 連結到「電子郵件」

語法：

<a href="mailto:電子郵件位址">寫信給我</a>

瀏覽器會自動開啟使用者的郵件軟體(如：Outlook Express)，然後在「收件人」欄位中填入此處的電子郵件地址。

可以再為郵件加上回信的主題。
語法：

<a href="mailto:電子郵件位址?subject=交個朋友">寫信給我</a>

§ 連結到「檔案」

語法：

<a href="檔案所在位址">檔案名稱</a>

通常用在「檔案下載」，只要指定連結到檔案的所在位址即可。
瀏覽器碰到它無法解讀的檔案格式 (如：.zip、.exe 檔)，會自動詢問使用者是否將檔案存到磁碟中，當使用者回答"是！"時，接下來就是檔案下載的動作了。
檔案最好用 winzip 等常見的壓縮軟體壓縮過，以免因檔案太大，造成下載困難。
最好清楚標示檔案的版本、大小，作為使用者參考。以免使用者來不及等待便停止下載的動作。 (如果不知道檔案大小，可以把檔案壓縮後，對檔案選取，執行右鍵/內容命令，就可以知道了。)
檔案位址也可以在自己的網站以外。

§ 影像地圖

一般的超連結都是一張圖設定一個超連結，利用「影像地圖」可以在一張圖上面同時設定很多的超連結。
影像地圖(image map)，就是將一張分割成許多的「封閉區域」，再分別針對這些區域(area)來設定超連結。
本站上面的導覽圖就是用「影像地圖」的方式來設定超連結的。
除了網站的導覽列，也常應用在觀光地圖的製作。
利用FrontPage的「圖片工具列」，我們可以很輕易的作成一張影像地圖。這是「即視即所得」的網頁編輯器最令人稱道的地方，否則，光是設定作用區就讓人頭昏腦脹了哩！
只要在FrontPage中點一下圖片，就會出現下面的「圖片工具列」，紅色部分就是用來畫分「作用區」的。

：矩形圈選工具

：圓形圈選工具

：不規則形狀圈選工具

：顯示作用區(將圖暫時隱藏，方便檢視)

只要圈選的區域是封閉的，自然會出現編輯超連結的對話方塊。
若圈選區域大小不喜歡，可以拉曳邊框控點改變大小。
滑鼠在作用區中間還可以拉曳它改變位置。
按一下作用區，再按下 Delete 鍵可以刪除某一作用區。

§ 沒有 FrontPage 如何製作影像地圖？

影像地圖最好用上面的方法製作，否則，它的難度是非常高的。
影像地圖是利用<img>標籤插入一張圖片，在<img> 中用 usemap 屬性，設定該圖被使用成一張影像地圖。
語法：

<img border="0" src="images/logo02.gif" usemap="#Map0" width="611" height="63">

再利用<map>標籤指向該影像地圖。
語法：

<map name="Map0">

<area>標籤中的一些屬性，可以設定圖片畫分的區域和連結位址、連結目標等。
<area shape="連結區域的形狀">
所設定的形狀，可以有下列幾種：

rect：四邊形。(預設值)
circ：圓形。
poly：多邊形。

有了連結區域的形狀，還必需利用 cords 屬性一一為這些形狀定出座標位置。而座標的設定，隨形狀而有所不同。

shape="rect" (四邊形)時，座標的定位方式是：
cords="x軸的起始點,y軸的起始點,x軸的結束點,y軸的結束點"

shape="circ" (圓形)時，座標的定位方式是：
cords="x軸中心點,y軸中心點,圓的半徑"

shape="poly" (多邊形)時，座標的定位方式是：
cords="x軸的座標點x1,y軸的座標點y1,x軸的座標點x2,y軸的座標點y2,.........."

設定連結，和<a>標籤是雷同的，只是把它改<area>罷了。
語法：

<area href="連結位址">

設定替代說明文字。
語法：

<area alt="說明文字">

設定連結視窗。
語法：

<area target="視窗名稱">

版權所有© 未經本站同意，不得作任何形式之轉載或商業用途
-- 網奕工坊 -- 站長信箱： tn705939@ms7.tisnet.net.tw