Шаг 2. Создание документа с вертикальными окнами

Фреймы

Краткие теоретические сведения

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

Фреймосодержащий документ не может иметь тела, т.е. тега <body>…</body> – он заменяется тегом <frameset>…</frameset>. При этом в окне браузера выводятся документы, указанные в тегах <frame> из контейнера <frameset>…</frameset>.

Для разделения рабочей области окна браузера на вертикальные окна (столбики) служит атрибут cols= тега <frameset>, а горизонтальные (строчки) – rows=. Размеры отдельных фреймов указываются через запятую либо в пикселях, либо в процентах от размера рабочей области браузера, либо символом «*» – все, что осталось в рабочей области. При этом, если размеры фреймов задаются в процентах от рабочей области браузера, то необходимо следить, чтобы их сумма была равна 100%, а если в пикселях – размеру рабочей области. Поэтому, чтобы не ошибиться размер одного из фреймов указывается символом «*». Например, запись rows="*,3*" говорит о том, что нижний фрейм будет в 3 раза выше верхнего. Одновременное указание атрибутов cols= и rows= приводит к табличному разделению рабочей области на фреймы. Для того, чтобы количество фреймов по горизонтали и по вертикали было различным, применяется вложенная друг в друга запись тегов <frameset>…</frameset>.

Атрибут тега <frameset> border= указывает толщину рамок в пикселях вокруг фреймов, а bordercolor= – их цвет. По умолчанию пользователь может изменять размеры фреймов, перетаскивая мышью их границы. Для запрета изменения размера фрейма служит атрибут noresize тега <frame>. Атрибут тега <frame> scrolling= управляет созданием полос прокрутки. По умолчанию он имеет значение scrolling="auto", т.е. если содержимое документа не помещается во фрейм, то в нем появляются полосы прокрутки; значение «yes» указывает на то, что полосы прокрутки будут отображаться всегда, даже если фрейм больше размера отображаемого в нем документа, а «no» – полосы прокрутки не будут отображаться никогда. Атрибуты тега <frame> marginwidth= marginheight= служат для указания отступов в пикселях по горизонтали и по вертикали, соответственно, между границей фрейма и его содержанием. Атрибут тега <frame> name= служит для присваивания имени фрейму. Это необходимо, в частности, если в него будет загружаться документ по гиперссылке, которая отображается в другом фрейме. Если же имея не указывается, то по умолчанию документ по гиперссылке грузится в тот же фрейм, что и гиперссылка.

Ход работы

Шаг 1. Создание документов для одновременного просмотра

1. В папке для создания HTML-документов на основе созданного в первой работе шаблона Web-страницы template.html, или создайте заново, такой файл и сохраните его под именем liza.html:

<html>

<head>

</head>

<body>

Лиза

</body>

</html>

2. В папке для создания HTML-документов создайте аналогичные Web-документы для следующих 4-х женских имен: Ира, Катя, Света и Наташа, соответственно, ira.html, katya.html, sveta.html и natasha.html.

Шаг 2. Создание документа с вертикальными окнами

1. На основе файла template.html, или создайте заново, HTML-документ frames.html, в котором слева направо в 3-х вертикальных окнах одинаковой ширины должны отобразиться персональные страницы Лизы, Кати и Светы. Он должен иметь такое содержание:

<html>

<head>

<title>Фреймы</title>

</head>

</frameset>

</html>

Обратите внимание, что в нем вместо тега <body> … </body> записан тег <frameset>…</frameset>.

2. Откройте в браузере созданный файл frames.html. В результате увидите примерно следующее:

3. Измените размер окон так, чтобы левое было шириной в 100 пикселей, правое – 20% от ширины окна браузера, а среднее – все остальное пространство. Для этого в файле frames.html отредактируйте строку:

следующим образом:

4. Просмотрите полученный результат в браузере.