框架概念
1. 首先,各位先看看右邊這張圖片,將利用這張圖來做解釋,這樣子,講起來可能會清楚一些。
我們可以看見,右邊的這個圖片,一共分為 1 、 2 、 3 三個框架,每一個框架,各有其顯示的內容分別是 a.htm、b.htm、c.htm 三個文件。然而左下角的那個 index.htm 是做什么用的呢?
2. 原來,左下角的這個文件 index.htm,就是要告訴瀏覽器,我們要將頁面分割成這樣,也就是說,所有Frame的標簽,其實都只放在 index.htm 這個文件里。
3. 這樣明白了吧!總之,你要分割幾個框,就一定會有幾個對應的html 文件。
開始分割
1. 分割窗口可是一門學問,要分割也是要一步一步來的。看看剛剛那例子,想像頁面是一個蛋糕,你要怎么割,才能割成那樣呢?
原始代碼 顯示結果
<HTML>
<HEAD>
<TITLE>框架制作 </TITLE>
</HEAD>
</HTML>
2. 各位會發現,奇怪,在上面的語法中,怎么沒看到 <BODY></BODY> 標簽呢?呵呵...沒錯,它已經被將要加進去的 <FRAMESET></FRAMESET> 標簽給取代了!也就是說,如果我們要分割頁面,就要先用<FRAMESET>標簽告訴瀏覽器:"我要開始分割了!"此時,<BODY> 是派不上用場的,所以躲到一旁涼快去了!
3. 現在開似乎動手分割看吧!我們先將頁面分成左右兩邊,如下圖:
原始代碼 顯示結果
<HTML>
<HEAD>
<TITLE>框架制作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
<FRAME SRC="a.htm" NAME="左">
<FRAME SRC="b.htm" NAME="右">
</FRAMESET>
</HTML>
4. 在<FRAMESET>中,我們要告訴瀏覽器到底是要左右分(COLS)?還是上下分(ROWS)。一開始我們是左右分,所以我們寫成<FRAMESET COLS="120,*"。COLS="120,*" 就是說,左邊那一欄強制定為 120 px,右邊則隨瀏覽器大小而變。除了直接寫px數外,我們也可以用百分比來表示,例如COLS="20%,80%"也是可以的。
5. 然后,再將右邊的框窗再分割成上下兩個頁面。如下圖:
原始代碼 顯示結果
<HTML>
<HEAD>
<TITLE>框架制作</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="a.htm" NAME="左">
<FRAMESET ROWS="100,*">
<FRAME SRC="b.htm" NAME="右上">
<FRAME SRC="c.htm" NAME="右下">
</FRAMESET>
</FRAMESET>
</HTML>
6. 看見了沒?原本的 <FRAME SRC="b.htm" NAME="2">在第 3 點的語法中)被另一組<FRAMESET ROWS="100,*">取代了!所以要注意!第二組<FRAMESET ROWS="100,*">是被第一組<FRAMESET COLS="120,*"> 包圍起來的!
7. 不知不覺就大功告成了,其實只要將最后完成的那些語法存成 index.htm,然后再準備三個文件 a.htm 、b.htm 、c.htm 那么就完工了!當然,這是一個最好的分割法,再將一些進階的標簽在下面一一說明。
其他標簽參數說明:
例子 : <FRAMESET COLS="120,*" FRAMEBORDER=0 FRAMESPACING=5>
1. COLS="120,*" 就是垂直切割頁面啦!你可以一次切成左右兩個頁面,當然也可以切成三個,很簡單只要寫成 COLS="30,*,50" (數字隨便你自己調整!),依此類推,四個以上當然就是四組數字了!
2. ROWS="120,*" 就是橫向切割頁面,也就是將頁面上下分開,切法同上。
3. FRAMEBORDER=0 設定框架的邊框,其值只有 0 和 1 , 0 就是不要邊框, 1 就是要顯示邊框。邊框是無法調整粗細的。
4. FRAMESPACING=5 表示框架與框架見的保留空白的距離,以免看起來太擠。
例子 : <FRAME SRC="a.htm" NAME="1" FRAMEBORDERr=0 SCROLLING="no" noresize marginhight=2 marginwidth=2>
1. SRC="a.htm" 設定此框架中要顯示的網頁名稱,每個框架一定要對應一個網頁,否則就會產生錯誤,這里就是要您填入對應網頁的名稱。(如果該網頁在不同目錄,記得路徑要寫清楚)
2. NAME="1" 設定這個框架的名稱,這樣才能指定框架來作連接,所以一定要設定啊!當然名稱隨你高興取名。
3. FRAMEBORDERr=0 設定框架的邊框,其值只有 0 和 1 , 0 就是不要邊框, 1 就是要顯示邊框。邊框是無法調整粗細的。
4. SCROLLING="no" 設定是否要顯示滾動條,YES是要顯示滾動條,NO是無論如何都不要顯示,AUTO是視情況顯示。 noresize
5. noresize 設定不讓使用者可以改變這個框框的大小,如果沒有設定這個參數,使用者可以很容易的拉動框架,改變其大小。
6. marginhight=2 表示框架高度部份邊緣所保留的空間。
7. marginwidth=2 表示框架寬度部分邊緣所保留的空間。
其他標簽
1. <noframe>
使用方法:<noframe>請換有支持Frame功能的瀏覽器<noframe>
標簽解釋:有些瀏覽器版本較低,無法顯示Frame的功能,因此,就要使用此標簽,讓這些人知道,該換換瀏覽器了。或者,你也可以在這標簽中,寫上沒有Frame語法的網頁標簽,那么,沒有支持Frame功能的瀏覽器,便會自動顯示沒有Frame語法的網頁。
2. target=框架名稱
使用方法: <A HREF="d1-1.htm" target=3>顯示內容</A>
標簽解釋:常常有一個情況是,我想在框窗 1 的地方按下連接,但是希望他的內容出現在框架 3 中(請參照上面那個圖),那應該如何寫呢?就像上面加個 target=框架名稱 就行啦!
3. target=_top
使用方法:< A target=_top>網頁教學網</A>
標簽解釋:有時候,在框架里面連接到別的站,卻發現,新連接的這個站,竟然被框架包住了,不但難看,而且可能會吃上官司!所以,這時候你必需加入 target=_top這個參數,那么,這個新連接到的網站,就會重新占據整個瀏覽器了!
關鍵詞: