 |
|
|
 |
■ 預備： |
|
兩個隨便擬好的 HTML 檔案存於同一目錄，假設為 left.html 及 right.html。
己設定好：Composer 之 External HTML Editor。若否請看【簡單設定】
| ■ 簡單步驟：
| |
以 Composer 製作框架非易事，你需要接觸幾個與框架有關的 HTML 標記，閣下若想更清
楚其用法請看【HTML 剖析】，此處只以常見一些例子讓初學者可立即修改及應用。
請按這處先看看結果。
視窗狀態：開啟 Composer 新檔。
- 按 Edit → HTML Source 鍵，
- 於視窗 Save New File 按 Save 鍵，
- 將此檔案與 left.html 及 right.html 存於同一目錄下 名為 frame.html (可改名)，
- 於視窗 Page Title 輸入一個隨便的標題并按 OK 鍵，
- 於剛顯示的 記事本(Notpad)視窗尋找 </HEAD> 標記！
- 於其下插入以下 HTML Code：
<FRAMESET cols="150,*">
<FRAME name="left_window" src="left.html">
<FRAME name="right_window" src="right.html">
</FRAMESET>
- 請刪去由標記 <BODY> 至 </BODY> 的所有字符，包括此兩標記本身。
- 以記事本儲存此檔案，
- 回 Composer 視窗亦儲存此一更改，完成。可按 Preview。
| ■ 實例備抄：
|
以下實例的使用方法：
將任一套 HTML Code 代入【簡單步驟】中，代替第六步的 HTML Code。
自備任意三個 HTML 檔案 a.html b.html c.html。
【簡單步驟】中 frame.html 可轉為其它檔名。
| Sample | HTML Code |
|
|
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
|
| Sample | HTML Code |
|
|
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>
|
| Sample | HTML 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>
|
| Sample | HTML 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>
|
| Sample | HTML 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 開啟一框窗檔案（不是那個劃分視窗的檔案）。
- 按 Edit → HTML Source 鍵，
- 於剛顯示的 記事本(Notpad)視窗尋找 </HEAD> 標記！
- 於其上插入以下 HTML Code：
<base target="框窗名稱">
- 請改成適當的框窗名稱，該名稱來自於那個劃分視窗的檔案，在那 HTML Code 中
你早己為所有框窗起了名稱。
- 以記事本儲存此檔案，
- 回 Composer 視窗亦儲存此一更改，完成。
| ■ <noframes> 標記的應用：
| |
當別人使用的瀏覽器太舊，不支援框架這個功能時，他看到的將會是一片空白。為了避免
這種情況，可使用 <NOFRAMES> 這個標記，當使用者的瀏覽器看
不到框架時，他就會看到 <NOFRAMES> 與 </NOFRAMES> 之間的內容，而不是一片空白。這些內容可以是提醒
瀏覽轉用新的瀏覽器的字句，甚至是一個沒有框架的網頁亦可。
視窗狀態：以 Composer 開啟那個劃分視窗的檔案。
- 按 Edit → HTML Source 鍵，
- 於剛顯示的 記事本(Notpad)視窗尋找最後一個 </frameset> 標記！
- 於其上插入以下 HTML Code：
<noframes>
<body>
很抱歉，閣下使用的瀏覽器不支援框架功能，請轉用新的瀏覽器。
</body>
</noframes>
- 以記事本儲存此檔案，
- 回 Composer 視窗亦儲存此一更改，完成。
|
|
|
