HTML - 框架

HTML 框架用於將瀏覽器視窗分成多個部分，每個部分可以獨立載入單獨的 HTML 文件。瀏覽器視窗中的一組框架稱為框架集。視窗被劃分為框架的方式類似於表格的組織方式：分成行和列。

<frame> 標籤不再推薦使用，因為它不受 HTML5 支援。與其使用此標籤，不如使用 <iframe> 或結合 CSS 使用 <div> 來實現類似的效果。

語法

<frameset rows="50%,50%">
   <frame name="top" src="link/to/frame1" />
   <frame name="bottom" src="link/to/frame2" />
</frameset>

其中 frameset 的 rows 屬性定義了視窗劃分成水平部分的方式。在本例中，視窗被分成兩行，每行佔據可用高度的 50%。

HTML 框架示例

以下是一些示例程式碼，說明如何在 HTML 中操作框架。

在 HTML 中建立框架

要在頁面上建立框架，我們使用 <frameset> 標籤代替 <body> 標籤。 <frameset> 標籤定義如何將視窗分成框架。<frameset> 標籤的 rows 屬性定義水平框架，cols 屬性定義垂直框架。每個框架都由 <frame> 標籤指示，它定義哪個 HTML 文件應在框架中開啟。

以下是建立三個水平框架的示例。如果您的瀏覽器不支援框架，則會顯示 body 元素。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
   <frame name="top" src="/html/top_frame.htm" />
   <frame name="main" src="/html/main_frame.htm" />
   <frame name="bottom" src="/html/bottom_frame.htm" />
   <noframes>
      <body>
         Your browser does not support frames.
      </body>
   </noframes>
</frameset>
</html>

建立垂直框架

這裡我們將 rows 屬性替換為 cols 並更改了它們的寬度。這將垂直建立所有三個框架。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
   <frame name="left" src="/html/top_frame.htm" />
   <frame name="center" src="/html/main_frame.htm" />
   <frame name="right" src="/html/bottom_frame.htm" />
   <noframes>
      <body>
         Your browser does not support frames.
      </body>
   </noframes>
</frameset>
</html>

框架的 name 和 target 屬性

框架最常用的用途之一是在一個框架中放置導航欄，然後在單獨的框架中載入主頁面。

讓我們看下面的例子，其中 **test.htm** 檔案包含以下程式碼

<!DOCTYPE html>
<html>
<head>
   <title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
   <frame src="/html/menu.htm" name="menu_page" />
   <frame src="/html/main.htm" name="main_page" />
   <noframes>
<body>
   Your browser does not support frames.
</body>
   </noframes>
</frameset>
</html>

我們建立了兩列，用兩個框架填充。第一個框架寬 200 畫素，將包含由 **menu.htm** 檔案實現的導航選單欄。第二列填充剩餘空間，將包含頁面的主要部分，它由 **main.htm** 檔案實現。對於選單欄中可用的所有三個連結，我們都將目標框架指定為 **main_page**，因此，每當您單擊選單欄中的任何連結時，可用的連結都將在 main_page 中開啟。

以下是 **menu.htm** 檔案的內容

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
   <a href="https://www.google.com" target="main_page">
      Google
   </a>
   <br /><br />
   <a href="https://www.microsoft.com" target="main_page">
      Microsoft
   </a>
   <br /><br />
   <a href="https://news.bbc.co.uk" target="main_page">
      BBC News
   </a>
</body>
</html>

以下是 **main.htm** 檔案的內容

<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
   <h3>
      This is main page and content from any link 
      will be displayed here.
   </h3>
   <p>
      So now click any link and see the result.
   </p>
</body>
</html>

frameset 標籤的屬性

以下列出的屬性被 frameset 標籤接受。

屬性	描述
cols	指定 frameset 中包含多少列以及每列的大小。您可以透過四種方式之一指定每列的寬度。以畫素為單位的絕對值。例如，要建立三個垂直框架，請使用 cols="100, 500,100"。瀏覽器視窗的百分比。例如，要建立三個垂直框架，請使用 cols="10%, 80%,10%"。使用萬用字元。例如，要建立三個垂直框架，請使用 cols="10%, ,10%"。在這種情況下，萬用字元佔據視窗的剩餘部分。作為瀏覽器視窗的相對寬度。例如，要建立三個垂直框架，請使用 cols="3,2,1"。這是百分比的替代方法。您可以使用瀏覽器視窗的相對寬度。這裡視窗被分成六分之一：第一列佔據視窗的一半，第二列佔據三分之一，第三列佔據六分之一。
rows	此屬性的工作方式與 cols 屬性相同，並採用相同的值，但它用於指定 frameset 中的行。例如，要建立兩個水平框架，請使用 rows="10%, 90%"。您可以像上面對列解釋的那樣指定每行的高度。
border	此屬性以畫素為單位指定每個框架邊框的寬度。例如 border="5"。值為零表示沒有邊框。
frameborder	此屬性指定是否應在框架之間顯示三維邊框。此屬性的值為 1（是）或 0（否）。例如 frameborder="0" 指定沒有邊框。
framespacing	此屬性指定 frameset 中框架之間的空間量。這可以採用任何整數值。例如 framespacing="10" 表示每個框架之間應有 10 畫素的間距。

HTML <frame> 標籤屬性

以下列出的屬性被 frame 標籤接受。

屬性	描述
src	此屬性用於提供應在框架中載入的檔名。其值可以是任何 URL。例如，src="/html/top_frame.htm" 將載入 html 目錄中可用的 HTML 檔案。
name	此屬性允許您為框架命名。它用於指示應將文件載入到哪個框架中。當您想要在一個框架中建立連結並將頁面載入到另一個框架中時，這尤其重要，在這種情況下，第二個框架需要一個名稱來標識自身作為連結的目標。
frameborder	此屬性指定是否顯示該框架的邊框；如果給定，它將覆蓋 <frameset> 標籤上 frameborder 屬性中給定的值，並且這可以取值為 1（是）或 0（否）。
marginwidth	此屬性允許您指定框架邊框和框架內容的左側和右側之間的空間寬度。該值以畫素為單位給出。例如 marginwidth="10"。
marginheight	此屬性允許您指定框架邊框及其內容的頂部和底部之間的空間高度。該值以畫素為單位給出。例如 marginheight="10"。
noresize	預設情況下，您可以透過單擊並拖動框架的邊框來調整任何框架的大小。noresize 屬性可防止使用者調整框架的大小。例如 noresize="noresize"。
scrolling	此屬性控制出現在框架上的捲軸的外觀。這採用“yes”、“no”或“auto”值。例如 scrolling="no" 表示它不應具有捲軸。
longdesc	此屬性允許您提供指向另一個頁面的連結，該頁面包含對框架內容的詳細描述。例如 longdesc="framedescription.htm"

框架的缺點

使用框架有一些缺點，因此從不建議在網頁中使用框架。

一些較小的裝置通常無法處理框架，因為它們的螢幕不夠大，無法分割。
有時由於不同的螢幕解析度，您的頁面在不同的計算機上顯示方式會有所不同。
瀏覽器的 *後退按鈕* 可能無法按使用者希望的那樣工作。
仍然有一些瀏覽器不支援框架技術。

影片 - HTML 框架

列印頁面