Главная → Делаем сайт → Общая структура сайта

Общая структура сайта

При планировании структуры сайта необходимо продумать несколько основных вещей: структуру каталогов, структуру навигации, необходимость заставки сайта.

Структура каталогов

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

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

иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.

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

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

Структура навигации

Это очень важная часть планирования ресурса. Способ доступа к информации на сайте должен быть простым и понятным. Пользователь в любую минуту должен знать ответы на следующие вопросы:

Где я нахожусь?

Куда могу пойти?

Как туда добраться?

Как вернуться назад?

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

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

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

Теперь рассмотрим основные системы навигации:

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

Различают горизонтальное и вертикальное меню. Вертикальное располагается справа или слева каждой страницы. Горизонтальное меню располагается, как правило, сразу под шапкой сайта. Для повышения удобства рекомендуется дублировать горизонтальное меню внизу каждой страницы (только не оформлять его также пышно, как верхнее).

Вертикальное меню вы видите на этом сайте, горизонтальное меню могло бы выглядеть так:
Главная Делаем сайт Оптимизируем сайт Раскручиваем сайт

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

Более оптимальным решением является следующее: оставить лишь вид кнопки (фоном), а текст на ней все-таки оформить в виде ссылки. Этог нетрудно добиться средствами CSS. Пример обыкновенной кнопочной навигации:

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

Пример навигационной карты для сайта магазина бытовой техники могла бы выглядеть так:

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

Заставки сайта

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

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

Главная страница сайта

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

Главная страница должна отражать тематику сайта.

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

Желательно разместить на ней функцию поиска по сайту.

Пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня.

Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).

Сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.

Остальные страницы сайта

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

Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.

Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.

Снабжайте текст картинками и графиками, но не переусердствуйте. Все должно быть обоснованно.

Вот собственно и все. Мы рассмотрели все основные структурные части сайта. Надеюсь, что теперь вам будет проще ориентироваться.

30.06.2009
www.site-do.ru

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.