第九章 頁 框
<FRAMESET>標籤：用來將瀏覽器視窗分割成一組子框，或是將某個子框再細分成一組子框。它可以指定網頁內窗的數量以及大小。
<FRAMESET cols=寬度設定>......</FRAMESET>
<FRAMESET rows=高度設定>......</FRAMESET>它的用法有下列幾種：
- 百分比法：<FRAMESET cols="20%,80%">：表示這組frameset有"左右"兩行窗格，其大小各佔整個螢幕的20%與80%。
- 比例法：<FRAMESET rows="*,*,2*">：表示這組frameset有"上中下"三列窗格，每列所佔螢幕的比例為1：1：2。
- <FRAMESET cols="100,500">：表示這組frameset有"左右"兩行窗格，但是每個窗格所佔的寬度是以『像素』(Pixels)來表達。但它較沒有彈性，一般不會使用這種表示法來制定窗格大小。
<FRAME>標籤：用來定義個別的子框。
<FRAME src=子框顯示的文件
[ name=視窗名稱 ]
[ marginheight=頁框邊界的上下寬度 ]
[ marginwidth=頁框邊界的左右寬度 ]
[ scrolling=yes | no | auto ] ←設定頁框捲軸。
[ noresize ] ←設定子框無法重定窗格大小。
[ frameborder=yes | no ] ←是否顯示立體外框> ←不需要結束標籤。
注意事項：
- <FRAMESET>標籤中必須再以<FRAME>來指定每個子框的文件和屬性。
- <FRAMESET>標籤應置於<HEAD>......</HEAD>標籤之後，取代原有的<BODY>標籤。
- <FRAMESET>標籤內還可以再嵌入另一組<FRAMESET>標籤。
- 不要將<FRAMESET>放在<BODY>裡，否則就無法正常顯示子框。
了解分割視窗的語法後，把下面的例子RUN看看吧！
兩個等寬的 Frame--水平 ：分割成左右兩個等寬的視窗
範例 執行結果 <FRAMESET COLS="*,*">
<FRAME SRC=frame1.htm>
<FRAME SRC=frame2.htm>
</FRAMESET>
兩個等寬的 Frame--垂直：分割成上下兩個等寬的視窗
範例 執行結果 <FRAMESET ROWS="*,*">
<FRAME SRC=frame1.htm>
<FRAME SRC=frame2.htm>
</FRAMESET>
多個 Frame 並排
範例 執行結果 <FRAMESET ROWS="*,*,*,*">
<FRAME SRC=frame1.htm>
<FRAME SRC=frame2.htm>
<FRAME SRC=frame3.htm>
<FRAME SRC=frame4.htm>
</FRAMESET>由以上你應該可以看出, cols 是決定 Frame 的水平, 而 rows是決定 Frame
的垂直!!
也許你也注意到了, 跟隨在 COLS 以及 ROWS 後面的星號 ( * ) ,
就是用來設定 Frame 的寬度, 星號所表示的就是不刻意指定 Frame 的寬度,
Frame 的大小會自動調整 !! 再看看下面的範例 :
改變 Frame 的大小
範例 執行結果 <FRAMESET COLS="*,360,*,">
<FRAME SRC=frame1.htm>
<FRAME SRC=frame2.htm>
<FRAME SRC=frame3.htm>
</FRAMESET>
改變 Frame 的百分比例
範例 執行結果 <FRAMESET COLS="50%,*,20%,">
<FRAME SRC=frame1.htm>
<FRAME SRC=frame2.htm>
<FRAME SRC=frame3.htm>
</FRAMESET>
以比例方式分割畫面
範例 執行結果 <FRAMESET COLS="1*,3*,4*">
<FRAME SRC=frame1.htm>
<FRAME SRC=frame2.htm>
<FRAME SRC=frame3.htm>
</FRAMESET>
（巢狀架構）垂直以及水平方向的 Frame 分割效果
範例 執行結果 <FRAMESET rows="33%,*">
<FRAME SRC=frame1.htm>
<FRAMESET cols="1*,2*">
<FRAME SRC=frame2.htm>
<FRAME SRC=frame3.htm>
</FRAMESET>
</FRAMESET>
TARGET屬性：是用來定義一個超連結被選後該展現的目的地，必需與<A HREF="......">標籤一起使用。
<A HREF="網頁名稱" TARGET="頁框名稱"> 在正常情形下，當您選取某個超連結後，目標文件會在原來的視窗內開啟。但有時候你會希望在跳到別的連結時，仍能保留原來的視窗；或是在多重子框的畫面，選取「目錄」子框連結時，將文件載入到「內容」子框，這時候就可以用TARGET屬性來指定載入文件的目標視窗。如果你指定的目標名稱並不存在，瀏覽器會一開個新視窗，並以指定名稱將視窗命名。如果這個視窗或子框已經存在，則會將文件載入到該一視窗或子框。
要怎樣才能讓左邊的選項一點選就跳到右邊呢 ?
步驟一：在你設定分割畫面的地方 ( Ex_18.htm )，做如下的設定：
加入 name 的名稱 main 是隨意取的
<FRAMESET COLS="2*,3*">
<FRAME SRC=frame01.htm>
<FRAME SRC=frame02.htm name="main">
</FRAMESET>步驟二：在 Frame1 的每一個 <a href=.......> 後，加入target="main"
注意， main 是我選的檔名，你之前選的檔名要和這裡一樣
<a href="ready.htm" target="main">第一章 準備事項</a>
<a href="zero.htm" target="main">第二章 從 0 開始</a>
<a href="word.htm" target="main">第三章 文字格式</a>
<a href="map.htm" target="main">第四章 圖形插入</a>
<a href="list.htm" target="main">第五章 列表應用</a>
<a href="link.htm" target="main">第六章 超連結</a>
<a href="table.htm" target="main">第七章 表格製作</a>或 如果你整個連結都是連到同一個 Frame 裡，可做這樣的設定： <base target="main">
<a href="ready.htm">第一章 準備事項</a>
<a href="zero.htm">第二章 從 0 開始</a>
<a href="word.htm">第三章 文字格式</a>
<a href="map.htm">第四章 圖形插入</a>
<a href="list.htm">第五章 列表應用</a>
<a href="link.htm">第六章 超連結</a>
<a href="table.htm">第七章 表格製作</a>若你想連結到外部的站台，但怕把別人的網頁陷在自己的Frame中時，你可以使用這些特殊的Frame名稱：
target=_top ------ 展開為全視窗
target=_blank ------ 新增一個瀏覽器視窗
target=_self ------ 將連結的網頁, 顯示在原來的 Frame 中
target=_new ------ 與 blank 作用相同
<a href="frame02.htm" target="main">會出現在指定的視窗</a>
<a href="frame02.htm" target="_top">會展開為全視窗</a>
<a href="frame02.htm" target="_blank">會新增一個瀏覽視窗</a>
<a href="frame02.htm" target="_self">會出現在現在點選的視窗中</a>
<a href="frame02.htm" target="_new">與blank作用相同</a>
步驟三：看執行結果