Что ж, с контейнерным Web-дизайном все в основном ясно. Давайте попрактикуемся. Переделаем наши Web-страницы с применением контейнерного Web-дизайна — "легкого", простого, современного.

Сначала разработаем схему расположения на Web-страницах соответствующих контейнеров. Лучше всего нарисовать ее на бумаге или в программе графического редактора.

Классическая схема 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 со всеми нужными исправлениями.

Сохраним 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: <высота>