|
圖片一張，作圖片連結之用；隨便一個 HTML 檔案，設名為 there.html。
|
■ 簡單步驟：
|
A. 圖片連結：
視窗狀態：開啟 Composer 及己插入圖片之文章檔。
- 以滑鼠雙擊該圖片，
- 於視窗 Image Properties 之左上方按 Link，
- 於Link to 一欄之右方按 Choose File，
- 選出己準備好的 HTML 檔案 there.html，
- 按 OK 或 開啟舊檔 回前一視窗，
- 按 OK 或 確定 回文章編輯畫面，完成。
B. 文字連結：
視窗狀態：開啟 Composer 及己有文字的 HTML 檔。
- 以滑鼠拉選欲加入連結之字句，
- 按 Link 鍵，
- 與【圖片連結】之 3-6 步相同。
|
■ 文字連結顏色設定：
|
視窗狀態：以 Composer 開啟欲更改連結顏色的 HTML 新或舊檔。
- 按 Format → Page Colors and Properties → Colors and Background
- 按在各相應顏色塊上以設定以下顏色：
Link Text 為一般連結顏色（未被按過）。
Active Link Text 為連結後的顏色。（被按過）。
Followed Link Text 為滑鼠置於連結文字上的顏色。
- 若你擔心自己不善於顏色配搭，可選擇一些擬好的組合 Color Schemes。
- 按 OK 或 確定 回文章編輯畫面，完成。
|
■ 外部連結：
|
"沒有連結便沒有 WWW"，你同意嗎？
非發生於同一頁中的連結統稱外部連結，并有以下種類之分：
- 網站連結
例子：PenPals Garden
填入：http://www.school.net.hk/~chi
- 電子郵件連結
例子：Chris Chan
填入：mailto:lung55@usa.net(Chris Chan)?Subject=Hello Chris
備注：(Chris Chan) 及 ?Subject=Hello Chris 皆可有可無。
- Chris Chan 為內定件人姓名。 Hello Chris 為內定郵件標題。
- FTP連結
例子：下載 Cute FTP 2.0
填入：ftp://ftp.school.net.hk/pub/internet/ftp/cute2032.exe
- News連結
例子：HK School Net News服務
填入：news:news.school.net.hk
- Gopher連結
例子：中大 Gopher 查詢服務
填入：gopher://gopher.cuhk.edu.hk
- Telnet 連結
例子：HK School Net Telnet服務
填入：telnet://telnet.school.net.hk
以上各種連結的應用方法：
視窗狀態：開啟 Composer 及一己有字畫的 HTML 檔。
- 以滑鼠拉選欲加入連結之字句或圖片，(將會成為按鍵)
- 按 Link 鍵，將出現如下視窗：(局部)
- 填入任一連結種類，
- 按 確定 回文章編輯畫面，完成。
|
■ 內部連結：
|
發生於同一頁中的連結稱內部連結。當某頁的內容很多時，內部連結便可以令使用者快速
的找到資料。你可以到 PenPal Garden FAQ page 去體驗一下。
基本上只是兩步而己：1.) 拋錨 (在欲連結處做個記號)。 2.) 連結此記號。
視窗狀態：開啟 Composer 及一己有大量字畫的 HTML 檔。
- 將游標移至文章中欲作記號之處，(連結目標)
- 按快速鍵 Target，
- 於對話窗填入記號名稱，可以任何中文、英文或數字，唯大小寫是有分別的。
- 以滑鼠拉選欲加入連結之字句或圖片，(將會成為按鍵)
- 按 Link 鍵，將出現如下視窗：(局部)
- 選出在第三步己做好的記號，
- 按 確定 回文章編輯畫面，完成。
|
|
|
|
相對路徑：
特點：具詳盡的位置敘述，多用於不同伺服器之檔案互連，以指定的伺服器作起點。
例如：Creation of Webpage
填入：http://www.hkiwc.com/composer/index.html
絕對路徑：
特點：只有簡單位置敘述，多用於同一伺服器之檔案互連，以本身所在目錄作起點。
例如：Creation of Webpage
填入：index.html
上面兩連結的結果是一樣的，皆因本頁 link.html 和 index.html 都處於 http://www.hkiwc.com/composer/ 的環境下，若連到別的伺服器則請用絕對路徑，例如 http://www.microsoft.com/index.html 你可不能只填入 index.html 了。
以下為一例子比較同伺服器下相對路徑及絕對路徑的寫法，當然建議採用相對路徑：
| 連結 |
寫法比較 |
 |
| 1 |
相對 |
Gif/bg.gif |
| 絕對 |
http://www.school.net.hk/Chris55/Gif/bg.gif |
| 2 |
相對 |
../spare.html |
| 絕對 |
http://www.school.net.hk/spare.html |
| 3 |
相對 |
../SoftwareCity/crack.html |
| 絕對 |
http://www.school.net.hk/SoftwareCity/crack.html |
Chris55 及 SoftwareCity 都在同一伺服器 http://www.school.net.hk 上的目錄，
Chris55 是相對路徑的起點目錄，
index.html 是當作編輯或加入連結的檔案，
../ 表示上一層（於 Unix 系統中），
|
|
|
此處將介紹連結標記的 target 參數 。
它用以設定網頁連結的指向目標、作用的視窗，計有如下設定值：
- target="框窗名稱"
這只運用於框架中，若被設定則連結結果將顯示於該“框窗名稱”之框窗中。
- target="_blank" 或 target="new"
將連結的畫面內容，開在新的瀏覽視窗中。
- target="_parent"
將連結的畫面內容，當成文件的上一個畫面。
- target="_self"
將連結的畫面內容，顯示在目前的視窗中。(內定值)
- target="_top"
將框架中連結的畫面內容，顯示在沒有框架的視窗中。（即除去了框架)
以上各種參數的應用方法：
於【內部連結】、【外部連結】、【簡單步驟】等出現的對話窗填入或設定好連結後，按
一下該對話窗右下方的 Extra HTML 鍵并輸入上述參數（紅色）即可。
|
■ 一圖多連結：（Image Map）
|
| 一圖多連結 (Image Map) 有不少譯名如 「影像地
圖」、「互動式地圖」(Interactive Image Map)
等，而「一圖多連結」 是自改的，反正多一個
也不傷大雅且可顧名思義，記哪一個請自便。
右邊是一個樣本，請試按。唯「一圖多連結」與
「框架」同樣不為舊的劉覽器所支援。 |
 |
製法：
這處不涉及以 HTML 手動製作及標記解釋，君欲盡窺其原理請看【HTML 剖析】。
準備材料：圖片一張，作多連結之用并加插於一個 HTML 檔案中，設名為 map.html。
已安裝好：MapEdit，若沒有請到【工具預備】按連結下載。
- 開啟 Mapedit 時會詢問你開啟舊檔，你可隨便打開 map.html
- 於 Select Inline Image 對話窗選取插於 map.html 中那圖片的名稱并按 OK
- 按以下任一按鍵去選取圖片中欲作連結的區域：
 | 用以選取矩形連結區， |
 | 用以選取圓形連結區， |
 | 用以選取多邊形連結區， |
- 當以滑鼠拉選範圍之後會出現如下畫面：（局部）
- 於第一欄填入連結，相對、絕對皆可，
- 按 OK 回原來 Mapedit 畫面，
- 你可重複由 3-6 的步驟選取其它連結區，
- 最後請按
 鍵存檔，
- 結束 Mapedit 并以瀏覽器開啟 map.html 作測試，完成。
|
