Когда списков недостаточно — карты ссылок и формы
В 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. Меню выбора могут иметь группы вариантов выбора, которые позволяют сообщить посетителям, какие варианты близки друг другу