2015-03-08
1063
Краткие теоретические сведения
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
- при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
- для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана;
- для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.
|
|
|
Приведенный список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер. Фреймы очень похожи на таблицы — и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа. Кроме того, отображаемая во фрейме страница может прокручиваться при просмотре независимо от других. Каждый фрейм по существу является отдельным "мини-браузером". В отличие от фреймов, вся структура которых всегда представлена на экране, таблицы могут полностью не помещаться в окне и быть просмотрены только по частям. Отсюда следует вывод, что если в HTML-таблицах общее число ячеек практически не ограничено и может достигать нескольких сотен, то число фреймов в документе обычно не превосходит нескольких единиц.
Правила описания фреймов
Перейдем теперь к рассмотрению правил записи тегов, используемых для документов с фреймовыми структурами.
Давайте для начала рассмотрим полный HTML-код, создающий документ с фреймами средней сложности:
Пример 1:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS="25%, 50%, 25 %">
|
|
|
<FRAME SRC="header.htm">
<FRAMESET COLS="25%, 75 %">
<FRAME SRC="list.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Ваш браузер не может отображать фреймы
</NOFRAMES>
</HTML>
Этот пример создает страницу с фреймами, показанную на рисунке 6.1. Как вы видите, этот HTML-код определяет четыре фрейма. Верхний фрейм занимает всю ширину страницы и содержит заголовок. Далее идут два центральных фрейма, один из которых расположен с левой стороны и занимает 25 процентов от ширины экрана, а второй занимает оставшееся место. Последний, четвертый фрейм занимает нижнюю четверть экрана. В каждый из фреймов загружается отдельный HTML-документ, имя которого определяется параметром SRC.
Как видно из примера, для описания структуры фреймов применяются теги <FRAMESET>, <FRAME> и <NOFRAMES>. Рассмотрим назначение этих тегов.
Рисунок 6.1- Документ с четырьмя фреймами
Тег <FRAMESET>
Фреймы определяются в структуре, называемой FRAMESET, которая используется для страниц, содержащих фреймы, вместо раздела BODY обычного документа. Web-страницы, составленные из фреймов, не могут содержать раздел BODY в своем HTML-коде. В свою очередь, страницы с разделом BODY не могут использовать фреймы. Контейнер из тегов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрейма. Внутри контейнера <FRAMESET> могут содержаться только ТЕГИ <FRAME> И вложенные теги <FRAMESET>.
Тег <FRAMESET> имеет два параметра: ROWS (строки) и COLS (столбцы) и записывается в следующем виде:
<FRAMESET ROWS="Список значений" COLS=" Список значений">.
Можно определить значения для ROWS или COLS, или обоих вместе. Необходимо определить, по меньшей мере, два значения хотя бы одного из этих параметров. Если другой параметр опущен, то его значение принимается равным 100%.Список значений параметров ROWS и COLS тега <FRAMESET> представляет собой разделенный запятыми список значений, которые могут задаваться в пикселах, в процентах или в относительных единицах. Число строк или столбцов определяется числом значений в соответствующем списке. Например, запись <FRAMESET ROWS="100,240,140">определяет набор трех фреймов. Эти значения представляют собой абсолютные значения в пикселах. Другими словами, первый фрейм (первая строка) имеет высоту 100 пикселов, второй — 240 и последний — 140 пикселов.
Задание значений размеров фреймов в пикселах не очень удобно. Здесь не учитывается тот факт, что браузеры запускаются в различных операционных системах и с различными разрешениями дисплеев. В то же время, можно определить абсолютные значения размеров для некоторых случаев, например, для отображения небольшого изображения с известными размерами. Лучшим вариантом будет задание значений в процентах или в относительных единицах, например:
<FRAMESET ROWS="25%,50%,25%">.
В этом примере создаются три фрейма, размещаемые как строки во всю ширину экрана. Верхняя строка займет 25 процентов от доступной высоты экрана, средняя строка — 50 процентов и нижняя — 25 процентов. Если сумма заданных процентов не равна 100%, то значения будут пропорционально отмасштабированы, чтобы в итоге получилось ровно 100%. Значения в относительных единицах выглядят следующим образом:
<FRAMESET COLS="*,2*,3*">.
Звездочка (*) используется для пропорционального деления пространства. Каждая звездочка представляет собой одну часть целого. Складывая все значения чисел, стоящих у звездочек (если число опущено, то подразумевается единица), получим знаменатель дроби. В этом примере первый столбец займет 1/6 часть от общей ширины окна, второй столбец — 2/6 (или 1/3), а последний — 3/6 (или 1/2).
Помните, что числовое значение без каких-либо символов определяет абсолютное число пикселов для строки или колонки. Значение со знаком процента (%) определяет долю от общей ширины (для COLS) или высоты (для ROWS) от окна просмотра, а значение со звездочкой (*) задает пропорциональное распределение оставшегося пространства.
|
|
|
Приведем пример, использующий все три варианта задания значений:
<FRAMESET COLS="100,25%,*,2*">.
В этом примере первый столбец будет иметь ширину 100 пикселов. Второй столбец займет 25 процентов от всей ширины окна просмотра, третий столбец — 1/3 оставшегося пространства и, наконец, последний столбец — 2/3. Абсолютные значения рекомендуется назначать первыми по порядку слева направо. За ними следуют процентные значения от общего размера пространства. В заключение записываются значения, определяющие пропорциональное разбиение оставшегося пространства. Если используется тег <FRAMESET>, в котором заданы значения и COLS, и ROWS, то будет создана сетка из фреймов.
Например:
<FRAMESET ROWS="*,2*,*" COLS="2*, *">
Эта строка HTML-кода создает сетку фреймов с тремя строками и двумя столбцами. Первая и последняя строки занимают 1/4 высоты каждая, а средняя строка — половину. Первый столбец занимает 2/3 ширины, а второй — 1/3.
Контейнер <FRAMESET> </FRAMESET> может быть вложен внутрь другого та-
кого же контейнера, как это было показано в начальном примере. Рассмотрим далее использование тега <FRAME>.
Тег <FRAME>
Тег <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тегов <FRAMESET> и </FRAMESET>. Например:
<FRAMESET ROWS="*,2*">
<FRAME>
<FRAME>
</FRAMESET>
Обратите внимание, что тег <FRAME> не является контейнером и в отличие от <FRAMESET> не имеет завершающего тега. Все определение одиночного фрейма выполняется одной строчкой HTML-кода. Необходимо записать столько тегов <FRAME>, сколько отдельных фреймов определено при задании тега <FRAMESET>. В предыдущем примере тегом <FRAMESET> задано две строки, поэтому потребовалось записать два тега <FRAME>. Однако этот пример, по существу, бесполезен, так как ни один из фреймов не имеет какого-либо содержания!
Тег <FRAME> имеет шесть параметров: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING И NORESIZE.
|
|
|
Приведем запись тега <FRAME> со всеми параметрами:
<FRAME SRC="url" NAME="window_name" SCROLLING=YES |NO| AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>
На практике в теге <FRAME> редко используются одновременно все параметры. Наиболее важный параметр — SRC (сокращение от слова source). Довольно часто в теге <FRAME> задается единственный параметр SRC. Например:
<FRAME SRC="url">.
Значение параметра SRC определяет URL-адрес документа, который будет загружен изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:
<FRAME SRC="sample.htm">.
Обратите внимание, что любой HTML-файл, заданный в описании фрейма, должен быть полным HTML-документом, а не фрагментом. Это означает, что документ должен иметь теги HTML, HEAD, BODY и т. д. Конечно, в качестве значения SRC может быть задан любой допустимый URL-адрес. Если, например, фрейм используется для отображения изображения в формате GIF, которое располагается на сервере, то следует записать:
<FRAME SRC="http: //www.BNTU.BY/example.gif ">.
Параметр NAME определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задается из другого фрейма, располагающегося на той же самой странице. Например:
<FRAME SRC="sample.htm" NAME= " Frame_l " >.
Такая запись создает фрейм с именем "Frame_l", на который может быть выполнена ссылка. Например:
<А HREF="other.htm" TARGET="Ргаtе_1">Щелкните здесь для загрузки документа other.htm во фрейм с именем Frame_l</A>.
Обратите внимание на параметр TARGET, который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа.
Параметры MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма. Записывается это следующим образом:
MARGINWIDTH="value",
где "value" — абсолютное значение в пикселах.
Например:
<FRAME MARGINHEIGHT= "5" MARGINWIDTH= "7">.
Данный фрейм имеет поля сверху и снизу по 5 пикселов, а слева и справа по 7 пикселов. Не забудьте, что здесь идет речь о полях, а не о рамках. Параметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.
Для фреймов будут автоматически создаваться и отображаться полосы прокрутки, если содержимое фрейма не помещается полностью в отведенном пространстве. Иногда это нарушает дизайн страницы, поэтому было бы удобно иметь возможность управлять отображением полос прокрутки. Для этих целей используется параметр SCROLLING. Формат записи:
<FRAME SCROLLING="YES|NO|AUTO">.
Параметр SCROLLING может принимать три значения: YES, NO или AUTO. Значение AUTO действует так же, как и в случае отсутствия параметра SCROLLING. Значение YES вызывает появление полос прокрутки вне зависимости от необходимости этого, a NO — запрещает их появление. Например:
<FRAME SCROLLING=YES>.
Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамке фрейма, то курсор примет форму, указывающую на возможность изменения размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться параметром NORESIZE:
<FRAME NORESIZE>.
Этот параметр не требует никаких значений. Естественно, когда задан параметр NORESIZE для одного из фреймов, то размер любого из смежных фреймов также не может быть изменен. Иногда, в зависимости от расположения фреймов, использования параметра NORESIZE в одном из фреймов будет достаточно, чтобы предотвратить возможность изменения размеров любого из них на экране.
Тег <NOFRAMES>
Возможность работы с фреймами не предполагалась ни в стандарте HTML 3.0, ни в HTML 3.2. Здесь до последнего времени складывалась достаточно типичная ситуация, когда реально используемые возможности активно применяются на многих WWW-страницах, однако не являются частью стандарта. Это означало, что браузеры вполне законно могли игнорировать фреймы.
С появлением стандарта HTML 4.0 ситуация изменилась — теперь поддержка фреймовых структур закреплена стандартом. Заметим, что большинство современных браузеров распознавали фреймы и до появления HTML 4.0. Тем не менее, необходимо предоставлять информацию пользователям, применяющим браузеры без поддержки фреймов. Для таких браузеров можно предусмотреть альтернативную информацию, которая записывается между парой тегов <NOFRAMES> и </NOFRAMES>. Это выглядит следующим образом:
<NOFRAMES>
весь HTML-документ
</NOFRAMES>
Все, что размещено между тегами <NOFRAMES> и </NOFRAMES>, будет отображаться браузерами, не имеющими возможностей поддержки фреймов. Браузеры с поддержкой фреймов проигнорируют всю информацию между этими тегами.
Заметим, что в реальной жизни разработчики HTML-страниц часто не используют возможности тега <NOFRAMES> для создания страниц без фреймовых структур, а просто создают две версии своих HTML-документов. Для такого варианта на стартовой странице обычно предлагается выбор загрузки документа с фреймовой структурой или без нее. Далее в зависимости от выбора пользователя загружается только один вариант документа.
Ход работы:
- Создать документ на основании текста программы приведенного в теоретической части (Пример 1).
- Создать фреймовую структуру следующего вида
| ФРЕЙМ 1: Заголовок сайта | |
| ФРЕЙМ 2: Список ссылок на фотографии студенческой группы. Фотографии открываются во ФРЕЙМЕ 3: | ФРЕЙМ 3: В этом фрейме открываются фотографии по ссылкам из фрейма 2 |
| ФРЕЙМ 4: В этом фрейме открываются подписи к фотографиям, открываемым во ФРЕЙМЕ 3. |
Размерами фреймов задаться самостоятельно.
Список использованных источников
1. Матросов А.В. HTML 4.0 / Матросов А.В., Сергеев А.О., Чаунин М.П.. - СПб.: БХВ-Петербург, 2004. - - 671 с.: ил.. - (В подлиннике)
2. ДеБольт Вирджиния HTML и CSS. Совместное использование / ДеБольт Вирджиния. - Москва: NT Press, 2006. - - 499 с.: ил.. - (Школа Web-мастерства)
3. Комолова Н.В. HTML: учебный курс / Комолова Н.В.. - Санкт-Петербург: Питер, 2007. - - 267 с.: ил.. - (Учебный курс)
4. Квинт И. HTML, XHTML и CSS на 100% / Квинт И.. - Санкт-Петербург [и др.]: Питер, 2011. - - 383 с.: ил., табл.. - (На 100%)
