入門概念 ：
以下這些文字，又臭又長，但為了紮好根基，請含淚看下去。
大家仔細的觀察也許不難發現，傲楓小築的畫面其實是由三個部分
所組成的，如下圖所示
為了呈現這個效果，傲楓一共寫了四個html檔：
1、list.html，也就是左側「目錄」的內容
2、counter.html，也就是右上方「計數器」的內容
3、test10.html，也就是這篇教學的內容
4、index1.htm，非常神秘且神奇的東東
很奇怪吧？明明只有三個部分，為什麼寫了四份html檔，最後那個
「神秘且神奇的東東」到底用來做什麼啊？
一點都不奇怪，最後那份文件的主要功能就是用來「分割視窗」，
你想想看，瀏覽器怎麼會知道要將視窗分割成三部分？怎麼會知道
list.html要放在左側，counter.html要放在右側，test10.html要
放在右下方？其實這些設定都寫在index1.htm之中。
如果你想要按下超連結，就可以讓三個部分同時出現在瀏覽器的視
窗內，應該連結到哪一個html檔呢？
時間到，猜出來了嗎？只要連到index1.htm就可以了，因為這個檔
裡面已經有分割視窗的設定，一連到它的時候，瀏覽器就會依據這
些設定，讓這三個部分乖乖的同時顯示出來。
你可以按下面這個超連結，就會更清楚了。
index1.htm
傲楓你很無聊耶，為什麼弄得這麼複雜？碰！！
嗯，雖然傲楓被扁了一拳，但仍然要辯駁一下。當你按下左方的目
錄時，有沒有發現左側跟右上方的內容都是不變的，唯一的改變只
有主要內容的部分，這麼一來不是很方便嗎？不用把整個畫面洗掉
，再顯示新的內容，只要更動你想改變的地方就好了。
古人云：「這就是分割視窗的真諦」。
|
|
基本形式 ：
接下來就要正式跟大家介紹「分割視窗的設定」要怎麼寫了。
假設我希望出現的畫面如下圖所示
寫法：
<html><head><title>分割視窗</title></head>
<frameset cols="20%,80%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</html>
注意１：
frameset不能與body共同使用，也就是不能加入<body>這個配對標
籤。
注意２：
分割畫面最多的限度四個就好，因為太多反而會造成下載畫面太久
的問題。
讓我來詳細說明一下吧。
<frameset>...</frameset>
設定的開始與結束。
cols
將視窗左右分割，若改成rows則將視窗上下分割，等號後面用來設
定分割畫面的大小。
設定的方式有三種：
1、百分比法：
直接輸入子畫面所佔的的比例，像本例是左邊佔整個畫面的20%，
右邊80%，當然啦！全部加起來必須是100%
2、相對比例法：
寫法是cols="1,1"，則這兩個子畫面大小的比例為1：1，也就是各
佔畫面的一半，如果寫 1,2就是1：2，依此類推。
3、絕對大小法：
寫法是cols="80,*"，這個意思是，左邊的子畫面大小為80像素，
其他全部被右邊的子畫面所佔去(如下圖)，如果寫成*,80就剛好
反過來。點數越大子畫面越大。
如果你想分成三個畫面呢？簡單啊，多加一個逗點就可以了，例如
1,3,1，則三個畫面比例為1：3：1。上面的三個方法都可以用喔。
frame src
指定這個分割畫面要開啟的html文件。
name
指定這個分割畫面的名稱，可以隨便取一個名字，這個步驟相當重
要，不要小看它了，稍後我們會介紹原因。
|
|
一些常用的分割視窗格式
：
網友們剛接觸到這個技巧的時候，一定覺得有點難吧，所以我把一
些常用的分割格式寫出來，給大家一個參考。
對了，紅色字體的部分是註解，可別連它們都寫進去了。
寫法：
<frameset cols="150,*">
左右分割成兩部分，左邊佔100像素
<frame src="left.html" name="left">
指定左邊的名字叫left，顯示的內容則為left.html
<frame src="right.html" name="right">
指定右邊的名字叫right，顯示的內容則為right.html
</frameset>
寫法：
<frameset rows="64,*">
上下分割成兩部分，上方佔64像素
<frame src="up.html" name="up">
指定上面的名字叫做up，顯示的內容則為up.html
<frame src="down.html" name="down">
指定下面的名字叫做down，顯示的內容則為down.html
</frameset>
寫法：
<frameset cols="1,1,1">
左右分割成三個部分，每個部分大小的比例為1：1：1
<frame src="left.html" name="left">
<frame src="center.html" name="center">
<frame src="right.html" name="right">
</frameset>
下面這個是蜂巢式的喔，也就是子畫面中又分割了子畫面，大家要
注意看，仔細體會。
寫法：
<frameset cols="150,*">
先將畫面分割成左右兩邊
<frame src="left.html" name="left">
指定左邊的名字叫做left，顯示的內容則為left.html
<frameset rows="20%,*">
再將右邊的子畫面做上下分割
<frame src="rup.html" name="rup">
指定右上方的名字叫做rup，顯示的內容則為rup.html
<frame src="rdown.html" name="rdown">
指定右下方的名字叫做rdown，顯示的內容則為rdown.html
</frameset>
</frameset> |
|
frameset中的屬性
：
frameborder=
指定是否加入框線，可以填0或1，填0代表不加框線，填1代表要。
border=
指定框線的寬度。
bordercolor=
指定框線的顏色。
framespacing=
指定兩相鄰子畫面之間的間隔大小。
|
|
frame中的屬性
：
marginwidth=
指定子畫面左右邊緣所保留的空間。
marginheight=
指定子畫面上下邊緣所保留的空間。
frameborder=
指定是否加入框線，可以填0或1，填0代表不加框線，填1代表要。
scrolling=
指定需不需要使用捲軸。可以填入yes,no,auto。
yes ，表示不管如何都加入捲軸。
auto，如果子畫面的內容超過指定的大小時，捲軸才會出現。
no ，表示不管如何都不要加入捲軸，若配合 frameborder="0"這
個參數，就不會在兩個子畫面間，出現一條醜醜的分割線但是要特
別注意，畫面內容如果超過指定大小，就會有部分內容看不見。
bordercolor=
指定框線的顏色。
noresize
指定框線可否移動，如果加入這個屬性，框線就被固定住了，若是
沒有寫的話，瀏覽者就可以拉動框線來改變子畫面的大小。
|
|
不支援分割畫面的瀏覽器
：
協定都訂出來了，瀏覽器還要搞分裂，像是IE跟Netscape瀏覽的效
果就很不同，還好這兩個龍頭都有支援分割視窗，但是還是有一些
朋友使用不支援的瀏覽器，所以為了這些人，我們要加上這一段。
<noframes>
<body>
對不起！你的瀏覽器不支援分割視窗，所以看不到我的心血
</body>
</noframes>
這些可憐的朋友瀏覽到這一頁時，就可以看到這一段話了，否則會
什麼都沒有。
|
|
name的重要性
：
上面曾經提到分割視窗的真諦，就是「入門概念」中，古人所說的
那段內容。
可是按下超連結時，如何控制內容要出現在哪一個子畫面呢？
記得name這個屬性吧！只要在超連結中加入target="子視窗名稱"
即可。
看不懂嗎？很正常，連我自己都不知道在寫些什麼，舉個例子就很
清楚了。
寫法：
<frameset rows="64,*">
<frame src="up.html" name="up">
指定上面的名字叫做up
<frame src="down.html" name="down">
指定下面的名字叫做down
</frameset>
超連結中若加入
target="up"，則按下超連結，新畫面會出現在上方
target="down"，則按下超連結，新畫面會出現在下方 |
|
回上一章 表格進階 到下一章 天籟之音
|