Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Полоса навигации
Полоса навигации
Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.
Полоса навигации может быть расположена по горизонтали, вверху или внизу Web- страницы, или по вертикали, слева или справа. Горизонтальную полосу навигации можно сформировать с помощью обычного абзаца или таблицы с одной строкой и нужным числом ячеек (каждая гиперссылка располагается в своей ячейке таблицы). Вертикальную полосу навигации обычно формируют с помощью таблицы из одного столбца и нужного числа ячеек (опять же, каждая гиперссылка располагается в своей ячейке таблицы), набора абзацев (каждая гиперссылка представляет собой отдельный абзац) или в виде списка (гиперссылки представляют собой пункты этого списка).
Гиперссылки полосы навигации могут быть текстовыми или графическими. В последнем случае практически всегда применяют изображения-гиперссылки. Зачастую для изображений-гиперссылок реализуют особое поведение, заменяющее изображение другим при наведении на соответствующую гиперссылку курсора мыши. (О поведении Web-страницы мы поговорим в части III.)
Полосу гиперссылок всегда выделяют, чтобы привлечь к ней внимание посетителя. Ее могут выделить цветом текста и фона, рамкой, увеличенным размером шрифта или всем вместе. Все это реализуется с помощью задания соответствующего представления Web-страницы.
Давайте создадим на главной Web-странице нашего Web-сайта полосу навигации с гиперссылками, указывающими на другие его Web-страницы: посвященную CSS, содержащую список примеров и сведения о разработчиках. Для простоты реализуем ее в виде абзаца, содержащего нужные гиперссылки. Поместим ее в самом верху Web-страницы, перед заголовком (листинг 6.3).
Листинг 6.3
.
<BODY>
<P><A HREF="css_index.htm">CSS</A> |
<A HREF="samples_index.htm">Примеры</A> |
<A HREF="about.htm">О разработчиках</A></P>
<H1>Справочник по HTML и CSS</H1>
.
Как видим, наша первая полоса навигации очень проста — обычный абзац с набором гиперссылок, разделенных символом | (вертикальная черта). Ну так ведь и наш первый Web-сайт не слишком сложен…
При желании мы можем создать остальные Web-страницы нашего первого Web- сайта. Но не будем сильно в этом усердствовать — все равно мы его потом переделаем.
- 6.20.1 Полоса пропускания
- Создание полосы навигации
- Клавиши навигации
- Полная полоса навигации
- Генерирование полосы навигации
- Настройка верхней области навигации
- Настройка левой панели навигации
- Советы по навигации в Сети
- Устранение проблем, возникающих во время навигации
- Приемы навигации в файловом менеджере
- От «их» «лесных братьев» – к «нашим» «полосатикам»
- Оси навигации