Органиязация навигации на сайтах

Содержание

 

Введение

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

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

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

 

 

1. Организация навигации  на сайтах

Анализ путей попадания посетителей  на сайт показывает, что, в основном, посетители приходят на сайт через  поисковые машины. После интоксикации сайта в поисковых машинах, посетители сайта могут сразу попасть не на главную страницу сайта, а на внутренние веб-страницы. Практика показывает, что, в больших (от 100 html страниц) сайтах, соотношение числа посетителей, пришедших на главную страницу к числу страниц сайта, составляет ≈ 10%. Чем больше по объёму сайт, тем больше эта разница в соотношении.

           Для  сайта, например, из 100 html страниц  10 человек начинают просмотр сайта  с главной (домашней) страницы. Остальные  90% посетителей начинают просмотр  с внутренних страниц сайта.

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

        Частые ошибки:

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

2. разработка сайтов с недостаточным количеством гиперссылок на главной (домашней) странице сайта, обеспечивающее быстрый доступ к основным страницам сайта.

• Желательно, чтобы головная (домашняя) страница сайта содержала гиперссылки, обеспечивающие переход с этой страницы на не менее чем 90% страниц сайта, но не более чем, например, 150-200 гиперссылок.

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

Грамотная навигация сайта должна в любой момент давать посетителю ответы на три вопроса:

1. Где я сейчас нахожусь?

2. Где я уже был?

3. Куда я могу пойти дальше?

 

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

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

1. Организация навигации с помощью ссылок

Ссылки по кругу.

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

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

Стандартное оглавление.

Стандартное оглавление, помещаемое в начале документа, свойственное печатным изданиям очень подходит для организации быстрого перехода к определенному разделу текущего документа, для чего разделы отмечаются якорями типа <A name=1>.

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

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

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

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

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

2. Организация навигации с помощью ссылок внутри одной Web-страницы

Внутренние ссылки - ссылки, при помощи которых можно быстро перейти на другие ресурсы того же домена, которому принадлежит просматриваемая в данный момент страница. Интернет состоит из множества серверов, каждый из которых работает по одному и тому же принципу – протоколу http. Каждый сервер объединяет некоторое количество сайтов, так же функционирующих по сходным принципам, например, с помощью определённого языка их постройки - HTML, XML и др. При этом каждая страница сайта имеет свой уникальный адрес (URL). На него и делаются внутренние ссылки, называемые ещё гиперссылками. В настоящее время это наиболее активно развиваемая область информационного обмена в сети интернет. Человечество озабочено получением сведений из глобального пространства со скоростью собственного мыслительного процесса, и гиперссылки являются средством быстрого получения таких сведений вне зависимости от места расположения ресурса.

1. Организация навигации с помощью ссылок на другой HTML-документ

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

2. Организация навигации с помощью ссылок по фреймам

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

Фреймы используются для того, чтобы в одном окне браузера показать несколько HTML-документов. Например, можно разбить окно на три части. В первый фрейм загрузить меню для навигации. Во второй - документы, на которые пользователь будет щелкать по пунктам меню. В третьем будет крутиться баннер. Такой подход к созданию страниц экономит время закачивания информации. Меню закачивается один раз. Недостатком является внешний вид. Примеров удачного использования фреймов в Интернет очень мало. Фреймы были популярны в 90х годах. Сейчас от них практически отошли. Они могут быть полезны для создания домашних страничек или любительских сайтов. Также возможно их использование на второстепенных страничках сайта, которые не обязаны выглядеть блестяще. При использовании фреймов, нужно стараться избегать линеек прокрутки. Они смотрятся неестественно в середине HTML-страницы. Единственное более или менее удачное применение фреймов для меню, которое всегда должно оставаться наверху, а не сползать вниз при прокрутке документа. Прокручивать меню неудобно, когда там раскрыто несколько подпунктов, затрудняется навигация и работа с сайтом.

Начнем со встроенных фреймов. Они  появились в стандарте языка HTML, начиная с версии 4.0, поэтому не все браузеры их поддерживают. Например, Netscape 4.06 их не понимает. Но зато самый распространенный браузер InternetExplorer четвертой и более поздней версии умеет с ними работать. Встроенный фрейм позволяет в документе выделить прямоугольную область и загрузить туда html-документ.

Пример:

<iframe name="test" src="http://itsoft.ru" width="400" height="300"

             scrolling="auto" frameborder="1">

 

Атрибут name служит для задания имени  фрейму затем, чтобы в этот фрейм  можно было загружать другие документы  при помощи гиперссылок. У гиперссылок  есть соответствующий атрибут target, который указывает куда загружать документ, на который она указывает.

3. Организация навигации с помощью кнопок.

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

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

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

3. Выбор технологии разработки Web-сайта

4. Описание структуры сайта

5. Создание главной страницы

6. Компоновка страниц

7. Организация гипертекстовых переходов

8. Использование иллюстраций

 

Заключение

 

Список использованной литературы

 

1. http://itsoft.ru  2. http://www.antula.ru  3. http://webdesign.site3k.net 4. Б. Керниган, Д. Ритчи  «Язык программирования Си»., Невский  Диалект, 2000. - 350 с. 5. Б. Керниган, Р. Пайк «Практика программирования»., Невский Диалект, 2001. - 380 с. 6. Дэвид Круглински  «Основы Visual C++» 7. Бъерн Страуструп  «Язык программирования С++» 8. Т. Кристиансен, Н.  Торкингтон Perl. «Библиотека программиста» 9. Сэм Канер и др. «Тестирование программного обеспечения» 10. Липаев В.В. «Надежность  программных средств» 11. Дмитрий Кирасанов  «Веб-дизайн» 12. А. Ковалев «Управление проектом по созданию интернет-сайта» 13. Колин Барроу «Курс выживания интернет - компании»

 

Приложение