Окно просмотра браузера можно разбить на несколько прямоугольных областей, называемых фреймами. Области соприкасаются друг с другом и в каждую из областей можно загрузить отдельный HTML-документ, и работать с ним независимо от документов, загруженных в другие области окна или фрейма. Между фреймами можно организовать взаимодействие, например, выбор ссылки в одном из фреймов позволит изменить содержимое других фреймов. Фреймы часто используются в случаях, когда возникает необходимость загрузить документ в одну из областей при работе в другой области, или когда следует отобразить информацию, которая должна постоянно находиться на экране.
Пример 1. Простая фреймовая структура
Создадим документ, который разбивает область экрана на две части. Левая часть содержит оглавление разделов документа, который располагается в правой части. При выборе пункта оглавления в левой части появляется соответствующий раздел документа в правой части. Разобьем область экрана на два фрейма. Левый фрейм занимает 25% ширины всего окна и будет содержать оглавление разделов документа, который загрузим в правый фрейм. Пусть имя файла, содержащего оглавление - contents.htm, а имя документа - ch.htm. Фреймовая структура задает способ организации экрана и определяет, какие документы должны быть первоначально загружены во фреймы. Создать описанную фреймовую структуру можно, если использовать документ, содержащий HTML-код, представленный в листинге 1.
Листинг 1. Создание простой фреймовой структуры <HTML>
<HEAD>
<TITLE>Простая фреймовая структура</TITLE>
</HEAD>
<frameset cols="25%,75%">
<frame src=contents0.htm name=left>
<frame src= ch.htm name=right>
</frameset>
</HTML>
Параметр cols тега <frameset> имеет вид соls="список значений". В списке через запятую перечисляются значения, которые определяют размеры фреймов. Список должен содержать не менее двух значений. Значения могут задаваться в процентах, в пикселах, в относительных единицах. Тег <frame> определяет один фрейм. Он должен располагаться внутри парного тега <frameset> и </frameset>. Число тегов <frame> должно совпадать с количеством тегов, определенных при описании фреймовой структуры. В рассматриваемом примере в теге <frameset cols="25%,75%"> определено два фрейма, поэтому в дальнейшем следует описание каждого из фреймов с помощью тега <frame>. Значение параметра src тега <frame> определяет адрес документа, который первоначально загружается во фрейм. В рассматриваемом случае в левый фрейм загружается документ с именем contents0.htm, а в правый фрейм - документ с именем ch.htm. В теге параметр name определяет имя фрейма, необходимое для указания, в какой фрейм загрузить документ. Если имя фрейма не задавать, то будет создан фрейм без имени, но сослаться на него из других фреймов будет нельзя.
Пример 2. Фреймовая структура с загружаемыми документами
Создадим документ, левая часть которого представляет оглавление, а в правую часть загружаются документы выбранного пункта оглавления. Документы, соответствующие пунктам оглавления, хранятся в разных файлах. При решении задачи экран по-прежнему разбивается на два фрейма. Левый фрейм занимает 30% ширины всего окна и будет содержать оглавление документов, которые могут быть просмотрены пользователем при выборе соответствующего пункта. Правый фрейм занимает большую часть окна просмотра и предназначен для отображения самих документов. При первоначальной загрузке оба фрейма делят окно просмотра по вертикали в соотношении 30% и 70%. Данное соотношение может меняться при просмотре. Каждый из фреймов имеет свою полосу прокрутки, обеспечивающую просмотр всего документа. При выборе ссылки в левом фрейме соответствующий документ будет загружен в правый фрейм. Такая структура позволяет одновременно видеть на экране и оглавление документов, и сами документы. Пусть оглавление документа содержит шесть пунктов и располагается в файле с именем contents.htm. Требуется, чтобы файл, содержащий оглавление, загружался в левый фрейм. Файлы с именами ch1.htm, ch2.htm, ..., ch6.htm содержат документы, соответствующие пунктам оглавления. Фреймовая структура мало отличается от той, какая была рассмотрена в предыдущем примере (листинг 2, а).
В правый фрейм первоначально загружается файл с именем empty.htm. Если сразу неизвестно, какой файл загружать во фрейм, то можно использовать файл, содержащий HTML-код (листинг 2, б).
Листинг 2, б. Документ для первоначальной загрузки <HTML>
<HEAD>
<TITLE>Пустой документ</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
В левый фрейм помещается Оглавление, которое содержит ссылки на документы, расположенные в различных файлах. Оглавление может быть сформировано так, как указано в листинге 2, в.
Листинг 2, в. Оглавление, загружаемое в левый фрейм <HTML>
<HEAD>
<TITLE>Оглавление</TITLE>
</HEAD>
<BODY background="decor.gif" bgcolor=silver>
<base target=right>
<h3>Оглавление</h3>
<OL>
<LI><A href="ch1.htm">Ocновы языка HTML </A>
<LI><A href="ch2.htm">Графика </A>
<LI><A href="ch3.htm">Изoбpaжeниe-кapтa </A>
<LI><A href="ch4.htm">Списки </A>
<LI><A href="сh5.htm">Таблицы </А>
<LI><A href="ch6.htm">Фpeймы </A>
</OL>
</BODY>
</HTML>
Пример 3. Обмен содержимым фреймов
Создадим документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область содержит два фрейма, нижняя область состоит из одного фрейма. В нижней области располагается кнопка, которая обменивает содержимое верхних фреймов. Область окна просмотра сначала разбивается на два фрейма по горизонтали. Параметр rows="список значений" задает количество и размеры фреймов по горизонтали. При описании тега <frameset rows="*,50"> определяется, что размер нижнего фрейма 50 пикселов, остальное пространство отводится под верхний фрейм. Верхний фрейм в свою очередь делится по вертикали на два фрейма, размеры которых заданы в процентах к области просмотра. HTML-код документа, создающий описанную фреймовую структуру, выглядит так, как указано в листинге 3, а.
Листинг 3, а. Три фрейма с кнопкой для обмена содержимого фреймов <HTML>
<HEAD>
<TITLE>Три фрейма с кнопкой для обмена</TITLE>
</HEAD>
<frameset rows="*,50">
<frameset cols="55%,45%">
<frame src=lpict.htm name=left>
<frame src=rtext.htm name=right>
</frameset>
<frame src=but1.htm name=butt>
</frameset>
</HTML>
Для ссылки на фреймы будем, как и ранее, использовать имена. Сначала следует запомнить имя файла, загруженного в левый фрейм. Для этого используется переменная l. Затем в левый фрейм загружается документ, расположенный в правом фрейме. Это достигается выполнением оператора присваивания
top.left.location=top.right.location
И, наконец, в правый фрейм загружается тот документ, адрес которого запомнили в переменной l. HTML-код для нижнего фрейма представлен в листинге 3, б.
Листинг 3, б. Сценарий для нижнего фрейма <HTML>
<HEAD>
<TITLE>Кнопка для смены содержимого фреймов</TITLE>
<script>
<!--//
function chframe()
{ var l=top.left.location
top.left.location=top.right.location
top.right.location=l
}
//-->
</script>
</HEAD>
<BODY background="decor.gif" bgcolor=silver>
<CENTER>
<FORM name=form1>
<input type="button" value=Обмен onclick="chframe()">
</FORM>
</CENTER>
</BODY>
</HTML>
При щелчке по кнопке Обмен содержимое верхних фреймов поменяется местами. Функция, осуществляющая обмен содержимым фреймов, может быть описана следующим образом:
function chframe() { var l=top.frames[0].location top.frames[0].location=top.frames[1].location top.frames [1].location=l }
Браузер Microsoft Internet Explorer разрешает использование так называемых плавающих фреймов, описание которых может быть расположено в тексте обычного HTML-документа. Для определения плавающего фрейма используется тег <iframe>. В указанном теге могут встречаться те же параметры, что и в теге описания обычных фреймов, кроме параметра noresize, т. к. размер плавающего фрейма не может быть изменен пользователем. Браузеры, не поддерживающие тег <iframe>, отображают записанную между тегами <iframe> и </iframe> информацию. Для плавающих фреймов с помощью параметров можно задавать размеры фрейма, горизонтальное выравнивание, размер отступа содержимого фрейма от границ. В следующем примере приведено описание плавающего фрейма и заданы параметры. Фрейм имеет высоту 320 пикселов, занимает по ширине 60% окна, расположен справа от текста, полосы прокрутки будут установлены в случае, если документ не станет помещаться во фрейм. Содержимое фрейма должно быть отделено от границы по горизонтали и вертикали на заданное число пикселов.
1. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление в виде списка, при выборе пунктов которого соответствующий раздел должен появляться в нижней части окна. 2. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: левую и правую. В левой области поместите оглавление, при выборе пунктов которого соответствующий пункту раздел должен появляться в правой части окна. Оглавление представьте с помощью графического вертикального меню.
