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

Введение

В этой статье будут рассмотрены навигация и меню Web -сайта. Вы узнаете о различных типах меню, и как создавать их в HTML. Будет также затронута тема юзабилити меню и доступности. Мы не будем пока заниматься стилевым оформлением меню, но эта статья будет служить основанием для соответствующего руководства CSS в дальнейшем в этом курсе. Имеются примеры кода для загрузки и проработки вместе с этой статьей, на которые будут делаться ссылки в ходе изложения (http://dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/menu_examples.zip). Статья имеет следующее содержание:

• Инструменты создания меню в HTML — ссылки, анкеры и списки
• Требование гибкости
• Различные типы меню
  • Навигация по странице (оглавление)
  • Навигация по сайту
    • Создание у посетителей чувства "присутствия в определенном месте"
    • Сколько возможностей предоставлять пользователям единовременно?
  • Контекстные меню
  • Схема сайта
  • Нумерация страниц
• Когда списков недостаточно — карты ссылок и формы
  • Задание горячих точек картами ссылок
  • Сохранение экранного пространства и предотвращение перегруженности ссылками с помощью форм
• Где разместить меню
• Заключение
• Контрольные вопросы

Инструменты создания меню в HTML — ссылки, анкеры и списки

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

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

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

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

<ul id="mainmenu">
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="clients.html">Our Clients</a></li>
      <li><a href="products.html">Our Products</a></li>
      <li><a href="services.html">Our Services</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>

Обратите внимание, что я поместил id в элемент ul. Это сделано для предоставления зацепки для будущего оформления с помощью CSS и добавления специального поведения с помощью JavaScript. id является очень простым способом, позволяющим другим технологиям выделить определенный элемент в коде HTML.

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

<ol id="mainmenu">
      <li><a href="index.html">Introduction</a></li>
      <li><a href="setup.html">Setting up your workspace</a></li>
      <li><a href="software.html">Software</a></li>
      <li><a href="files.html">File Resources</a></li>
      <li><a href="printers.html">Printers</a></li>
      <li><a href="methodology.html">Work Methodology</a></li>
    </ol>

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

• Весь код HTML содержится в одном элементе списка (например, ul ), что позволяет использовать каскадный эффект в CSS для различного оформления каждого элемента, и легко получить в JavaScript доступ к элементам, перемещаясь с верхнего уровня вниз.
• Списки могут быть вложенными, что позволяет легко создавать несколько уровней иерархии навигации.
• Даже без какого-либо стилевого оформления списка, представление в браузере кода HTML имеет смысл, и посетителю легче понять, что эти ссылки объединены, и составляют одну логическую единицу.

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

<h1>Меню с вложенными списками </h1>

    <h2>Опасно, неправильная разметка!</h2>

    <ul id="wrongmainmenu">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
        <ul>
          <li><a href="history.html">History</a></li>
          <li><a href="people.html">People</a></li>
        </ul>
      <li><a href="clients.html">Our Clients</a></li>
        <ul>
          <li><a href="usa.html">USA</a></li>
          <li><a href="asia.html">Asia</a></li>
          <li><a href="europe.html">Europe</a></li>
        </ul>
      <li><a href="products.html">Our Products</a></li>
      <li><a href="services.html">Our Services</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>

    <h2>Правильная разметка!</h2>

    <ul id="mainmenu">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a>
        <ul>
          <li><a href="history.html">History</a></li>
          <li><a href="people.html">People</a></li>
        </ul>
      </li>
      <li><a href="clients.html">Our Clients</a>
        <ul>
          <li><a href="usa.html">USA</a></li>
          <li><a href="asia.html">Asia</a></li>
          <li><a href="europe.html">Europe</a></li>
        </ul>
      </li>
      <li><a href="products.html">Our Products</a></li>
      <li><a href="services.html">Our Services</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>

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

<ul><li><ul><li></li></ul></li></ul>

и никогда

<ul><li></li><ul><li></li></ul></ul>.