HTML / 11. Фреймы

Макетирование фреймов

Макетирование фреймов подобно макетированию таблиц. Используя тег <frameset>, можно расположить фреймы по строкам и столбцам, задавая одновременно их абсолютные или относительные размеры.

Тег <frameset>
Тег <frameset> позволяет определять набор фреймов и управлять их размерами и обрамлением. Используйте тег <frameset> для определе-ния наборов фреймов. Тег <frameset> допускает вложения, что предоставляет богатые возможности для макетирования.

Используйте во фреймовых документах тег <frameset> на месте тега . Во фреймовом документе не может быть никакого другого содержимого, помимо тегов <head> и <frameset>. Попытка добавить описание фреймов в обычный документ, содержащий раздел , может повлечь за собой непредсказуемое поведение броузера.

Атрибуты rows и cols
В теге <frameset> обязательно должен присутствовать, по меньшей мере, один из двух атрибутов: rows или cols. Они определяют число и размер столбцов (cols) или строк (rows), в которые упорядочены фреймы и вложенные наборы фреймов. Оба атрибута принимают в качестве значений заключенные в кавычки списки величин, определяющих либо абсолютную (в пикселах), либо относительную (в процентах от оставшегося пространства) ширину (для столбцов) или высоту (для строк) фреймов. Число элементов в списке определяет число строк и столбцов с фреймами, которые броузер отобразит в окне фреймового документа.

Как и в случае с таблицами, броузер попытается выполнить указания относительно размеров фреймов с наилучшей возможной точностью. Броузер тем не менее не станет растягивать основное окно, если описанный набор фреймов в нем не помещается, как и не оставит в окне пустого места, если описанный набор фреймов не заполняет всего окна. Вместо этого броузер выделит каждому фрейму пространство, пропорциональное описанным ширине и высоте, и в точности заполнит все окно документа. (Заметили ли вы, что в окне фреймового документа нет полос прокрутки?)

Например:
<frameset rows="150,300,150">

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

Выражение размеров строк и столбцов в процентах от размеров окна представляется более осмысленным. К примеру, нижеприведенный текст функционально идентичен предыдущему:

<frameset rows="25%,50%,25%">

Разумеется, если сумма процентных значений не равна 100 процентам, броузер автоматически и пропорционально изменит размеры строк, компенсируя несоответствие. Если вы похожи на нас, то умение складывать числа – не самая сильная ваша сторона. Возможно, некоторые конструкторы фреймов тоже встречаются с этим затруднением, вот почему они включают очень удобную звездочку в списки значений атрибутов rows и cols в теге <frameset>. Звездочка предписывает броузеру установить размеры соответствующих строки и столбца такими, чтобы заполнить оставшееся после размещения смежных фреймов место в окне.

К примеру, если броузер встречает следующий тег:

<frameset cols="100,*">

он создает столбец фиксированной ширины в 100 пикселов, а затем создает столбец, занимающий все оставшееся в окне пространство. Вот более интересный пример макетирования:

<frameset cols="10,*,10">

Этот тег создает два очень узких столбца по краям окна и предоставляет оставшееся посередине место второму столбцу. Звездочку можно использовать неоднократно в списке размеров строк или столбцов. В этом случае соответствующие строки и столбцы делят
доступное пространство поровну. К примеру:

<frameset rows="*,100,*">

создает в середине окна строку высотой в 100 пикселов и строки одинаковой высоты под и над ней.

Если перед звездочкой поставлено целое число, соответствующая строка или столбец получит пропорционально большую долю свободного пространства. К примеру:

<frameset cols="10%,3*,*,*">

создает четыре столбца. Первый столбец занимает 10 процентов всей ширины окна. Затем броузер отведет второму столбцу 3/5 оставшегося пространства, а третьему и четвертому столбцам – по 1/5 оставшегося пространства.

Использование звездочки (особенно с числовым префиксом) облегчает распределение свободного пространства в окне броузера.Имейте также в виду, что, если только это не будет явно запрещено, броузер позволит пользователю изменять размеры отдельных строк
и столбцов фреймового документа, а следовательно, изменять относительную долю пространства, которое занимает каждый фрейм в окне броузера этого пользователя. Чтобы предотвратить эти изменения, используйте атрибут noresize для тега <frame>.

Атрибуты border, frameborder, framespacingи bordercolor
Популярные броузеры предоставляют дополнительные атрибуты, расширяющие возможности тега <frameset>, которые можно использовать для определения и варьирования параметров рамок, окружающих фреймы. Стандарты HTML 4 и XHTML предлагают устанавливать эти свойства обрамления при помощи каскадных таблиц стилей (Cascading Style Sheet, CSS).

По умолчанию любой фрейм в наборе фреймов окружается тонкой «трехмерной» рамкой. Вы можете сделать эти рамки толще или вовсе избавиться от них с помощью атрибута border тега <frameset>.

Нулевое значение атрибута border убирает рамки. Значение 1 задает толщину, принятую по умолчанию. Чтобы одновременно увеличить толщину рамок у всех фреймов в наборе, присвойтеатрибуту border целое число, превышающее 1. Атрибут frameborder со значением 1 или yes включает вывод рамок, а значение 0 или no убирает их. Атрибут framespacing с целочисленнымзначением 1 и более увеличивает рамку между фреймами. Для чего нужны два отдельных атрибута, дающие тот же эффект, что и один атрибут border? Причины, главным образом, исторические. Достаточно сказать, что некоторая путаница существует до сих пор. Все популярные броузеры поддерживают атрибут border для тега <frameset>, так что пользуйтесь им, а не альтернативами.

Все популярные броузеры, кроме Opera (причины «отступничества» этого броузера неизвестны), позволяют вам управлять цветом рамок фреймов с помощью атрибута bordercolor. В качестве значения он принимает стандартное название цвета или шестнадцатеричный триплет. Например, рамки фреймов имеют светло-зеленый цвет, соответствующий RGB-значению «00CC00». (Для ясности мы увеличили ширину рамок с помощью атрибута border.) Полный список названий цветов и соответствующих значений приведен в приложении G.

Фреймы и JavaScript
Все популярные броузеры поддерживают обработчики событий Java-Script-, позволяющие вашим фреймовым документам реагировать на первоначальную загрузку и на изменения размеров фреймов (onLoad); на выгрузку документа пользователем (onUnload); на перемещение фокуса ввода от окна, содержащего фреймовый документ, к другому объекту, например к другому окну (onBlur); на активизацию окна, содержащего фреймы (onFocus). Включенные в виде атрибутов в тег <frameset>, эти обработчики событий принимают в качестве значений заключенные в кавычки списки JavaScript-команд и вызовов функций. Например, можно уведомить пользователя о том, что все содержимое наконец загружено в соответствующие фреймы большого набора фреймов:

<frameset onLoad="window.alert('Все необходимое загружено.

Вы можете продолжать просмотр.')">Эти четыре атрибута могут использоваться и в теге .

Другие атрибуты тега <frameset>
Подобно большинству стандартных тегов тег <frameset> допускает использование с ним четырех стандартных атрибутов: class, style, title и id.

Используйте атрибут class для ассоциирования заранее определенного класса стилей с этим фреймом и, в силу наследования стилей, с его содержимым в качестве альтернативы, используйте атрибут style для непосредственного определения стилей в теге <frameset>.

Атрибут id создает уникальный идентификатор фрейма, тогда как title создает название фрейма, которое может быть представлено пользователю или использовано невизуальным броузером.

Вложение тегов <frameset>
Можно создать достаточно сложную страницу, использовав только один тег <frameset>, но ее макет будет довольно пресным. Вкладывая в тег <frameset> верхнего уровня новые теги <frameset>, можно создать несимметричные фреймы и другие усложненные макеты.
К примеру, создадим макет из двух столбцов, в первом из которых будет две строки, а во втором – три, вложивдва тега <frameset> с описанием строк в тег <frameset> верхнего уровня, в котором описаны столбцы.

<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<frameset rows ="33%,33%,*">
<frame src="frame3.html">
<frame src="frame4.html">
<frame src="frame5.html">
</frameset>
</frameset>

Статьи по HTML на эту тему:

Встроенные фреймы
Модель XFrames
Окна и фреймы в качестве цели
Содержимое фреймов
Тег <noframes>

Вернуться в раздел: HTML / 11. Фреймы