Создание полосы навигации

Создание полосы навигации

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

Еще в главе 6 мы узнали, что полоса навигации может быть горизонтальной или вертикальной, может формироваться в одном абзаце, с помощью набора абзацев, списка или таблицы. Для набора абзацев каждая гиперссылка полосы навигации представляет собой один абзац, для списка — отдельный его пункт, а для таблицы — отдельную ее ячейку. В данный момент наша полоса навигации представляет собой один абзац.

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

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

Листинг 9.2 содержит фрагмент HTML-кода Web-страницы index.htm, формирующий новую полосу навигации.

Листинг 9.2

<UL>

<LI><A HREF="index.htm">HTML</A></LI>

<LI><A HREF="css_index.htm">CSS</A></LI>

<LI><A HREF="samples_index.htm">Примеры</A></LI>

<LI><A HREF="about.htm">О разработчиках</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-обозревателе. Что ж, новая полоса навигации заметно лучше старой.