Сегодня мы рассмотрим один из наиболее актуальных вопросов при создании сайтов - построение меню. Страничек, на которых нет меню, почти не существует - и это правильно, поскольку отсутствие данного элемента на странице пугает пользователя и порождает в нем чувство потерянности, сходное с клаустрофобией. Присутствие же меню, наоборот, добавляет уверенности в завтрашнем дне и дает надежду все же обнаружить нужное в море информации, размещенной на сайте.
Сначала вкратце о том, какие меню используются в настоящее время. Да самые разные! Уже сложившиеся классические варианты - это текстовые списки линков или же аналогичные им стопки кнопочек. Чуть более новый и менее распространенный случай - использование карт изображений. Наконец, для фанатов прогресса существуют работающие на JavaScript`овом движке, оформленные в виде элемента формы <SELECT> выпадающие списки с кнопкой или без нее, перемещающие вас на выбранную страницу сразу же после установки нового значения в поле.
Классические варианты обсуждения не требуют - они уже проверены временем. Единственное замечание - если вы остановились на стопке кнопочек, то проследите, чтобы, во-первых, каждая кнопочка не занимала по 15 килобайт, а, во-вторых, чтобы все картинки кнопочек имели подпись в атрибуте ALT тега IMG. Некоторые пользователи наверняка захотят переместиться на нужную им страницу, не дожидаясь прокачки всех ваших графических изысков. И не забудьте в том же теге IMG указать атрибуты WIDTH и HEIGHT. В противном случае ваши кнопки (да и вообще любые картинки) будут появляться в виде маленьких квадратных объектов и лишь немного погодя обретать истинный размер, что смотрится до крайности неаккуратно.
Если вы используете текстовое меню, но некоторые пункты не вписываются по ширине в отведенное для них пространство и занимают две строчки, то можно, конечно, отделять пункт от пункта пустой строкой. Но выглядеть это будет не очень симпатично. Поэтому лучше прикрепить к началу каждого пункта по маленькому буллету - в виде стрелочки или кружочка, например. Они однозначно отделят один пункт от другого. Если вы любитель чисто текстового стиля представления информации, то можно в качестве буллетов использовать символы >, -, ->.
Что касается меню в стиле ImageMap, то тут следует учесть следующие моменты. Во-первых, не существует стандартизированного способа представления альтернативных надписей на картах изображений (хотя заставить появляться хинты конкретно в MS IE или Netscape все же можно, поэкспериментируйте с атрибутами ALT и TITLE тега AREA). Поэтому ваша карта должна прокачиваться быстро. Кроме того, вы в любом случае должны обеспечить альтернативные пути навигации по сайту. Во-первых, многие поставят крест на вашем сайте уже после 30 секунд ожидания загрузки картинки. Во-вторых, такой способ связи страниц может помешать корректному индексированию вашей страницы поисковиками - многие из них не понимают ссылок через ImageMaps.
Что касается поисковиков, то же можно сказать и об использовании фреймов и JavaScript для связи страниц. Поэтому во всех этих случаях следует оставлять альтернативный путь навигации. Хорошим решением может послужить построение так называемой карты сайта. Под этим названием понимают страницу, которая в структурированном (и это важно) виде содержит ссылки на все (или хотя бы на все ключевые) страницы сайта. Такая карта линкуется обычной гиперссылкой прямо к первой странице и дает возможность как пользователям, так и роботам поисковых серверов обойти все страницы вашего сайта, пользуясь лишь классическими ссылками в теге <A>.
Как разместить меню на странице? Обычно его прижимают к левому, верхнему или нижнему, краю. Правда, в последнее время появились сайты, у которых меню находится на странице справа. Видимо, это проявление авангардистского подхода к дизайну HTML-страниц. Так что если вы представитель революционно настроенной части общества - вешайте справа. Только учтите - закрепить там меню достаточно сложно...
Где бы ни висело ваше меню, необходимо позаботиться о двух вещах. Во-первых, чтобы оно всегда выглядело примерно одинаково (а лучше всего - вообще не менялось). Когда одно навигационное меню сменяется другим, пользователь чувствует себя так, как будто ему почву выбили из-под ног. Максимум, что вы можете себе позволить - это добавлять в меню новые подпункты, раскрывая содержимое текущего раздела. Однако вы никогда не должны удалять или переупорядочивать на разных страницах сами названия разделов. Кроме того, меню должно висеть на КАЖДОЙ странице сайта, причем всегда в одном и том же месте.
Последнее обстоятельство служит почвой для одной распространенной проблемы - если копия меню имеется в каждом HTML-документе, то как же обновлять всю эту пачку страниц? Существует несколько способов решения этой проблемы.
Способ первый - для профессионалов. Пишем программу на каком-нибудь языке программирования, которая будет во всех страницах находить текст старого меню и заменять его на новый. Способ отличный, и иногда, когда не лень, применяется на практике. Однако требует неплохого знания программирования.
Способ второй - для администраторов. Размещаем на нашем web-сервере CGI-скрипт, вставляющий меню в каждую страницу при ее передаче пользователю. Работает прекрасно, однако, по понятным причинам, не всегда может быть применен.
Способ третий - для людей без комплексов. Берем наше меню и вешаем в отдельный фрейм. Однако существует довольно широкая аудитория фреймоненавистников, она эту идею не поддержит. Они сбегут с вашего сайта, едва увидев, что он использует поганые frames, которые к тому же часто глючат, не говоря о том, что выглядят странно.
Способ последний - мой любимый. Используем JavaScript для врисовывания меню в страницу из отдельного файла. Вспомним, что JavaScript позволяет исполнять функции, не размещенные непосредственно в теле страницы, а подкачивающиеся из отдельного файла, как правило, с расширением js. Делается это при помощи атрибута SRC тега SCRIPT следующим образом:
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
где menu.js - имя подключаемого файла. В файле же этом разместим функцию ShowMenu(), рисующую наше меню. Реализовать ее можно по-разному: если вы не обладаете глубокими знаниями JavaScript и не собираетесь делать что-то действительно навороченное, можно обойтись с этой целью всего одним стандартным методом - document.writeln(). Он попросту врисовывает в исходный текст документа значение параметра - переменной или строковой константы, заключенной в двойные кавычки. Файл menu.js может выглядеть примерно так:
function ShowMenu()
{
document.writeln("<FONT SIZE=-2><I>");
document.writeln("<A HREF='doc1.html'>Menu Item 1</A><BR>");
document.writeln("<A HREF='doc2.html'>Menu Item 2</A><BR>");
document.writeln("</I></FONT>")
}
Думается, идея достаточно прозрачна. Обратите внимание на то, что в выводимых нами HTML-тегах символ (") повсеместно заменен символом ('). Это необходимо, чтобы удовлетворить синтаксису JavaScript.
Осталось выяснить, как теперь вывести меню в нашем документе. Это просто. Необходимо лишь в том месте, где оно должно появляться, вставить следующую строку с вызовом функции ShowMenu:
<SCRIPT LANGUAGE="JavaScript"> ShowMenu()</SCRIPT>
И меню будет отображено!
Полный текст документа может выглядеть, например, так:
<HTML> <HEAD> <TITLE>Page 1</TITLE> </HEAD> <BODY> <!--Загружаем меню --> <SCRIPT LANGUAGE="JavaScript" SRC=menu.js> </SCRIPT> <TABLE WIDTH="100%" BORDER=1> <TR><TD> <!-- А здесь его отображаем --> <SCRIPT LANGUAGE="JavaScript">ShowMenu()</SCRIPT> </TD> <TD><CENTER><FONT SIZE=+2><B>Document 1</B></FONT><CENTER></TD> </TR> </TABLE> </BODY> </HTML>
Создайте файлы menu.js и doc1.html с приведенным выше содержимым и посмотрите, как будет выглядеть doc1.html. Самое приятное - для того, чтобы изменить содержимое меню, нужно отредактировать только файл menu.js, а в HTML-документе (а точнее - документах, использующих это меню) ничего менять не надо!
Обращаю внимание на то обстоятельство, что все это будет работать только в JavaScript-совместимых браузерах, таких, как MS IE и Netscape. Кроме того, такие меню опять же не могут быть адекватно восприняты роботами поисковых серверов. Так что использование карты сайта и в этом случае обязательно.
Денис МАРГОЛИН,
[email protected],
welcome.to/ruspoetry/
Версия для печати
Горячие темы