В этой статье будут рассмотрены навигация и меню ). Статья имеет следующее содержание:
В HTML существует несколько различных типов меню и средств навигации, которые все тесно связанны с элементами link и a (анкер). По существу:
link описывают отношения между несколькими документами. Можно, например, сообщить агенту пользователя, что текущий документ является частью большего курса, который охватывает несколько документов, и какой другой документ является оглавлением.Если вы не прочитали статьи о ссылках и списках ранее в этом курсе, то я настоятельно рекомендую вернуться назад и прочитать, так как данная статья опирается частично на изложенную там информацию, чтобы избежать повторения.
<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>.
Меню сайта вряд ли будет долго оставаться неизменным -- сайты имеют тенденцию разрастаться, по мере того как добавляются новые функции и увеличивается база пользователей, поэтому необходимо создавать меню с учетом того, что пункты меню будут добавляться и удаляться по мере развития сайта, а меню будут переводиться на различные языки (поэтому ссылки будут изменять свою длину). Можно также вполне оказаться на сайтах, где код HTML меню создается динамически с помощью серверных языков, а не с помощью статического HTML. Это не означает, однако, что знание HTML становится ненужным; на самом деле оно станет еще более важным, так как это знание будет по прежнему требоваться для создания шаблонов HTML для работы серверных сценариев.
Существует несколько типов меню, которые создают в HTML при работе с различными Web -сайтами. Большинство из них можно создавать с помощью списков, хотя иногда ограничения интерфейса заставляют идти другим путем (об этом будет сказано позже). Создаваемые чаще всего меню на основе списков применяются в следующих случаях:
Web -сайта (или его части), со ссылками, указывающими на различные страницы на этом сайте.Web -сайта, сгруппированные в связанные подсписки, чтобы облегчить их понимание.Я уже рассматривал это в некоторой степени в руководстве о ссылках, но здесь более подробно описывается, что означает навигация на странице, и что нужно, чтобы заставить ее работать.
В примере, связанном с этим разделом о навигации по странице, использован список ссылок, которые указывают на 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, которая вынуждает делать немного больше.
Вы можете попытаться увидеть эту ошибку самостоятельно:
Tab, чтобы перепрыгивать с одной ссылки на другую, и клавишу Enter для активации ссылки - в данном случае для перехода к разделу, на который она указывает.Tab, то было бы правильно, чтобы браузер переместил вас (перенес фокус) на первую ссылку в выбранном разделе. Однако Internet Explorer вернет вас назад в начало меню вверху страницы!Способ обойти эту проблему чрезвычайно путаный и связан со специальным свойством , русский перевод 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>
Необходимость делать это раздражает, но также и помогает, если вы захотите оформить разделы разными стилями. Это также обходит одну из проблем заголовков в HTML: заголовки не содержат разделы, к которым они применяются; просто предполагается, что все, что следует до следующего заголовка, является частью того же раздела документа. Это делает невозможным применение стилей к различным разделам без добавления <div>. Другие языки разметки предлагают элемент <section> с <title> внутри него, примерно как <fieldset> и <legend>, которые позволяют пометить части формы.
Отметим, что перемещение по ссылкам с помощью клавиатуры в Opera слегка отличается — попробуйте проверить пример выше в Opera, затем нажмите и удерживайте клавишу Shift и используйте клавиши стрелок для перемещения по ссылкам (это работает также на элементах формы). Это называется пространственной навигацией.
Навигация по сайту является, вероятно, наиболее распространенным типом меню, которое требуется создавать. Это меню для всего сайта (или его подмножества), показывающее как варианты перехода, которые может выбирать посетитель, так и иерархию сайта. Списки прекрасно подходят для этого, как вы видите в примере навигации по сайту.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of site navigation</title>
</head>
<body>
<h1>Home</h1>
<ul id="mainmenu">
<li><strong>Home</strong></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>
</body>
</html>
Здесь не слишком много сюрпризов, по крайней мере, с точки зрения чистого HTML. Позже в курсе мы поговорим о задании стилей меню такого рода с помощью CSS и добавлении поведения с помощью JavaScript. Необходимо рассмотреть одну важную вещь, как выделить текущий документ в меню, чтобы создать у пользователя ощущение присутствия в определенном месте, и что он меняет свое местоположение (даже хотя в реальности это и не так, за исключением, конечно, случая использования мобильных устройств для просмотра Web!). Именно это мы и рассмотрим далее.
Создание у посетителей чувства "присутствия в определенном месте"
Одно из золотых правил разработки и навигации в Web состоит в том, что текущий документ никогда не должен ссылаться на себя самого, но, наоборот, должен явно отличаться от других записей в меню. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту. Существуют крайние случаи, такие как Web -приложения, permalinks в блогах, и так называемые "одностраничные" Web -сайты, но в 99% случаев ссылка на документ, на который вы уже смотрите, является избыточной и путающей посетителя.
В руководстве по ссылкам я утверждал, что ссылка является соглашением и обязательством: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но нужно быть осторожным - вы потеряете авторитет и доверие, если эта ссылка не предоставляет пользователям то, что они хотят получить, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. Как пользователь, вы этого не ожидаете - какой смысл щелкать на этой ссылке? Возникает только дополнительная путаница.
Это является причиной, почему текущая страница никогда не должна присутствовать в меню ссылок. Можно удалить ее вообще, или еще лучше деактивировать ее как ссылку, но выделить (например, с помощью элемента strong ) - это предоставит пользователям визуальную подсказку и сообщит также слепым посетителям, что это важно - этот пример с выделением текущей страницы показан ниже.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of site navigation</title>
</head>
<body>
<h1>About Us</h1>
<ul id="mainmenu">
<li><a href="home.html">Home</a></li>
<li><strong>About Us</strong></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>
</body>
</html>
Сколько возможностей предоставлять пользователям единовременно?
Другой вопрос для рассмотрения, сколько возможностей вы хотите предоставить посетителям. Многие меню, которые встречаются в Web, пытаются сделать каждую страницу сайта доступной из одного единственного меню. Здесь на помощь приходят сценарии и приемы использования CSS - можно сделать меню более управляемым, скрывая части меню, пока пользователь не выберет определенную область
(разворачивающиеся меню, как их иногда называют). Это хорошо придумано с технической точки зрения, но при таком подходе возникает несколько проблем:
Tab, только чтобы добраться до требуемой ссылки.HTML в каждый документ сайта, чтобы это реализовать, и большая часть его будет избыточна на многих страницах. Если я спустился на три уровня в меню, чтобы добраться до документа, который хочу прочитать, я не должен видеть варианты, ведущие на 4, 5, и 6 уровни глубины.Web.В конце концов, вам решать, сколько пунктов поместить в меню - различные проекты будут требовать различных вариантов - но если сомневаетесь, необходимо попробовать сократить меню до ссылок только на основные разделы сайта. Всегда можно будет добавить дополнительные подменю, где потребуется.
Контекстные меню являются ссылками, которые создаются на основе содержимого текущего документа, и предлагают дополнительную информацию, связанную с текущей страницей. Классическим примером являются ссылки на "связанные статьи", которые можно видеть в начале новостных статей, как показано на рис. 23.1
(рис 23.1) Пример контекстного меню — новостная статья предлагает внизу связанные новостные ссылки
Это немного отличается от контекстных меню в программных интерфейсах пользователя, которое предлагает различные варианты выбора, в зависимости от того, где вызывается (меню появляющиеся при щелчке правой кнопкой мыши или при щелчке с нажатой клавишей Ctrl в настольных приложениях, которые предлагают специальные возможности, в зависимости от того, где находится в данный момент указатель мыши).
Контекстные меню на Web-сайтах являются прекрасным способом представления контента в других частях сайта; с точки зрения HTML они являются просто еще одним списком ссылок.
Схема сайта является тем, что и можно было бы ожидать — схемой всех различных страниц (или основных разделов, если речь идет о действительно огромных сайтах) сайта. Она позволяет посетителям сайта получить представление обо всей структуре сайта, и быстро перейти в требуемое место - даже если требуемая страница находится глубоко в иерархии страниц.
Как схема сайта, так и поиск по сайту являются прекрасным способом предложить посетителям возможную опору в случае необходимости, когда они заблудились, или предоставить быстрый доступ для тех, кто торопится.
С точки зрения HTML схема сайта может быть либо одним массивным списком вложенных списков полным ссылок или - в случае очень больших сайтов - заголовки разделов с вложенными ссылками специфической иерархии разделов, или даже формы поиска для каждого из разделов.
Нумерация страниц необходима, когда вы должны предложить способ перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска (такими, как поиск Google или Yahoo ).
Нумерация страниц отличается от других типов навигации, потому что она обычно соединяется с тем же документом - но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Несколько примеров нумерации страниц показано на рис. 23.2 :
(рис 23.2) Меню нумерации страниц позволяют посетителям просматривать большие множества данных без потери представления о том, где они находятся
HTML не предлагает ничего новаторского - вы снова предоставляете список ссылок вместе с текущей ссылкой (указывающей, какой фрагмент данных выведен, и как далеко в разбиении на страницы вы находитесь), которая не является фактической ссылкой и выделена (например, с помощью элемента strong ).
Основное отличие от навигации по сайту состоит в том, что для нумерации страниц требуется много программной логики. В зависимости от того, где вы находитесь во всем множестве данных, необходимо показать или скрыть предыдущие, следующие, первые или последние ссылки. Если имеется действительно массивный объем информации для просмотра, то вам придется также предложить ссылки для таких меток как 100, 200 и многих других значений. Поэтому меню обычно не кодируется жестко как в HTML, а создается на сервере. Это, однако, не изменяет правил - текущий фрагмент не должен ссылаться на себя самого, и вы не должны предлагать ссылки, которые никуда не ведут.
В 99% случаев упорядоченные или неупорядоченные списки являются достаточной конструкцией HTML для меню, особенно в связи с тем, что логический порядок и структура вложений также прекрасно подходят для применения стилей CSS. Существуют, однако, ситуации, которые могут потребовать для создания другой техники.
Одним из методов являются клиентские карты ссылок. Карты ссылок превращают изображение в меню, превращая изображение в интерактивные области, которые можно соединить с различными документами. Пример карты ссылок, связанный с этим разделом, превращает изображение в треугольное меню, показанное на рис. 23.3 , на котором можно щелкать мышью.
(рис 23.3) По умолчанию карта с элементами областями может превратить части изображения в интерактивные элементы
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of an image-map</title>
</head>
<body>
<img src="skillset.gif" alt="A web developer's skillset - web standards, browser bugs and user impact" usemap="#skillset_Map">
<map name="skillset_Map">
<area shape="poly" alt="W3C Guidelines" coords="90,70,113,112,67,112,90,70" href="w3c.html">
<area shape="poly" alt="Browser Bugs" coords="61,120,115,120,137,157,40,157,62,120" href="browser.html">
<area shape="poly" alt="User Impact" coords="35,166,142,166,171,216,6,216,35,166" href="userimpact.html">
</map>
</body>
</html>
Любое изображение можно превратить в меню, определяя карту с различными областями (называемые также горячими точками). Для карты задается атрибут name, а изображение и карта соединяются с помощью атрибута usemap элемента img. Отметим, что это работает точно также как ссылки на странице, что означает, что перед значением атрибута usemap необходимо поставить символ решетки (#).
Каждая область должна иметь несколько атрибутов:
href
определяет
URL, с которым должна соединяться ссылка (может быть также некоторой меткой в том же документе)
alt
определяет альтернативный текст на тот случай, если изображение невозможно найти или агент пользователя не поддерживает изображения
shape
определяет форму области. Это может быть
rectдля прямоугольников,circleдля окружностей илиpolyдля нерегулярных форм, определяемых с помощью многоугольников (полигонов).
coords
Определяет координаты в изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения, и могут измеряться в пикселях или процентах. Для прямоугольных областей необходимо определить только верхний левый и нижний правый углы; для окружностей необходимо определить центр окружности и радиус; для полигонов необходимо предоставить список всех угловых точек.
Карты ссылок не слишком интересно определять и вводить в виде HTML, вот почему инструменты работы с изображениями, такие как Adobe Image Ready или Fireworks, предлагают возможность создания их визуально (и генерируют соответствующий код HTML ).
Другой методикой, которую можно применять, является создание формы, использующей элемент select. Можно определить различные страницы как варианты выбора в элементе select, и посетители смогут выбрать вариант и затем отправить форму, чтобы перейти на другие страницы. Код примера работающего меню на базе формы показан ниже.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of a form for navigation</title>
</head>
<body>
<form action="send.php">
<p>
<label for="nav">Go to: </label>
<select id="nav" name="url">
<option value="about.html">About us</option>
<option value="contact.html">Contact us</option>
<option value="clients.html">Clients</option>
<option value="partners.html">Partners</option>
</select>
<input type="submit" value="go!">
</p>
</form>
</body>
</html>
Наиболее очевидное преимущество использования меню такого типа состоит в том, что можно предлагать множество вариантов выбора, используя немного пространства на экране, так как браузеры представляют меню одной строкой - см. рис. 23.4 .
(рис 23.4) Меню выбора занимает на экране только одну строку
Можно пойти немного дальше, объединяя в группы различные варианты выбора меню с помощью элемента optgroup, как показано в следующем примере.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of a form for navigation</title>
</head>
<body>
<form action="send.php">
<p>
<label for="nav">Go to: </label>
<select id="nav" name="url">
<optgroup label="About Us">
<option value="about.html">About Us</option>
<option value="office.html">Offices</option>
<option value="people.html">People</option>
</optgroup>
<optgroup label="Contact Us">
<option value="email.html">Email form</option>
<option value="phonenumbers.html">Phone numbers</option>
<option value="addresses.html">Addresses</option>
</optgroup>
<optgroup label="Clients">
<option value="usa.html">USA</option>
<option value="asia.html">Asia</option>
<option value="europe.html">Europe</option>
</optgroup>
</select>
<input type="submit" value="go!">
</p>
</form>
</body>
</html>
Этот код выводит меню с именами групп, которые не являются ссылками выбора, как показано на рис. 23.5:
Эта техника позволяет использовать почти любое доступное пространство, но это означает также, что необходимо иметь серверный сценарий, для отправки посетителей на выбранные ими страницы. Можно использовать также JavaScript, чтобы заставить ссылки работать, но невозможно полагаться на то, что JavaScript будет доступен - необходимо убедиться, что пользователи могут также использовать меню при отключенном JavaScript.
Другое, менее очевидное преимущество состоит в том, что вы предлагаете не слишком много ссылок в документе. Это означает, что пользователи вспомогательных технологий не будут перегружены (которые часто будут иметь ссылки, представленные одним большим списком). Это означает также, что поисковые системы не рассматривают ссылки на странице бесполезными, так как отношение ссылок к тексту делает документ похожим на схему сайта. Однако многие вспомогательные технологии могут создавать карту ссылок ваших страниц; если все ваши важные ссылки находятся в меню выбора, есть вероятность, что посетитель может никогда не столкнуться с ними. Поэтому лучше предложить анкерные ссылки на основные страницы, и меню с элементом select, чтобы предложить дополнительные возможности. Посетители смогут использовать их, но роботам поисковых систем не нужно знать об их существовании.
(рис 23.5) Меню выбора могут иметь группы вариантов выбора, которые позволяют сообщить посетителям, какие варианты близки друг другу
Последнее, что надо упомянуть в отношении меню HTML, состоит в том, что размещение меню играет большую роль. Рассмотрим посетителей, которые не имеют механизма прокрутки, или могут не видеть, и поэтому полагаются на клавиатурную навигацию для перемещения по сайту. Первое, что они встречают, когда загружают документ, это его размещение и заголовок; затем документ считывается сверху вниз, останавливаясь на каждой ссылке, чтобы спросить посетителя, не хочет ли он последовать по этой ссылке или нет. Другая возможность состоит в получении списка всех ссылок или переход по заголовкам.
Если меню находится в начале документа, то это будет первое, что встретит пользователь. Необходимость пропустить от 15 до 20 ссылок, прежде чем появится какой-либо контент, может быть на самом деле достаточно неприятной. Есть две возможности обойти это. Первое, можно разместить меню после основного контента документа (вы можете все равно поместить его вверху экрана с помощью CSS, если захотите). Второе, можно предложить ссылку для обхода. Ссылки обхода являются просто ссылками, помещаемыми перед основным меню, которые указывают на начало контента, позволяя посетителю перепрыгнуть через меню и сразу перейти к контенту, если он захочет. Можно добавить еще одну ссылку "перейти к меню" в конце документа, чтобы облегчить возвращение в начало. Рассмотрим, для примера, следующий код со ссылкой обхода:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of skip links</title>
</head>
<body>
<p><a href="#content">Skip menu and go to content</a></p>
<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>
<div id="content">
<h1>Content</h1>
</div>
<p><a href="#mainmenu">go to menu</a></p>
</body>
</html>
Ссылки обхода являются не только полезными для такого рода затруднений, но делают жизнь значительно легче, когда вы перемещаетесь по сайту на мобильном устройстве с небольшим экраном.
В этом руководстве были рассмотрены различные типы меню, которые, скорее всего, придется создавать в HTML. Были рассмотрены следующие вопросы:
HTML для определения меню.Мы вернемся к некоторым из этих тем позже в разделе CSS этого курса, чтобы посмотреть, как лучше представить эти конструкции HTML, чтобы они стали еще более очевидными для посетителей в качестве меню.
select для меню, и в чем проблемы?area, и что такое атрибут nohref элемента area (это здесь не рассматривалось, необходимо выполнить некоторый поиск в сети)Крис Хайлман проработал Web -разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.
Крис поддерживает блог на сайте ) и доступен во многих социальных сетях как "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474)
В этой статье будут рассмотрены навигация и меню ). Статья имеет следующее содержание:
В HTML существует несколько различных типов меню и средств навигации, которые все тесно связанны с элементами link и a (анкер). По существу:
link описывают отношения между несколькими документами. Можно, например, сообщить агенту пользователя, что текущий документ является частью большего курса, который охватывает несколько документов, и какой другой документ является оглавлением.Если вы не прочитали статьи о ссылках и списках ранее в этом курсе, то я настоятельно рекомендую вернуться назад и прочитать, так как данная статья опирается частично на изложенную там информацию, чтобы избежать повторения.
<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>.
Меню сайта вряд ли будет долго оставаться неизменным -- сайты имеют тенденцию разрастаться, по мере того как добавляются новые функции и увеличивается база пользователей, поэтому необходимо создавать меню с учетом того, что пункты меню будут добавляться и удаляться по мере развития сайта, а меню будут переводиться на различные языки (поэтому ссылки будут изменять свою длину). Можно также вполне оказаться на сайтах, где код HTML меню создается динамически с помощью серверных языков, а не с помощью статического HTML. Это не означает, однако, что знание HTML становится ненужным; на самом деле оно станет еще более важным, так как это знание будет по прежнему требоваться для создания шаблонов HTML для работы серверных сценариев.
Существует несколько типов меню, которые создают в HTML при работе с различными Web -сайтами. Большинство из них можно создавать с помощью списков, хотя иногда ограничения интерфейса заставляют идти другим путем (об этом будет сказано позже). Создаваемые чаще всего меню на основе списков применяются в следующих случаях:
Web -сайта (или его части), со ссылками, указывающими на различные страницы на этом сайте.Web -сайта, сгруппированные в связанные подсписки, чтобы облегчить их понимание.Я уже рассматривал это в некоторой степени в руководстве о ссылках, но здесь более подробно описывается, что означает навигация на странице, и что нужно, чтобы заставить ее работать.
В примере, связанном с этим разделом о навигации по странице, использован список ссылок, которые указывают на 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, которая вынуждает делать немного больше.
Вы можете попытаться увидеть эту ошибку самостоятельно:
Tab, чтобы перепрыгивать с одной ссылки на другую, и клавишу Enter для активации ссылки - в данном случае для перехода к разделу, на который она указывает.Tab, то было бы правильно, чтобы браузер переместил вас (перенес фокус) на первую ссылку в выбранном разделе. Однако Internet Explorer вернет вас назад в начало меню вверху страницы!Способ обойти эту проблему чрезвычайно путаный и связан со специальным свойством , русский перевод 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>
Необходимость делать это раздражает, но также и помогает, если вы захотите оформить разделы разными стилями. Это также обходит одну из проблем заголовков в HTML: заголовки не содержат разделы, к которым они применяются; просто предполагается, что все, что следует до следующего заголовка, является частью того же раздела документа. Это делает невозможным применение стилей к различным разделам без добавления <div>. Другие языки разметки предлагают элемент <section> с <title> внутри него, примерно как <fieldset> и <legend>, которые позволяют пометить части формы.
Отметим, что перемещение по ссылкам с помощью клавиатуры в Opera слегка отличается — попробуйте проверить пример выше в Opera, затем нажмите и удерживайте клавишу Shift и используйте клавиши стрелок для перемещения по ссылкам (это работает также на элементах формы). Это называется пространственной навигацией.
Навигация по сайту является, вероятно, наиболее распространенным типом меню, которое требуется создавать. Это меню для всего сайта (или его подмножества), показывающее как варианты перехода, которые может выбирать посетитель, так и иерархию сайта. Списки прекрасно подходят для этого, как вы видите в примере навигации по сайту.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of site navigation</title>
</head>
<body>
<h1>Home</h1>
<ul id="mainmenu">
<li><strong>Home</strong></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>
</body>
</html>
Здесь не слишком много сюрпризов, по крайней мере, с точки зрения чистого HTML. Позже в курсе мы поговорим о задании стилей меню такого рода с помощью CSS и добавлении поведения с помощью JavaScript. Необходимо рассмотреть одну важную вещь, как выделить текущий документ в меню, чтобы создать у пользователя ощущение присутствия в определенном месте, и что он меняет свое местоположение (даже хотя в реальности это и не так, за исключением, конечно, случая использования мобильных устройств для просмотра Web!). Именно это мы и рассмотрим далее.
Создание у посетителей чувства "присутствия в определенном месте"
Одно из золотых правил разработки и навигации в Web состоит в том, что текущий документ никогда не должен ссылаться на себя самого, но, наоборот, должен явно отличаться от других записей в меню. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту. Существуют крайние случаи, такие как Web -приложения, permalinks в блогах, и так называемые "одностраничные" Web -сайты, но в 99% случаев ссылка на документ, на который вы уже смотрите, является избыточной и путающей посетителя.
В руководстве по ссылкам я утверждал, что ссылка является соглашением и обязательством: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но нужно быть осторожным - вы потеряете авторитет и доверие, если эта ссылка не предоставляет пользователям то, что они хотят получить, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. Как пользователь, вы этого не ожидаете - какой смысл щелкать на этой ссылке? Возникает только дополнительная путаница.
Это является причиной, почему текущая страница никогда не должна присутствовать в меню ссылок. Можно удалить ее вообще, или еще лучше деактивировать ее как ссылку, но выделить (например, с помощью элемента strong ) - это предоставит пользователям визуальную подсказку и сообщит также слепым посетителям, что это важно - этот пример с выделением текущей страницы показан ниже.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of site navigation</title>
</head>
<body>
<h1>About Us</h1>
<ul id="mainmenu">
<li><a href="home.html">Home</a></li>
<li><strong>About Us</strong></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>
</body>
</html>
Сколько возможностей предоставлять пользователям единовременно?
Другой вопрос для рассмотрения, сколько возможностей вы хотите предоставить посетителям. Многие меню, которые встречаются в Web, пытаются сделать каждую страницу сайта доступной из одного единственного меню. Здесь на помощь приходят сценарии и приемы использования CSS - можно сделать меню более управляемым, скрывая части меню, пока пользователь не выберет определенную область
(разворачивающиеся меню, как их иногда называют). Это хорошо придумано с технической точки зрения, но при таком подходе возникает несколько проблем:
Tab, только чтобы добраться до требуемой ссылки.HTML в каждый документ сайта, чтобы это реализовать, и большая часть его будет избыточна на многих страницах. Если я спустился на три уровня в меню, чтобы добраться до документа, который хочу прочитать, я не должен видеть варианты, ведущие на 4, 5, и 6 уровни глубины.Web.В конце концов, вам решать, сколько пунктов поместить в меню - различные проекты будут требовать различных вариантов - но если сомневаетесь, необходимо попробовать сократить меню до ссылок только на основные разделы сайта. Всегда можно будет добавить дополнительные подменю, где потребуется.
Контекстные меню являются ссылками, которые создаются на основе содержимого текущего документа, и предлагают дополнительную информацию, связанную с текущей страницей. Классическим примером являются ссылки на "связанные статьи", которые можно видеть в начале новостных статей, как показано на рис. 23.1
(рис 23.1) Пример контекстного меню — новостная статья предлагает внизу связанные новостные ссылки
Это немного отличается от контекстных меню в программных интерфейсах пользователя, которое предлагает различные варианты выбора, в зависимости от того, где вызывается (меню появляющиеся при щелчке правой кнопкой мыши или при щелчке с нажатой клавишей Ctrl в настольных приложениях, которые предлагают специальные возможности, в зависимости от того, где находится в данный момент указатель мыши).
Контекстные меню на Web-сайтах являются прекрасным способом представления контента в других частях сайта; с точки зрения HTML они являются просто еще одним списком ссылок.
Схема сайта является тем, что и можно было бы ожидать — схемой всех различных страниц (или основных разделов, если речь идет о действительно огромных сайтах) сайта. Она позволяет посетителям сайта получить представление обо всей структуре сайта, и быстро перейти в требуемое место - даже если требуемая страница находится глубоко в иерархии страниц.
Как схема сайта, так и поиск по сайту являются прекрасным способом предложить посетителям возможную опору в случае необходимости, когда они заблудились, или предоставить быстрый доступ для тех, кто торопится.
С точки зрения HTML схема сайта может быть либо одним массивным списком вложенных списков полным ссылок или - в случае очень больших сайтов - заголовки разделов с вложенными ссылками специфической иерархии разделов, или даже формы поиска для каждого из разделов.
Нумерация страниц необходима, когда вы должны предложить способ перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска (такими, как поиск Google или Yahoo ).
Нумерация страниц отличается от других типов навигации, потому что она обычно соединяется с тем же документом - но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Несколько примеров нумерации страниц показано на рис. 23.2 :
(рис 23.2) Меню нумерации страниц позволяют посетителям просматривать большие множества данных без потери представления о том, где они находятся
HTML не предлагает ничего новаторского - вы снова предоставляете список ссылок вместе с текущей ссылкой (указывающей, какой фрагмент данных выведен, и как далеко в разбиении на страницы вы находитесь), которая не является фактической ссылкой и выделена (например, с помощью элемента strong ).
Основное отличие от навигации по сайту состоит в том, что для нумерации страниц требуется много программной логики. В зависимости от того, где вы находитесь во всем множестве данных, необходимо показать или скрыть предыдущие, следующие, первые или последние ссылки. Если имеется действительно массивный объем информации для просмотра, то вам придется также предложить ссылки для таких меток как 100, 200 и многих других значений. Поэтому меню обычно не кодируется жестко как в HTML, а создается на сервере. Это, однако, не изменяет правил - текущий фрагмент не должен ссылаться на себя самого, и вы не должны предлагать ссылки, которые никуда не ведут.
В 99% случаев упорядоченные или неупорядоченные списки являются достаточной конструкцией HTML для меню, особенно в связи с тем, что логический порядок и структура вложений также прекрасно подходят для применения стилей CSS. Существуют, однако, ситуации, которые могут потребовать для создания другой техники.
Одним из методов являются клиентские карты ссылок. Карты ссылок превращают изображение в меню, превращая изображение в интерактивные области, которые можно соединить с различными документами. Пример карты ссылок, связанный с этим разделом, превращает изображение в треугольное меню, показанное на рис. 23.3 , на котором можно щелкать мышью.
(рис 23.3) По умолчанию карта с элементами областями может превратить части изображения в интерактивные элементы
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of an image-map</title>
</head>
<body>
<img src="skillset.gif" alt="A web developer's skillset - web standards, browser bugs and user impact" usemap="#skillset_Map">
<map name="skillset_Map">
<area shape="poly" alt="W3C Guidelines" coords="90,70,113,112,67,112,90,70" href="w3c.html">
<area shape="poly" alt="Browser Bugs" coords="61,120,115,120,137,157,40,157,62,120" href="browser.html">
<area shape="poly" alt="User Impact" coords="35,166,142,166,171,216,6,216,35,166" href="userimpact.html">
</map>
</body>
</html>
Любое изображение можно превратить в меню, определяя карту с различными областями (называемые также горячими точками). Для карты задается атрибут name, а изображение и карта соединяются с помощью атрибута usemap элемента img. Отметим, что это работает точно также как ссылки на странице, что означает, что перед значением атрибута usemap необходимо поставить символ решетки (#).
Каждая область должна иметь несколько атрибутов:
href
определяет
URL, с которым должна соединяться ссылка (может быть также некоторой меткой в том же документе)
alt
определяет альтернативный текст на тот случай, если изображение невозможно найти или агент пользователя не поддерживает изображения
shape
определяет форму области. Это может быть
rectдля прямоугольников,circleдля окружностей илиpolyдля нерегулярных форм, определяемых с помощью многоугольников (полигонов).
coords
Определяет координаты в изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения, и могут измеряться в пикселях или процентах. Для прямоугольных областей необходимо определить только верхний левый и нижний правый углы; для окружностей необходимо определить центр окружности и радиус; для полигонов необходимо предоставить список всех угловых точек.
Карты ссылок не слишком интересно определять и вводить в виде HTML, вот почему инструменты работы с изображениями, такие как Adobe Image Ready или Fireworks, предлагают возможность создания их визуально (и генерируют соответствующий код HTML ).
Другой методикой, которую можно применять, является создание формы, использующей элемент select. Можно определить различные страницы как варианты выбора в элементе select, и посетители смогут выбрать вариант и затем отправить форму, чтобы перейти на другие страницы. Код примера работающего меню на базе формы показан ниже.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of a form for navigation</title>
</head>
<body>
<form action="send.php">
<p>
<label for="nav">Go to: </label>
<select id="nav" name="url">
<option value="about.html">About us</option>
<option value="contact.html">Contact us</option>
<option value="clients.html">Clients</option>
<option value="partners.html">Partners</option>
</select>
<input type="submit" value="go!">
</p>
</form>
</body>
</html>
Наиболее очевидное преимущество использования меню такого типа состоит в том, что можно предлагать множество вариантов выбора, используя немного пространства на экране, так как браузеры представляют меню одной строкой - см. рис. 23.4 .
(рис 23.4) Меню выбора занимает на экране только одну строку
Можно пойти немного дальше, объединяя в группы различные варианты выбора меню с помощью элемента optgroup, как показано в следующем примере.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of a form for navigation</title>
</head>
<body>
<form action="send.php">
<p>
<label for="nav">Go to: </label>
<select id="nav" name="url">
<optgroup label="About Us">
<option value="about.html">About Us</option>
<option value="office.html">Offices</option>
<option value="people.html">People</option>
</optgroup>
<optgroup label="Contact Us">
<option value="email.html">Email form</option>
<option value="phonenumbers.html">Phone numbers</option>
<option value="addresses.html">Addresses</option>
</optgroup>
<optgroup label="Clients">
<option value="usa.html">USA</option>
<option value="asia.html">Asia</option>
<option value="europe.html">Europe</option>
</optgroup>
</select>
<input type="submit" value="go!">
</p>
</form>
</body>
</html>
Этот код выводит меню с именами групп, которые не являются ссылками выбора, как показано на рис. 23.5:
Эта техника позволяет использовать почти любое доступное пространство, но это означает также, что необходимо иметь серверный сценарий, для отправки посетителей на выбранные ими страницы. Можно использовать также JavaScript, чтобы заставить ссылки работать, но невозможно полагаться на то, что JavaScript будет доступен - необходимо убедиться, что пользователи могут также использовать меню при отключенном JavaScript.
Другое, менее очевидное преимущество состоит в том, что вы предлагаете не слишком много ссылок в документе. Это означает, что пользователи вспомогательных технологий не будут перегружены (которые часто будут иметь ссылки, представленные одним большим списком). Это означает также, что поисковые системы не рассматривают ссылки на странице бесполезными, так как отношение ссылок к тексту делает документ похожим на схему сайта. Однако многие вспомогательные технологии могут создавать карту ссылок ваших страниц; если все ваши важные ссылки находятся в меню выбора, есть вероятность, что посетитель может никогда не столкнуться с ними. Поэтому лучше предложить анкерные ссылки на основные страницы, и меню с элементом select, чтобы предложить дополнительные возможности. Посетители смогут использовать их, но роботам поисковых систем не нужно знать об их существовании.
(рис 23.5) Меню выбора могут иметь группы вариантов выбора, которые позволяют сообщить посетителям, какие варианты близки друг другу
Последнее, что надо упомянуть в отношении меню HTML, состоит в том, что размещение меню играет большую роль. Рассмотрим посетителей, которые не имеют механизма прокрутки, или могут не видеть, и поэтому полагаются на клавиатурную навигацию для перемещения по сайту. Первое, что они встречают, когда загружают документ, это его размещение и заголовок; затем документ считывается сверху вниз, останавливаясь на каждой ссылке, чтобы спросить посетителя, не хочет ли он последовать по этой ссылке или нет. Другая возможность состоит в получении списка всех ссылок или переход по заголовкам.
Если меню находится в начале документа, то это будет первое, что встретит пользователь. Необходимость пропустить от 15 до 20 ссылок, прежде чем появится какой-либо контент, может быть на самом деле достаточно неприятной. Есть две возможности обойти это. Первое, можно разместить меню после основного контента документа (вы можете все равно поместить его вверху экрана с помощью CSS, если захотите). Второе, можно предложить ссылку для обхода. Ссылки обхода являются просто ссылками, помещаемыми перед основным меню, которые указывают на начало контента, позволяя посетителю перепрыгнуть через меню и сразу перейти к контенту, если он захочет. Можно добавить еще одну ссылку "перейти к меню" в конце документа, чтобы облегчить возвращение в начало. Рассмотрим, для примера, следующий код со ссылкой обхода:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of skip links</title>
</head>
<body>
<p><a href="#content">Skip menu and go to content</a></p>
<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>
<div id="content">
<h1>Content</h1>
</div>
<p><a href="#mainmenu">go to menu</a></p>
</body>
</html>
Ссылки обхода являются не только полезными для такого рода затруднений, но делают жизнь значительно легче, когда вы перемещаетесь по сайту на мобильном устройстве с небольшим экраном.
В этом руководстве были рассмотрены различные типы меню, которые, скорее всего, придется создавать в HTML. Были рассмотрены следующие вопросы:
HTML для определения меню.Мы вернемся к некоторым из этих тем позже в разделе CSS этого курса, чтобы посмотреть, как лучше представить эти конструкции HTML, чтобы они стали еще более очевидными для посетителей в качестве меню.
select для меню, и в чем проблемы?area, и что такое атрибут nohref элемента area (это здесь не рассматривалось, необходимо выполнить некоторый поиск в сети)Крис Хайлман проработал Web -разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.
Крис поддерживает блог на сайте ) и доступен во многих социальных сетях как "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.