HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Сохраним таблицу стилей и откроем Web-страницу index.htm в Web-обозревателе. Не бог весть какие изменения, но Web-странице они явно пошли на пользу.
Мы можем еще немного поэкспериментировать с изученными в этой главе атрибутами стилей. Правда, эксперименты долго не продлятся — слишком мало мы изучили атрибутов. Ну ничего, в следующей главе будет где разгуляться!..
Создание полосы навигации
Напоследок создадим для наших Web-страниц нормальную полосу навигации. Сейчас она у нас слишком уж простенькая.
Еще в главе 6 мы
Давайте выберем для формирования полосы навигации список — так сейчас поступают очень часто. И соответственно переделаем HTML-код, формирующий полосу навигации.
В главе 6, создавая первую полосу навигации, мы забыли добавить в нее гиперссылку, указывающую на Web-страницу index.htm, которая содержит собственно справочник по HTML. Но правила хорошего тона Web-дизайна требуют, чтобы полоса навигации содержала гиперссылки на все Web-страницы Web-сайта или, по крайней мере, на важнейшие. Поэтому добавим соответствующую гиперссылку в полосу навигации; сделаем это самостоятельно.
Листинг 9.2 содержит фрагмент HTML-кода Web-страницы index.htm, формирующий новую полосу навигации.
Листинг 9.2
<UL>
<LI><A href="#">HTML</A></LI>
<LI><A href="#">CSS</A></LI>
<LI><A href="#">Примеры</A></LI>
<LI><A href="#">О разработчиках</A></LI>
</UL>
Одно из важнейших правил Web-дизайна — полоса навигации должна отличаться от обычного текста. А полоса навигации, сформированная на основе списка, должна отличаться от обычного списка. Как это сделать? С помощью соответствующих стилей.
Сформулируем список параметров для нашей новой полосы навигации.
— Шрифт — 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-странички, несмотря на созданное нами шикарное представление, выглядят все еще крайне непрезентабельно. Настала пора оформить их как положено.