麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第15篇)框架控制上篇 [打印本頁]

作者: 小誌 時間: 2010-5-18 17:50 標題: (教學第15篇)框架控制上篇

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

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

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

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

複製代碼

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

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

實作學習：
假設我們要建立如下圖的視窗畫面，我們需要建立幾個網頁文件呢？
[attach]647[/attach]
答案是三份喔：

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（框架網頁）所有。
[attach]648[/attach]

作者: 小誌 時間: 2010-5-18 17:54

上下分割的視窗框架

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

複製代碼

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

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

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<FRAMESET rows="30%,200,*">
<FRAME NAME="top" SRC="a.htm">
<FRAME NAME="cent" SRC="b.htm">
<FRAME NAME="buttom" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

a.htm(上方框架視窗)

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

複製代碼

b.htm(中間框架視窗)

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<body bgcolor="#00CCFF">
<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>

複製代碼

c.htm(下方框架視窗)

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<body bgcolor="#99CC00">
<p align="center">歡迎光臨我們的家族網站喔!!</p>
</body>
</HTML>

複製代碼

編輯好上列的四個網頁網件後，當我們打開瀏覽器讀取6-2.htm檔案後，就可以獲得如下圖的三框架視窗畫面：
[attach]649[/attach]

作者: 小誌 時間: 2010-5-18 17:56

左右分割的視窗框架

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

複製代碼

COLS屬性：這個屬性用來切割水平方向的視窗，依照分割的個數，在其後方填入相對個數的百分比或像素。
與ROWS屬性相同，在<FRAMESET>標籤中指定所需的視窗個數大小後，就得分別設定對應個數的<FRAME NAME=”視窗名稱” SRC=”視窗內網頁”>標籤！

實做學習：
改寫實做學習6-2.htm，將瀏覽器視窗分割成水平方向三個框架視窗。
6-3.htm(分割水平三個框架視窗)

<HTML>
<HEAD>
<TITLE>小誌的網站家族</TITLE>
</HEAD>
<FRAMESET cols="30%,200,*">
<FRAME NAME="top" SRC="a.htm">
<FRAME NAME="cent" SRC="b.htm">
<FRAME NAME="buttom" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

分割後框架視窗內的網頁文件依然採用a.htm、b.htm、c.htm：
[attach]650[/attach]

作者: 小誌 時間: 2010-5-18 18:04

框架樣式設定
框架視窗捲軸

<FRAME NAME=”視窗名稱” SRC=”視窗內網頁” SCROLLING=”設定值”>

複製代碼

框架視窗是否出現捲動軸可由<FRAME>標籤的『SCROLLING』屬性來設定，其設定值有下列三種：

Auto：依照網頁文件內容自動判定是否出現捲動軸。
Yes：一定要出現捲動軸。
NO：一定不要出現捲動軸。

實例說明：
6-4.htm

<HTML>
<HEAD>
<TITLE>捲動軸設定</TITLE>
</HEAD>
<FRAMESET cols="30%,200,*">
<FRAME NAME="top" SRC="b.htm" SCROLLING="Auto">
<FRAME NAME="cent" SRC="b.htm" SCROLLING="Yes">
<FRAME NAME="buttom" SRC="b.htm" SCROLLING="No">
</FRAMESET>
</HTML>

複製代碼

[attach]652[/attach]
在上圖中，最左方的框架視窗，我們將其捲動軸屬性設定為『SCROLLING=”Auto”』，由於顯示的空間已經足夠了，所以捲動軸就不會出現，中間的框架視窗，我們將其捲動軸屬性設定為『SCROLLING=”Yes”』，雖然顯示的空間已經足夠了，但是捲動軸依然會出現！

框架視窗框線

<FRAMESET COLS=”百分比/像數,百分比/像數,…” FRAMEBOARD=”設定值”>

複製代碼

框架視窗間的框線顯現與否可由<FRAMESET>標籤的『FRAMBOARD』屬性來設定，當設定值為No則將不會出現框線。

實例說明：
6-5.htm

<HTML>
<HEAD>
<TITLE>框線設定</TITLE>
</HEAD>
<FRAMESET cols="30%,200,*" frameborder="No">
<FRAME NAME="top" SRC="a.htm">
<FRAME NAME="cent" SRC="b.htm">
<FRAME NAME="buttom" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

[attach]653[/attach]

雖然我們取消了框架視窗的框線，但從上圖中我們可以看到在：框架視窗之間仍然會有白色的空隙，這個時候我們則可以再加上『FRAMSPACING』屬性來設定：

<FRAMESET COLS=”30%,200,*” FRAMEBOARD=”No” FRAMESPACING=”設定值”>

複製代碼

框架視窗間的距離寬度可由<FRAMESET>標籤的『FRAMSPACING』屬性來設定，當設定值為0則框架視窗將緊靠在一起。

實例說明：
6-6.htm

<HTML>
<HEAD>
<TITLE>框架視窗間距設定</TITLE>
</HEAD>
<FRAMESET cols="30%,200,*" frameborder="No" FRAMESPACING="0">
<FRAME NAME="top" SRC="a.htm">
<FRAME NAME="cent" SRC="b.htm">
<FRAME NAME="buttom" SRC="c.htm">
</FRAMESET>
</HTML>

複製代碼

[attach]654[/attach]

歡迎光臨麻辣家族討論版版 (http://forum.twbts.com/)