Лабораторная работа «Оформление веб-сайта с использованием фреймовой структуры»
-
Понятие и назначение фреймов
Фреймы (от англ. frame — рамка) — самостоятельное окно. С помощью фреймов появляется возможность разбить одно большое окно (web страницу или же окно приложения) на несколько окон (фреймов), которые в свою очередь могут служить приемниками для независимых друг от друга документов (web страниц, текстов, изображений, видео и т.д.).
При использовании фреймов окно web страницы разделено на несколько областей, в каждую из которых загружен отдельный документ. Области фреймов ведут себя независимо друг от друга.
В окно левого фрейма обычно загружается файл с меню web страницы или программы, а в окне правого фрейма выводится соответствующий выбранному пункту меню документ. Примечательно, что структура фреймов позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в окне правого фрейма. В этом состоит основное преимущество использования фреймов в Html.
-
Описание фреймовой структуры страницы сайта
Согласно стандарту Html 4.01, для задания фреймовой структуры используются три элемента — Frame, Frameset и Noframes.
Iframe — встроенный фрейм в стандарте Html 5.
Создание классической структуры фреймов начинается с записи в Html код вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом Html документе, заменяющего его контейнера для будущих фреймов на основе элементов Frameset.
Важно: при использовании фреймов на web странице элемент Body использовать нельзя. Т.е. возможны два взаимоисключающих варианта — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа).
Документ frameset
Документ frameset описывает общую структуру окна, разделенного на фреймы. Это документ HTML, в котором теги <frameset> заменяют теги <body>. Тег <frameset> описывает число, расположение и размеры фреймов компонентов. Также внутри тега frameset находится два или более тегов <frame/>, которые идентифицируют и характеризуют фреймы и определяют исходные документы, заполняющие фреймы.
Тег <frameset>
Контейнерный тег <frameset> делит окно браузера на отдельные фреймы. Общий формат тега <frameset>:
<frameset
cols="n1[%],n2[%]"
rows="n1[%],n2[%]"
frameborder="1|0"
bordercolor="color"
framespacing="n"
> ...
</frameset>
-
Разбиение окна браузера на фреймы
Атрибуты cols и rows определяют компоновку фреймов в окне браузера. Cols используется для деления окна вертикально на два или более количество фреймов, а rows - для деления окна горизонтально на два или большее количество фреймов. Тег <frameset> может определять cols и rows.
Атрибут cols задает число и ширину фреймов в процентах от ширины окна браузера или как определенное число пикселей в ширину. Rows определяет число и высоту фреймов в процентах от высоты окна браузера или как определенное число пикселей в высоту. Обычно лучше использовать проценты для выражения размеров фреймов, так как они остаются пропорциональными, когда пользователь изменяет размер окна браузера.
Пример 1. Разбиение окна на два фрейма по вертикали:
<html>
<head>
<title>tourism.ru</title>
</head>
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="main.html">
<noframes> Ваш браузер не поддерживает фреймы </noframes>
</frameset>
</html>
Каждое окно фрейма, которое формируется внутри главного окна (web страницы или же окна приложения) создается с помощью отдельного элемента Frame. Тег Frame является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно фрейма.
Третий элемент структуры фреймов — Noframes. Тег Noframes парный и позволяет написать внутри текст, который будет обработан браузером и отображен на web странице только в том случае, если браузер не поддерживает фреймы. Например, в случае использования браузера для мобильных устройств.
В тег Noframes добавляют не только информацию о ситуации невозможности обработки фреймов, но и добавляют возможность перейти на другие страницы, где можно продолжить работу без использования фреймовых структур.
Элемент Frameset, используемый в структуре с фреймами вместо тега Body, занимает всю область просмотра, и уже внутри неё создаются окна фреймов с помощью элементов Frame.
Разделение всей области просмотра между несколькими окнами фреймов осуществляется с помощью добавления атрибутов к элементу Frameset. У тега Frameset два атрибута — Cols и Rows. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows — на горизонтальные фреймы или строки.
В качестве значений атрибутов Cols и Rows Html тега Frameset выступают числа, проставленные через запятую без пробелов. Эти числа задают пропорции тех фреймов, которые получатся в результате. Сколько будет написано чисел через запятую в атрибуте Cols или в атрибуте Rows, столько фреймов получится.
Пример разбиения окна на три вертикальных фрейма в пропорции 2:5:3.
<frameset cols="20%,50%,30%">
Сколько фреймов формируем, столько элементов Frame вводится между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:
Пример 2.
<html>
<head>
<title>tourism.ru</title>
</head>
<frameset cols="20%,50%,30%">
<frame>
<frame>
<frame>
</frameset>
</html>
Описанная фреймовая структура будет выглядеть так:
В данном примере размеры окон фреймов заданы в процентном соотношении от ширины области просмотра в случае атрибута Cols, или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Вместо процентов можно использовать числа, означающие ширину или высоту фреймов в пикселах.
Третий вариант пропорционального разделения пространства для фреймов вводится через звездочку «*» или звездочку с цифрой впереди, например, «5*» (для пяти равных фреймов).
Пример 3.
Разделим области просмотра на горизонтальные фреймы с помощью атрибута Rows:
<frameset rows="200,500,*">
Высота первой строки взята в 200 пикселей, второй — 500 пикселей, а третья строка окна фрейма будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».
Самостоятельно посмотрите, что получится, если использовать значение «*» с цифрой для деления в пропорции:
<frameset rows="2*,100,4*">
Задание 1. Опишите размерность полученных в результате фреймов.
Можно сочетать способы задания размеров окон фреймов в одном атрибуте:
<frameset cols="10%,100,4*,3*,2*">
В результате мы получим первую колонку фрейма шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся колонки с фреймами будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.
Если необходимо разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк с фреймами.
Пример 4.
<html>
<head>
</head>
<frameset cols="20%,80%">
<frame>
<frameset rows="10%,*" >
<frame>
<frame>
</frameset>
</frameset>
</html>
Разбиваем с помощью тега «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый элемент „frameset rows=“10%,*»" и уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset».
Итак, с помощью элемента Frameset и его атрибутов Cols и Rows сформирована структура фреймов и заданы их размеры.