HTML - Frames - 極客書

HTML框架用於將瀏覽器窗口分成多個部分，每個部分可以加載單獨的HTML文檔。瀏覽器窗口中的幀集合稱爲幀集。窗口按與表組織方式相似的方式劃分爲框架：行和列。

Disadvantages of Frames

使用框架並沒有什麼缺點，因此不建議在網頁中使用框架;

一些較小的設備常常無法處理幀，因爲它們的螢幕不夠大，無法分割。
有時，由於螢幕解析度不同，您的頁面將在不同的計算機上顯示不同的內容。
瀏覽器的後退按鈕可能無法按用戶希望的那樣工作。
仍有少數瀏覽器不支持幀技術。

Creating Frames

要在頁面上使用框架，我們使用<框架集>標記，而不是<正文>標記。<frameset>標記定義了如何將窗口劃分爲框架。<frameset>標記的行屬性定義水平框架，而列屬性定義垂直框架。每個框架都由<frame>標記表示，它定義了哪些HTML文檔應打開到框架中。

注意−在HTML5中不推薦使用<frame>標記。不要使用此元素。

Example

下面是創建三個水平框架的示例−

Live Demo

<!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>

這將產生以下結果&負;

Example

讓我們把上面的例子放在下面，這裡我們用cols替換了rows屬性並改變了它們的寬度。這將垂直創建所有三個框架;

Live Demo

<!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>

這將產生以下結果&負;

The <frameset> Tag Attributes

以下是<框架集>標記減號;的重要屬性;

Sr.No	Attribute & Description
1	科爾斯指定框架集中包含多少列以及每列的大小。您可以用以下四種方法之一指定每列的寬度− 絕對值（像素）。例如，要創建三個垂直框架，請使用cols=「100，500，100」。瀏覽器窗口的百分比。例如，要創建三個垂直框架，請使用cols=「10%，80%，10%」。使用通配符。例如，要創建三個垂直框架，請使用cols=「10%，，10%」。在這種情況下，通配符占據窗口的其餘部分。作爲瀏覽器窗口的相對寬度。例如，要創建三個垂直框架，請使用cols=「3，2，1」。這是百分比的另一種選擇。可以使用瀏覽器窗口的相對寬度。在這裡，窗戶被分成六分之一：第一列占據窗戶的一半，第二列占據三分之一，第三列占據六分之一。
2	行此屬性的工作方式與cols屬性類似，並採用相同的值，但它用於指定框架集中的行。例如，要創建兩個水平框架，請使用rows=「10%，90%」。您可以按照上面對列的說明指定每行的高度。
3	邊界此屬性以像素爲單位指定每個幀的邊框寬度。例如，border=「5」。值爲零表示沒有邊界。
4	框架邊框此屬性指定是否應在幀之間顯示三維邊框。此屬性的值爲1（是）或0（否）。例如frameborder=「0」不指定邊框。
5	framespacing 此屬性指定幀集中幀之間的空間量。這可以取任何整數值。例如framespacing=「10」表示每個幀之間應該有10個像素的間距。

The <frame> Tag Attributes

以下是<frame>tag−的重要屬性;

Sr.No	Attribute & Description
1	src公司此屬性用於指定應在幀中加載的文件名。它的值可以是任何URL。例如，src=「/html/top_frame.htm」將加載html目錄中可用的html文件。
2	代表此屬性允許您爲幀命名。它用於指示文檔應加載到哪個框架中。當您希望在一個框架中創建連結，將頁面加載到另一個框架中時，這一點尤其重要，在這種情況下，第二個框架需要一個名稱來將自己標識爲連結的目標。
3	框架邊框此屬性指定是否顯示該幀的邊框;如果指定了邊框，則它將覆蓋<frameset>標記上的frameborder屬性中給定的值，並且可以採用1（是）或0（否）的值。
4	邊緣寬度此屬性允許您指定框架邊框的左右兩側與框架內容之間的空間寬度。該值以像素爲單位。例如marginwidth=「10」。
5	瑪吉涅特（Marginheight）此屬性允許您指定框架邊框頂部和底部及其內容之間的空間高度。該值以像素爲單位。例如marginheight=「10」。
6	北歐化默認情況下，可以通過在幀的邊框上單擊並拖動來調整任何幀的大小。noresize屬性防止用戶調整幀的大小。例如noresize=「noresize」。
7	滾動此屬性控制出現在框架上的滾動條的外觀。這將採用「是」、「否」或「自動」值。例如，scrolling=「no」表示它不應該有滾動條。
8	朗格德斯此屬性允許您提供指向另一頁的連結，該頁包含對框架內容的長描述。例如longdesc=「framedescription.htm」

Browser Support for Frames

如果用戶正在使用任何舊瀏覽器或任何不支持框架的瀏覽器，則應向用戶顯示<noframes>元素。

因此，您必須將<body>元素放置在<noframes>元素中，因爲<frameset>元素應該替換<body>元素，但如果瀏覽器不理解<frameset>元素，則它應該理解<noframes>元素中包含的<body>元素中的內容。

你可以給有舊瀏覽器的用戶放一些好消息。例如，對不起！！您的瀏覽器不支持框架。如上例所示。

Frame's name and target attributes

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

讓我們看看下面的示例，其中test.htm文件包含以下代碼−

Live Demo

<!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文件實現。對於菜單欄中可用的所有三個連結，我們已將目標框架稱爲主頁，因此每當您單擊菜單欄中的任何連結時，都會在主頁中打開可用連結。

跟蹤是菜單的內容

Live Demo

<!DOCTYPE html>
<html>

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

以下是main.htm文件的內容−

Live Demo

<!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>

當我們加載test.htm文件時，它會產生以下結果−

現在，您可以嘗試單擊左側面板中可用的連結並查看結果。targetattribute還可以採用以下值之一&負;

Sr.No	Option & Description
1	_自我將頁面加載到當前框架中。
2	空白將頁面加載到新的瀏覽器窗口中。打開一扇新窗戶。
3	_母公司將頁面加載到父窗口中，對於單個框架集，父窗口是主瀏覽器窗口。
4	_頂部將頁面加載到瀏覽器窗口中，替換任何當前幀。
5	目標幀將頁面加載到命名的targetframe中。極客書 © 2015-2020 .