HTML基礎教學(15)--框架(FRAMESET+FRAME)

HTML基礎教學(15)--框架(FRAMESET+FRAME)

http://enjoywebtech.blogspot.tw/2008/01/html15-framesetframe.html

http://finalfrank.pixnet.net/blog/post/9910705-html%E5%8E%9F%E5%A7%8B%E7%A2%BC---%E6%A1%86%E6%9E%B6%E9%A0%81%E7%9A%84%E8%A3%BD%E4%BD%9C

http://www.pcnet.idv.tw/pcnet/html/14.htm

所謂分割視窗即是將流覽視窗分割成數個範圍，每個範圍稱為一個 frame ，每個 frame 都有自己的名字，可以彼此互通也可以不相干擾。

分割視窗只有一個命令就是 <frameset> 不過有幾個附加指令可用，先來看看如何分割視窗。

<frameset>...</frameset>

frameset 不可以和 body.../body 同時存在，同時存在時那一個寫在前在前，哪一個生效。

水平分割視窗

<frameset rows=> - 決定上下共分為幾個視窗

垂直分割視窗

<frameset cols=> - 決定左右共分為幾個視窗

決定分割大小

這裡rows=和cols=填的不是分割數，而是直接填入每個分割視窗的大小，數值和數值之間用逗號隔開即可。

而填入的數字可為「點數」「百分比」「大小比」如：

<frameset rows=100,200,300> 固定大小為100點200點和300點 或

<frameset rows=20%,20%,60%> 注意總和等於100% 或

<frameset rows=1*,2*,3*> 使視窗依 1:2:3 的比例分割。三種寫法可同時存在如：

<frameset rows=20%,200,1*,1*> 此時瀏覽器會先分 200 點給第二個視窗，其餘的20% 給第一個視窗，剩下再 1:1 分配。

指定分割後視窗顯示的內容

分割完成視窗後要指定每個視窗所要顯示的內容，語法如：

<frame src=顯示的文件名稱> 您可以指定一份文件或一個圖案在視窗中，先看個例子

<title>Frame 實例</title> <frameset cols=15%,50%,*> 　　 <frame src="h-1.html" name=f1> 　　 <frame src="h-2.html" name=f2> 　　 <frame src="h-3.html" name=f3> </frameset>

行2 與行 6是成對的標籤，在之中宣告分割的個別內容。指定視窗分割為垂直三部分，比例為第一是整個視窗大小的 15%，第二部份指定大小為整個視窗的 50% ,剩下的則是第三部份的大小。行 3,4,5 則是指定每個分割出來的視窗顯示不同的文件。

視窗的巢狀結構

所謂巢狀結構，我想是翻譯來的名稱，事實下並沒有那麼複雜。只是要在視窗中再分割視窗的方法而己。 像是寫程式中的for...next中又有for..next一樣。 要注意的是順序。我們將上一個例子再加以修改： 　

我們將第一個視窗再分割成兩個視窗，同樣的第三個視窗也再分為兩個視窗，這樣的結構就稱為巢狀視窗結構。這種巢狀結構怎麼宣告呢?看底下的原始文件內容：

Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line 8 Line 9 Line 10 Line 11 Line 12

<title>Frame 實例</title> <frameset cols=15%,50%,*> 　　 <frameset rows=30%,*> 　　　　 <frame src="h-1.html" > 　　　　 <frame src="h-2.html" > 　　 </frameset> 　　 <frame src="h-3.html"3> 　　 <frameset rows=70%,*> 　　　　 <frame src="h-4.html" > 　　　　 <frame src="h-5.html" > 　　 </frameset> </frameset>

行2 與行 12是成對的標籤，在之中宣告分割的個別內容。和先前不同的地方是原本指定第一個分割視窗的行3現在則擴張成為行3,4,5,6把原本指定顯示的文件內容指令改成了另一個分割視窗的指令。原本的行5也改成了行8,9,10,11分割視窗的指令。如此一來，就完成了所謂巢狀視窗的架構了。

指定新文件到分割的視窗

分割視窗有什麼好處呢?基本上，是否分割視窗視需求而定，一般而言，要是網站的設計之中有某些部份是每頁都必需顯示的，好比選單之類的，那麼使用分割視窗可以減少許多撰寫 HTML 文件的麻煩，因為同樣的選單部份不必每份文件都撰寫，像先前我們舉例的五子棋網站，在左下方的功能選單不而要隨著正中央棋局的改變而改變，左方是聊天室，聊天室中的資料也都隨時在更新，所以選單也不需要重新讀取一次，這麼一來，使用分割視窗可以讓整個製作變的簡單許多。接下來的問題是：如何能讓選單中的超連結顯示在指定的視窗中呢?

要解決這個問題，我們必需在宣告分割視窗時對每個視窗加以命名，然後在超連結時使用 target 標籤指定顯示文件的視窗名稱即可。如圖：

當我們按下左邊 h-1.html 的超連結，當然是希望 h-1.html 的內容會顯示在右邊的視窗中，這時我但要修正一下分割視窗的宣告，改成：

<title>Frame 實例</title> <frameset cols=15%,*> 　　 <frame src="f-menu.html" name=menu> 　　 <frame src="f-main.html" name=main> </frameset>

注意到我們在<frame src=文件名稱>之後多加了 name=menu 的參數，這個參數指定該視窗的名稱，一旦一個分割視窗指定了名稱之後，往後在使用超連結時，就能以名稱的方式指定文件顯示在該視窗，我們來看看 f-menu.html 的內容是怎麼寫的。

<a href=h-1.html target=main>h-1.html</a> <a href=h-2.html target=main>h-2.html</a> <a href=h-3.html target=main>h-3.html</a> <a href=h-4.html target=main>h-4.html</a> <a href=h-5.html target=main>h-5.html</a>

注意到了嗎，在超連結的指定上，我們多加了 target 標籤來指定文件顯示的視窗。

這裡要注意一個地方：如果超連結指定的 target 名稱不是分割視窗中宣告的視窗名稱時，那麼流覽器會新開一個視窗來代替。