網頁設計-框架的基本概念

首先，各位先看看右手邊這張圖，工友將利用這張圖來作解說，這樣子，講起來可能會清楚一點。 OK！我們可以看見，右邊的這個視窗，一共分為 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？

原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）
這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）

【開始分割】

別急、別急，分割視窗可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想像畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？

原始碼	呈現結果
<HTML> <HEAD> <TITLE>框窗實作</TITLE> </HEAD> </HTML>

各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！也就是說，如果我們要分割畫面，就要先用<FRAMESET>標籤告訴電腦說：『喂！我要開始分割了！』此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！

現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定為 2 等一下還要分割呢！），如下圖：

原始碼	呈現結果
<HTML> <HEAD> <TITLE>框窗實作</TITLE> </HEAD> <FRAMESET COLS="120,*" > <FRAME SRC="a.htm" NAME="1"> <FRAME SRC="b.htm" NAME="2"> </FRAMESET> </HTML>

在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定為 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。

然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 2 和 3 了）。如下圖：

原始碼	呈現結果
<HTML> <HEAD> <TITLE>框窗實作</TITLE> </HEAD> <FRAMESET COLS="120,"> <FRAME SRC="a.htm" NAME="1"> <FRAMESET ROWS="100,"> <FRAME SRC="b.htm" NAME="2"> <FRAME SRC="c.htm" NAME="3"> </FRAMESET> </FRAMESET> </HTML>

看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！（亂七八糟了對不對？）
呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最陽春的分割法，工友會再將一些進階的標籤在底下一一說明。

【其他標籤參數說明】

<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
COLS="120," 就是垂直切割畫面啦！你可以一次切成左右兩個畫面，當然也可以切成三個，很簡單只要寫成 COLS="30,,50" （數字隨便您自己調整啦！），依此類推，四個以上當然就是四組數字啦！ ROWS="120,*" 就是橫向切割畫面，也就是將畫面上下分開，切法同上。 frameborder=0 設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。 framespacing=5 表示框架與框架間的保留空白的距離，以免看起來太擠。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
SRC="a.htm" 設定此框架中要顯示的網頁名稱，每個框架一定要對應一個網頁，否則就會產生錯誤，這裡就是要您填入對應網頁的名稱。（如果該網頁在不同目錄，記得路徑要寫清楚） NAME="1" 設定這個框架的名稱，這樣才能指定框架來作連結，所以一定要設定喔！當然名稱隨你高興取名。 frameborder=0 設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。 scrolling="no" 設定是否要顯示捲軸，YES是要顯示捲軸，NO是無論如何都不要顯示，AUTO是視情況顯示。 noresize 設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。 marginhight=2 表示框架高度部份邊緣所保留的空間。 marginwidth=2 表示框架寬度部份邊緣所保留的空間。

【相關用法】

◆ <noframe>

使用方法：<noframe>請換有支援Frame功能的瀏覽器</noframe>
標籤解說：有些瀏覽器較為老舊，無法顯示Frame的功能，因此，就要使用此標籤，讓這些網友知道，該換換瀏覽器了。或者，你也可以在這標籤中，擺上沒有Frame語法的網頁標籤，那麼，沒有支援Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。

◆ target=框窗名稱

使用方法：<A HREF="d1-1.htm" target=3>顯示內容</A>
標籤解說：常常有一個情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個圖），那應該如何寫呢？就像上面加個 target=框窗名稱就行啦！

◆ target=_top

使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>
標籤解說：有時候，在框窗裡會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會吃上官司說！所以，這時候你必需加入 target=_top這個參數，那麼，這個新連到的網站，就會重新佔據整個螢幕啦！