[ Up ] [ 1 HTML文件架構 ] [ 2 段落格式設定 ] [ 3 文字格式變化 ] [ 4 條列式列表 ] [ 5 超連結 ] [ 6 多媒體 ] [ 7 表格的設計 ] [ 8 多窗格顯示 ] [ 9 表單設計 ]


8-1 FrameSet標籤

FrameSet標籤是視窗分割最基本的指令,<FrameSet>與</FrameSet>可以依水平方向或垂直方向來分割視窗為多個窗格,每一個窗格可以設定一獨立的URL。

FrameSet標籤的屬性如下:

COLS屬性:

COLS屬性可以設定水平方向窗格的分割數目,及各窗格的寬度,其設定方式有以下兩種:

依相對比例設定:
COLS="X1, X2, ..., Xn"
上一屬性設定方式即可以水平方向將視窗分割為n個窗格,各窗格寬度比例為X1:X2:...:Xn。

範例:<FrameSet COLS="1, 2">表示水平地分割為兩個窗格,其寬度之比例為1:2。

其實用來分割視窗大小的設定亦可以使用"%"的方式,
例如:<FrameSet COLS="30%,70%">

依絕對寬度方式:
COLS="X1,X2,...,Xn-1,*"
上一屬性設定方式同樣在水平方向將視窗分割為n個窗格,前面n-1個窗格的水平寬度分別為X1, X2, ..., Xn-1個點﹝Pixels﹞,而最後一個窗格的水平寬度則為整個視窗剩餘之水平寬度。
要注意的是,此種方式窗格的水平大小是固定的,因此當視窗的水平大小不足以顯示所有的窗格時,那後面的窗格便看不到了。

範例:<FrameSet COLS="100,200,*">表示分割為三個視窗,前面兩個窗格的大小分別為100點和200點,而最後一個方格的大小則依視窗的大小而定。

ROWS屬性:

ROWS屬性可以設定垂直方向視窗分割的數目和各窗格的垂直高度,其設定方式和COLS屬性相同。

FRAMEBORDER屬性:

設定此一屬性值等於yes或no,以設定是否各窗格具有邊框。

FRAMESPACING:

設定窗格間的距離。

8-2 FRAME標籤

<FRAME>標籤用來定義每一窗格所要顯示的HTML文件,其利用SRC屬性設定各窗格所要顯示的HTML文件之URL位置。
例如:<FRAME SRC="HTML文件的URL">。

<FRAME>標籤必須包含在<FrameSet>和</FrameSet>之間,而一個<Frame>標籤則定義一個窗格,因此其數目應該與所分割的視窗數目相等。若<FRAME>標籤的個數少於ROWS和COLS屬性所分割的窗格數目時,則沒有FRAME相對應的窗格則會以空白顯示。反之,若<FRAME>數目多出窗格數目時,則多出來的<FRAME>則會被忽略。

範例8-1

<HTML>
<HEAD>
<TITLE>範例8-1 - 視窗分割範例</TITLE>
</HEAD>
<FRAMESET COLS="100,200,*" FRAMESPACING=5>
<FRAME SRC="html_ex2_1.htm">
<FRAME SRC="html_ex2_2.htm">
<FRAME SRC="html_ex2_3.htm">
</FRAMESET>
</HTML>

執行結果

MarginWidth和MarginHeight屬性:

這兩個屬性用來設定文件在每一窗格上顯示時,於窗格的上下左右所留下的空白寬度與高度。
MarginWidth屬性則為設定窗格中顯示的文件內容與窗格左邊的距離,
MarginHeight屬性則為設定窗格中顯示的文件內容與窗格上邊的距離,
其設定方法如下:
<FRAME SRC="HTML文件的URL" MarginWidth=X MarginHeight=Y>
其中的X和Y的單位為Pixels。

範例8-2:

<HTML>
<HEAD>
<TITLE>範例8-2 - MarginWidth和MarginHeight屬性範例</TITLE>
</HEAD>
<FRAMESET COLS="100,200,*" FRAMESPACING=5>
<FRAME SRC="html_ex2_1.htm">
<FRAME SRC="html_ex2_2.htm" MarginWidth=0 MarginHeight=0>
<FRAME SRC="html_ex2_3.htm" MarginWidth=30 MarginHeight=30>
</FRAMESET>
</HTML>

執行結果

Scrolling屬性:

此一屬性可以用來設定每一窗格是否要顯是卷動軸,其設定方式如下:
Scrolling=X,其中X值可以是下列三種:
Auto:Auto為預設值,瀏覽器會依窗格和顯示文件的大小自動決定是否要顯示捲動軸。
Yes:若設定為Yes,則一定會顯示捲動軸。
No:若設定為No,則不顯示捲動軸。

範例8-3

<HTML>
<HEAD>
<TITLE>範例8-3 - Scrolling屬性範例</TITLE>
</HEAD>
<FRAMESET COLS="100,200,*">
<FRAME SRC="html_ex2_1.htm" Scrolling="auto">
<FRAME SRC="html_ex2_2.htm" Scrolling="Yes">
<FRAME SRC="html_ex2_3.htm" Scrolling="No">
</FRAMESET>
</HTML>

執行結果

NoResize屬性:

NoResize屬性則是讓使用者不可以利用滑鼠拖曳窗格的邊界來改變窗格的大小。例如:
<Frame SRC="HTML文件" NoResize>

Name屬性:

此一屬性則是用來給予所分割的窗格命名,為每一窗格設定一名字,可用在做超連結時利用Target屬性將文件顯示在某一指定名稱的窗格中。

FRAMEBORDER屬性:

設定此一屬性值等於yes或no,以設定是否各窗格具有邊框。

8-3 巢狀視窗分割

前面我們介紹了如何依水平方向及垂直方向來分割視窗成多個窗格。下面我們再介紹如何將窗格再分割成多個子窗格。其實方法很簡單,只要將一窗格視為一獨立的視窗,再依前面的方法進行分割即可。

範例8-4

<HTML>
<HEAD>
<TITLE>範例8-4 - 巢狀視窗分割習範例</TITLE>
</HEAD>
<FRAMESET ROWS="1,1">
    <FRAMESET COLS="1,2,1">
        <FRAME SRC="html_ex2_1.htm">
        <FRAME SRC="html_ex2_2.htm">
        <FRAME SRC="html_ex2_3.htm">
    </FRAMESET>
    <FRAMESET COLS="2,1">
        <FRAME SRC="html_ex2_4.htm">
        <FRAME SRC="html_ex2_5.htm">
    </FRAMESET>
</FRAMESET>
</HTML>

執行結果

8-4 TARGET屬性

此為<A>標籤的一個屬性,利用此一屬性可以設定該<A>標籤的超連結文件要顯示在哪一窗格中,其使用方式如下:
<A Href="URL位址" Target="窗格名稱">超連結說明</A>
其中之窗格名稱即為在FRAME標籤中以Name屬性為每一窗格所取的名稱。

範例8-5

<HTML>
<HEAD>
<TITLE>範例8-5 - Target屬性範例</TITLE>
</HEAD>
<FRAMESET COLS="1,1">
<FRAME SRC="html_ex8_5_1.htm">
<FRAME SRC="html_ex2_1.htm" Name="TargetWin">
</FRAMESET>
</HTML>

html_ex8_5_1.htm內容

<HTML>
<HEAD>
<TITLE>Target屬性範例</TITLE>
</HEAD>
<BODY>
<A HREF="html_ex2_1.htm" Target="TargetWin">範例2-1</A><BR>
<A HREF="html_ex2_2.htm" Target="TargetWin">範例2-2</A><BR>
<A HREF="html_ex2_3.htm" Target="TargetWin">範例2-3</A>
</BODY>
</HTML>

執行結果

8-5 BASE標籤

利用BASE標籤的Target屬性便可以將該HTML文件中的每一超連結的內容顯示在Target所指定的窗格中,如此便不須在每一超連結中設定Target屬性。其設定方法如下:
<BASE TARGET="所預設的窗格名稱">

範例8-6

<HTML>
<HEAD>
<TITLE>範例8-6 - BASE標籤範例</TITLE>
</HEAD>
<FRAMESET COLS="1,1">
<FRAME SRC="html_ex8_6_1.htm">
<FRAME SRC="html_ex2_1.htm" Name="TargetWin">
</FRAMESET>
</HTML>

html_ex8_6_1.htm內容

<HTML>
<HEAD>
<TITLE>Target屬性範例</TITLE>
</HEAD>
<BODY>
<BASE TARGET="TargetWin">
<A HREF="html_ex2_1.htm">範例2-1</A><BR>
<A HREF="html_ex2_2.htm">範例2-2</A><BR>
<A HREF="html_ex2_3.htm">範例2-3</A>
</BODY>
</HTML>

執行結果