通用HTML(9)-【框架篇】

我們在撰寫網頁時,每一個網頁都會存成一個HTML檔案(副檔名為.htm或.html),打開來就是一張網頁。但若你希望在同一個畫面中,同時出現好幾個網頁的話,就要用到這裡的框架語法。由於框架語法會影響整個畫面,因此除了iframe(嵌入視窗)外,都不會顯示範例結果。對初學者來說框架是很方便的標籤,但是現在的網站多由動態網頁建立,因此很少用到框架,只有iframe比較常被使用。

元素標籤

iframe(嵌入視窗)、frameset(頁框宣告)、frame(頁框設定)、noframes(不支援框架)

frame Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入頁框,為frameset的子元素,沒有結尾標籤。在HTML5中不被支援。

屬性:

  • frameborder="0 | 1":是否顯示邊框。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • name="名稱":框架名稱,建議與ID相同。
  • noresize="noresize":不允許改變頁框大小。
  • scrolling="auto | yes | no":是否顯示捲軸。
  • src="網址":此頁框所要顯示的內容。

【範例】




<frameset row="200, *, 50">
    <frame src="page_title.htm" scrolling="no" />
    <frame src="page_body.htm" />
    <frame src="page_bottom.htm" scrolling="no" noresize="noresize" />
</frameset>

frameset Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:宣告頁框的數量與大小。在HTML5中不被支援。

屬性:

  • cols="第1個垂直頁框大小, 第2個垂直頁框大小, ...":指定頁框大小通常與rows擇一使用。
  • rows="第1個水平頁框大小, 第2個水平頁框大小, ...":指定頁框大小通常與cols擇一使用。

【範例】

<frameset row="200, *, 50">
    <frame src="page_title.htm" scrolling="no" />
    <frame src="page_body.htm" />
    <frame src="page_bottom.htm" scrolling="no" noresize="noresize" />
</frameset>

iframe Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:插入嵌入視窗。

屬性:

  • frameborder="0 | 1":是否顯示邊框。
  • height="高度":指定物件高度,不建議使用,已漸漸被CSS取代。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • name="名稱":框架名稱,建議與ID相同。
  • noresize="noresize":不允許改變頁架大小。
  • scrolling="auto | yes | no":是否顯示捲軸。
  • src="網址":此頁框所要顯示的內容。
  • style="樣式":設定顯示樣式。
  • width=" 寬度":指定表格的寬度,不建議使用,已漸漸被CSS取代。

【範例】


【結果】

[http://www.google.com]

noframes Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:當瀏覽器不支援框架時的提示。在HTML5中不被支援。

【範例】


  您的瀏覽器不支援框架,無法正常瀏覽網站。