Создаeм путеводитель по сайту, используя JavaScript

Просто Строители

Он путешествовал по Крыму с путеводителем по Кавказу и очень удивлялся неточности путеводителя.
Эмиль Кроткий, <Отрывки из ненаписанного>

Введение

Итак, ваш сайт почти готов. Осталось совсем немного - обеспечить его навигацией, то есть предоставить потенциальным посетителям ваших страничек удобную возможность для переходов от одного раздела к другому. Считать это чем-то второстепенным - непозволительно даже начинающему сайтостроителю! Информация, размещенная на сайте, должна подкрепляться простотой доступа к ней. Согласитесь, сайт - это не игра класса квест, а посетитель - не блуждающий в лабиринтах главный герой.

Именно анализу различных методов создания навигации и посвящена данная статья. Кроме того, мы покажем, как реализовать эту важную деталь любого сайта с помощью языка Java Script.

Требования к навигации

На наш взгляд, разработка навигации по сайту должна отвечать нескольким простым и очевидным условиям:

1. 1. Удобство для посетителей.
2. 2. По возможности, краткий код.
3. 3. Легкость его модификации.
4. 4. Соблюдение стандартов.
5. 5. Реализация простыми средствами (не каждый готов освоить новый язык Web-программирования: SSI, CGI, etc).

Выбираем место для панели навигации

Сначала обсудим, где лучше всего расположить панель навигации.

Самый простой вариант: отдельная страница со ссылками. Она же, как правило, делается главной. Все остальные страницы дополняются ссылкой <Навигация> или <Главная страница>. На первый взгляд неплохо. Но имеется несколько существенных минусов:

1. Не у всякого посетителя хватит терпения дождаться, пока загрузится главная страница, с которой можно перейти на следующую.

2. Если внутри самой страницы много ссылок, найти линк на главную страницу будет нелегко.

3. Навигация на главной странице займет непозволительно много места.

Конечно, если ваш сайт представляет собой online-журнал или архив документации, то приведенные минусы покажутся несущественными. Но и в этом случае не помешало бы посетителям предоставить альтернативу.

Рекомендуется использовать панель со ссылками. Как правило, встречаются три варианта:

1. Панель навигации размещается вверху и внизу на каждой странице (рис. 1).

2. Панель навигации размещается справа или слева на каждой странице (рис. 2).

3. Комбинированное размещение панели навигации, совмещающее первый и второй варианты.

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

Определяемся с методом

Рассмотрим преимущества и недостатки методов создания навигации, а именно:

1. 1. Прописывание ссылок на каждой странице.
2. 2. Использование фреймов.
3. 3. Использование Java Script меню.

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

Вариант с фреймами выглядит предпочтительней для построения больших сайтов. Создаются фреймы просто, и с добавлением новых разделов уже не будет трудностей. Но у них имеются и недостатки:

- Ранние версии многих браузеров фреймы вообще не показывают.

- В новых браузерах положение не лучше. Каждый отображает их по-своему.

- Фреймы не позволяют дать конкретную ссылку на раздел. Приходится писать

http://www.site.com, раздел "Программирование", вместо http://www.site.com/programming.html. Следовательно, ни в один Web-обзор ваша страничка не попадет - кому хочется лезть к черту на кулички и искать там раздел <Программирование>. Намного удобнее щелкнуть по ссылке и сразу попасть в нужный раздел.

- Большинство поисковых систем их принципиально не понимает.

- А те, которые понимают, индексируют только страницу, размещенную в самом верхнем фрейме.

- Некоторые поисковые роботы (пауки, снипперы etc), встретив страницу меньше 5Kb, что характерно при использовании фреймов, - не желают тратить свою паутину, обижаются и уходят.

- Службы, позволяющие получать WWW-страницы по e-mail (WWW4Mail, W3 mail robot), тоже их не признают и присылают страницы в нетоварном виде (рис. 3):

- Фреймы - источники появления горизонтальной прокрутки в окне браузера, что считается дурным тоном.

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

И, наконец, остается рассмотреть третий вариант, на котором мы остановимся подробнее: навигация при помощи Java Script.

Создаем Java Script навигацию

Наша навигация будет сочетать в себе как табличный способ, так и фреймовый, но реализованный с помощью внешнего Java Script модуля, который представляет собой файл с расширением ".js". Сейчас мы осуществим это на практике.

Как ни странно, чтобы реализовать навигацию с помощью скриптов, достаточно самых элементарных знаний в программировании на Java Script.

Создайте новый файл при помощи любого невизуального HTML-редактора (забудьте о FrontPage и MS Word!). Если вы работаете в редакторе типа Home Site или Coffee Cup, удалите автоматически добавляемые теги. У Java Script совершенно другой принцип оформления.

Любую страницу вашего сайта Java Script понимает как объект под названием document. Для данного объекта существует метод writeln(), который позволяет вписывать любой HTML-код. Им мы и воспользуемся при прописывании ссылок на разделы.

Введем в наш только что созданный файл следующий код:

document.writeln("a href="index.html"" Главная страница"/a""br");

Пока достаточно. Впоследствии мы его дополним. Настало время сохранить Java Script модуль. В качестве имени укажите "panel.js" (естественно, без кавычек). Расширение ".js" является характерным признаком Java Script модулей.

Далее необходимо вставить нашу заготовку в страницу.

Помещаем панель навигации в страницу

Согласно определению скрипт (script) - это небольшая программка, которая вызывается из HTML-документа и интерпретируется браузером. Самым распространенным языком для их написания является Java Script - творение Netscape.

Для добавления скриптов в страницу имеется специальный тег "script". У него есть несколько параметров. В параметре language следует указать язык, на котором написан скрипт. В нашем случае это Java Script. Также в теге "script" имеется параметр scr, позволяющий импортировать Java Script-код из внешного js-файла.

Теперь мы обладаем достаточными познаниями, чтобы вставить панель навигации в страницы сайта. Если вы решили, что панель будет справа, то HTML-код будет выглядеть следующим образом:

Параметр valung="top" обеспечивает выравнивание пунктов меню по верху страницы. Если его не указывать, то пункты навигации будут расположены прямо посередине экрана, что вряд ли приемлемо.

В случае, когда навигацию предполагается размещать сверху и снизу, наш код будет выглядеть так:

А теперь уже можно посмотреть и оценить результаты нашей деятельности в каком-либо браузере.

Добавляем в панель навигации новые пункты

В принципе, самое сложное закончилось, а было ли оно? Чтобы добавить новые пункты на панель навигации, просто вставляйте выражение document.writeln() с необходимой ссылкой на раздел в модуль panel.js. Не забывайте только о прописывании тега переноса строки "br" после текста:

Замечено, будет быстрее грузиться.

Создаем подменю

Если в навигации предполагаются подменю - нет проблем. Достаточно вспомнить об операторе if, без которого не обходится ни один из более или менее серьезных языков программирования. Пишем в файл panel.js:

Действие этого кода следующее: если посетитель находится на странице с именем part1.html, у него появляется подменю со ссылками на подразделы. А теперь конкретнее.

Параметр document.url содержит URL документа.

Размер шрифта ссылок подразделов уменьшен, т. к. они должны отличаться от ссылок на основные разделы.

Комментарии в Java Script следуют после двух слэшей "//", это перешло по наследству от C++.

Адрес http://www.yoursite.ru/part1.html, разумеется, обозначает URL вашего сайта. Если вы тестируете страничку на локальном компьютере, временно впишите полный путь к файлу part1.html на винчестере. Например: file:///D:\WebWorks\mysite\part1.html.

Чтобы ссылки на подразделы не были выравнены по одному краю со ссылками на основные разделы, добавьте перед каждой из них пробелы с помощью nbsp;

Жонглируем формами

Общеизвестно, что форма (или формы) для голосования придает страничке интерактивность. Кроме того, она позволяет узнать мнение посетителей о дизайне и содержании вашего сайта. Не стоит реализовывать ее в виде громадного окна на главной странице, да еще с убойным заголовком <ГОЛОСУЙ И (ИЛИ) УХОДИ!!!>: реакция посетителей будет однозначной - обругают и уйдут. Лучше поместить на каждой странице маленькую и ненавязчивую формочку с любезным предложением проголосовать. Особенно хорошо она смотрится в панели навигации. А если к тому же в каждом разделе будет свой оригинальный вопрос, то можете рассчитывать на благосклонность посетителей.

Принцип создания подобных форм такой же, как и подменю. Запишем в конце файла panel.js:

Выбираем баннер

А у вас на страничке баннеры есть? Спонсоры много платят? Ничего, сейчас мы вставим баннер в панель навигации и заставим их платить вдвое больше. А чтобы никто не обижался, баннер самого щедрого спонсора будет виден в навигации на главной странице, а баннеры спонсоров поприжимистей - в подразделах. Самого жадного спонсора мы впихнем в раздел <Об авторе>. Jedem das seine: каждому свое.

Для достижения справедливости, конечно, можно пойти прямым путем и добавить в файл panel.js оператор if с выбором баннера:

Но это неэффективно, если у вас много спонсоров. Для каждого баннера придется создавать свой объект img и прописывать в него отдельные параметры scr и href, что значительно увеличит размер скрипта. Поэтому предпочтительней немного усложнить код, чтобы объект img не создавался всякий раз заново, а был один, и в него загружались, в зависимости от условий, необходимые параметры href и scr. Мы предлагаем вам попытаться реализовать его самостоятельно, в качестве полезного упражнения.

И это еще не все...

С помощью скриптов можно создавать множество других красивых и полезных вещей. Например, при выборе пункта в панели навигации не посылать посетителя на другую страницу, а грузить скрипт с необходимым содержимым. Это очень удобно, если необходимо поместить на сайте цикл статей. Кроме того, помещенный в панель навигации баннер останется одним и тем же при каждой загрузке - ведь URL страницы не меняется! Или, используя уже описанную выше методику изменения параметра scr для объекта img, загружать при щелчке по ссылкам разные изображения. Это пригодится для создания онлайновых картинных галерей или книжных магазинов (щелкнул по названию и загрузилась картина или обложка выбранной книги). Здесь имеется большое поле деятельности для вашей фантазии. Не будем ей мешать...