網路○泡泡○新聞 Internet Pop-up News網站建置:HTML欄框篇

○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  定義一個浮動副視窗(欄框)

 

Today's Pup-up News

網路○泡泡○新聞 Internet Pop-up News

  首頁
  網路資訊
  網路媒體
  電子商務
  網站建置
  電腦資訊
  學習日誌
  靈力補給站
  新鮮玩意兒
  EMAIL

1