連結其他檔案

上一頁        HTML首頁        下一頁

  • 網頁的連結的作用,除了連結一般網頁外,尚可連結書籤 (anchor)、 圖片、電子郵件、其他檔案等。
  • 連結其他檔案時,檔案的位址可採用絕對路徑(absolute URI, 如 http://www.pt.ntu.edu.tw/index.hml) 或相對路徑(relative URI,如 index.hml) 來表示,相對路徑是以正在開啟的網頁做為參考點, 來尋找相對位置。由於網頁製作者與使用者的主機不同, 使用絕對路徑可能會造成無法開啟該網頁,故除了連結其他網站外,儘可能使用相對路徑。
  • 超連結文字的設定,請參考 HTML 簡介的主體屬性設定一節。
  • 插入圖片檔案<img src=  >
    插入多媒體檔案<embed src=  >
    連結其他位置或網頁<a href=  > </a>
    下載檔案<a href=  > </a> 標記或 <a href="ftp://  > </a> 標記 
    與人聯絡<a href=mailto:  > </a> 標記或 <a href="mailto:    ? > </a> 標記 


    插入圖片檔案

  • 插入圖片檔案的指令為 <img src="圖檔位址"> , 可使用參數 alt="圖片說明", 讓瀏覽者如無法下載時,仍可知道這個圖檔的意義。
  • 插入的圖檔應使用一般瀏覽器均可支援的壓縮圖形格式,如 *.gif 檔或 *.jpg 檔。 二者的差別在於 *.gif 檔的顏色只有256色,但較不失真,因此圖片色彩較鮮豔。 而 *.jpg的圖片顏色雖然很多,壓縮效果較好,較適合中大型的圖檔,但會失真,比較適合照片。
  • 圖片解析度當然是越大越好,但是圖檔太大會造成下載困難,一般只要大於 72 dpi 的圖片, 在網路上以經是清晰可見,因此圖檔的大小最好不要大於 30 kb。
  • 考量網路會塞車,且仍有瀏覽者的連線方式是透過電話連線, 故不要放置太大的圖檔或者設計讓使用者有選擇不同大小圖檔的機會。 完成網頁後,最好透過撥接上網的方式親自測試下載的速度。
  • 使用大型圖檔時,最好將網頁與圖檔分開,才不會影響網頁的傳輸速度。 即在網頁中顯示一個具有超連結功能的縮小圖檔,或是一行說明文字,說明該圖檔大小, 讓瀏覽者自行決定是否開啟該大型圖檔。
  • 常用的影像處理軟體有 PhotImpact、PhotoShop 等,而能處理動畫及3D動畫的軟體有 GIF Animator、Flash、Director、3D Studio、Poser 3D, 至於 PhotImpact 及 FrontPage 則可編輯影像地圖。  
  • 用途 HTML語法 實例
    插入圖片檔,預設值為 border=1,如不想要圖框,則設定 border=0。 <img border=數字  src="圖檔位址"> 插入快樂臉圖片
    插入有簡易說明的圖檔 <img border=數字  src="圖檔位址"
             alt="圖片說明">
    電腦課的大綱
    插入改變大小的圖檔,預設值為原圖尺寸。 <img border=數字  src="圖檔位址"
             width=數字  height=數字">
     
    插入圖檔,並調整圖片位置。 <img border=數字  src="圖檔位址"
             align=left/ right/ top/ bottom/middle>
    不同位置的快樂臉
    插入底圖圖檔,會自動將畫面填滿。 <body background="圖檔位址" 插入底圖
    插入底圖圖檔,當捲軸移動文字時,底圖固定不動。 <body background="圖檔位址"
               bgproperties=fixed>
    不會動的底圖

      back to top


    插入多媒體

    用途 HTML語法 實例
    連結聲音或音樂,使用 *.mid 的檔案較佳。hidden= true 表示是背景音樂, loop= -1 表無限次,為預設值,autostart=true 表示自動撥放。 <embed  src="聲音或音樂位址"
                   hidden=true/ false
                   loop=重複撥放的次數或 -1
                   autostart=true/ no>
     
    簡易的背景音樂。 <bgsound  src="聲音或音樂位址">  
    連結錄影帶 <embed  src="錄影帶位址"
                   hidden=false
                   loop=false
                   autostart=true>
     

      back to top


    連結其他位置或網頁

    用途 HTML語法 實例
    連結至本網站其他網頁,位址可以是絕對位址(c:/../)或相對位址(../../) <a href="其他網頁位址">
    欲超連結文字或按鈕或圖片</a>
    連結本網站其他網頁
    連結本網頁內文的其他位置:先在目的位置設定書籤,再超連結至此書籤 <a name="書籤名稱"> 目的文字 </a>
    <a href="#書籤名稱">
    欲超連結文字或按鈕或圖片 </a>
    書籤
    連結至其他網頁的某一書籤位置 <a href="其他網頁位址 #書籤名稱">
    欲超連結文字或按鈕或圖片</a>
    連結其他網站
    製作影像地圖(image map),用座標系統自動將圖片上的點或區塊標出,再用來當做超連結。 其中 shape=rect 表示長方形區塊、shape=circle 表示圓形區塊、 shape=polygon 表示為多角形區塊。 <map name="地圖定義名稱">
    <area shape=rect href="書籤位址"
             coords="左上角座標, 右下角座標">
    <area shape=circle href="書籤位址"
              coords="圓心座標 , 半徑">
    <area shape=polygon href="書籤位址"
              coords="座標一, 座標二, 座標三,......">
    </map>
    <img src="圖檔位址" usemap="#地圖定義名稱">
    影像地圖
    連結至其他網站的網頁,必須另開新的 NetScape 或 IE 視窗,以免侵犯版權 <a target=_blank
          href="其他網站位址http://...">
    欲超連結文字或按鈕或圖片</a>
    連結其他網站

      back to top


    下載檔案

    用途 HTML語法 實例
    直接下載 <a href="檔案位址">
    超連結文字或按鈕或圖片
    </a>
    檔案下載
    使用 ftp 下載 <a href="ftp://.....">
    超連結文字或按鈕或圖片
    </a>
     

      back to top


    與人聯絡

    用途 HTML 語法 實例
    連結指定的電子郵件位址,會出現 OutLook 的視窗,並指定收件人 <a href="mailto:電子郵件位址">
    超連結文字或按鈕或圖片
    </a>
    與我聯絡
    連結指定的電子郵件位址,並預設信件主題 <a href="mailto:電子郵件位址?subject=主題">
    超連結文字或按鈕或圖片
    </a>
    預設主題

      back to top


    本網頁於 02/22/2002 製作,並於 09/25/2003更新 © 2003 版權為柴惠敏所有,如需引用請先告知