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

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

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

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

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


Число элементов в списке определяет число строк и столбцов с фреймами, которые броузер отобразит в окне фреймового документа.

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

Например:

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

Выражение размеров строк и столбцов в процентах от размеров окна представляется более осмысленным.


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


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

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


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


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


В этом случае соответствующие строки и столбцы делят
доступное пространство поровну. К примеру:


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

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


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

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

Атрибуты border, frameborder, framespacingи bordercolor
Популярные броузеры предоставляют дополнительные атрибуты, расширяющие возможности тега , которые можно использовать для определения и варьирования параметров рамок, окружающих фреймы.


Стандарты HTML 4 и XHTML предлагают устанавливать эти свойства обрамления при помощи каскадных таблиц стилей (Cascading Style Sheet, CSS).

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

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

Все популярные броузеры, кроме Opera (причины «отступничества» этого броузера неизвестны), позволяют вам управлять цветом рамок фреймов с помощью атрибута bordercolor.


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

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

Эти четыре атрибута могут использоваться и в теге .

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

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

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

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





Оцените статью: (0 голосов)
0 5 0

Статьи из раздела HTML на эту тему:
Встроенные фреймы
Модель XFrames
Обзор фреймов
Окна и фреймы в качестве цели
Содержимое фреймов

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