Окно браузера может быть разделено на части, которые называются фреймами, иногда кадрами; можно их назвать и подокнами. В каждую такую часть окна браузера, т.е. фрейм, может быть загружен отдельный HTML документ. Рассмотрим пример окна браузера с тремя фреймами.
В каждый фрейм в этом случае для наглядности загружен простой HTML документ, сообщающий номер фрейма и название файла, хранящего его содержимое. Если в фрейм будет загружен реальный документ, который не помещается полностью в нем, то у фрейма (внимание, не у всего окна!) появятся вертикальная и/или горизонтальная полосы прокрутки в зависимости от того, по горизонтали и/или по вертикали не помещается содержимое документа.
Например, дизайн и структура вашего сайта таковы, что есть одинаковые элементы, повторяющиеся на каждой странице сайта: название, навигационное меню, адрес в конце страницы или какие-то иные подобные элементы. Изменяется только содержание разделов. Тогда страницы можно разбить на части таким образом, чтобы неизменяемые части были помещены в отдельные фреймы, а еще один фрейм выделить для того, чтобы в него загружалось содержимое нужного раздела после щелчка на соответствующей ссылке, например, из меню.
Это дает экономию в скорости загрузки, так как одинаковые части страниц сайта повторно не загружаются, а просто все время отображаются в отведенных им фреймах.
Создание структуры фреймов элемент FRAMESET
Структура разбивки окна хранится в отдельном HTML документе, он и называется документом с фреймами. Структура фреймов формируется при помощи специального элемента FRAMESET. Обычный документ имеет один раздел HEAD и один раздел BODY, тогда как в документе с фреймами раздел BODY заменяется описанием структуры фреймов, Т.е. разделом FRAMESET.
В раздел FRAMESET может быть добавлен элемент NOFRAME с альтернативным содержанием для отображения в браузерах, не поддерживающих фреймы, или в браузерах с отключенной поддержкой фреймов. Такие браузеры просто не поймут структуры FRAMESET и NOFRAME, а отобразят помещенный внутри них текст.
Простой документ с фреймами</ТIТLЕ>
</span>
</HEAD>
<FRAМESET >
<span> ...описание структуры фреймов...
</span>
<NOFRAМES>
<span> Альтернативное содержание для браузеров, не поддерживающих фреймы
</span>
</NOFRAМES>
</FRAМESET>
</HТМL>
<p>Обратите внимание, что раздел BODY в документе отсутствует полностью, а элемент NOFRAMES содержится внутри раздела FRAMESET.<br>
Сама структура фреймов формируется делением окна браузера на части — строки и колонки; В какой-то степени это похоже не создание таблиц. Для этого у элемента FRAMESET существуют атрибуты cols и rows, задающие деление на колонки и строки соответственно.<br>
Единицы измерения, в которых можно задавать размеры фреймов, это, как обычно, пиксели и проценты. Есть еще возможность задавать размер в новой пока для нас единице измерения, которую условно можно назвать «часть» окна. Значения атрибутов cols и rows задаются перечислением размеров соответствующих областей через запятую. Можно комбинировать разные способы задания. Рассмотрим несколько примеров, исходя из предположения, что размер окна браузера 800х600 пикселей.</p>
<FRAМESET rows= "50%, 50%">
</FRAМESET>
<p>Такой код поделит окно по горизонтали на два одинаковых по высоте фрейма (строки). Если задать атрибут cols=» 50%, 50%», то получим две одинаковые по ширине колонки.</p>
<span><FRAМESET cols= "120, 400. *">
</span>
<span> . . . продолжение определения структуры фреймов. . .
</span>
</FRAМESET>
<p>При таком коде получим три колонки фреймов: левая шириной 120 пикселей, средняя шириной 400 пикселей, а на третью колонку отводится все, что останется от первых двух колонок, в атрибуте это значение обозначается символом звездочки «*».</p>
<FRAМESET cols= "1*, 4*">
<span> . . . продолжение определения структуры фреймов. . .
</span>
</FRAМESET>
<p>Такой код создаст две колонки фреймов. Ширина первой принимается за единицу (это обозначается как 1 * или просто *), ширина второй в четыре раза больше. Таким образом, ширина первой будет 20%, а ширина второй 80% от общей ширины окна браузера.</p>
<span><FRAМESET cols= "100, 40%, *">
</span>
<span> . . . продолжение определения структуры фреймов...
</span>
</FRAМESET>
<p>В приведенном мере комбинируются все три способа задания размеров. Ширина первой колонки будет равна 100 пикселей, для второй отводится 40% оставшейся ширины (800 — 100 = 700), и на третью остается все, что не занято первой и второй колонками.<br>
Раздел FRAMESET может содержать вложенные разделы FRAMESET, что позволяет создать довольно сложную структуру фреймов. Допустим, нам надо разделить окно на 4 фрейма следующим образом:</p>
<p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2016/06/Fr-1.jpg' align="center" width="100%" loading=lazy></p>
<p>Сначала необходимо организовать 2 колонки таким образом:</p>
cols= "100, * "
<p>Затем вторую колонку поделить на три строки таким образом:</p>
rows=" 80, *, 30"
<p>Отдельный фрейм, точнее его описание, задается элементом FRAME и его атрибутами: подробнее о нем чуть позже. Вернемся к вложенным элементам FRAMESET. Рассмотрим пример кода, создающего такую структуру фреймов:</p>
<FRAМESET cols= "100, * ">
<span> <FRAМE name= "framel" src= "framel.html">
</span>
<span> <FRAМESET rows= "80, *, 30">
</span>
<span> <FRAМE name= "frame2" src= "frame2.html">
</span>
<span> <FRAМE name= "frame3" src= "frame3.html">
</span>
<span> <FRAМE name= "frame4" src= "frame4.html">
</span>
</FRAМESET>
</FRAМESET>
<p>Каким образом разбивается окно на фреймы, вроде бы разобрались. При создании фреймов можно сделать так, чтобы границы между фреймами видно не было. Как вы, наверное, уже догадались, делается это при помощи атрибута border его значение должно равняться нулю. Но дело в том, что для фреймов этот атрибут не воспринимается браузером Internet Explorer, зато поддерживается браузером Netscape Navigator. Для Internet Explorer граница между фреймами задается атрибутом frameborder, который не поддерживается браузером Netscape Navigator. Получается, что необходимо задавать одинаковые значения для обоих атрибутов, чтобы оба браузера восприняли HTML код одинаково и толщина границ между фреймами была одинаковой.<br>
Толщину границ или, по-другому, расстояние между фреймами также можно регулировать атрибутом framespacing, значение которого задается в пикселях. Все атрибуты элемента FRAMESET приведены в таблице.</p>
<h2>Атрибуты элемента <FRAMESEТ></h2>
<table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">
<h3>Атрибут</h3>
</td>
<td bgcolor="#E7E7E7" width="60%">
<h3>Описание</h3>
</td>
<td bgcolor="#E7E7E7" width="20%">
<h3>Пример</h3>
</td>
</tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">rows
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет количество и размеры горизонтальных фреймов (фреймов строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:
<p>а) в процентах от высоты рабочей области окна браузера например: "30%, 30%, 40%" ;</p>
<p>б) в виде знака «*» (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами например, звездочка в записи "25%, 25%, *" равносильна 50%;</p>
<p>в) в пикселях например: "75, *" .</p>
<p>Все три способа можно совмещать.</p>
</td>
<td bgcolor="#E7E7E7" width="20%"> rows= "25%, 25%, *"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">cols
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет количество и размеры вертикальных фреймов (фреймов столбцов) в окне браузера. В качестве значения<br>
задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем параметре ROWS.
</td>
<td bgcolor="#E7E7E7" width="20%"> cols= "265, *"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">border
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет ширину рамок фреймов в пикселях. Данный параметр действует только в браузерах Netscape.
</td>
<td bgcolor="#E7E7E7" width="20%"> Border= "0"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder
</td>
<td bgcolor="#E7E7E7" width="60%">Данный параметр действует только в браузерах lnternet Explorer и определяет наличие рамок у содержащихся внутри элемента FRAMESET фреймов. Возможные значения: Yes отображать рамки; No или 0 не отображать рамки.
</td>
<td bgcolor="#E7E7E7" width="20%"> Frameborder= "0"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">framespacing
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет расстояние (так называемую «серую область») между фреймами в пикселях. Данный параметр также необходим для создания фреймов без рамок.
</td>
<td bgcolor="#E7E7E7" width="20%"> framespacing= "0"
</td>
</tr></tbody></table><p>Теперь вернемся к элементу FRAME, который описывает отдельный фрейм внутри всей структуры. Обязательный параметр для него — атрибут src, который задает URL HTML — документа или изображения для отображения в этом фрейме. Также лучше задать фрейму имя при помощи атрибута name. Это позволит использовать данное имя в качестве значения атрибута target элемента А и управлять тем, в какой фрейм должна загружаться ссылка. Имена фреймов не могут начинаться с цифр, в качестве начальных символов допустимы только буквы латинскою алфавита (az, AZ).</p>
<p>Когда в структуре фреймов не задана рамка между фреймами, их содержимое может слишком плотно примыкать друг к другу, что будет не очень красиво выглядеть. Если хотите раздвинуть содержимое фреймов и при этом все-таки не включать отображение границ между ними, то это можно сделать, задав внутри фреймов отступы. Размер этих отступов задается в пикселях и попарно: для отступов сверху и снизу атрибутом marginheight,<br>
а для отступов справа и слева атрибутом marginwidth. Тогда расстояние между содержимым соседних фреймов будет равно сумме соответствующих отступов этих фреймов.</p>
<p>Должна ли отображаться рамка вокруг отдельною фрейма, определяется его атрибутом frameborder. Значение yes (или 1) говорит о том, что рамка должна быть, значение no (или 0) указывает, что рамки быть не должно.<br>
Пользователь может изменять размер фреймов, созданный HTML документом. Для этого достаточно подвести курсор мыши к границе фреймов (неважно, видны эти границы или нет) и стандартным для операционной системы способом изменить размер окна.<br>
В Windows курсор мыши примет вид двунаправленной черной стрелки. Нажав левую кнопку мыши, можно передвинуть границу окна. Аналогично можно изменить и размер фрейма, поскольку фрейм это тоже окно. Если вы рассчитали размеры своих фреймов и не хотите, чтобы пользователь менял их, задайте атрибут noresize. В результате изменение размеров будет запрещено.<br>
Как мы уже говорили ранее, полосы прокрутки у фрейма появляются в том случае, если его содержимое в заданных его границах полностью не помещается. Наличие полос прокрутки регулируется атрибутом scrolling. Допустимы три значения yes, no и auto.<br>
Значение auto соответствует автоматическому появлению полос прокрутки в тех случаях, когда это действительно необходимо. Если содержимое видно и так, полос прокрутки нет, если часть содержимого не помещается появляется нужная полоса прокрутки.<br>
Значение yes включает обе полосы прокрутки независимо от того, нужны они или нет. Иногда это может выглядеть не очень красиво.<br>
Значение no запрещает показывать полосы прокрутки совсем. Будьте осторожны с этим значением, поскольку при его указании можете лишить пользователя возможности увидеть все содержимое фрейма, Когда оно не помещается в нем полностью. Все атрибуты элемента FRAME приведены в таблице.</p>
<h2>Атрибуты элемента <FRAME></h2>
<table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">
<h3>Атрибут</h3>
</td>
<td bgcolor="#E7E7E7" width="60%">
<h3>Описание</h3>
</td>
<td bgcolor="#E7E7E7" width="20%">
<h3>Пример</h3>
</td>
</tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">src
</td>
<td bgcolor="#E7E7E7" width="60%">Обязательный параметр. Указывает адрес (URL) HTL<br>
файла, отображаемого в данном фрейме
</td>
<td bgcolor="#E7E7E7" width="20%"> src= "frame2 .html"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">name
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута target (см. элемент А). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр<br>
(начальными символами могут быть только буквы латинского алфавита: a-z, A-Z). Имя не должно начинаться с цифр и специальных символов. Зарезервированные имена фреймов начинаются со знака подчеркивания.
</td>
<td bgcolor="#E7E7E7" width="20%"> name= "menu1"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">marginwidth
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет ширину (в пикселях) левого и правого полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа.
</td>
<td bgcolor="#E7E7E7" width="20%"> marginwidth= "0"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">marginheight
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет ширину (в пикселях) верхнего и нижнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа.
</td>
<td bgcolor="#E7E7E7" width="20%"> marginheight= "0"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">scrolling
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет наличие полос прокрутки содержимого фрейма. Возможные значения:<br>
yes — отображать полосы прокрутки;<br>
no — не отображать полосы прокрутки;<br>
auto — отображать полосы прокрутки при необходимости (если документ, указанный в параметре SRC, не умещается во фрейме)
</td>
<td bgcolor="#E7E7E7" width="20%"> scrolling= "auto"
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">noresize
</td>
<td bgcolor="#E7E7E7" width="60%">Не позволяет изменять размеры фрейма. Данный параметр является флагом и не требует указания значения.
</td>
<td bgcolor="#E7E7E7" width="20%"> noresize
</td>
</tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder
</td>
<td bgcolor="#E7E7E7" width="60%">Определяет наличие рамок у фрейма. Возможные значения:<br>
yes или 1 — отображать рамки;<br>
no или 0 — не отображать рамки.
</td>
<td bgcolor="#E7E7E7" width="20%"> frameborder= "0"
</td>
</tr></tbody></table>
<p>Начнем с фреймовой структуры. В чем ее суть? У нас есть возможность в документе, который мы загружаем в браузер, организовать специальные области оконного типа. В эти области можно загружать другие отдельные документы (веб-страницы).</p>
<p>Зачем это нужно? Поскольку документы загружены в свои отдельные области, то ведут они себя независимо. Т.е в одном документе можно что-то делать, при этом другие документы неизменны.</p>
<p>Где можо встретить такие фреймовые структуры? Это файлы помощи, справки (с расширением.chm).</p>
<p>Приведу простой пример документа с фреймами:</p>
<html>
<head>
<title>
Пример фреймов
