HTML - Фреймы

HTML-фреймы используются для разделения окна браузера на несколько разделов, каждый из которых может загружать отдельный HTML-документ. Набор фреймов в окне браузера называется набором фреймов. Окно разделено на фреймы аналогично тому, как организованы таблицы: на строки и столбцы.

Недостатки фреймов

У использования фреймов есть несколько недостатков, поэтому никогда не рекомендуется использовать фреймы на ваших веб-страницах -

Некоторые устройства меньшего размера часто не справляются с кадрами, потому что их экран недостаточно велик, чтобы его можно было разделить.
Иногда ваша страница будет отображаться по-разному на разных компьютерах из-за разного разрешения экрана.
Кнопка " Назад" в браузере может работать не так, как надеется пользователь.
Есть еще несколько браузеров, которые не поддерживают технологию фреймов.

Создание рамок

Чтобы использовать фреймы на странице, мы используем тег <frameset> вместо тега <body>. Тег <frameset> определяет, как разделить окно на фреймы. Вrows атрибут тега <frameset> определяет горизонтальные рамки и colsатрибут определяет вертикальные рамки. Каждый фрейм обозначается тегом <frame> и определяет, какой HTML-документ должен открываться во фрейме.

Note- Тег <frame> не рекомендуется в HTML5. Не используйте этот элемент.

пример

Ниже приведен пример создания трех горизонтальных рамок -

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

Это даст следующий результат -

Атрибуты тега <frameset>

Ниже приведены важные атрибуты тега <frameset>:

Старший Нет	Атрибут и описание
1	cols Определяет, сколько столбцов содержится в наборе фреймов и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов: Абсолютные значения в пикселях. Например, чтобы создать три вертикальных фрейма, используйте cols = "100, 500, 100" . Процент окна браузера. Например, чтобы создать три вертикальных кадра, используйте cols = "10%, 80%, 10%" . Использование подстановочного знака. Например, чтобы создать три вертикальных кадра, используйте cols = "10%, , 10%"* . В этом случае подстановочный знак занимает оставшуюся часть окна. Как относительная ширина окна браузера. Например, чтобы создать три вертикальных фрейма, используйте cols = "3 , 2 , 1 "* . Это альтернатива процентам. Вы можете использовать относительную ширину окна браузера. Здесь окно разделено на шестые части: первый столбец занимает половину окна, второй - одну треть, а третий - одну шестую.
2	rows Этот атрибут работает так же, как атрибут cols, и принимает те же значения, но используется для указания строк в наборе фреймов. Например, чтобы создать две горизонтальные рамки, используйте rows = "10%, 90%" . Вы можете указать высоту каждой строки так же, как описано выше для столбцов.
3	border Этот атрибут определяет ширину границы каждого кадра в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы.
4	frameborder Этот атрибут указывает, должна ли отображаться трехмерная граница между кадрами. Этот атрибут принимает значение 1 (да) или 0 (нет). Например, frameborder = "0" не указывает границы.
5	framespacing Этот атрибут определяет количество пространства между кадрами в наборе кадров. Может принимать любое целочисленное значение. Например, framepacing = "10" означает, что между кадрами должно быть 10 пикселей.

Атрибуты тега <frame>

Ниже приведены важные атрибуты тега <frame>:

Старший Нет	Атрибут и описание
1	src Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = "/html/top_frame.htm" загрузит файл HTML, доступный в каталоге html.
2	name Этот атрибут позволяет дать фрейму имя. Он используется, чтобы указать, в какой фрейм следует загрузить документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму требуется имя, чтобы идентифицировать себя как цель ссылки.
3	frameborder Этот атрибут указывает, отображаются ли границы этого фрейма; он переопределяет значение, указанное в атрибуте frameborder в теге <frameset>, если оно задано, и может принимать значения либо 1 (да), либо 0 (нет).
4	marginwidth Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и содержимым фрейма. Значение указано в пикселях. Например, marginwidth = "10".
5	marginheight Этот атрибут позволяет указать высоту пространства между верхней и нижней границами фрейма и его содержимым. Значение указано в пикселях. Например, marginheight = "10".
6	noresize По умолчанию вы можете изменить размер любого кадра, щелкнув и перетащив границы кадра. Атрибут noresize не позволяет пользователю изменять размер кадра. Например, noresize = "noresize".
7	scrolling Этот атрибут управляет внешним видом полос прокрутки, которые появляются во фрейме. Принимает значения «да», «нет» или «авто». Например, scrolling = "no" означает, что на нем не должно быть полос прокрутки.
8	longdesc Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = "framedescription.htm"

Браузерная поддержка кадров

Если пользователь использует какой-либо старый браузер или любой браузер, который не поддерживает фреймы, пользователю должен отображаться элемент <noframes>.

Таким образом, вы должны поместить элемент <body> внутри элемента <noframes>, потому что элемент <frameset> должен заменить элемент <body>, но если браузер не понимает элемент <frameset>, он должен понимать, что находится внутри Элемент <body>, который содержится в элементе <noframes>.

Вы можете написать приятное сообщение своему пользователю, использующему старые браузеры. Например, Извините !! Ваш браузер не поддерживает фреймы. как показано в приведенном выше примере.

Имя фрейма и целевые атрибуты

Одно из самых популярных применений фреймов - это размещение панелей навигации в одном фрейме, а затем загрузка основных страниц в отдельный фрейм.

Давайте посмотрим на следующий пример, где файл 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, поэтому всякий раз, когда вы щелкаете любую ссылку в строке меню, доступная ссылка будет открываться на главной странице.

Ниже приводится содержимое файла menu.htm.

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

<!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 также может принимать одно из следующих значений -

Старший Нет	Вариант и описание
1	_self Загружает страницу в текущий фрейм.
2	_blank Загружает страницу в новое окно браузера. Открытие нового окна.
3	_parent Загружает страницу в родительское окно, которое в случае одного набора фреймов является главным окном браузера.
4	_top Загружает страницу в окно браузера, заменяя все текущие фреймы.
5	targetframe Загружает страницу в указанный целевой фрейм.