Создание панели навигации. Использование области навигации в MS Word

О ЦЕНТРЕ

ФОТОГАЛЕРЕЯ

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

КОНТАКТЫ

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

Для класса.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;

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

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

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

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

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

• Каталог продуктов или страница с портфолио.
• Способы доставки и оплаты.
• Страница о компании или об авторе.
• Сведения о возврате средств и гарантии.
• Страница с отзывами.
• Скидки и акции.
• Обратная связь.
• Блог.
• Карта сайта.

Для каждого сайта может быть свой список страниц в навигационное меню. Рекомендуется делать 5-7 страниц. Если же их получается больше, то лучше добавить второй ряд для меню. У пунктов меню могут быть подпункты. Их тоже лучше не делать слишком много – список подпунктов должен помешаться на один экран, без прокрутки.

Иногда бывает полезным выделить какой-то из пунктов меню. Например, можно отметить цветом или шрифтом. Это помогает привлечь внимание.

О том, как работать с меню в WordPress можно узнать .

Форма поиска

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

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

Использование подвала

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

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

• Ссылки на все рубрики и страницы. Если в главном меню вы были ограниченны 5-7 страницами, то в подвале можно не ограничиваться.
• Все контактные данные – электронные почты, адреса мессенджеров, номера телефонов, ссылки на обратную связь и другое.
• Ссылки на аккаунты в социальных сетях.
• Можно также добавить логотип и название сайта, бренда.

Хлебные крошки

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

Такое название элемент получил от сказки “Генезель и Греттель”. Похищенный Гензель бросал хлебные крошки, чтобы помочь Греттель найти его.

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

Для создания хлебных крошек в WordPress можно использовать специальные плагины. Например, .

Боковое меню

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

Кнопка для возврата наверх

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

Карта сайта

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

В WordPress сделать карту сайта можно .

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

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

Слева — спутниковый снимок Google maps, справа — тот же участок на карте. Который из них выглядит подробней?

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

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

Получение спутникового снимка или карты местности

На этом этапе нам понадобится программа SAS.Планета, скачать которую можно на официальном сайте sasgis.ru

Первым делом требуется указать в качестве источника данных Интернет и кэш:

А также выбрать нужный тип карты. Что это будет — спутник или карта Google, карты Яндекса или спутниковые снимки с геопортала Роскосмоса, а то и генштабовские карты — зависит только от Ваших личных предпочтений и качества источника на требуемом участке.

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

Уменьшаем масштаб до тех пор, чтобы весь нужный участок карты вошёл в экран. Выбираем инструмент «прямоугольное выделение» (вторая слева кнопка на панели инструментов или сочетание Ctrl+R на клавиатуре), и выделяем границы нашей будущей карты.

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

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

Выбираем в меню выделения пункт «Предыдущее выделение», либо нажимаем Ctrl+B на клавиатуре, чтобы заново не выделять ту же самую область, и появится знакомое нам окно.

На этот раз нас интересует вкладка «Склеить». Здесь потребуется настроить большее количество параметров:

• Результирующий формат — формат изображения, в котором будет сохранена наша карта. Для дальнейшей обработки желательно выбирать BMP, хотя он и занимает больше места, но понимается всеми программами и не имеет потерь при кодировании.
• Куда сохранять — здесь надо указать папку и имя файла, в который будет сохранена карта.
• Тип карты — будет автоматически подставлен текущий источник.
• Масштаб — не забудьте выставить нужный уровень детализации. По умолчанию программа выставила низкодетализованный, отображающийся сейчас на экране.
• Наложить — здесь на карту можно наложить дополнительные слои. Такие, как Гибрид для Google maps, где отображены основные дороги и условные обозначения. Иногда может быть полезным для уточнения спутниковых снимков или нанесения на них названий населенных пунктов. Для этого не забудьте прогрузить дополнительный слой с нужным уровнем детализации при помощи метода, описанного выше.
• Создавать файл привязки — отметьте галочкой пункт «.map», он нам пригодится на следующем этапе. В файле будут сохранены географические координаты углов результирующего изображения.

Нажимаем кнопку «Начать» и через некоторое время в указанной папке получаем два файла — изображение с картой и.map-файл привязки к координатам. Некоторые навигационные программы могут напрямую использовать такие изображения. Но для карманных устройств с ограниченным количеством ресурсов лучше всё же сохранить карту в специальном формате.

Обработка снимка в графическом редакторе

Нередко из-за не совсем удачных условий освещения, или мешающей дымки, или в силу ещё каких-то причин спутниковые снимки бывают «слепыми», особенно при отображении их на экране мобильного устройства в яркий солнечный день. Для улучшения можно провести небольшую коррекцию в любом графическом редакторе. Я покажу это на примере бесплатного XnView , но Вы можете использовать любой другой подходящий (от IrfanView до Photoshop), эта процедура везде аналогична.

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

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

Можно использовать также ручной режим — правку контраста и гамма-коррекции (увеличить то и другое):

или Оттенка/Насыщенности/Осветленности. Ориентируйтесь на более подходящих для Ваших условий вариант.

Преобразование снимка в формат OziExplorer

Для дальнейшего преобразования картинки в более компактный формат, понимаемый OziExplorer-ом нам понадобится утилита img2ozf. Скачать её можно бесплатно на официальном сайте OziExplorer: oziexplorer3.com/img2ozf/img2ozf.html . По ссылке — последняя версия утилиты, сохраняющая в ozfx3 формат. Для ozf2-файлов (используются в более старых версиях OziExplorer) потребуется найти более старую версию утилиты. В этом вам поможет поиск .

Устанавливаем и запускаем программу. В поле Source Image Folder указываем путь, по которому лежат подготовленные изображения и соответствующие им.map -файлы. В поле Destination Folder указываем, куда складывать конвертированные карты (если нажать синюю стрелочку слева, будет использоваться папка с исходными файлами). Можно поиграться с количеством цветов (поле Number Colors в левой части). Чем больше количество цветов, тем плавней картинка, но тем больше размер результирующего файла.

Отмечаем галочками нужные для конвертирования изображения и нажимаем большую кнопку Process Image Files to OZF Files.

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

Как только в строке статуса появится надпись Completed — конвертирование завершено. В папке, указанной в Destination Folder появятся два файла — .ozfx3 (или.ozf2 для старой версии) и соответствующий ему.map-файл (который, в отличие от исходного, будет иметь имя типа исходное_название _ozf.map).

Теперь осталось оба этих файла залить на мобильное устройство, и указать OziExplorer место, где они лежат.

Например, так выглядит окно OziExplorer со спутниковыми снимками в Windows Mobile:

Вот и все, карты готовы.

Если что-то осталось непонятным — спрашивайте в комментариях — постараюсь ответить.

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

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

Панель навигации

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

«Хлебные крошки»

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

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

Логотип

Правилом хорошего тона является задание ссылки на главную страницу в логотипе. Не важно, представлен логотип текстом, изображением или тем и другим одновременно. Опять же, возврат на главную по клику на логотипе дает возможность сэкономить на кнопке «главная» в меню.

Заголовки страниц

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

Форма входа

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

Favicon

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

Поиск

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

Поиск разумно дополнить функциями фильтрации и поиска по архиву (если архив используется на сайте). Конкретное решение зависит от бизнес-логики. К этой же части можно отнести разные «вкусняшки» вроде поиска по календарю, выборки товаров по ценам или поиск по метатегам. На больших проектах оправдывает себя расширенный поиск (фильтрация) по многим параметрам. Только не тегами! Пользователю нужны простые галочки (радиокнопки). И крупная кнопка «ИСКАТЬ»!

Навигация в физическом мире

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

• Должен присутствовать функционал по выбору города/региона, если представительства есть в разных населенных пунктах,
• Время работы организации или время доступности заказа товаров и услуг.
• Перечень способов связи: телефон, e-mail, форма обратной связи, skype, заказ обратного звонка и т.п. Не стоит ограничиваться только телефоном, поскольку тарифы на звонки совершенно разные, и кто-то не захочет тратить деньги на звонок. Набирают популярность формы «Он-лайн-консультант» и «Заказать обратный звонок». Но если эти формы не слишком навязчивы.
• Карта проезда с указанием точного адреса, маршрута на авто, на общественном транспорте и пешеходным маршрутом. Признаком хорошего тона является активная встроенная карта от одного из сервисов, отметка места на «народной карте», координаты для навигатора, релевантный адрес или гео-координаты (чтобы не искать), возможность проложить и распечатать маршрут.

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

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

Ресурс или продукт должен быть в первую очередь удобен конечному пользователю, а не демонстрировать возможности разработчика: для этого есть портфолио и работы «на показ».

Веб-сайты для людей: профессия « ».