第4章、HTML文件清單樣式設定
Download
Report
Transcript 第4章、HTML文件清單樣式設定
第9章、HTML文件頁框(Frame)製作(續)
Frame的目的是在同一個瀏覽器視窗中看到不止一份
的HTML文件 。
有了頁框，你可以在同樣的視窗顯示更多頁框，每一
個 HTML 文件都叫件一個頁框，並且每個頁框都都彼
此獨立。
設定頁框標示
捨棄<BODY>本文標籤，改以可顯示多份HTML文件頁
框的<FRAMESET>標籤。
設定頁框樣式< FRAMESET >標示定義如何將視窗設成
頁框。
每個設定的頁框樣式設成一組直的或橫的頁框。
直列或橫列的值表示全部螢幕的直列或橫列將被分佔。
第9章、HTML文件頁框(Frame)製作(續)
左右分割頁框標示
<frameset cols="25%,75%">
<frame src=“left.htm">
<frame src=“right.htm">
</frameset>
frameset是整個頁框組的起始標籤，cols標籤代表我們
要建立的是左右分割的頁框。
在上面的例子，cols設定左邊頁框為25%的瀏覽器寬
度樣式，右邊頁框為75%的瀏覽器寬度樣式。
上面例子“left.htm” 是放到左邊頁框，而 “right.htm”
是放到右邊頁框。
範例
顯示
第9章、HTML文件頁框(Frame)製作(續)
也可以使用像素來代表頁框的大小。
<frameset cols="200,*">
表示左邊頁框為200像素，其餘的部份是右邊的頁匡大小
上述範例顯示，在一個畫面要顯示兩個頁框，就要有
兩個檔案，分別是”left.htm”和“right.htm”，若欲在
同一個畫面顯示三個頁框，當然必須有三個檔案。
<frameset cols=“30%,30%,*">
<frame src=“left.htm">
<frame src=“middle.htm">
<frame src=“right.htm”>
</frameset>
第9章、HTML文件頁框(Frame)製作(續)
上下分割頁框標示，只要將cols屬性更改為
rows即可
<frameset rows=“30%,70%">
<frame src=“top.htm">
<frame src=“bottom.htm">
</frameset>
rows標籤代表我們要建立的是上下分割的頁框。
rows設定上面頁框為30%的瀏覽器寬度樣式，下面頁
框為70%的瀏覽器寬度樣式。
第9章、HTML文件頁框(Frame)製作(續)
頁框的屬性
捲軸屬性scrolling。
屬性值有三種設定
YES：一定會出現捲軸
NO：不會出現捲軸
AUTO：為預設值，當文件大小超過視窗時，自動產生捲軸
<html>
<frameset cols="30%,70%">
<frame src="left1.htm" scrolling=“no">
<frame src="right1.htm">
</frameset>
</html>
第9章、HTML文件頁框(Frame)製作(續)
設定無法改變頁框大小的屬性 noresize。
<html>
<frameset cols="30%,70%">
<frame src="left1.htm" scrolling=“no“ noresize>
<frame src="right1.htm">
</frameset>
</html>
頁框邊界屬性設定，以像素為單位
marginwidth:設定文件顯示左右邊界的寬度
marginheight:設定文件顯示上下邊界的寬度
第9章、HTML文件頁框(Frame)製作(續)
<html>
<frameset cols="30%,70%">
<frame src="left1.htm" noresize marginwidth=“10”
marginheight=“20”>
<frame src="right1.htm">
</frameset>
</html>
頁框分隔線設定frameborder。兩個頁框間有一
條分隔線，利用frameborder這個屬性可以設定
顯示或隱藏分隔線。
第9章、HTML文件頁框(Frame)製作(續)
frameborder=“yes”或是frameborder =“1”來顯
示框線
frameborder ="no"或是frameborder ="0"來隱藏
框線
<html>
<frameset cols="30%,70%“ frameborder=“no”>
<frame src="left1.htm" noresize marginwidth=“10”
marginheight=“20”>
<frame src="right1.htm">
</frameset>
</html>
第9章、HTML文件頁框(Frame)製作(續)
預設的頁框分隔線會顯示框線，若欲更進一部
設定分隔線的大小可以使用framespacing。但
是太大的分隔線在視覺上並不美觀，在設計上
宜適量使用。
<html>
<frameset cols="30%,70%“ framespacing=“20”>
<frame src="left1.htm" noresize marginwidth=“10”
marginheight=“20”>
<frame src="right1.htm">
</frameset>
</html>
第9章、HTML文件頁框(Frame)製作(續)
若欲更進一步設定分隔線的顏色可以使用
bordercolor=“#rrggbb”。
<html>
<frameset cols="30%,70%“ framespacing=“20”
bordercolor=“#660000”>
<frame src="left1.htm" noresize marginwidth=“10”
marginheight=“20”>
<frame src="right1.htm">
</frameset>
</html>
第9章、HTML文件頁框(Frame)製作(續)
巢狀頁框的設計
在一個視窗中，出現上下、左右頁框並存的情形，
如下圖所示。
上層頁框
中間
左邊
中間右邊
下層頁框
該如何設計此形式的網頁頁框？
第9章、HTML文件頁框(Frame)製作(續)
多頁框視窗的主要目的是同時顯示多份文件，
所以應該可以設計出在某視窗的點選超連結，
然後在另一視窗顯示結果。
爲達到此目的，必須將<frame>與<a href>配
合使用。
<frame name=“頁框名稱”>，name屬性所設
定的名稱是用來代表該頁框的名稱。
<a href=“URL” target=“頁框名稱”>，target屬
性是用來指定超連結URL應該要在哪一個頁框
之內。所以，target和name屬性應該是相對應。
第9章、HTML文件頁框(Frame)製作(續)
在多頁框的視窗中，大部分使用target的時機
都是將連結顯示在同一畫面的其它視窗，此時
target的屬性值是欲顯示結果的頁框名稱。但
是，target屬性還有其他的功用。
_blank：重新開啟一個瀏覽器顯示超連結結果
_new：和_blank相同功能，重新開啟一個瀏覽
器顯示超連結結果
範例顯示
_self：超連結的結果會顯示在本身的頁框中
_parent：若頁框是兩層以上的巢狀架構，超連
結的結果會顯示在上一層的頁框中 範例顯示