Web-Anatomy.Ru

Десятилетию Рунета посвящается

К выпуску № 18 («Школа навигации»)

Для сегодняшнего выпуска я подготовил в качестве практического примера целый сайт. Простой, конечно, но показательный.

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

Прежде всего рекомендую обратить внимание на основное навигационное меню, размещенное в левой части страниц сайта.

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

Визуал в «шапке» страниц участвует в системе навигации как ссылка на главную страницу сайта — разумеется, на всех страницах, за исключением главной.

Внешние ссылки помечаются особым значком в виде загнутой стрелочки, устремленной вверх, в межзвездное пространство. Кроме того, при наведении курсора мыши на такую ссылку (и на значок стрелки) появляется соответствующая выплывающая подсказка. Внутренние же ссылки никак не выделяются.

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

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

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

#menucarrier {position: absolute; top: 103px; left: 0px; width: 100px; background-color: #ccc; overflow: hidden}
#menu {font-family: Arial Narrow; font-size: 12px; text-align: center; padding: 10px}
#menu p {margin-bottom: 10px}
#menu a {display: block; text-decoration: none}
#menu a:link, #menu a:visited {color: #000}
#menu a.above:link, #menu a.above:visited {color: #000; background-color: #999}
#menu a:hover, #menu a:active, #menu a.above:hover, #menu a.above:active {color: #fff; background-color: #666}
.current {color: #fff}

Блок с идентификатором menucarrier выполняет роль «подложки» для контейнера menu, содержащего ссылки навигационного меню — эта мера позволяет преодолеть известный баг пятых версий IE.

А так выглядит непосредственное описание одного из пунктов меню (соответствующего разделу сайта с жизнеутверждающим названием «Катакомбы»):

<!--#if expr="$DOCUMENT_URI=/^\/catacombs\/index.shtml/" -->
<p class="current">катакомбы</p>
<!--#elif expr="$DOCUMENT_URI=/^\/catacombs\//" -->
<p><a href="/catacombs/index.shtml" class="above">катакомбы</a></p>
<!--#else -->
<p><a href="/catacombs/index.shtml">катакомбы</a></p>
<!--#endif -->

Как видите, SSI позволяют не только вставлять содержимое одного файла в другой…

[Перейти к оглавлению]

© Артемий Ломов, 2004, 2005.