главная   ссылки   связь   о проекте
Web Trainer-HTML-справочник

разработка сайта->структура->строение сайта

технологии
 из чего состоит сеть
 способы разработки
 инструменты

разработка сайта
 дизайн
 контент
 структура
    разметка страницы
    строение сайта
 размещение в сети
 раскрутка и оптимизация

справочная информация
 теги
 словарь
 курсоры
 таблица цветов
 полезные советы
 специальные символы

Строение сайта

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

Базовые структуры

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

Плоская структура

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

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

Линейная структура

Эту структуру также называют последовательной. Она представляет собой серию последовательно связанных документов, в каждом из которых имеются только ссылки вперед (дальше) и назад.

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

Приведем грубые примеры. Представьте, что Вы последовательно объясняете решение некоего уравнения. Поймет ли что-нибудь человек, если сразу попадет на страницу, со следующим текстом: "Запомним результат, полученный нами на предыдущем этапе, и найдем второй корень уравнения, уже описанным нами методом". А теперь представьте презентацию товара, где человек может сразу попасть на одну из последних страниц, имеющую текст: "Именно из-за этих качеств наш продукт стоит в два раза больше имеющихся на рынке аналогов". Захочет ли он узнать, за что он должен столько переплачивать?

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

Древовидная структура

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

Комбинированная структура

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

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

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

Навигация по узлу

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

Организация домашней страницы. Одним из основных элементов навигации является домашняя страница узла. Это та страница, которая показывается при запросе корня сервера (слеша).

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

Существует два основных вида домашних страниц: презентационная и информационная.

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

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

Независимо от вида домашней страницы, существует несколько основных правил ее организации:
  • самая актуальная информация должна быть видна в первом экране, а если ее много, то хотя бы ее начало или заголовок
  • элементы навигации (меню) должны быть очевидны и заметны, посетитель мог прийти к Вам в первый раз, и ему не знаком Ваш стиль
  • желательно, чтобы элементы навигации помещались в один экран, если конечно у Вас не мегаузел; домашняя страница должна ясно говорить, чему посвящен этот узел, или же как то привлекать внимание посетителя
  • не делайте страницу полностью графической - что бы Вы там ни думали, всегда найдется причина, чтобы в будущем добавить туда текст: экстренное сообщение, новости, анекдот дня и т.п.
  • следите за ее "весом" - посетитель согласен ждать, только если знает, зачем он это делает, а новый посетитель еще не знает, куда и зачем он попал
  • на данный момент маргинальным является размер в 70-90 килобайт. Если она все-таки очень "тяжелая" - минимизируйте количество графики, разбейте таблицу (если в нее заключена вся страница) на куски - сделайте так, чтобы посетитель увидел хотя бы ее часть, пока не подгрузится все остальное
  • на первой странице Вы ничего еще не знаете о посетителе, поэтому не помещайте на страницу никакие нестандартные элементы: Java-апплеты, звук, Flash и т.д. - это считается плохим тоном; если это так критично, предупредите об этом заранее на странице-заставке
Как известно подавляющее большинство внутренних страниц имеет или верхнее или левое боковое меню. Ваши страницы, наверно, не исключение. Поэтому зачастую только на первой странице есть возможность самовыразиться - не бойтесь нестандартных решений, проявите неординарность

Принципы построения системы навигации

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

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

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

Совсем не стоит дублировать стандартную кнопку браузера "Назад" за исключением особых случаев.

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

Что делать, если разделов очень много? Как выбрать, что именно поместить в подсистему глобальной навигации? Существует три подхода (хотя вы вольны придумать четвертый):

Поместить в нее ссылки на те разделы или документы, которые важны для Вас, с точки зрения важности их посещения посетителем; одной из таких ссылок, например, может являться ссылка на бланк оформления заказа. Поместить в нее ссылки на наиболее популярные у посетителей разделы. Популярность определяется со временем путем долговременного анализа статистики посещаемости. В первый раз можно сделать собственное предположение о том, что будет наиболее интересно, но лучше об этом спросить хотя бы у пятерых друзей (но не коллег по работе) и обобщить результат. Объединить в некоей пропорции два предыдущих способа.

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

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

При создании структуры сайта придерживайтесь следующих правил:

1. Каждый раздел сайта первого уровня должен располагаться в отдельной папке;

2. Название папки должно быть переведено на английский язык;

3. Папка с таблицами стилей для сайта имеет название css;

4. Папка с ява-скриптами для сайта имеет название js;

5. Папка с flash-вставками для сайта имеет название flash;

6. Папка с графикой имеет название images.

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

Но неизбежно настанет момент, когда количество перейдет в качество, и Вы запутаетесь во всем том, что натворили. При разработке сложного сервера целесообразно использовать структурные диаграммы. Во-первых, это позволит четко представить, где и как расположена информация в иерархии доступа к ней. Во-вторых, будет ясно, как осуществлять навигацию на вашем сервере и тем самым упростить поиск необходимой информации. В-третьих, диаграмма позволяет предусмотреть план развития сервера, и внизу странички будет красоваться не банальное "This server is under construction" (сервер в состоянии реконструкции), а содержательный перечень того, что должно в скором времени появиться на сервере. Одновременно это и нехитрый крючок для посетителей-если текущее содержание сервера им не интересно, то анонс ожидаемого развития заставит посетителя оставить ваш сервер в списке Избранного и время от времени проверять, как идут дела. Главное,- не обмануть его надежд и потихоньку реализовывать свои обещания, постоянно добавляя новые "крючки" взамен снимаемых старых.

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

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

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

 главная   ссылки   связь   о проекте
 назад   вверх   вперед 
Copyright © 2008 WWF Project.
Использование материалов данного пособия в коммерческих целях запрещено!
Частичное или полное использование материалов пособия допускается только с разрешения автора.
Hosted by uCoz