НОУ ИНТУИТ | Введение в стандарты Web. Лекция 23: Создание страниц с навигационными меню

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 8191 / 825 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00

Темы: Интернет-технологии, Программирование, Школа

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 187 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Требование гибкости

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

Различные типы меню

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

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

Навигация по странице (оглавление)

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

В примере, связанном с этим разделом о навигации по странице, использован список ссылок, которые указывают на анкеры, расположенные далее на странице. Чтобы соединиться с анкерами, используется атрибут id в элементах, к которым можно перемещаться, и атрибут href, значение которого определяется как символ решетки (#), за которым следует такое же имя, как и значение id анкера, на который должна указывать эта ссылка. Каждый раздел страницы имеет также ссылку "back to menu" ("назад в меню"), которая работает таким же образом, но указывает в обратном направлении на меню.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Example of in-page navigation</title>
  </head>
  <body>
    <h1>Welcome to the company!</h1>
    <ol id="mainmenu">
      <li><a href="#intro">Introduction</a></li>
      <li><a href="#setup">Setting up your workspace</a></li>
      <li><a href="#software">Software</a></li>
      <li><a href="#files">File Resources</a></li>
      <li><a href="#printers">Printers</a></li>
      <li><a href="#methodology">Work Methodology</a></li>
    </ol>

    <h2 id="intro">Introduction</h2>
    <p>Lorem ipsum dolor sit amet and so on...</p>
    <p><a href="#mainmenu">Back to menu</a></p>

    <h2 id="setup">Setting up your workspace</h2>
    <p>Lorem ipsum dolor sit amet and so on...</p>
    <p><a href="#mainmenu">Back to menu</a></p>

    <h2 id="software">Software</h2>
    <p>Lorem ipsum dolor sit amet and so on...</p>
    <p><a href="#mainmenu">Back to menu</a></p>

    <h2 id="files">File Resources</h2>
    <p>Lorem ipsum dolor sit amet and so on...</p>
    <p><a href="#mainmenu">Back to menu</a></p>

    <h2 id="printers">Printers</h2>
    <p>Lorem ipsum dolor sit amet and so on...</p>
    <p><a href="#mainmenu">Back to menu</a></p>

    <h2 id="methodology">Work Methodology</h2>
    <p>Lorem ipsum dolor sit amet and so on...</p>
    <p><a href="#mainmenu">Back to menu</a></p>

  </body>
</html>

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

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

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

Способ обойти эту проблему чрезвычайно путаный и связан со специальным свойством Internet Explorer, называемым <hasLayout>. Его можно использовать различными способами, которые описаны в прекрасной статье Инго Чао "On having layout" (http://www.satzansatz.de/cssd/onhavinglayout.html, русский перевод http://habrahabr.ru/blogs/webdev/31236/). Проще всего задать ширину ( width ) элемента div с помощью CSS, как в этом примере. Именно это требуется IE - чтобы анкер находился внутри элемента с hasLayout.

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Example of in-page navigation</title>
    <style type="text/css">
      div{width:100%;}
    </style>
  </head>
  <body>
    <h1>Welcome to the company!</h1>
    <ol id="mainmenu">
      <li><a href="#intro">Introduction</a></li>
      <li><a href="#setup">Setting up your workspace</a></li>
      <li><a href="#software">Software</a></li>
      <li><a href="#files">File Resources</a></li>
      <li><a href="#printers">Printers</a></li>
      <li><a href="#methodology">Work Methodology</a></li>
    </ol>

    <div>
      <h2 id="intro">Introduction</h2>
      <p>Lorem ipsum dolor sit amet and so on...</p>
      <p><a href="#mainmenu">Back to menu</a></p>
    </div>

    <div>
      <h2 id="setup">Setting up your workspace</h2>
      <p>Lorem ipsum dolor sit amet and so on...</p>
      <p><a href="#mainmenu">Back to menu</a></p>
    </div>

    <div>
      <h2 id="software">Software</h2>
      <p>Lorem ipsum dolor sit amet and so on...</p>
      <p><a href="#mainmenu">Back to menu</a></p>
    </div>

    <div>
      <h2 id="files">File Resources</h2>
      <p>Lorem ipsum dolor sit amet and so on...</p>
      <p><a href="#mainmenu">Back to menu</a></p>
    </div>

    <div>
      <h2 id="printers">Printers</h2>
      <p>Lorem ipsum dolor sit amet and so on...</p>
      <p><a href="#mainmenu">Back to menu</a></p>
    </div>

    <div>
      <h2 id="methodology">Work Methodology</h2>
      <p>Lorem ipsum dolor sit amet and so on...</p>
      <p><a href="#mainmenu">Back to menu</a></p>
    </div>

  </body>
</html>

Дальше >>

Авторизоваться

Введение в стандарты Web

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

Требование гибкости

Различные типы меню

Навигация по странице (оглавление)

Вопросы и ответы