Создание нескольких страниц с навигационными меню

1. Вступление В этой статье Учебная программа по веб-стандартам мы поговорим о навигации по сайту...
2. Предоставление посетителям чувства «Вы здесь»
3. Сколько вариантов вы должны дать пользователям одновременно?
4. Sitemaps
5. Настройка горячих точек с изображениями карт
6. Резюме
7. Вопросы для упражнений

Вступление

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

HTML5 определяет меню <nav>, которое должно использоваться для размещения основной навигации веб-сайта, будь то список ссылок или элемент формы, такой как окно поиска. Это хорошая идея, так как до этого мы содержали блок навигации внутри чего-то вроде <div id = "navigation">. Да, вы можете идентифицировать это в целях стилизации, но это <div>, и поэтому семантически анонимный. <nav> дает нам непротиворечивый способ однозначного определения с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для слабовидящих пользователей, использующих программу чтения с экрана, которая сможет найти навигацию намного проще, если она четко обозначен (это зависит от того, какую программу чтения с экрана они поддерживают, поддерживает элемент <nav>, так что это может быть еще далеко). Итак, блок навигации будет выглядеть примерно так:

<nav> <ul> <li> <a href="#"> Навигация </a> </ li> <li> <a href="#"> Меню </a> </ li> <li> < a href = "#"> Ссылки </a> </ li> </ ul> </ nav>

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

В HTML есть несколько разных типов идиом меню и навигации, которые тесно связаны с элементами <link> и <a> (привязка). В двух словах:

• Элементы <link> описывают отношения между несколькими документами. Например, вы можете сообщить агенту пользователя, что текущий документ является частью большего набора, охватывающего несколько документов, включая оглавление, и определить отношения между документами.
• Якоря (также называемые <a> элементами) позволяют вам либо ссылаться на другой документ, ресурс или раздел документа, либо на определенный раздел текущего документа. За ними автоматически не следует агент пользователя; вместо этого они будут активированы вашими посетителями любым доступным для них способом (мышь, клавиатура, распознавание голоса и т. д.)

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

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

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

Использование <nav> и списков для создания меню прекрасно по нескольким причинам:

• Легко отличить первичные навигационные списки / ссылки от других списков и ссылок на странице, потому что они находятся внутри <nav>. Это не только облегчит поиск пользователей программ чтения с экрана, как упоминалось выше, но и упростит нацеливание на CSS и JavaScript.
• Списки могут быть вложенными, что означает, что вы можете легко создать несколько уровней иерархии навигации.
• Даже без какого-либо стиля, примененного к списку, рендеринг HTML в браузере имеет смысл, и посетителю легко понять, что эти ссылки принадлежат друг другу и составляют одну логическую единицу.

Вы вкладываете списки, встраивая вложенный список в элемент <li>, а не после него. Вы можете увидеть правильный и неправильный пример здесь ,

Обратите внимание, что браузеры отображают оба примера одинаково. Отображение в браузере никогда не должно быть индикатором качества вашего кода. Неверная HTML-конструкция, такая как неправильный пример, показанный на приведенной выше странице примера, будет сложно стилизовать, добавить поведение в JavaScript или преобразовать в другой формат. Структура вложенных UL всегда должна быть <ul> <li> <ul> <li> </ li> </ ul> </ li> </ ul> и никогда <ul> <li> </ li> <ul > <литий> </ LI> </ UL> </ UL>.

Потребность в гибкости

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

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

• Навигация по странице: например, оглавление для одной страницы со ссылками, указывающими на различные разделы на странице.
• Навигация по сайту: панель навигации для всего вашего веб-сайта (или его подраздела) со ссылками, указывающими на разные страницы на одном сайте.
• Контентно-контекстная навигация: список ссылок, которые указывают на страницы, тесно связанные с темой страницы, на которой вы сейчас находитесь, либо на том же сайте, либо на разных.
• Файлы Sitemap: большие списки ссылок, которые указывают на все разные страницы веб-сайта, сгруппированные в связанные списки, чтобы их было легче понять.
• Разбиение на страницы: ссылки, указывающие на другие страницы, которые составляют дополнительные разделы или части целого, наряду с текущей страницей, например, часть 1, часть 2 и часть 3 статьи.

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

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

<nav> <ol> <li> <a href="#intro"> Введение </a> </ li> ...

Атрибут href указывает на соответствующий якорь далее по странице через значение атрибута id якоря, которому предшествует хеш-символ (#). Так что якорь выглядит так:

<h2 id = "intro"> Введение </ h2>

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

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

Вы можете попробовать эту ошибку самостоятельно:

1. Откройте документ в Internet Explorer 6 или 7
2. Не используйте мышь; вместо этого используйте клавиатуру для навигации по документу. Вы можете нажать клавишу табуляции, чтобы перейти от ссылки к ссылке, и клавишу ввода, чтобы активировать ссылку - в этом случае, чтобы перейти к разделу, на который она указывает.
3. Казалось бы, все хорошо, когда вы делаете это - браузер прокручивает вниз туда, куда вы хотели перейти.
4. Если вы снова нажмете клавишу Tab, правильное поведение для браузера - перенаправить вас (сфокусировать внимание) на первую ссылку в выбранном вами разделе. Internet Explorer, однако, вернет вас в начало меню вверху страницы!

Способ обойти это очень запутанно и связан со специальным свойством Internet Explorer под названием <hasLayout>. Вы можете вызвать это несколькими способами, все из которых описаны в Отличная статья Инго Чао "О том, чтобы иметь расположение" , Самый простой способ это обернуть якорь в элементе, а затем установить ширину этого элемента с помощью CSS , В этом случае мы использовали элементы <section>, а затем установили их ширину на 100% с помощью CSS. Это то, что нужно IE - привязка должна быть внутри элемента с <hasLayout>.

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

Обратите внимание, что клавиатурная навигация по ссылкам в Opera немного отличается - попробуйте взглянуть на приведенный выше пример в Opera, затем удерживайте Shift и используйте клавиши со стрелками для перемещения по ссылкам (это также работает с элементами формы). Это называется пространственной навигацией.

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

<nav> <ul> <li> <strong> Главная страница </ strong> </ li> <li> <a href="about.html"> О нас </a> </ li> <li> <a href = "clients.html"> Наши клиенты </a> </ li> <li> <a href="products.html"> Наши продукты </a> </ li> <li> <a href = ". html "> Наши услуги </a> </ li> <li> <a href="contact.html"> Свяжитесь с нами </a> </ li> </ ul> </ nav>

Здесь не так много сюрпризов, по крайней мере, не с точки зрения чистого HTML - попробуйте перейти на разные страницы в примере, чтобы увидеть, что происходит. Позже в курсе мы поговорим о стилизации таких меню с помощью CSS и добавлении поведения с помощью JavaScript. Важно учитывать, как выделить текущий документ в меню, чтобы дать пользователю ощущение того, что он находится в определенном месте, и что он перемещается (хотя на самом деле это не так, если, конечно, это не так). с помощью мобильного устройства для просмотра веб-страниц!). В этом случае мы просто удаляем ссылку на текущую страницу, в каждом случае - это имеет смысл, поскольку вам не нужно ссылаться на тот же документ, на котором вы находитесь, и это дает понять, где вы находитесь в меню. Мы рассмотрим подробнее «Вы здесь» в следующем разделе.

Предоставление посетителям чувства «Вы здесь»

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

В HTML-ссылки - давайте создадим веб Мы заявили, что ссылка является соглашением и обязательством: вы предлагаете посетителям способ получить больше информации, которая им нужна, но вы должны быть осторожны - вы потеряете доверие и доверие, если эта ссылка не даст пользователям то, что им нужно. они хотят, и / или приводит к неожиданному поведению. Если вы предложите, например, ссылку, которая указывает на текущий документ, активация приведет к перезагрузке документа. Как пользователь, это то, чего вы не ожидаете - какую цель преследовала эта ссылка? Это приводит к тому, что пользователи запутываются.

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

Сколько вариантов вы должны дать пользователям одновременно?

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

• Не все посетители смогут использовать хитрый трюк по назначению; Например, пользователям клавиатуры придется пролистывать все ссылки на странице, чтобы найти нужную ссылку.
• Вам нужно будет добавить много HTML в каждый документ вашего сайта, и многие из них могут быть избыточными на многих страницах. Если мы проведем три уровня в меню, чтобы добраться до документа, который мы хотим прочитать, нам не нужно видеть опции, ведущие нас к 4, 5 и 6 уровням глубины.
• Вы можете ошеломить посетителей, если представите им слишком много вариантов одновременно - люди не любят принимать решения. Подумайте, сколько времени вам понадобится, чтобы выбрать еду из длинного меню ресторана.
• Если на странице не так много контента, но много ссылок, поисковые системы будут предполагать, что на этой странице не так много достоверной информации, и не будут уделять этой странице много внимания, поэтому ее будет сложнее найти при поиске в Интернете.

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

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

Рисунок 1: Пример контекстного меню - новостная статья, предлагающая связанные новостные элементы внизу.

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

Контекстные меню на веб-сайтах являются отличным способом продвижения контента в других частях сайта; с точки зрения HTML это просто еще один список ссылок.

Sitemaps

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

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

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

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

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

Рисунок 2: Меню пагинации позволяют посетителям просматривать большие наборы данных, не теряя при этом, где они находятся.

HTML не является чем-то принципиальным - еще раз вы предлагаете список ссылок с текущей ссылкой (с указанием того, какой фрагмент данных отображается и как далеко вы находитесь в своей нумерации страниц), с выделением (например, с помощью элемента <strong>) и не связаны

Основное отличие от навигации по сайту заключается в том, что с нумерацией страниц происходит много логики программирования. В зависимости от того, где вы находитесь во всем наборе данных, вам нужно показать или скрыть предыдущие, следующие, первые и последние ссылки. Если вы располагаете огромными объемами информации для навигации, вам также нужно предлагать ссылки на ориентиры, такие как 0-100 результатов, 101-200 результатов и т. Д. Поэтому маловероятно, что вы будете жестко программировать подобные меню в HTML но вместо этого создайте их на стороне сервера. Однако это не меняет правил - текущий чанк не должен ссылаться на себя, и вы не должны предлагать ссылки, которые ведут в никуда.

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

Настройка горячих точек с изображениями карт

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

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

Вы можете превратить любое изображение в меню, определив карту с различными областями (также называемыми горячими точками). Вы присваиваете карте атрибут name и соединяете изображение и карту с помощью атрибута usemap элемента <img>. Код в нашем примере выглядит следующим образом:

<nav> <img src = "skillset.gif" alt = "Набор навыков веб-разработчика - веб-стандарты, ошибки браузера и влияние пользователя" usemap = "# skillset_Map"> <map name = "skillset_Map"> <area shape = "poly "alt =" W3C Guidelines "координировать =" 90,70,113,112,67,112,90,70 "href =" w3c.html "> <area shape =" poly "alt =" Ошибки браузера "координаты =" 61,120,115,120,137,157,40,157,62,120 " href = "browser.html"> <area shape = "poly" alt = "Воздействие на пользователя" ords = "35,166,142,166,171,216,6,216,35,166" href = "userimpact.html"> </ map> </ nav>

Обратите внимание, что это работает точно так же, как и внутристраничные ссылки, что означает, что вам необходимо предвосхищать значение атрибута usemap хешем.

Каждая область имеет несколько атрибутов:

• href определяет URL, на который должна ссылаться область (который также может быть целью в том же документе).
• alt определяет альтернативный текст, который может отображаться, если изображение по какой-либо причине недоступно для просмотра.
• форма определяет форму области. Это может быть прямоугольник для прямоугольников, круг для окружностей или многоугольник для неправильных форм, определенных с помощью многоугольников.
• Координаты определяют координаты в изображении, которые должны стать горячими точками - эти значения измеряются в верхнем левом углу изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей вам нужно только определить верхний левый и нижний правый угол; для кругов нужно определить центр круга и радиус; для полигонов необходимо предоставить список всех угловых точек, разделенных запятыми.

Карты изображений не так уж и интересны для определения и ввода в виде HTML, поэтому инструменты для работы с изображениями, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML для вас).

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

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

Рисунок 4: Выбор меню занимает только одну строку на экране.

Вы можете пойти дальше с этим, группируя различные пункты меню, используя элемент <optgroup>, как показано в этом пример optgroup ,

Это покажет меню с невыбираемыми параметрами (это имена групп), как показано на рисунке 5:

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

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

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

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

Если меню находится в верхней части документа, это будет первое, что встретит пользователь. Необходимость пропустить 15 или 20 ссылок, прежде чем они попадут на какой-либо контент, может сильно раздражать. Есть два обходных пути. Во-первых, вы можете поместить меню после основного содержимого документа (вы все равно можете разместить его в верхней части экрана с помощью CSS, если хотите). Во-вторых, вы можете предложить пропустить ссылку. Пропускать ссылки - это просто ссылки, размещаемые перед главным меню, которые указывают на начало контента, позволяя посетителю пропустить меню и сразу же получить доступ к контенту, если он этого пожелает. Вы можете добавить еще одну ссылку «Перейти в меню» в конце документа, чтобы было легче вернуться наверх. Проверьте пример skiplinks для более глубокого понимания ,

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

Резюме

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

Вопросы для упражнений

• Почему стоит пометить меню списками?
• Когда вы разрабатываете навигационное меню, что вам нужно планировать в будущем?
• Каковы преимущества использования элементов <select> для меню и каковы проблемы?
• Что вы определяете с элементами <area> и для чего нужен атрибут nohref элемента area (этого здесь нет, вам нужно провести некоторые онлайн-исследования)
• Каковы преимущества пропустить ссылки?

Примечание. Этот материал был первоначально опубликован как часть учебной программы по стандартам веб-технологий Opera, доступной как 23: Создание нескольких страниц с навигационными меню , написанный Кристианом Хайльманом. Как и оригинал, он публикуется под Атрибуция Creative Commons, некоммерческая - Share Alike 2.5 лицензия.

Следующий: Проверка вашего HTML.

Похожие

Комментарии