Классическая схема Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.
Рис. 10.1. Классическая схема Web-дизайна
Откроем в Блокноте Web-страницу index.htm. Найдем в ее HTML-коде четыре важных фрагмента любой Web-страницы: заголовок Web-сайта, полосу навигации, основное содержимое и сведения об авторских правах. Поместим их в блочные контейнеры.
На рис. 10.1 показано, что заголовок Web-сайта предшествует полосе навигации, а не наоборот. Поэтому поменяем местами фрагменты HTML-кода, создающие эти контейнеры и их содержимое.
Впоследствии мы привяжем к созданным контейнерам стили, задающие их размеры и местоположение на Web-странице. Поскольку каждый из этих контейнеров присутствует на каждой Web-странице в единственном экземпляре, применим для этого именованные стили. Дадим им такие имена:
— cheader — стиль для контейнера с заголовком Web-сайта;
— cnav — стиль для контейнера с полосой навигации;
— cmain — стиль для контейнера с основным содержимым;
— ccopyright — стиль для контейнера со сведениями об авторских правах.
Здесь буква "c" обозначает "container" — контейнер. Так мы сразу поймем, что данные стили применяются именно к контейнерам.
Привязка именованного стиля к тегу выполняется путем указания имени этого стиля в качестве значения атрибута тега ID. Сделаем это для всех контейнеров.
В листинге 10.4 приведен фрагмент HTML-кода Web-страницы index.htm со всеми нужными исправлениями.
Листинг 10.4
<DIV ID="cheader">
<H1>Справочник по HTML и CSS</H1>
</DIV>
<DIV ID="cnavbar">
<UL ID="navbar">
<LI><A HREF="index.htm">HTML</A></LI>
<LI><A HREF="css_index.htm">CSS</A></LI>
<LI><A HREF="samples_index.htm">Примеры</A></LI>
<LI><A HREF="about.htm">О разработчиках</A></LI>
</UL>
</DIV>
<DIV ID="cmain">
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках
<DFN>HTML</DFN> и <DFN>CSS</DFN>.</P>
<HR>
.
<H2>Теги HTML</H2>
<P><CODE>!DOCTYPE</CODE>,
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>,
<CODE>BODY</CODE>, <CODE>EM</CODE>, <CODE>HEAD</CODE>,
<CODE>HTML</CODE>, <CODE><A HREF="tags/t_img.htm">IMG</A></CODE>,
<CODE>META</CODE>, <CODE>P</CODE>, <CODE>STRONG</CODE>,
<CODE><A HREF="tags/t_title.htm">TITLE</A></CODE>,
<CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></P>
</DIV>
<DIV ID="ccopyright">
<ADDRESS>Все права защищены.<BR>©
<A HREF="mailto: [email protected]">читатели</A>, 2010 год.</ADDRESS>
</DIV>
Сохраним Web-страницу index.htm и откроем ее в Web-обозревателе. Что-то изменилось по сравнению с тем, что было ранее? Ничего.
Стили, задающие параметры контейнеров
И неудивительно. Вспомним, что мы знаем о контейнерах, и блочных, и встроенных. Они никак не отображаются в Web-обозревателе!
Чтобы ощутить пользу от контейнеров, мы должны применить к ним стили. Именно для этого контейнеры и предназначены. Поэтому сейчас мы займемся атрибутами стиля, задающими параметры контейнеров. Атрибуты стиля и задаваемые ими параметры делятся на две группы.
Параметры размеров
Атрибуты стиля первой группы задают размеры контейнеров. Собственно, их можно применять не только в контейнерах, но и в любых других блочных элементах.
Атрибуты стиля width и height позволяют задать, соответственно, ширину и высоту элемента Web-страницы:
width: auto|<ширина>|inherit height: auto|<высота>|inherit
Мы можем указать абсолютное значение размера, воспользовавшись любой из доступных в CSS единиц измерения. Тогда размер элемента будет неизменным:
#cnavbar { width: 100px }
Можно задать относительное значение размера в процентах от соответствующего размера родительского элемента. При этом размер элемента будет изменяться при изменении размеров окна Web-обозревателя:
#cheader { height: 10 % }
Значение auto отдает управление этим размером на откуп Web-обозревателю (обычное поведение). В последнем случае Web-обозреватель установит такие размеры элемента Web-страницы, чтобы в нем полностью поместилось его содержимое, и не больше.
Если мы назначим для какого-либо элемента Web-страницы относительную ширину или высоту, нам могут пригодиться атрибуты стиля, указывающие минимальные и максимальные возможные размеры для этого элемента. Понятно, что при их задании значение размера не сможет превысить максимальное и стать меньше минимального.
Атрибуты стиля min-width и min-height позволяют определить минимальную ширину и высоту элемента Web-страницы:
min-width: <ширина>
min-height: <высота>
Значение ширины или высоты может быть как абсолютным, так и относительным. Пример:
TABLE { min-width: 500px; min-height: 300px }
Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальную, соответственно, ширину и высоту элемента Web-страницы:
max-width: <ширина>
max-height: <высота>
И здесь значение ширины или высоты может быть как абсолютным, так и относительным:
TABLE { max-width: 90 %; max-height: 60 % }
Параметры размещения. Плавающие контейнеры
Местоположение блочных контейнеров (и любых других блочных элементов) на Web-странице определяют два весьма примечательных атрибута стиля.
Изначально блочные элементы Web-страницы располагаются на ней по вертикали, строго друг за другом, в том порядке, в котором они определены в HTML-коде. Именно так располагаются блочные контейнеры, абзацы и заголовки на всех созданных нами Web-страницах.
Однако мы можем установить для блочного элемента выравнивание по левому или краю родительского элемента (блочного контейнера, в который она вложена, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны.
Атрибут стиля float как раз и задает, по какому краю родительского элемента будет выравниваться данный элемент Web-страницы:
float: left|right|none|inherit
Возможны три значения:
— left — элемент Web-страницы выравнивается по левому краю родительского элемента, а остальное содержимое обтекает его справа;
— right — элемент Web-страницы выравнивается по правому краю родительского элемента, а остальное содержимое обтекает его слева;
— none — обычное поведение элемента Web-страницы, когда он следует за своим предшественником и располагается ниже его.
Пример:
TABLE.left-aligned { float: left }
После применения данного стиля к таблице она будет выровнена по левому краю родительского элемента, а остальное содержимое будет обтекать ее справа.
А что если мы зададим одинаковое значение атрибута стиля float для нескольких следующих друг за другом блочных элементов? Они выстроятся по горизонтали друг за другом в том порядке, в котором они определены в HTML-коде, и будут выровнены по указанному краю родительского элемента. Настоящая находка!
Данный атрибут стиля обычно применяют для блочных контейнеров, формирующих дизайн Web-страниц. Такие контейнеры называют плавающими.
Возьмем атрибут стиля float на заметку. И пойдем дальше.
При создании контейнерного Web-дизайна, основанного на плавающих контейнерах, часто приходится помещать какие-либо контейнеры ниже тех, что были выровнены по левому или правому краю родительского элемента. Если просто убрать у них атрибут стиля float или задать для него значение none, результат будет непредсказуемым. Поэтому CSS предоставляет возможность однозначно указать, что данный блочный элемент в любом случае должен располагаться ниже плавающих контейнеров, предшествующих ему.
Для этого служит атрибут стиля clear:
clear: left|right|both|none|inherit
Как видим, доступных значений здесь четыре:
— left — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение left;
— right — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение right;
— both — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение left или right;
— none — обычное поведение. Если контейнеру, для которого указан данный атрибут стиля, предшествуют плавающие контейнеры, задавать это значение не рекомендуется.
Пример:
#ccopyright { clear: both }
Здесь мы задали для именованного стиля ccopyright (он применяется к контейнеру, содержащему сведения об авторских правах) расположение ниже всех контейнеров,
