■ 認識分割
各位一定看過某些網站，在你拉動捲軸或點選超連結的時候，
他的「招牌扛棒」或「選單標題項目」還可以存在該頁面上，
這是怎麼做的呢？
有功力的學習者一看就知道，這是HTML的秘辛絕招，視窗分割法。
■ 霸刀橫割
☉ 使用標籤( * : 表示單標籤 )
|
標籤名稱 |
功 能 說 明 |
|
<frameset> |
子視窗分割標籤 |
|
<frame>* |
子視窗內容定義標籤 |
•<Frameset> 屬性參數
|
屬性值 |
說 明 |
| rows |
設定水平視窗數目 |
| cols |
設定垂直視窗數目 |
•<Frame> 屬性定義
|
屬性值 |
說 明 |
| src |
指定窗框所顯示的網頁檔，src="URL" |
| name |
設定窗框名稱，如：name="tt1" |
| frameBorder=# |
設定窗框框線，如：FrameBorder=
0 或 1 |
| frameSpace=# |
設定窗框邊界，如：FrameSpace= 0
或 1 |
| marginWidth=# |
設定頁面內容與窗框邊界的高度，#:
pixel |
| marginHeight=# |
設定窗框內容與窗框邊界的寬度，#:
pixel |
| noresize |
設定不允許使用者調整窗框大小<小心> |
|
scrolling= n |
設定是否顯示捲軸，n = Auto,
Yes, No |
☉ 範例練習（存檔成 index.html）
<html>
<head><title>視窗霸刀橫割</title></head>
<frameset
rows="
100, 300, * ">
<frame src="t1.htm">
<frame src="t2.htm">
<frame src="t3.htm">
</frameset>
</html> |
請問，與之前我們所做的網頁內容，有差別嗎？
☉ 實作（比較下面frameset設定的差異）
rows="200, *, 100"
rows="20%, 30%, 50%"
rows="*, *, *"
rows="*, 2*, 3*" |
■ 霹靂縱割
☉ 範例練習（存檔成 index.html）
<html>
<head><title>視窗霹靂直割</title></head>
<frameset cols="100,300,*">
<frame src="t1.html">
<frame src="t2.html">
<frame src="t3.html">
</frameset>
</html> |
☉ 實作（比較下面frameset設定的差異）
cols="150, *, 200"
cols="20%, 30%, 50%"
cols="*, *, *"
cols="*, 3*, *" |
■ T字切割法
☉ T字分割一（實作）
<html>
<head><title>視窗十字刀法T字割1</title></head>
<frameset rows="150,*">
<frame src="t1.html">
<frameset cols="100,*">
<frame src="t2.html">
<frame src="t3.html">
</html> |
☉ T字分割二（實作）
<html>
<head><title>視窗十字刀法T字割2</title></head>
<frameset
cols="200,*">
<frame src="t1.html">
<frameset rows="*,2*">
<frame src="t2.html">
<frame src="t3.html">
</frameset>
</html> |
☉ 請製作下列十字視窗分割，並上傳至網站（各視窗：字顏色、背景色需一樣）。
☉ [進階] 製作下列視窗分割（各視窗：字顏色、背景色需一樣）。
■ 子視窗的投射
☉ 子視窗名稱(Name)設定
index.html內容：
<html>
<head><title>視窗投射</title></head>
<frameset
rows="150,*">
<frame src="t1.htm" name="W1">
<frameset cols="100,*">
<frame src="t2.htm"
name="W2">
<frame src="t3.htm"
name="W3">
</html> |
☉ [超連結]中的目標(target)設定
t1.htm內容:
<html>
<head><title>T1</title></head>
<body bgcolor="blue"
text="white">
<a href="http://www.nctu.edu.tw" target="W3">交大</a>
</body>
</html> |
•target屬性的設定值
|
屬性值 |
說 明 |
| _blank |
將超連結以新瀏覽器視窗開啟 |
| _parent |
顯現於目前窗框之父窗框
(若無父窗框，則與_self效果相同) |
| _self |
在同一子窗框中顯現連結的網頁 |
| _top |
同_self |
☉ 目標統一標籤(Base)，也稱(網頁超連結內定開啟設定標籤)
t1.htm內容:
<html>
<head>
<title>T1</title>
<BASE target="_blank">
</head>
<body bgcolor="blue"
text="white">
<a href="http://www.nycu.edu.tw">交大</a>
<a href="http://www.ntu.edu.tw">台大</a>
<a href="http://www.nthu.edu.tw">清大</a>
</body>
</html> |
|
|