Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Самоучитель по HTML и CSS - 19
Самоучитель по HTML и CSS
13. Создание фреймовНесмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы. Для создания фрейма используется тег <FRAMESET>, который заменяет тег <BODY> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <FRAME>, которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 13.1).
Рис. 13.1. Пример разделения окна браузера на два фрейма При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов. Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (листинг 13.1). Листинг 13.1. Файл index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Фреймы</title> </head> <frameset cols="100,*"> <frame src="menu.html" name="MENU"> <frame src="content.html" name="CONTENT"> </frameset> </html> В случае использования фреймов в первой строке кода пишется следующий тип документа. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Данный <!DOCTYPE> указывают браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер <HEAD> содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов. В данном примере окно браузера разбивается на две колонки с помощью параметра cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц. В теге <FRAME> задается имя HTML-файла, загружаемого в указанную область с помощью параметра src. В левое окно будет загружен файл, названный menu.html (листинг 13.2), а в правое — content.html (листинг 13.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью параметра name. Листинг 13.2. Файл menu.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее. Листинг 13.3. Файл content.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).
Рис. 13.2. Разделение страницы на три фрейма В данном случае опять используется тег <FRAMESET>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через параметр rows, где для разнообразия применяется процентная запись (листинг 13.4). Листинг 13.4. Три фрейма <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Как видно из данного примера, контейнер <FRAMESET> с параметром rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <FRAMESET>, который повторяет уже известную вам структуру из листинга 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены параметры scrolling="no" и noresize. Задание1. Создайте страницу с фреймами, как показано на рис. 13.3.
Рис. 13.3 2. Создайте страницу с фреймами, как показано на рис. 13.4.
Рис. 13.4 Рецепты CSSКак изменить вид написания чисел в списке и сделать, чтобы после каждого номера списка шла круглая скобка?По умолчанию нумерованный список имеет определенный вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 1.
Рис. 1. Вид нумерованного списка со скобкой Стили позволяют поменять вид нумерации списков с помощью стилевых параметров content и counter-increment. Вначале для селектора OL требуется задать counter-reset: item, это требуется для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счетчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевой атрибут list-style-type со значением none. Параметр content сам по себе не используется, как правило, он работает в сочетании с псевдоэлементами after и before. Так, конструкция LI:before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 1). Пример 1. Создание своей нумерации LI:before { Стилевое свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. Свойство counter-increment необходимо для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код приведен в примере 2. Пример 2. Изменение вида списка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Список</title> <style type="text/css"> OL { list-style-type: none; /* Убираем исходные маркеры */ _list-style-type: decimal; /* Нумерация для браузера Internet Explorer */ counter-reset: item; /* Обнуляем счетчик списка */ } LI:before { content: counter(item) ") "; /* Добавляем к числам скобку */ counter-increment: item; /* Задаем имя счетчика */ } </style> </head> <body> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> </ol> </body> </html> Данный пример прекрасно работает в браузерах Firefox и Opera. Про Internet Explorer лучше не вспоминать, поскольку он большую часть используемых стилевых параметров не понимает в принципе. Но чтобы не получилось явного различия при выводе списка в разных браузерах, специально для Internet Explorer в данном примере добавлен параметр _list-style-type: decimal. Эта запись работает только в указанном браузере и выводит традиционную нумерацию строк. Учтите, что код CSS с этой строкой перестает быть валидным.
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
