Сформулируем список параметров для нашей новой полосы навигации.
— Шрифт — Arial. Пусть полоса навигации будет отлична от обычного текста.
— Размер шрифта — 14 пунктов. Полоса навигации должна быть заметна.
— Символы шрифта — только прописные. Так полоса навигации станет еще заметнее.
— Маркер — отсутствует. В полосе навигации маркеры не нужны.
Поскольку полоса навигации будет присутствовать на каждой Web-странице в единственном экземпляре, для ее оформления мы применим именованный стиль (см. главу 7). Дадим ему имя navbar. CSS-код приведен в листинге 9.3.
Листинг 9.3
#navbar { font-family: Arial, sans-serif; font-size: 14pt; text-transform: uppercase; list-style-type: none }
Поместим этот код в самом конце таблицы стилей main.css.
Чтобы привязать именованный стиль к тегу, следует указать его имя в качестве значения атрибута тега ID — это мы знаем из главы 7. Так и сделаем:
<UL ID="navbar">
.
Осталось сохранить Web-страницу и таблицу стилей и проверить получившийся результат в Web-обозревателе. Что ж, новая полоса навигации заметно лучше старой.
Параметры курсора
CSS предоставляет нам одну очень интересную возможность — указание вида курсора мыши, который он примет при наведении на данный элемент Web-страницы. Это может быть полезно при создании специальных эффектов.
Атрибут стиля cursor устанавливает форму курсора мыши при наведении его на данный элемент Web-страницы. Данный атрибут можно применить к любому элементу Web-страницы, как блочному, так и встроенному:
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit
Как видим, возможных значений у атрибута cursor очень много, к тому же многие из них на практике применяются крайне редко. Поэтому мы рассмотрим только самые необходимые.
— auto — Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.
— default — курсор по умолчанию, обычно стрелка. none — курсор мыши вообще не отображается. help — стрелка с вопросительным знаком.
— pointer — "указующий перст". Обычное поведение при наведении курсора мыши на гиперссылку.
— progress — стрелка с небольшими песочными часами. Обозначает, что в данный момент работает какой-то фоновый процесс.
— wait — песочные часы. Обозначает, что в данный момент Web-обозреватель занят.
— text — текстовый курсор. Обычное поведение при наведении курсора мыши на фрагмент текста.
Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь.
Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации:
#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-странице — они могут только следовать друг за другом сверху вниз. В-третьих… а вот об этом
