視割分割一

§ 視窗的分割

§ <frameset>....</frameset>

<body>....</body> 是網頁的主體部分，「一份文件」就這樣夾在這個標籤當中，經由瀏覽器的解譯，呈現在各位觀眾的眼前。
想在瀏覽器中同時顯現二份以上的文件，就得用分割視窗的方法。
捨去 <body> 標籤，改用 <frameset> 標籤，才能同時在瀏覽器中顯現二份以上的文件。
分割視窗後，讓網頁的呈現方式有了更大的彈性。經由目標窗格的指定，也擺脫了傳統循序閱讀的刻板方式，讓使用者有了互動的感覺。
<frameset>....</frameset> 是視窗分割的宣告標籤。
注意此時並未開始分割，只是宣告這個視窗是一個框架頁，要在各分割視窗中分別載入底下用 <frame> 所定的文件檔。
這整個定義視窗分割設定的網頁，我們稱之為「框架頁」。

§ 垂直分割

cols 屬性可以做視窗的垂直分割。
可以視需要將原來的瀏覽器視窗分割成很多個垂直的小視窗，只要在 cols 用逗號分開，分別設定它的大小即可。
<frame>標籤與cols是對應的，上面有幾個用 "," (逗號) 分開的視窗，底下就要有幾個 <frame> 來定義所要出現的網頁文件。
<frame>標籤不用「結束標籤」。每個<frame>中都一定要有利用 src 屬性指定的網頁文件連結。
src 屬性也可以指定任何一份事先編輯好的網頁文件放到這個視窗中。
也可以在作分割後立即編輯它們。經過分割後的視窗雖然比較小，可是別小看它了，它們都可都是各自獨立的，可以個別編輯成一個網頁文件檔( .htm )
src 屬性除了載入自己網站內的網頁外，也可以指定載入別人站台上的網頁。(可是，這種作法不太好，本站並不建議網友們這樣做)
分割視窗的大小的設定有三種方式：(可以混用它們！)

   1.以像素 (pixels) 為單位。
   2.以百分比 (%) 為單位。
   3.以星號 (*) 作分割。

＊範例 (用像素為單位，將視窗分成左右兩個視窗

如：左邊150pixels、a.htm，右邊650pixels、b.htm)

語法：

<frameset cols="150,650">
<frame src="檔案a">
<frame src="檔案b">
</frameset>

＊範例 (用百分比為單位，將視窗分成左右兩個視窗

如：左邊20%、c.htm，右邊80%、d.htm)

語法：

<frameset cols="20%,80%">
<frame src="檔案c">
<frame src="檔案d">
</frameset>

＊範例 (用*為單位，將視窗分成左右兩個視窗

如：左邊e.htm，右邊f.htm)

語法：

<frameset cols="*,*">
<frame src="檔案e">
<frame src="檔案f">
</frameset>

用"星號"來分割是比較特殊的用法(比較不直覺)。如上例是分成兩個視窗，且兩個視窗的大小一樣。
事實上，我們以 <frameset cols="50%,50%"> 好像比較習慣哩！
而上例如改成 <frameset cols="*,2*"> 就是右視窗是左視窗的2倍大。
而上例如改成 <frameset cols="100,*">就是左視窗100pixels，右視窗讓瀏覽器自動調整。

＊ Tips：

視窗分好後，除了我們可以在個別視窗中所看到的網頁文件外，請別忘了還有一個定義分割視窗的「框架頁」。
一開始，我們是指定載入這個「框架頁」，瀏覽器會依框架頁中的設定，分別載入放在個別視窗的文件。
因為我們是把一份份的網頁載入這些比較小的分割視窗中，所以，網頁的設計、版面安排要特別注意，個別網頁做好後，載入時測試是免不了的。

§ 水平分割

rows 屬性可以做視窗的水平分割。
可以視需要將原來的瀏覽器視窗分割成很多個水平的小視窗，只要在 rows 用逗號分開，分別設定它的大小即可。
水平分割和垂直分割除了分割的方向不同外，<frame>、src 、視窗大小的設定...等用法是完全類似的。(請參考上面)
語法：
<frameset rows="100,500">
<frame src="檔案">
<frame src="檔案">
</frameset>

＊範例 (用像素為單位，將視窗分成上下兩個視窗

如：上視窗100pixels、1.htm，下視窗500pixels、2.htm)

語法：
<frameset rows="20%,80%">
<frame src="檔案">
<frame src="檔案">
</frameset>

＊範例 (用百分比為單位，將視窗分成上下兩個視窗

如：上視窗20%、3.htm，下視窗80%、4.htm)

上面都是分割成兩個視窗，當然也可以分成更多的小視窗。
下例中，我們就示範將視窗分割成上、中、下三個小視窗。
一個網頁中最好不要分割成太多的視窗。否則，會讓使用者有紊亂的感覺。
語法：
<frameset rows="10%,20%,70%">
<frame src="檔案">
<frame src="檔案">
<frame src="檔案">
</frameset>

＊範例 (用百分比為單位，將視窗分成上、中、下視窗

如：上視窗10%、5.htm，中視窗20%、6.htm，下視窗70%、7.htm)

§ frameborder 屬性

我們常在網路上常看到明明是用頁框的功能作出來的網頁，可是就是看不到框線。
其實，想讓分割視窗不出現框線，只要加上 frameborder="0" 就行了。
frameborder 的設定值有 yes、1 和 no、0 。設為 yes 或 1 時，表示會出現框線，設為 no 或 0 時，表示不出現框線。
語法：

<frameset frameborder=" yes | no ">
或
<frameset frameborder=" 1 | 0 ">

§ bordercolor 屬性

bordercolor 屬性可以設定框線的顏色。
顏色的設定可以使用十六進位的色碼或英文顏色名稱。

§ scrolling 屬性

scrolling 屬性可以設定所分割的視窗是否要出現捲軸。
設定值有三種：no、yes、auto。
語法：

<frame src="檔名.htm" scrolling="yes"> 表示要出現捲軸。
<frame src="檔名.htm" scrolling="no"> 表示不要出現捲軸。
<frame src="檔名.htm" scrolling="auto"> 表示讓瀏覽器決定(預設值)。

設定為NO時，不管網頁的版面是否超出了窗格，都不會出現捲軸。
設定為yes時，捲軸就會永遠的出現了。
設定為 auto 時，當分割視窗中的顯示內容超出視窗範圍時，瀏覽器自動為您加上捲軸。如果分割視窗所顯示的內容並未超出視窗範圍時，捲軸並不會出現。
要注意的是，如果不出現捲軸時，版面是比較漂亮，但是版面超出視窗的部分會看不到，因此，在設計網頁時要小心。
最好能在不同的螢幕解析度及不同的瀏覽器中測試看看。

§ noresize 屬性

雖然，我們已經設定了每一個分割視窗的大小，可是，分割視窗預設是可以讓使用者調整大小的。
可以加上 noresize 屬性讓視窗的大小固定，謝絕使用者自行調整大小。
語法：

<frame src="檔名.htm" scorlling="auto" noresize>

＊ Tips：

您可以在上網瀏覽網頁時，將滑鼠移到分割視窗的邊框上，看看是否可以調整大小。

§ name 屬性

name屬性可以為分割出來的視窗一一命名。
分割視窗的名字可以是英文、數字開頭，但不要以"_"(底線符號)開頭。
視窗有了辨識的名稱，才能和底下的target屬性配合，指定連結的結果要出現在哪個視窗中。
語法：

<frame src="檔名.htm" name="main">
(如此，就是把這個小視窗命名為main)

§ marginwidth、marginheight、framespacing 屬性

我們可以在個別的分割視窗中利用 marginwidth 來設定左右邊界、 marginheight 來設定上下邊界。
語法：(如我們要左右留白10pixels、上下留白5pixels)

<frame src="檔名.htm" scorlling="auto" marginwidth="10" marginheight="5" >

在框架頁中我們還可以利用 framespacing 來設定各視窗間的間距。
語法：(如：設定分割視窗之間的間距是0)

<frameset cols="20%,80%" framespacing="0">

值得一提的是：在此雖然設定了framespacing="0"，瀏覽器還是會以最小的框線顯示。
語法：

<frameset cols="20%,80%" framespacing="0" >

＊範例 (綜合範例)