Тема 6. Фреймовые структуры
Основное содержание темы: Определение фрейма. Основные понятия о фреймовых структурах. Использование фреймов при создании HTML документов. Общий вид структуры документа, содержащего в составе фреймы. Основные тэги для построения фреймовых структур. Примеры фреймовых структур. Назначение плавающих фреймов. Тэги для вставки плавающего фрейма в HTML документа. Параметры для выравнивая и задания размеров плавающих фреймов.
Практическая работа 6. Создание фреймовых структур
Цель работы: Получить практический опыт создания простейших фреймовых структур.
Краткое теоретическое обоснование:
Часто возникает необходимость разместить в окне браузера несколько разделов или окон, называемых фреймами. В каждом фрейме отображается свой документ HTML. Например, в одном фрейме мы могли бы поместить ссылки на документы, которые должны показываться в другом фрейме. Иначе говоря, в одной части окна имеется оглавление большого документа, а в другой – содержимое того документа, ссылка на который была использована. Фреймы могут работать независимо, а также содержать ссылки друг на друга.
При использовании фреймов потребуется несколько HTML-файлов (минимум три HTML-файла). Один из них называется установочным. В нем описывается расположение (раскладка) фреймов в окне браузера и назначаются исходные HTML-файлы для каждого из фреймов, но нет собственного текста и графики. Исходные HTML-файлы выводятся во фреймы и могут содержать тексты, графику, ссылки и пр.
Установочный HTML-файл, как и любой другой, начинается с тэга <HTML> и заканчивается тэгом </HTML>. Для разделения окна на несколько фреймов используются тэги <FRAMESET> и тэг </FRAMESET>. Тэг <FRAMESET> должен быть размещен после тэга </НЕAD>, но перед тэгом <BODY>. Два фрейма можно расположить рядом друг с другом или друг над другом. Для задания способа расположения используется атрибут COLS (если рядом) или ROWS (если друг над другом). Чтобы разделить окно на два фрейма, указывают через запятые два числа. Эти числа определяют размеры фреймов. Для трех фреймов задаются три числа. Если нужно указать, что фрейм занимает все оставшееся место, используется символ звездочка (*). Размеры фреймов измеряются в пикселях или процентах. В последнем случае около числа пишется символ процента (%).
Можно использовать одновременно и горизонтальное, и вертикальное разбиение окна на фреймы. Это делается вложением тэгов <FRAMESET> друг в друга, т. е. размещением фреймов внутри фреймов. После задания расположения фреймов следует указать для каждого из них исходный HTML-файл. Напомним, что исходные файлы выводятся во фреймах. Для этой цели служит тэг <FRAME>, имеющий множество атрибутов, которые управляют свойствами фреймов.
Оборудование: Персональный компьютер
Последовательность выполнения:
1. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление в виде списка, при выборе пунктов которого соответствующий раздел должен появляться в нижней части окна.
2. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: левую и правую. В левой области поместите оглавление, при выборе пунктов которого соответствующий пункту раздел должен появляться в правой части окна. Оглавление представьте с помощью графического вертикального меню.
Практическая работа 7. Создание фреймовых структур
Цель работы: Получить практический опыт создания плавающих фреймовых структур.
Краткое теоретическое обоснование:
Браузер Microsoft Internet Explorer разрешает использовать уникальный тэг <IFRAME>, который реализует концепцию плавающих фреймов. В отличие от обычных фреймовых структур описание плавающих фреймов может встречаться в тексте обычного HTML-документа.
Браузеры, не поддерживающие тэг <IFRAME>, вместо фрейма будут отображать информацию, записанную между тэгами <IFRAME> и </IFRAME>.
В тэге <IFRAME> применяются точно такие же параметры, как и в тэге описания обычных фреймов <FRAME>. Единственным исключением является параметр NORESIZE, применение которого бессмысленно, так как размер плавающего фрейма не может быть изменён пользователем при просмотре документа.
Для задания расположения и размеров плавающего фрейма в документе можно использовать следующие дополнительные параметры: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и порядок использования совпадают с соответствующими параметрами для встроенных изображений, которые задаются тэгом <IMG>.
По сути, плавающий фрейм – это отдельный HTML-документ, который может иметь достаточный размер. При необходимости в окне плавающего фрейма появляются обычные полосы прокрутки.
Браузеры, не поддерживающие технологию плавающих фреймов, вместо отображения документа HTML выдадут текст, заключённый между открывающим и закрывающим тэгами. Концепция плавающих фреймов близка по идеологии к встроенным изображениям или таблицам. Здесь в нужное место HTML-документа целиком встраивается другой HTML-документ.
Оборудование: Персональный компьютер
Последовательность выполнения:
Задание 1. Выполните подготовительную работу: создав 3 страницы, для каждой из которых задайте свой цвет фона, заголовок 1 уровня «Страница №…» и произвольный рисунок, сохраните страницы под именами str1.html, str2.html, str3.html.
Задание 2.Создайте страницу, состоящую из 3 равных вертикальных областей. В каждой из которых отобразите соответственно содержимое 1, 2 и 3 страниц. Задайте ширину и цвет границ фреймов по желанию. Сохраните ее под именем vert.html.
Задание 3.Измените страницу, заменив вертикальноеделение на горизонтальное. Уберите ширину и цвет границ фреймов. В первом фрейме установите запрет на изменение его размера. Сохраните HTML-документ под именем gor.html.
Задание 4.Создайте HTML-документ под именем glav.html, состоящий из 2 вертикальных областей (размеры которых относятся, как 1:3).
В левой области должен отображаться HTML-документ c заголовком Оглавление и гиперссылки на 1, 2 и 3 страницы (str1.html, str2.html, str3.html). Гиперссылки, организуйте, таким образом, чтобы страницы 1, 2 и 3 отображались в правой области.
Задание 5.Создайте HTML-документ под именем str4.html: задайте заголовок 1 уровня «Страница №…» и определение «Фрейм (frame) – рамка, область страницы – позволяет разделять экран на несколько областей, в каждой из которых отображается содержимое отдельной страницы или Web-узла.».
Задание 6. Создайте HTML-документ под именем plav.html: задайте свой цвет фона, отцентрированный заголовок 1 уровня «Пример плавающего фрейма» и отцентрированный “плавающий” фрейм (шириной – 30%, высотой – 200 пиксель), отображающий содержимое страницы 4 (str4.html).
Задание 7.Создайте HTML-документ под именем ram.html, состоящий из 3 равных вертикальных областей, третью область разделите на две равные горизонтальные области. В каждой из которых отобразите соответственно содержимое 1, 2 , 3 и 4 страниц.
Задание 8. Продемонстрируйте преподавателю результаты работы: vert.html, gor.html, oglav.html, glav.html, plav.html, ram.html.