Фреймы. 
Основы языка Hypertext Markup Language (HTML)

Фреймы (frame — структура, рамка) позволяют разбить окно браузера на несколько независимых окон, в каждом из которых будет отображаться один HTML-документ.

Использование фреймов позволяет размещать статическую информацию (например, главное меню сайта, графический логотип фирмы, copyright, набор управляющих кнопок) в одном фрейме, а изменяющуюся — в другом.

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

Фреймы имеют следующие возможности:

• · Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов.
• · Каждый фрейм может иметь собственное имя (параметр name), позволяющее обращаться к нему из другого фрейма.
• · Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра).

Но тут же следует заметить, что система фреймирования не всегда правильно воспринимается большинством поисковых систем. Практика показывает, что количество посещений страничек с фреймами значительно меньше, чем точно тех же страничек, с совершенно тем же содержимым, но без использования фреймов.

Создание web-странички на основе фреймов

Создание web-странички на основе фреймов осуществляется в два этапа:

• 1. Создается html-файл (главный), в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.
• 2. Создаются отдельные html-документы, которые будут отображаться во фреймах.

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

Структура главного документа:

…

…

Между парными тэгами <FRAMESET> и </<strong>FRAMESET> создаётся фреймовая структура. Эти тэги используется вместо тэгов и .

Тег <frameset> имеет несколько параметров:

• · rows — определяет количество фреймов в окне браузера по горизонтали и соотношение размеров этих фреймов;
• · cols — определяет количество фреймов в окне браузера по вертикали и соотношение размеров этих фреймов;

Например,.

разбивает окно браузера на два вертикальных фрейма, ширина первого 100 пикселей, второго — вся оставшаяся ширина окна. Размер можно задавать в пикселях или процентах.

Предупреждение. Совместное использование параметров rows и cols может привести к непредсказуемым результатам. Например, код

может привести к ошибочной ситуации.

• · frameborder — определяет наличие рамки, обрамляющей фреймы (принимает значения «yes» или «no», по умолчанию frameborder="yes");
• · border — задает толщину рамки, обрамляющей фреймы (этот параметр нужен в том случае, если параметр frameborder="yes", измеряется в пикселях);
• · bordercolor — задает цвет рамки, обрамляющей фрейм.

С помощью тэга <FRAME> задаются атрибуты для каждого фрейма персонально.

Тэг имеет следующие параметры:

• · src — обязательный параметр, задает путь к файлу, который отображается в данном фрейме;
• · name — задает имя фрейма. Имя необходимо для того, чтобы в последствии можно было в этом же фрейме, отображать другие файлы (подробнее о нем написано ниже);
• · scrolling — определяет наличие полосы прокрутки во фрейме (принимает значения «yes» или «no», по умолчанию scrolling="yes")
• · noresize — отсутствие или наличие этого параметра говорит о том, можно или нельзя изменять размеры фрейма;
• · marginwidth, marginheight — задают отступ содержимого внутри фрейма по горизонтали и вертикали соответственно (измеряется в пикселях).

Файлы, которые отображаются во фреймах — это обыкновенные html_документы со стандартной структурой. Они могут содержать рисунки, таблицы, текст.

Упражнение 6.1

Создайте web-страничку, содержащую три горизонтальных фрейма: первый фрейм содержит таблицу, второй — рисунок, третий — отформатированный текст.

Для этого:

· Создайте файл главного документа — frames.html:

Пример окна с фреймами.

· Создайте файлы-фреймы table.html, pictures.html, text.html. Занесите в них соответствующую информацию.

Просмотрите файл главного документа в окне браузера (рис. 6.1).

Задание 6.1

Измените расположение фреймов с горизонтального на вертикальный.

Упражнение 6.2

Удалите полосу прокрутки у первого фрейма (рис. 6.2). Для этого у тэга, описывающего первый фрейм добавьте параметр scrolling="no".

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

Задание 6.2

С помощью параметра noresize тэга запретите возможность изменения размеров первого фрейма. Проверьте выполнение этого запрета — попробуйте передвинуть границу фрейма.

Задание 6.3

С помощью параметров bordercolor и border тэга у границы между фреймами задайте синий цвет и толщину в 5 пикселей.

Задание 6.4

С помощью параметра frameborder тега удалите границы между фреймами (рис. 6.3).

Задание 6.5

С помощью параметров marginwidth, marginheight тега в первом фрейме задайте горизонтальный отступ 30 пикселей, вертикальный — 50 пикселей.

Упражнение 6.3

Создайте страничку index.html, содержащую два фрейма, первый представляет собой меню и отображает содержимое файла menu.html, второй — отображает содержимое в зависимости от выбранной ссылки в меню (рис. 6.4).

Для этого:

· Создайте главный документ index.html.

Проанализируем его структуру. Главный документ представляет собой два вертикальных фрейма: левый — для меню (пусть его ширина — 200 пикселей) и правый — для отображения выбранных в меню файлов.

· Следовательно, при описании тэга будем использовать параметр cols:

· В левом фрейме будет отображаться содержимое файла menu. html:

· Изначально, в правом фрейме будет отображаться страничка с приветствием:

· Так как в правом фрейме содержимое будет изменяться в зависимости от выбранного пункта меню, присвоим ему имя (например, content) для дальнейшего обращения из фрейма-меню:

name="content" src= «greet.html">

· В результате выполнения всех действий, структура главного HTML-документа будет выглядеть так:

Использование фрейма в качестве меню.

• · Начинаем создавать файлы-фреймы.
• · Пусть файл menu.html содержит три ссылки — «первый фрейм», «второй фрейм», «третий фрейм», которые ссылаются на соответствующие файлы — first.html, second.html, third.html. Но чтобы эти файлы отображались в нужном фрейме (а именно в правом), нужно в каждой ссылке указать имя этого фрейма (content) через параметр target:

target="content" >первый фрейм.

• · Тем самым, мы сообщаем браузеру, что файл first.html нужно отобразить во фрейме с именем «content» (это имя мы присвоили правому фрейму в главном документе). В тело меню добавьте заголовок «Меню».
• · Создайте HTML-документ greet.html с заглавием «Приветствие», оформленным любым встроенным заголовком и текстом «Выберите пункт меню для перехода на соответствующую страничку».
• · Создайте файлы first.html, second.html, third.html. В теле каждого файла вставьте заглавие «Первая (Вторая, Третья) страничка» и текст «Поздравляем! Вы попали на первую (вторую, третью) страничку!»
• · Теперь откройте главный документ в браузере и проверьте работу меню. При выборе соответствующей ссылки в левом фрейме в правом должент отображается выбранный HTML-документ.

«Плавающий» фрейм (тег)

На страничке можно использовать так называемые плавающие фреймы. Это фрейм, вставленный в тело HTML-документа в виде отдельного окна (рис. 6.5).

Этот тип фреймов хорош тем, что его можно вставить в любой HTML документ. Даже в тот, у которого тело представлено не в виде фреймовой структуры, а в виде обычного тела .

«Плавающий» фрейм задается тэгом <IFRAME>. Например,.

Тэг имеет параметры, свойственные тэгу (src, frameborder, marginheight, marginwidth, name и scrolling) и параметры, свойственные тэгу Подробнее о параметрах тэга читайте в главе 3 «Графика в HTML» (align, width, height).

Упражнение 6.4

Создайте HTML-документ iframe.html с плавающим фреймом (см. рис. 6.5). Страничка плавающего фрейма должна содержать текст:

Пример.

В окне плавающего фрейма может находиться страница любого из миллионов сайтов мира. Нужно лишь в параметр src указать адрес этой странички.

Это может быть очень полезным, если Вы хотите показать посетителю какую-то страницу, не переходя на нее.

Данный тэг используется в случае, если браузер не поддерживает фреймы. Тэг размещается после тэга. Между тегами и можно коротко изложить содержание документа или перенаправить пользователя на альтернативный документ, не содержащий фреймов.

Создание более сложной структуры фреймов

При создании более сложной структуры фреймов используется вложенность конструкций одной в другую.

Вот несколько примеров создания фреймов более сложной структуры:

* 45% 55%
* 15% 85%
50% 50% 50% 50%

Задание 6.6

Создайте файл с предложенной фреймовой структурой:

Первый. Frame.	Второй. Frame.	Третий. Frame
Четвёртый. Frame

Фреймы должны содержать информацию разного характера (картинка, бегущая строка, списки и т. д.). У фреймов используйте рамки различных цветов и толщины, поля (отступы), полосы прокрутки.

Вопросы для повторения

• 1. Какая информация содержится в главном HTML-документе?
• 2. Какие тэги задают фрейм?
• 3. Что такое ?
• 4. Какие возможности дает использование фреймов?
• 5. Почему нежелательно использование фреймов в создании web-страничек?

Контрольное задание

Создайте страничку, рассказывающую, о том, чему вы уже научились на занятиях по HTML (см. рис. 6.6). Используйте горизонтальное расположение фреймов. Меню разместите в верхнем фрейме, к ссылкам используйте подсказки. В нижнем фрейме должен отображаться выбранный пункт меню: отформатированный текст, списки, бегущая строка, картинка, таблица, метки внутри документа.