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

В этой статье мы рассмотрим блок «Меню», а также близкий к нему — «Карта сайта».

Примечание: цветом выделены ключевые понятия разделов. Это сделано затем, чтобы дать читателю понять, что имеется в виду (к примеру, карта сайта или карта <MAP> документа — в этом случае если слово «карта» выделено цветом, то подразумевается карта сайта).

Вы спросите, для чего такой пункт? И так ясно, зачем на сайтах меню... А вот оказывается, что не всегда ясно. Часто попадаются сайты, на которых навигация (а меню отвечает именно за неё) организована, мягко говоря, плохо: неизвестно, на какой странице находишься и куда можно с неё попасть. Такие ресурсы редко кого приводят в восторг. Хотя и они посещаются, т.к. часто их создают люди умные и много знающие — т.е. те, кому есть что рассказать. Но они почему-то не задумываются над тем, что изложение даже самой интересной информации должно быть понятным, структурированным и приятным в плане использования. И винить их тут трудно, потому что у занятых людей редко есть время и возможность обдумать такие детали. Но следует признать, что всё больше сайтов сейчас создаются с вполне приличной навигацией. Однако эту тему избегать по причине мнимой ненужности не следует.

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

Для начала чётко определите, какие разделы (и, возможно, подразделы) будут на вашем сайте, какие действия может выполнять посетитель и т.п. Затем придумайте способ расположения этого меню. Только сделайте всё в одном стиле, чтобы запутаться было сложно. ;)

К примеру, можно разместить меню вверху страницы, линейкой, т.е. горизонтально. При этом решите, будут ли у вас «выпадающие» подпункты. Тогда придётся написать (или найти в Интернете) скрипт, имитирующий такое меню. Обычно на клиентском языке javascript. Меню вверху страницы можно сделать и просто таблицей: все подпункты выводить в столбце основного пункта, к примеру, более мелким шрифтом да ещё и другим оттенком.

Можно сделать меню графическое, т.е. основанное на одних картинках или даже картой (об этом читайте ниже, в разделе «Карта сайта»). Но предпочтительней всё же текстовые ссылки. Так уж сложилось: Интернет изначально был текстовым, без графики. Можно использовать очень хорошее сочетание: напротив текстовой ссылки разместить графический значок, ассоциирующийся с данной ссылкой. Такой значок лучше тоже включить в ссылку, а можно ещё и изменять его каким-то образом (цвет, какие-то детали) при наведении на него мышкой (а лучше на всю ссылку). Для этого нужно написать или найти соответствующий скрипт. Такие графические значки, как правило, маленьких размеров, поэтому для избежания неверного отображения их браузерами (читайте ниже) указывайте их размеры в теге <img>, а параметр ALT="" (если указать этот параметр непустым, то некоторые браузеры при отключенной графике выведут место для картинки подогнанным под размер этого текста, а не тех размеров, что вы задали). Для указания назначения картинки можно использовать параметр TITLE. Обо всём этом — ниже.

Если у вас на странице очень большая информационная часть (т.е. чтобы вернуться к меню на странице, посетителю приходится её прокручивать), то лучше дублировать меню внизу страницы, чтобы обеспечить необходимый комфорт.

Можно сделать меню справа или слева на странице. Можно сделать (с помощью скриптов), чтобы меню перемещалось при скроллировании документа, а можно разместить его в отдельном фрейме — тогда оно будет постоянно у посетителя перед глазами. Как поступить — полностью ваш выбор. Но нужно всегда тестировать полученный результат! Проверьте, нет ли ошибок в скриптах, в вёрстке, в тексте... Ресурс должен быть качественным — это отличает серьёзные проекты от несерьёзных, это создаёт ваш имидж. И всегда смотрите, удобно ли пользоваться вашими меню и навигацией вообще, понятно ли интуитивно, как и что располагается на странице и сайте в целом.

Единственное замечание, которое я могу высказать по поводу перемещающихся меню: если такое меню сделано сбоку или даже вверху — оно вполне приемлемо (особенно сбоку, вверху — спорно), а вот если снизу, то возникает неприятное ощущение, что это не меню, а баннер (к которым у большинства пользователей Интернета стойкое отрицательное отношение). Да и не всегда нравится человеку наблюдать, как что-то упорно не желает прокручиваться, а дёргается и прыгает перед глазами (именно поэтому также не рекомендуется использовать много анимации на одной странице).

Мне понравились меню, у которых использовались таблицы стилей CSS для ссылок (тег <A>). Там при наведении мышкой (стиль для a:hover) ссылка словно немного притапливалась — это визуально достигалось за счёт смещения текста вниз и вправо. Такое меню заставляет некоторое время поиграть с ним, хотя и выглядит достаточно просто. Но зато настроение улучшается и хочется пройтись по его ссылкам.

Эта карта призвана объяснить посетителю устройство сайта, расположение разделов и (не всегда) краткое их описание, т.е. структуру вашего сайта. Часто карта сайта является и меню сразу (т.е. содержит навигацию), что, на мой взгляд, является хорошим приёмом, т.к. позволяет посетителю тут же перейти в нужный ему раздел, а не возвращаться на страницу с непосредственно меню.

Нужно ли размещать на своём сайте такую карту? Каждый решает сам. Но учтите (снова повторюсь), что забота о посетителе (а карта сайта таковой является — потому что сайт благодаря ей уже не выглядит чем-то запутанным и «страшным», а становится вполне понятным и лёгким в обращении) — всегда только плюс вам. Если человек видит, что владелец сайта постарался сделать так, чтобы каждому было удобно работать с его сайтом, то он оценит это по достоинству (пусть даже подсознательно) и вернётся к вам с большой вероятностью.

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

По поводу карт «по кругу»: мне однажды сказали, что по такой карте (или меню) хочется пройтись, т.е. такая вещь является одновременно и приманкой. Можно сделать приманкой и другие фигурные карты или меню, но всё же не стоит увлекаться, чтобы не получилось слишком много лишнего.

Если вы делаете карту сайта картинкой (несколькими рисунками или с помощью карт HTML (<map> и <area>)), то нужно учитывать возможность ситуации с отключенной графикой у посетителей (её обычно отключают, если оплата работы в Интернете происходит не по времени, а по трафику — т.е. по объёму скачанной информации; такие посетители (как правило, использующие выделенные каналы или gprs) в целях экономии обычно отключают не только графику, а ещё флэш, звуки и т.п. в своих браузерах). Иначе очень многие люди попросту не поймут, что же вы разместили на карте. При реализации карты сайта картинкой обычно в неё встраивают навигацию.

1. Итак, если у вас карта сайта (картинка) разбита на рисунки (<img>) и собрана (свёрстана) на странице каким-то образом (к примеру, в виде таблицы), то укажите в параметре ALT тега <img> название раздела/картинки. Тогда это название будет отображаться в том случае, если графика у посетителя отключена. В большинстве браузеров этот альтернативный текст будет появляться ещё и в виде всплывающей подсказки при наведении на картинку мышкой. Если вы хотите подобного эффекта во всех браузерах, то используйте параметр TITLE (там можно указывать другой текст — это не повлияет на надпись в картинке), например:

   <img src="links.png" width="100" height="60" alt="Ссылки" title="Ссылки на другие ресурсы">

   Обратите внимание, что, помимо прочих параметров, в теге указаны ширина (width) и высота (height) изображения (в пикселах). Это необходимо затем, чтобы картинки загружались быстрее (браузеру не приходится высчитывать параметры картинки с сервера), а также помогает избежать отображения картинки (при отключенной графике) размером «по умолчанию» — в некоторых браузерах. Также советую всегда использовать параметр ALT — даже если альтернативный текст не требуется (в этом случае укажите просто ALT=""), иначе некоторые браузеры отобразят (при отключенной графике) место для картинки размером по ширине альтернативного текста в ней, что может помешать корректному расположению элементов на странице.
2. Если же ваша карта сайта является картой <MAP>, то в параметре ALT для неё вы можете указать только какую-то одну надпись (например, «Карта сайта»), а не для каждой области карты в отдельности. Допустим, у посетителя отключена графика. Тогда при наведении мышкой на заданные тегами <area> области картинки пользователь увидит ссылки на разделы (в статусной строке браузера — настоятельно рекомендую не «вешать» на страницу скрипты, которые будут изменять текст в строке статуса! особенно при наведении мышкой на ссылку, иначе посетитель не увидит, куда ссылка ведёт, и в целях своей безопасности может не пойти по данной ссылке), но он всё равно не сможет увидеть ни подписей к каждой ссылке, ни границ этих областей карты. Хотя вы можете сделать всплывающие подсказки к каждой области <area> (с помощью того же ALT или TITLE), но всё равно обнаружить саму ссылку на такой карте трудно, потому что параметр ALT в данном случае не поможет. Что же делать? Можно дублировать все разделы в текстовом виде. Это всё же разумное решение, хотя на первый взгляд может показаться излишеством. За такое дублирование вам смогут сказать спасибо не только посетители с отключенной графикой — очень многие не любят графику в принципе и предпочитают работать с текстом. Для таких посетителей ваша текстовая карта будет как раз кстати.

Часто для карт сайта отводится отдельная страница, ссылка на которую указывается в меню сайта. Но так следует делать, пожалуй, в тех случаях, если структура сайта очень ветвистая или разделов очень много. Тогда на этой отдельной странице неплохо бы помимо самой карты указать назначение разделов и т.п.

И последнее на сегодня размышление: на каждой странице указывайте, где посетитель находится. Если он находится в разделе «Программирование», в подразделе «С++», в подподразделе «Объектно-ориентированное программирование» (ООП) и т.п., то так и напишите вверху страницы (причём, лучше сразу перед непосредственно информационной частью):

Программирование → С++ → ООП

Оформление, конечно, на ваше усмотрение. Это просто пример. И сделайте на предыдущие разделы ссылки, чтобы посетитель мог переместиться на уровень вверх при желании. А вот на текущий раздел («ООП») ссылку делать не нужно. Ссылка на самого себя является явным излишеством.

В следующих выпусках читайте продолжение этой темы. Мы поговорим о других блоках страницы.

1. Меню помогает посетителю сориентироваться на сайте;
2. Расположить меню на сайте можно как угодно — лишь бы посетитель его заметил и смог в нём разобраться, а также чтобы оно ему не мешало работать, а только помогало;
3. Карта сайта создаётся для описания и пояснения структуры сайта;
4. Карту сайта можно использовать и как меню;
5. Давайте посетителю информацию о его местонахождении на сайте.

Всего вам хорошего и успешного творчества!

© Dia-Studia, 3 мая 2005 г., dia-studia@yandex.ru, http://www.dia-studia.h14.ru/
При использовании материала для распространения, пожалуйста, указывайте ссылку на автора. Спасибо! ;)