[教學] (教學第15篇)框架控制上篇

什麼是框架？在瀏覽器視窗中並不是只限定可以出現一份網頁文件，而是可以同時在視窗內瀏覽多份網頁文件，如下面的畫面：

在上圖的瀏覽器畫面中共有三個網頁內容被同時顯現出來，在畫面上方是一個標題網頁，左方為一類似選單的網頁內容，右方則為主要內容的顯示區，這種可以在瀏覽器視窗中同時顯現多份網頁文件的方式就稱為『框架（Frame）』，也可以稱之為『分割視窗』或是『頁框』。你只要按下左方的超鏈結項目，便可以將該超鏈結的連結網頁內容顯現在右方的主要內容顯示區中，如此一來，瀏覽者可以很方便的從左方的項目選單中選取所需要的資料項目，而且不用每次都讀取相同的畫面內容(選項網頁)，所以框架就時常被用來當作『導引裝置』！

建立框架
要建立框架就必須使用HTML的「FRAME（框架）」標籤，框架標籤並不是建立在視窗畫面內所顯示的內容網頁中，而是必須另外撰寫一份放置框架標籤的專屬網頁文件，框架網頁中的內容並不會被顯示出來，它只是用來做『分割』的動作，你可以自由的規劃瀏覽器視窗中的畫面樣式，要分割成幾個或是分割方式（上下分割、左右分割…）：

<FRAME NAME=”視窗名稱” SRC=”視窗內網頁”>框架標籤設定

複製代碼

NAME屬性：這個屬性用來做切割後的視窗命名，不可以忽略，將來我們利用JavaScript控制時必須用到！
SCR屬性：設定切割視窗建立所要載入的網頁名稱，當視窗切割完成後，這個網頁文件內容就會出現在該分割視窗中！

別以為使用「FRAME（框架）」標籤，就可以建立視窗喔！它只是用來設定框架的內容而已，要在瀏覽器視窗中建立幾個框架與每個框架的大小比例還得透過「FRAMESET（框架設定）」標籤！

實作學習：
假設我們要建立如下圖的視窗畫面，我們需要建立幾個網頁文件呢？

答案是三份喔：

6-1.htm：用來規劃瀏覽器視窗中的框架畫面樣式，網頁中的內容並不會被顯示出來。
6-1.htm(放置框架標籤)

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<FRAMESET ROWS="40%,*">
<FRAME NAME="top" SRC="6-1-1.htm">
<FRAME NAME="buttom" SRC="6-1-2.htm">
</FRAMESET>
</HTML>

複製代碼

利用<FRAMESET>標籤來設定框架分割，『ROWS』屬性代表將瀏覽器視窗畫面分割為上下兩的框架，上方的框架為顯示畫面的40%，其餘的畫面空間則為下方框架的顯示範圍。
利用<FRAME>標籤個別定義上下兩個框架的內容，有順序之分喔！第一個<FRAME>標籤定義上方的框架名稱為「top」，而且載入的網頁為6-1-1.htm；第二個<FRAME>標籤定義下方的框架名稱為「buttom」，載入的網頁則為6-1-2.htm。

6-1-1.htm：將顯示在上方框架中的網頁文件，當6-1.htm中第一個框架標籤呼叫時，將出現在上方框架中。
6-1-1.htm(上方框架中的網頁文件)

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<body>
<p align="center">小誌家族共有三個網站喔！</p>
</body>
</HTML>

複製代碼

6-1-2.htm：將顯示在下方框架中的網頁文件，當6-1.htm中第二個框架標籤呼叫時，將出現在下方框架中。
6-1-2.htm(下方框架中的網頁文件)

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<body>
<table border="1" width="43%">
<tr>
<td width="39%">麻辣學園</td>
<td width="61%">網頁教學</td>
</tr>
<tr>
<td width="39%">築夢學園</td>
<td width="61%">程式設計教學</td>
</tr>
<tr>
<td width="39%">office學園</td>
<td width="61%">office軟體教學</td>
</tr>
</table>
</body>
</HTML>

複製代碼

當我們打開瀏覽器載入6-1.htm這份網頁時，瀏覽器將會解譯網頁文件內的框架標籤，並按照框架標籤的設定分割畫面，將上方的框架視窗命名為「top」，並讀入6-1-1.htm網頁文件；下方的框架視窗命名為「buttom」，並讀入6-1-1.htm網頁文件。

注意！！
整體的瀏覽器畫面是6-1.htm（框架網頁）所有。

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-18 17:54 | 只看該作者

上下分割的視窗框架

<FRAMESET ROWS=”百分比/像數,百分比/像數,…”>

複製代碼

ROWS屬性：這個屬性用來切割垂直方向的視窗，依照分割的個數，在其後方填入相對個數的百分比或像素，例如：<FRAMESET rows="40%,200,*">，這樣就可以得當三個上下分割的框架視窗，這三個框架視窗大小由上而下分別為：佔整體畫面40%大小、200個像素大小、前兩個框架視窗用剩的其餘空間。
當我們在<FRAMESET>標籤中指定幾個視窗的大小後，就得分別設定對應個數的<FRAME NAME=”視窗名稱” SRC=”視窗內網頁”>標籤！而這些框架視窗的大小將依照<FRAMESET>標籤中所指定的百分比或像素來分配。

實作學習：
6-2.htm(分割垂直三個框架視窗)