回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 工具預備
 簡單設定
 五分鐘速成
 按鍵一覽
 插入圖片
 底色棬
 活用表格
 運用框架Here
 連結進階
 加入音樂
 精用表單
 安裝計數器
 安裝訪客簿
 安裝聊天室
 網頁上傳
 檔案權限
 加入實例
 本節實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 預備:
兩個隨便擬好的 HTML 檔案存於同一目錄,假設為 left.html 及 right.html。
己設定好:Composer 之 External HTML Editor。若否請看【簡單設定
■ 簡單步驟:
以 Composer 製作框架非易事,你需要接觸幾個與框架有關的 HTML 標記,閣下若想更清 楚其用法請看【HTML 剖析】,此處只以常見一些例子讓初學者可立即修改及應用。

請按這處先看看結果

視窗狀態:開啟 Composer 新檔。

  1. EditHTML Source 鍵,
  2. 於視窗 Save New File 按 Save 鍵,
  3. 將此檔案與 left.html 及 right.html 存於同一目錄下 名為 frame.html (可改名),
  4. 於視窗 Page Title 輸入一個隨便的標題并按 OK 鍵,
  5. 於剛顯示的 記事本(Notpad)視窗尋找 </HEAD> 標記!
  6. 於其插入以下 HTML Code:
      <FRAMESET cols="150,*">
      <FRAME name="left_window" src="left.html">
      <FRAME name="right_window" src="right.html">
      </FRAMESET>
  7. 請刪去由標記 <BODY></BODY> 的所有字符,包括此兩標記本身。
  8. 以記事本儲存此檔案,
  9. 回 Composer 視窗亦儲存此一更改,完成。可按 Preview
■ 實例備抄:
以下實例的使用方法:
  • 將任一套 HTML Code 代入【簡單步驟】中,代替第六步的 HTML Code。
  • 自備任意三個 HTML 檔案 a.html b.html c.html
  • 【簡單步驟】中 frame.html 可轉為其它檔名。
    SampleHTML Code
       
    請看【簡單步驟】
    SampleHTML Code
     
     
    <frameset rows="80,*">
    <frame name="top" src="a.html">
    <frame name="bottom" src="b.html">
    </frameset>
    SampleHTML Code
     
     
     
    <frameset rows="80,*,80">
    <frame name="top" src="a.html">
    <frame name="middle" src="b.html">
    <frame name="bottom" src="c.html">
    </frameset>
    SampleHTML Code
       
     
    <frameset cols="150,*">
    <frameset rows="80,*">
    <frame name="upper_left" src="a.html">
    <frame name="lower_left" src="b.html">
    </frameset>
    <frame name="right" src="c.html">
    </frameset>
    SampleHTML Code
     
       
    <frameset rows="80,*">
    <frame name="top" src="a.html">
    <frameset cols="150,*">
    <frame name="lower_left" src="b.html">
    <frame name="lower_right" src="c.html">
    </frameset>
    </frameset>
    SampleHTML Code
       
     
    <frameset cols="150,*">
    <frame name="left" src="a.html">
    <frameset rows="80,*">
    <frame name="upper_right" src="b.html">
    <frame name="lower_right" src="c.html">
    </frameset>
    </frameset>
  • ■ 常見框架參數:
    以上所述只是最簡單的框架設定,若希望達到更合適的效果請加入或修改以下各參數。

    標記:<FRAMESET>
    例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" border="2"

    bordercolor="#008000"></frameset>
    功用:宣告HTML文件為框架模式,并設定視窗如何分割。
    參數:
    • COLS="90,*"
      垂直切割畫面(如分左右兩個畫面),接受整數值百分數* 則代表佔用餘下空 間。數值的個數代表分成的視窗數目且以逗號分隔。例如 COLS="30,*,50%" 可以 切成三個視窗,第一個視窗是 30 pixels 的寬度,為一絕對分割,第二個視窗是當 分配完第一及第三個視窗後剩下的空間,第三個視窗則佔整個畫面的 50% 寬度為 一相對分割。您可自己調整數字

    • ROWS="120,*"
      就是橫向切割,將畫面上下分開,數值設定同上。唯 COLS 與 ROWS 兩參數盡量 不要同在一個 <FRAMESET> 標記中,因 Netacape 偶然不能顯示這類形的框架,盡 採用多重分割,如以上各例。

    • frameborder="0"
      設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。

    • border="0"
      設定框架的邊框厚度,以 pixels 為單位。

    • bordercolor="#008000"
      設定框架的邊框顏色。顏色值請參考【HTML 剖析】之【調色原理】。

    • framespacing="5"
      表示框架與框架間的保留空白的距離。

    標記:<FRAME>
    例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto"

    frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
    功用:設定每一個框窗內的參數屬性。
    參數:

    • SRC="a.html"
      設定此框窗中要顯示的網頁檔案名稱,每個框窗一定要對應著一個網頁檔案。你 可使用絕對路徑或相對路徑,有關此兩者詳見於【連結進階】。

    • NAME="top"
      設定這個框窗的名稱,這樣才能指定框架來作連結,必須但任意命名。

    • frameborder=0
      設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。

    • framespacing="6"
      表示框架與框架間的保留空白的距離。

    • bordercolor="#008000"
      設定框架的邊框顏色。顏色值請參考【HTML 剖析】。

    • scrolling="Auto"
      設定是否要顯示捲軸,YES 表示要顯示捲軸,NO 表示無論如何都不要顯示,AUTO 是視情況顯示。

    • noresize
      設定不讓使用者可以改變這個框框的大小,亦沒有設定此參數,使用者可以很隨 意地拉動框架,改變其大小。

    • marginhight=5
      表示框架高度部份邊緣所保留的空間。

    • marginwidth=5
      表示框架寬度部份邊緣所保留的空間。
    ■ 框架之連結須知:
    一般來說,當瀏覽者按下一個文字或圖片連結,連過去的內容會出現在連結文字本身所存 在的視窗裡面,把原來的取代掉,就算用框架也一樣。框窗的名稱於此便顯得重要了(即 標記 <frame> 中參數 name="top",top 是可隨便改名的框窗名稱),我們可以利用它指定 連結內容要顯示的目標視窗,不一定是自己本身。你可以把連結的結果指定到任何一個分 割視窗中去顯示。

    這涉及連結標記中一個 target="框窗名稱" 的參數,請詳見【連結進階】之『連結屬性設 定』。不要錯過!

    另一種解決方法:設定該一框窗所有連結的結果皆發生於某一框窗。

    視窗狀態:以 Composer 開啟一框窗檔案(不是那個劃分視窗的檔案)。

    1. EditHTML Source 鍵,
    2. 於剛顯示的 記事本(Notpad)視窗尋找 </HEAD> 標記!
    3. 於其插入以下 HTML Code:

      <base target="框窗名稱">
       
    4. 請改成適當的框窗名稱,該名稱來自於那個劃分視窗的檔案,在那 HTML Code 中 你早己為所有框窗起了名稱。
    5. 以記事本儲存此檔案,
    6. 回 Composer 視窗亦儲存此一更改,完成。
    ■ <noframes> 標記的應用:
    當別人使用的瀏覽器太舊,不支援框架這個功能時,他看到的將會是一片空白。為了避免 這種情況,可使用 <NOFRAMES> 這個標記,當使用者的瀏覽器看 不到框架時,他就會看到 <NOFRAMES></NOFRAMES> 之間的內容,而不是一片空白。這些內容可以是提醒 瀏覽轉用新的瀏覽器的字句,甚至是一個沒有框架的網頁亦可。

    視窗狀態:以 Composer 開啟那個劃分視窗的檔案。

    1. EditHTML Source 鍵,
    2. 於剛顯示的 記事本(Notpad)視窗尋找最後一個 </frameset> 標記!
    3. 於其插入以下 HTML Code:

        <noframes>
        <body>
        很抱歉,閣下使用的瀏覽器不支援框架功能,請轉用新的瀏覽器。
        </body>
        </noframes>

    4. 以記事本儲存此檔案,
    5. 回 Composer 視窗亦儲存此一更改,完成。
    The Best Web Hosting Company
    Download Internet Explorer Download Netscape Netvigator