回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 工具預備
 簡單設定
 五分鐘速成
 按鍵一覽
 插入圖片
 底色棬
 活用表格
 運用框架
 連結進階Here
 加入音樂
 精用表單
 安裝計數器
 安裝訪客簿
 安裝聊天室
 網頁上傳
 檔案權限
 加入實例
 本節實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 預備:
圖片一張,作圖片連結之用;隨便一個 HTML 檔案,設名為 there.html。
■ 簡單步驟:
A. 圖片連結:
視窗狀態:開啟 Composer 及己插入圖片之文章檔。
  1. 以滑鼠雙擊該圖片,
  2. 於視窗 Image Properties 之左上方按 Link
  3. 於Link to 一欄之右方按 Choose File
  4. 選出己準備好的 HTML 檔案 there.html,
  5. OK開啟舊檔 回前一視窗,
  6. OK確定 回文章編輯畫面,完成。

B. 文字連結:
視窗狀態:開啟 Composer 及己有文字的 HTML 檔。

  1. 以滑鼠拉選欲加入連結之字句,
  2. Link 鍵,
  3. 與【圖片連結】之 3-6 步相同。
■ 文字連結顏色設定:
視窗狀態:以 Composer 開啟欲更改連結顏色的 HTML 新或舊檔。
  1. FormatPage Colors and PropertiesColors and Background
  2. 按在各相應顏色塊上以設定以下顏色:
    Link Text 為一般連結顏色(未被按過)。
    Active Link Text 為連結後的顏色。(被按過)。
    Followed Link Text 為滑鼠置於連結文字上的顏色。
  3. 若你擔心自己不善於顏色配搭,可選擇一些擬好的組合 Color Schemes
  4. 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 檔。

  1. 以滑鼠拉選欲加入連結之字句或圖片,(將會成為按鍵)
  2. Link 鍵,將出現如下視窗:(局部)
  3. 填入任一連結種類,
  4. 確定 回文章編輯畫面,完成。
■ 內部連結:
發生於同一頁中的連結稱內部連結。當某頁的內容很多時,內部連結便可以令使用者快速 的找到資料。你可以到 PenPal Garden FAQ page 去體驗一下。
基本上只是兩步而己:1.) 拋錨 (在欲連結處做個記號)。 2.) 連結此記號。

視窗狀態:開啟 Composer 及一己有大量字畫的 HTML 檔。

  1. 將游標移至文章中欲作記號之處,(連結目標)
  2. 按快速鍵 Target
  3. 於對話窗填入記號名稱,可以任何中文、英文或數字,唯大小寫是有分別的。
  4. 以滑鼠拉選欲加入連結之字句或圖片,(將會成為按鍵)
  5. Link 鍵,將出現如下視窗:(局部)
  6. 選出在第三步己做好的記號,
  7. 確定 回文章編輯畫面,完成。
■ 相對及絕對路徑:
相對路徑:
  • 特點:具詳盡的位置敘述,多用於不同伺服器之檔案互連,以指定的伺服器作起點。
  • 例如: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

  • Chris55SoftwareCity 都在同一伺服器 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,若沒有請到【工具預備】按連結下載。

    1. 開啟 Mapedit 時會詢問你開啟舊檔,你可隨便打開 map.html
    2. Select Inline Image 對話窗選取插於 map.html 中那圖片的名稱并按 OK
    3. 按以下任一按鍵去選取圖片中欲作連結的區域:

      用以選取矩形連結區,
      用以選取圓形連結區,
      用以選取多邊形連結區,

    4. 當以滑鼠拉選範圍之後會出現如下畫面:(局部)

    5. 於第一欄填入連結,相對、絕對皆可,
    6. 按 OK 回原來 Mapedit 畫面,
    7. 你可重複由 3-6 的步驟選取其它連結區,
    8. 最後請按 鍵存檔,

    9. 結束 Mapedit 并以瀏覽器開啟 map.html 作測試,完成。
    The Best Web Hosting Company
    Download Internet Explorer Download Netscape Netvigator This is Circle Hotspot This Rectangle Hotspot This is Polygon Hotspot Search ICQ Users Send a mail to me Go to Penpals Garden Back to main page