Контейнерный Web-дизайн

Займемся контейнерным Web-дизайном - изучим элементы интернет-страниц — блочные контейнеры.

Освоим дополнительные атрибуты стилей, применяемых для задания параметров блочных контейнеров (их размеры и местоположение на Web-странице).

А в завершение получим от CSS  средства управления переполнением.

Блочные контейнеры

В блочном контейнере могут быть размещены от одного до нескольких блочных элементов таких как заголовок, абзац, таблица и др.

Для создания блочного контейнера применяется парный тег <DIV>, с помещенным внутри html-кодом - содержимым контейнера. (листинги 10.1—10.3).

В этом блочном контейнере размещен заголовок и два абзаца.

Контейнерный Web-дизайн

Здесь - таблица.

Блочные контейнеры

В этом - видеоролик и абзац. А еще добавили встроенный стиль, выравнивающий текст по центру. Видеоролик так же будет размещен по центру.

Видеоролик в блочном контейнере

Блочные контейнеры используются чаще, чем встроенные.


Web-дизайн прошедшего времени и его недостатки

 

Не так давно Web-программисты пользовались тремя основными направлениями контейнерного Web-дизайна: текстовым, фреймовым и табличным. Каждый по своему был хорош, но и имел недоработки. С появлением нового вида Web-дизайна - контейнерного, остальные уходят на второй план.

Текстовый контейнерный Web-дизайн - обычный текстовый документ: абзацы, заголовки, большие цитаты, текст фиксированного формата и таблицы. Основное его преимущество - простой html-код. Недостатки: нудный вид web-страницы, отсутствие средств размещения элементов на Web-странице - только следуют друг за другом.

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

Получается, что HTML-код каждой web-страницы почти одинаков (кроме основного содержимого), и при загрузке каждой страницы идет загрузка одной и той же части кода. А чем больше объем файла, тем дольше он загружается (тем дольше ожидание пользователя). Вот бы загружать не весь html-код, а лишь часть - основной контент.

Вот эту проблему текстовый Web-дизайн и не решает.

Фреймовый контейнерный Web-дизайн - выход из создавшейся ситуации. Фрейм выводит в отдельном месте страницы содержимое произвольной Web-страницы, адрес которой прописывается в его параметрах.

Страница сайта набор фреймов. Некоторые участки содержимого выводились в отдельные Web-страницы, адреса которых прописывались в параметрах их фреймов. В других страницах размещался лишь основной материал. Преимущество фреймового контейнерного web-дизайна — повысилась скорость загрузки страницы. Но есть и минусы: фреймы не стандартизированы и нет возможности изменить их структуру. Позже появилась новая разновидность web-дизайна — табличный.

Табличный контейнерный Web-дизайн. При создании web-страницы применяется таблица. Заголовок, авторские права, полоса навигации размещались по отдельным ячейкам этой таблицы. В дальнейшем табличный web-дизайн стал более популярным, чем фреймовый.

Преимущества:

— возможность одинакового отображения web-страниц во всех web-браузерах.

— форматирование таблиц и их ячеек стилями CSS.

сложные Web-страницы - размещение различных фрагментов содержимого, увеличение числа колонок текста.

Недостатки:

— все страницы опять имели повторяющиеся части html-кода, что отразилось на снижении загрузки страницы.

— большой и сложный html-код.

Так давайте же перейдем к изучению новой разновидности web-дизайна.


Сущность контейнерного 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-дизайна — "легкого", простого, современного.


Представление для нашего Web-сайта

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

Классическая схема контейнерного Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.

Схема контейнерного 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-дизайн

Сохраним Web-страницу index.htm и откроем ее в Web-обозревателе. Что-то изменилось по сравнению с тем, что было ранее? Ничего.