Сущность контейнерного Web‑дизайна

Контейнерный Web‑дизайн для размещения отдельных фрагментов содержимого Web‑страниц использует блочные контейнеры, с которыми мы познакомились в начале этой главы. Отдельные контейнеры создаются для заголовка Web‑сайта, полосы навигации, основного содержимого и сведений об авторских правах. Если основное содержимое имеет сложную структуру и состоит из множества независимых частей, для каждой из них создают отдельный контейнер.

Для задания различных параметров блочных контейнеров предусмотрены специальные атрибуты стиля CSS. К таким параметрам относятся размеры (ширина и высота), местоположение контейнеров и их поведение при переполнении. Также мы можем задать для контейнеров цвет фона, создать отступы и рамки, чтобы их выделить (о параметрах отступов и рамок речь пойдет в главе 11 ).

И что, контейнерный Web‑дизайн так уж хорош? Давайте рассмотрим недостатки трех старых принципов Web‑дизайна и выясним, сможет ли он их решить.

– Непритязательный вид и линейное представление Web‑страниц – у текстового Web‑дизайна. Мы можем расположить контейнеры на Web‑странице практически как угодно и поместить в них произвольное содержимое: текст, таблицы, изображения, аудио‑ и видеоролики и даже другие контейнеры. А CSS позволит нам задать для них практически любое представление.

– "Монолитность" Web‑страниц – у текстового и табличного Web‑дизайна. Современные Web‑обозреватели позволяют с помощью специально созданного поведения загрузить в контейнер Web‑страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое. Мы займемся этим в главе 18 .

– "Нестандартность" фреймов – у фреймового Web‑дизайна. Контейнеры и соответствующие теги официально стандартизированы комитетом W3C и обрабатываются всеми Web‑обозревателями одинаково.

– Громоздкость HTML‑кода – у табличного Web‑дизайна. HTML‑код, формирующий контейнеры, исключительно компактен. Как мы уже знаем, блочный контейнер формируется всего одним парным тегом <DIV>.

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

И что, контейнерный Web‑дизайн так хорош? И он совсем не имеет недостатков? Увы, ничего совершенного в мире нет…

Контейнерный Web‑дизайн проигрывает табличному в возможности реализации сложного дизайна Web‑страниц. Таблица позволяет создать на Web‑странице множество колонок разной ширины, содержащих разное содержимое. Чтобы сделать это с помощью контейнеров, скорее всего, придется применять вложенные друг в друга контейнеры, сложные стили и, возможно, поведение, которое уже после окончания загрузки Web‑страницы располагает контейнеры в нужных местах. Это, пожалуй, единственный недостаток контейнерного Web‑дизайна.

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