О ЦЕНТРЕ

ФОТОГАЛЕРЕЯ

ПРЕЙСКУРАНТ ЦЕН

КОНТАКТЫ

Все остальное будем делать с помощью стилей.

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

Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега

выравнивание текста по центру.

Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.

font-family:Tahoma;

font-weight:bold;

И что ж мы увидим?

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

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-weight:bold;

width:190px;

height:27px;

По-прежнему ничего не изменилось.

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-weight:bold;

display:block;

Вроде начинает навигация принимать нужный нам вид:

Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-size:10px; color:#056e04;

font-weight:bold;

height:21px;

margin-bottom:10px;

padding-top:6px;

Получаем то, что нужно:

Bar-menu h2 a:hover {

background:url(images/bg-menu.jpg) center center;

font-family:Tahoma;

color:#ffffff;

font-weight:bold;

margin-bottom:10px;

padding-top:6px;

text-decoration:none;

Вот и получилась наше навигационное меню:

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

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


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

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

Какую навигацию делать на сайте?

Чтобы навигация на сайте была удобной, сначала придется разработать структуру своего ресурса. Можете взять обычный листок бумаги и указать на нем все важные страницы, на которые будут заходить ваши посетители. При разработке структуры помните про золотое правило – каждый материал должен быть доступен в 3 клика с главной страницы.

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

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

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

Правила хорошей навигации

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

Чтобы не упустить важные моменты, учтите следующие рекомендации:

1. Интуитивность. Навигация не должна быть сложной, поэтому как бы вам не хотелось, лучше отказаться от сложных форм и меню, написанных, к примеру, на Flash. Лучше использовать стандартную навигацию с привычным интерфейсом.
2. Значимость. Нет смысла добавлять новые пункты меню, ссылки и блоки с представлением материалов, которые не важны вашим посетителям. Каждый элемент навигации должен быть полезным, перегружать ресурс не стоит.
3. Идентичность. Некоторые вебмастера намеренно пытаются проявить свою креативность и создают разную навигацию, для отдельных страниц сайта. Лучше этого не делать, так как посетители могут легко в этом запутаться.
4. Гармоничность. Все элементы навигации, которые вы устанавливаете на сайте, должны хорошо вписываться в общий дизайн ресурса. Это касается не только меню, но и таких элементов как хлебные крошки или блоки с ссылками.

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

Удобная навигация сайта начинается с главного меню

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

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

Например, если готовится меню для интернет-магазина, оптимальными пунктами главного меню станут: услуги, цены, контакты, каталог, о компании.

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

Постраничная навигация сайта – внутренняя перелинковка

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

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

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

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

Навигация по странице сайта

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

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

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

Как сделать навигацию на сайте: дополнительные меню

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

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

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

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

Вам также будет интересно:
—
—
—

Дата публикации статьи: 20 марта 2016 г.
Задать любой вопрос авторам статей Вы можете по e-mail

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

2. Ссылка в навигационном меню на страницу текущего местонахождения пользователя не должна быть кликабельной (то есть при нажатии на неё не должен происходить переход на ту же самую страницу) и должна быть отмечена как текущее положение пользователя. К примеру, если пользователь на странице “Фотогалерея”, то ссылка “Фотогалерея” в меню не кликабельна и отмечена другим цветом, отличным от цвета всего остального меню. К сожалению, значимая часть современных систем управления сайтами не предусматривают соблюдение этого правила, поэтому эта рекомендация относится к некому идеалу, к которому нужно стремиться.

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

4. По названию пункта меню должно быть чётко понятно, что находится внутри. И как раз в этом вопросе надо максимально внимательно отнестись к сложившимся стереотипам. К примеру, мы все привыкли что у интернет-магазинов есть пункты меню “Доставка”, “Оплата” или “Оплата и доставка”. Но я встречал один интернет-магазин, чтобы не раскрывать реальных названий, назовём его “Бурундучок”. Так вот, у этого магазина информация о способах оплаты, доставки, а заодно и о преимуществах продукции перед конкурентами находилась в разделе “Секреты Бурундучка”. Понятно, что это была некая задумка с каким-то смыслом, но такое расположение даной информации нарушает сразу два правила юзабилити: во-первых ломает устоявшиеся шаблоны пользователя, а во-вторых делает содержимое раздела абсолютно непредсказуемым по его ссылке в меню навигации. Оригинально? Да. Удобно и позитивно влияет на конверсию? Нет.

5. Ссылки, открывающиеся в новом окне желательно как-то помечать, к примеру общепринятым значком . Дело в том, что в новом окне или вкладке у пользователя уже не будет работать привычная кнопка “Назад” браузера, и чтобы вернуться назад на страницу, с которой он нажал ссылку, ему надо будет переключить окно или вкладку. Для удобства восприятия сайта желательно посетителя заранее предупредить к открытию ссылки в новом окне или вкладке. Вообще открывать ссылки в новом окне стоит только если они ведут на другой сайт или на какую-то логически отделённую часть текущего сайта.

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

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

Открыть область навигации в Ворде можно двумя способами:

1. На панели быстрого доступа во вкладке «Главная» в разделе инструментов «Редактирование» нажмите кнопку «Найти» .

2. Нажмите клавиши «CTRL+F» на клавиатуре.

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

Средства навигации

Первое, что бросается в глаза в открывшемся окне «Навигация» — это строка поиска, которая, собственно, и является основным инструментом работы.

Быстрый поиск слов и фраз в тексте

Чтобы найти нужное слово или фразу в тексте, достаточно ввести его (ее) в поисковой строке. Место этого слова или фразы в тексте сразу же будет отображено в виде миниатюры под поисковой строкой, где слово/фраза будет выделена жирным. Непосредственно в самом теле документа это слово или фраза будет подсвечена.

Примечание: Если по каким-то причинам результат поиска не отображается автоматически, нажмите клавишу «ENTER» или кнопку поиска в конце строки.

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

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

Поиск объектов в документе

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

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

Настройка параметров средств навигации

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

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

Рассмотрим основные параметры этого окна более детально.

Учитывать регистр — поиск по тексту будет осуществляться с учетом регистра символов, то есть, если вы напишите в поисковой строке слово «Найти», программа будет искать только такое написание, пропуская слова «найти», написанные с маленькой буквы. Применимо и обратное — написав слово с маленькой буквы с активным параметром «Учитывать регистр», вы дадите Word понять, что аналогичные слова с большой буквы нужно пропускать.

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

Подстановочные знаки — предоставляет возможность использования подстановочных знаков в поиске. Зачем это нужно? Например, в тексте есть какая-то аббревиатура, а вы помните только некоторые ее буквы или любое другое слово, в котором вы запомнили не все буквы (такое ведь возможно, да?). Рассмотрим на примере тех же «Ашеров».

Представим, что вы запомнили буквы в этом слове через одну. Установив галочку напротив пункта «Подстановочные знаки» , можно написать в строке поиска «а?е?о» и нажать на поиск. Программа найдет все слова (и места в тексте), в которых первая буква «а», третья — «е», а пятая «о». Все остальные, промежуточные буквы слов, как и пробелы с символами, значения иметь не будут.

Измененные параметры в диалоговом окне «Параметры поиска» , при необходимости, можно сохранить в качестве используемых по умолчанию, нажав на кнопку «По умолчанию» .

Нажав в этом окне кнопку «ОК» , вы очистите последний поиск, а указатель курсора будет перемещен в начало документа.

Нажатие кнопки «Отмена» в этом окне, не очищает результаты поиска.

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

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

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

Если в тексте, с которым вы работаете, для создания и оформления заголовков использовался один из встроенных стилей заголовков, предназначенных также и для разметки разделов, эти же стрелки можно использовать для навигации по разделам. Для этого нужно будет переключиться во вкладку «Заголовки» , расположенную под поисковой строкой окна «Навигация» .

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

Закрытие окна «Навигация»

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

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