Фреймы HTML используются для разделения окна вашего браузера на несколько разделов, где каждый раздел может загружать отдельный документ HTML. Коллекция фреймов в окне браузера называется frameset. Окно разделено на фреймы аналогичным образом, таблицы организованы: на строки и столбцы.
Недостатки фреймов
Есть несколько недостатков в использовании фреймов, поэтому никогда не рекомендуется использовать фреймы на ваших веб-страницах —
-
Некоторые меньшие устройства не могут часто справляться с кадрами, потому что их экран недостаточно велик, чтобы его можно было разделить.
-
Иногда ваша страница будет отображаться по-разному на разных компьютерах из-за разного разрешения экрана.
-
Кнопка возврата браузера может не работать, как надеется пользователь.
-
Есть еще несколько браузеров, которые не поддерживают фреймовую технологию.
Некоторые меньшие устройства не могут часто справляться с кадрами, потому что их экран недостаточно велик, чтобы его можно было разделить.
Иногда ваша страница будет отображаться по-разному на разных компьютерах из-за разного разрешения экрана.
Кнопка возврата браузера может не работать, как надеется пользователь.
Есть еще несколько браузеров, которые не поддерживают фреймовую технологию.
Создание рамок
Чтобы использовать фреймы на странице, мы используем тег <frameset> вместо тега <body>. Тег <frameset> определяет, как разделить окно на фреймы. Атрибут row тега <frameset> определяет горизонтальные рамки, а атрибут cols — вертикальные рамки. Каждый фрейм обозначен тегом <frame>, и он определяет, какой документ HTML должен открываться во фрейме.
Примечание. Тег <frame> устарел в HTML5. Не используйте этот элемент.
Примечание. Тег <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>
Это даст следующий результат —
пример
Давайте поместим приведенный выше пример следующим образом: здесь мы заменили атрибут row на 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> —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
смещ_по_столбцам Указывает, сколько столбцов содержится в наборе кадров и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов — Абсолютные значения в пикселях. Например, чтобы создать три вертикальные рамки, используйте cols = «100, 500, 100» . Процент окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, 80%, 10%» . Использование подстановочного символа. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, *, 10%» . В этом случае подстановочный знак занимает оставшуюся часть окна. В качестве относительной ширины окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «3 *, 2 *, 1 *» . Это альтернатива процентам. Вы можете использовать относительную ширину окна браузера. Здесь окно делится на шестые: первый столбец занимает половину окна, второй занимает одну треть, а третий занимает одну шестую. |
| 2 |
строки Этот атрибут работает так же, как атрибут cols и принимает те же значения, но он используется для указания строк в наборе кадров. Например, чтобы создать две горизонтальные рамки, используйте row = «10%, 90%» . Вы можете указать высоту каждой строки таким же образом, как описано выше для столбцов. |
| 3 |
граница Этот атрибут определяет ширину границы каждого кадра в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы. |
| 4 |
рамка Этот атрибут указывает, должна ли трехмерная граница отображаться между кадрами. Этот атрибут принимает значение либо 1 (да), либо 0 (нет). Например, frameborder = «0» не указывает границы. |
| 5 |
framespacing Этот атрибут указывает количество пространства между кадрами в наборе кадров. Это может принимать любое целочисленное значение. Например, framespacing = «10» означает, что между кадрами должен быть интервал 10 пикселей. |
смещ_по_столбцам
Указывает, сколько столбцов содержится в наборе кадров и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов —
Абсолютные значения в пикселях. Например, чтобы создать три вертикальные рамки, используйте cols = «100, 500, 100» .
Процент окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, 80%, 10%» .
Использование подстановочного символа. Например, чтобы создать три вертикальные рамки, используйте cols = «10%, *, 10%» . В этом случае подстановочный знак занимает оставшуюся часть окна.
В качестве относительной ширины окна браузера. Например, чтобы создать три вертикальные рамки, используйте cols = «3 *, 2 *, 1 *» . Это альтернатива процентам. Вы можете использовать относительную ширину окна браузера. Здесь окно делится на шестые: первый столбец занимает половину окна, второй занимает одну треть, а третий занимает одну шестую.
строки
Этот атрибут работает так же, как атрибут cols и принимает те же значения, но он используется для указания строк в наборе кадров. Например, чтобы создать две горизонтальные рамки, используйте row = «10%, 90%» . Вы можете указать высоту каждой строки таким же образом, как описано выше для столбцов.
граница
Этот атрибут определяет ширину границы каждого кадра в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы.
рамка
Этот атрибут указывает, должна ли трехмерная граница отображаться между кадрами. Этот атрибут принимает значение либо 1 (да), либо 0 (нет). Например, frameborder = «0» не указывает границы.
framespacing
Этот атрибут указывает количество пространства между кадрами в наборе кадров. Это может принимать любое целочисленное значение. Например, framespacing = «10» означает, что между кадрами должен быть интервал 10 пикселей.
Атрибуты тега <frame>
Ниже приведены важные атрибуты тега <frame> —
| Sr.No | Атрибут и описание |
|---|---|
| 1 |
ЦСИ Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = «/html/top_frame.htm» загрузит файл HTML, доступный в каталоге html. |
| 2 |
название Этот атрибут позволяет вам дать имя фрейму. Он используется для указания того, в какой кадр должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки. |
| 3 |
рамка Этот атрибут указывает, будут ли показаны границы этого кадра; он переопределяет значение, указанное в атрибуте frameborder тега <frameset>, если он указан, и может принимать значения либо 1 (да), либо 0 (нет). |
| 4 |
MARGINWIDTH Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и его содержимым. Значение указывается в пикселях. Например, marginwidth = «10». |
| 5 |
MARGINHEIGHT Этот атрибут позволяет указать высоту пространства между верхом и низом границ рамки и ее содержимым. Значение указывается в пикселях. Например marginheight = «10». |
| 6 |
NORESIZE По умолчанию вы можете изменить размер любого фрейма, щелкая и перетаскивая границы фрейма. Атрибут noresize не позволяет пользователю изменять размер фрейма. Например, noresize = «noresize». |
| 7 |
прокрутки Этот атрибут управляет видом полос прокрутки, которые появляются на рамке. Это принимает значения либо «да», «нет» или «авто». Например, scrolling = «no» означает, что у него не должно быть полос прокрутки. |
| 8 |
longdesc Этот атрибут позволяет вам предоставить ссылку на другую страницу, содержащую подробное описание содержимого фрейма. Например longdesc = «framedescription.htm» |
ЦСИ
Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = «/html/top_frame.htm» загрузит файл HTML, доступный в каталоге html.
название
Этот атрибут позволяет вам дать имя фрейму. Он используется для указания того, в какой кадр должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, которые загружают страницы в другой фрейм, и в этом случае второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки.
рамка
Этот атрибут указывает, будут ли показаны границы этого кадра; он переопределяет значение, указанное в атрибуте frameborder тега <frameset>, если он указан, и может принимать значения либо 1 (да), либо 0 (нет).
MARGINWIDTH
Этот атрибут позволяет вам указать ширину промежутка между левой и правой границами фрейма и его содержимым. Значение указывается в пикселях. Например, marginwidth = «10».
MARGINHEIGHT
Этот атрибут позволяет указать высоту пространства между верхом и низом границ рамки и ее содержимым. Значение указывается в пикселях. Например marginheight = «10».
NORESIZE
По умолчанию вы можете изменить размер любого фрейма, щелкая и перетаскивая границы фрейма. Атрибут noresize не позволяет пользователю изменять размер фрейма. Например, noresize = «noresize».
прокрутки
Этот атрибут управляет видом полос прокрутки, которые появляются на рамке. Это принимает значения либо «да», «нет» или «авто». Например, scrolling = «no» означает, что у него не должно быть полос прокрутки.
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 , он выдает следующий результат —
Теперь вы можете попробовать перейти по ссылкам, доступным на левой панели, и увидеть результат. Атрибут target также может принимать одно из следующих значений:
_self
Загружает страницу в текущий фрейм.
_blank
Загружает страницу в новое окно браузера. Открытие нового окна.
_parent
Загружает страницу в родительское окно, которое в случае одного набора фреймов является основным окном браузера.
_Топ
Загружает страницу в окно браузера, заменяя любые текущие кадры.
targetframe
Загружает страницу в именованный целевой кадр.