Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации:

#navbar LI { cursor: pointer }

Что дальше?

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

В следующей главе мы познакомимся с блочными контейнерами — "коллегами" знакомых нам по главе 8 встроенных контейнеров. Мы выясним, как можно расположить их на Web-странице в нужном нам порядке и какие атрибуты стиля CSS для этого следует применять. Блочные контейнеры — чрезвычайно мощный инструмент, и мы уделим им много времени.

А еще в следующей главе мы всерьез займемся Web-дизайном.

ГЛАВА 10. Контейнерный Web-дизайн 

В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.

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

А для этого нам придется изучить новые элементы Web-страниц — блочные контейнеры. Правда, они не такие уж новые — с их встроенными "коллегами" мы познакомились еще в главе 8. Но именно блочные контейнеры дадут нам в руки инструмент современного Web-дизайна.

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

А напоследок мы получим от CSS очередной сюрприз — средства управления переполнением. Они пригодятся нам в случаях, если содержимое контейнера не помещается в нем, и не только…

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

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

Блочный контейнер формируется с помощью парного тега <DIV>, внутри которого помещают HTML-код, формирующий содержимое контейнера (листинги 10.1—10.3).

В листинге 10.1 мы поместили в блочный контейнер заголовок и два абзаца.

Листинг 10.1

<DIV>

<H3>Это заголовок</H3>

<P>Это первый абзац.<P>

<P>Это второй абзац.<P>

</DIV>

Листинг 10.2 иллюстрирует блочный контейнер, содержащий таблицу.

Листинг 10.2

<DIV>

<TABLE>

<CAPTION>Это таблица</CAPTION>

<TR>

<TH>Это первый столбец</TH>

<TH>Это второй столбец</TH>

</TR>

.

</TABLE>

</DIV>

А блочный контейнер, приведенный в листинге 10.3, может похвастаться самым "богатым" содержимым.

Листинг 10.3

<DIV STYLE="text-align: center">

<VIDEO SRC="film.ogg" CONTROLS>

</VIDEO>

<P>Щелкните кнопку воспроизведения, чтобы просмотреть фильм.</P>

</DIV>

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

Блочные контейнеры применяют значительно чаще, чем встроенные. Именно на блочных контейнерах основан контейнерный Web-дизайн, о котором сейчас пойдет разговор.

Основы контейнерного Web-дизайна 

Контейнерный Web-дизайн известен уже довольно давно. В настоящее время он постепенно вытесняет более старые разновидности Web-дизайна. И тому есть много причин.

Старые разновидности Web-дизайна и их критика

Раньше в Интернете господствовали три разновидности Web-дизайна: текстовый, фреймовый и табличный. Каждый способ имел свои достоинства и недостатки. Но все в той или иной мере проигрывают четвертой разновидности Web-дизайна — контейнерной.

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

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

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

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

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

Но ведь и заголовок Web-сайта, и полоса навигации, и сведения об авторских правах определяются в HTML-коде каждой Web-страницы. И код этот может быть очень объемным. И что выходит? Значительная часть HTML-кода каждой Web- страницы определяет элементы, которые не меняются от одной Web-страницы к другой!

Чем объемнее HTML-код Web-страницы, тем больше файл, в котором она хранится. Чем значительнее размер файла, тем дольше он загружается. Чем дольше файл загружается, тем больше придется посетителю ждать, пока запрошенная Web- страница появится на экране.

Нет ли способа загрузить не всю Web-страницу целиком, а только ее часть — собственно основное содержимое? К сожалению, текстовый Web-дизайн такого способа не предлагает…

Но выход, тем не менее, был найден в виде "нестандартного" расширения HTML — фреймов. Фрейм — это особый элемент Web-страницы, который выводит в указанном ее месте содержимое произвольной Web-страницы, интернет-адрес которой задается в его параметрах. Кроме того, были расширены возможности гиперссылок — теперь они могли выводить целевую Web-страницу в указанном фрейме.

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

Подобный Web-дизайн получил название фреймового. Он имел неоспоримое достоинство — резкое увеличение скорости загрузки Web-страниц. И поэтому широко применялся много лет, а кое-где остался и до сих пор.

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

Конкурентом фреймового Web-дизайна стал появившийся несколько позже табличный. Для формирования Web-страницы использовалась большая таблица HTML, в разные ячейки которой помещали заголовок Web-сайта, полосу навигации, различные фрагменты основного содержимого и сведения об авторских правах. Постепенно табличный Web-дизайн вытеснил фреймовый; до сих пор это самый популярный способ создания Web-сайтов.

Достоинства табличного Web-дизайна:

— Таблицы — стандартная часть языка HTML, а значит, можно добиться того, чтобы основанные на них Web-страницы отображались одинаково во всех Web- обозревателях.