建立超連結 (一)

文字與圖片之超連結

一.前言

何謂超連結?從一個網頁連結到另一個網頁或是網站就是超連結。在設定超連結之前,我們必須先了解超連結的路徑觀念,才能避免網頁上傳後,發生無法顯示網頁或是掉圖的情況。

※ 路徑觀念:
相對路徑 當我們在 Site 之下插入圖檔或是設定超連結時,可以看到內容設定面板的 Src 欄 (插入圖檔時),及 Link 欄 (設定連結時)的檔案路徑為
" 資料夾名稱 / 檔名 " 或是 ".. / 資料夾名稱 / 檔名 ",
此種檔案路徑都屬於相對路徑,由於所連結的檔案全都建立在 Site 之下,所以在網頁上傳至伺服器後,一般瀏覽者仍能藉由這些路徑讀取到所連結的檔案及網頁。
因此,相對路徑是我們製作網頁時所採用的路徑方式。
  絕對路徑 和相對路徑不同的是,絕對路徑是一個完整的路徑,例如下列兩種路徑:
網址路徑 完整的網址路徑,如
" http://www.twisu.com"
當我們要連結至別人的網站時,就要輸入網址路徑。
但是採用網址路徑有一個缺點,就是當網址有改變時,連結就會錯誤,而無法顯示網頁或檔案。
所以如果是要插入圖檔或設定網頁連結,儘量採用相對路徑,而不要採用網址路徑。
本機路徑 如果沒有建立 Site,或是沒有把連結檔案置於 Site 之下,就直接設定超連結或插入圖檔,路徑就會變成
" file:// 本機電腦名稱 / 資料夾名稱 / 檔名 ",
這樣的路徑稱為本機路徑,當網頁上傳後,只有本機才能讀取檔案和網頁,其他的瀏覽者是看不到網頁的。

二.文字與圖片之超連結:

設定文字超連結:

我們先建立一個新的頁面,命名為main.htm

切換回index.htm,在首頁上鍵入"由此進入"來當作連結文字

反白選取"由此進入",在Properties屬性面板上Link欄位,按下資料夾圖示,在選取的視窗中直接點選所要連結的檔案即可完成超連結,如圖 1 所示


圖 1

文字將呈現連結狀態,且 Link 欄也出現被連結的檔案名稱,如圖 2 所示


圖 2


設定圖片超連結:

點選圖片。在Properties屬性面板上Link欄位,按下資料夾圖示,選擇要連結的檔案。

圖片將呈現連結狀態, Link 欄也出現被連結的檔案名稱。

如果圖檔很大,我們可以替圖片加上註解 (在Alt 欄中加入),讓瀏覽者在等待圖檔下載時,如果將滑鼠移至該連結按鈕,可以先知道相關的訊息。如圖 3 所示


圖 3

若要連結至其他網站,在選取文字或圖片後,於 Link 欄直接輸入網址即可。如圖 4所示


圖 4

目標 之設定:
當文字或圖片有設定超連結的時候,可以看到 Target 欄變成可以輸入的狀態,Target 為被連結的網頁在開啟時,以何種方式呈現的相關設定。

目標 本身設定有四種:
_blank 被連結的網頁 (或網站) 以另一個新視窗開啟。
_parent 被連結的網頁開啟時將取代整個 Frameset。
_self 被連結的網頁在原 Frame 中開啟。
_top 當最外圍的 Frameset 中的 Frame 又包含另一個 Frameset 時,被連結的網頁在開啟的時候,將取代最外圍的整個 Frameset。

不作任何設定時,是以 _self 為預設。(有關 Frameset 頁框的設定將在後續課程中有介紹 )
回課程目錄》《下一課