○HTML欄框篇○
使用分割欄框,你就可以在同一個瀏覽器視窗中呈現一個以上的網頁。
○範例
垂直分欄
這個範例示範如何以三個不同的文件製作垂直分欄。
<html>
<frameset cols="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
水平分欄
這個範例示範如何以三個不同的文件製作水平分欄。
<html>
<frameset rows="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
○欄框(Frames)
使用分割欄框,你就可以在同一個瀏覽器視窗中呈現一個以上的HTML文件。每個HTML文件都叫做一個欄框,每個欄框都是個別獨立的。
使用分割欄框不便之處為:
- 網站建置者必須追蹤更多的HTML文件
- 要列印整個網頁有困難
○分欄(Frameset)標籤
- <frameset>標籤定義如何將視窗分割成欄框
- 每個分欄定義一組列(rows)或是一組欄(columns)
- 列/欄的值指示每個列/欄佔據多少螢幕空間
○欄框(Frame)標籤
- <frame>標籤定義在每個欄框中放入什麼HTML文件
以下的範例是以兩個欄(columns)分割欄框。
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
第一個欄設定為瀏覽器視窗25%的寬度。
第二個欄設定為瀏覽器視窗75%的寬度。
"frame_a.htm"HTML文件放在第一個欄裡面。
"frame_b.htm"HTML文件放在第二個欄裡面。
○基本附註──實用秘訣
如果欄框有可見的框線,使用者可以拖曳框線改變(resize)欄框大小。為了避免這樣的事情發生,你可以在<frame>標籤添加不改變尺寸(noresize)的屬性。
為不支援欄框的瀏覽器添加<noframe>標籤。
○更多範例
混合分欄(Mixed frameset)
這個範例示範如何以三個不同的文件製作混合列與欄的分割欄框。
<html>
<frameset rows="50%,50%">
<frame src="tryhtml_frame_a.htm">
<frameset cols="25%,75%">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</frameset>
</html>
導覽欄框(Navigation frame)
這個範例示範如何製作導覽欄框。導覽欄框含有列表連結,以第二欄框作為標的。第二欄框顯示連結的文件。
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="tryhtml_frame_a.htm"
name="showframe">
</frameset>
</html>
浮動欄框(Inline frame)
這個範例示範如何製作浮動欄框(在HTML網頁內的欄框)。
<html>
<body>
<iframe
src ="default.asp">
</iframe>
<p>某些舊版瀏覽器並不支援浮動欄框。</p>
<p>若瀏覽器不支援浮動欄框,就無法呈現它。</p>
</body>
</html>
○欄框標籤
NN代表Netscape,IE代表Internet Explorer,W3C代表網路標準
開始標籤 |
NN |
IE |
W3C |
目的 |
<frameset> |
3.0 |
3.0 |
4.0 |
定義一組欄框 |
<frame> |
3.0 |
3.0 |
4.0 |
定義一個副視窗(欄框) |
<noframes> |
3.0 |
3.0 |
4.0 |
為無法處理欄框的瀏覽器定義一個無欄框部分 |
<iframe> |
|
3.0 |
4.0 |
定義一個浮動副視窗(欄框) |
|