|
|
Инструменты создания меню в 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>.Требование гибкости Меню сайта вряд ли будет долго оставаться неизменным -- сайты имеют тенденцию разрастаться, по мере того как добавляются новые функции и увеличивается база пользователей, поэтому необходимо создавать меню с учетом того, что пункты меню будут добавляться и удаляться по мере развития сайта, а меню будут переводиться на различные языки (поэтому ссылки будут изменять свою длину). Можно также вполне оказаться на сайтах, где код 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, которая вынуждает делать немного больше.Вы можете попытаться увидеть эту ошибку самостоятельно: 1. Откройте документ в Internet Explorer 6 или 7 2. Не используйте мышь, вместо этого используйте для перемещения по документу клавиатуру. Можно нажимать клавишу Tab, чтобы перепрыгивать с одной ссылки на другую, и клавишу Enter для активации ссылки - в данном случае для перехода к разделу, на который она указывает. 3. Кажется все нормально, когда это делается — браузер перемещается вниз, туда куда требуется. 4. Если снова нажать клавишу 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>Необходимость делать это раздражает, но также и помогает, если вы захотите оформить разделы разными стилями. Это также обходит одну из проблем заголовков в 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
Это немного отличается от контекстных меню в программных интерфейсах пользователя, которое предлагает различные варианты выбора, в зависимости от того, где вызывается (меню появляющиеся при щелчке правой кнопкой мыши или при щелчке с нажатой клавишей Ctrl в настольных приложениях, которые предлагают специальные возможности, в зависимости от того, где находится в данный момент указатель мыши). Контекстные меню на Web -сайтах являются прекрасным способом представления контента в других частях сайта; с точки зрения HTML они являются просто еще одним списком ссылок. Схема сайта Схема сайта является тем, что и можно было бы ожидать — схемой всех различных страниц (или основных разделов, если речь идет о действительно огромных сайтах) сайта. Она позволяет посетителям сайта получить представление обо всей структуре сайта, и быстро перейти в требуемое место - даже если требуемая страница находится глубоко в иерархии страниц. Как схема сайта, так и поиск по сайту являются прекрасным способом предложить посетителям возможную опору в случае необходимости, когда они заблудились, или предоставить быстрый доступ для тех, кто торопится. С точки зрения HTML схема сайта может быть либо одним массивным списком вложенных списков полным ссылок или - в случае очень больших сайтов - заголовки разделов с вложенными ссылками специфической иерархии разделов, или даже формы поиска для каждого из разделов. Нумерация страниц Нумерация страниц необходима, когда вы должны предложить способ перемещения в большом документе, разбитом на отдельные страницы. Можно встретить нумерацию страниц в больших архивах изображений или на страницах с результатами поиска (такими, как поиск Google или Yahoo). Нумерация страниц отличается от других типов навигации, потому что она обычно соединяется с тем же документом - но с помощью ссылки, которая содержит дополнительную информацию, такую как номер страницы, с которой начинать. Несколько примеров нумерации страниц показано на рис. 23.2:
HTML не предлагает ничего новаторского - вы снова предоставляете список ссылок вместе с текущей ссылкой (указывающей, какой фрагмент данных выведен, и как далеко в разбиении на страницы вы находитесь), которая не является фактической ссылкой и выделена (например, с помощью элемента strong). Основное отличие от навигации по сайту состоит в том, что для нумерации страниц требуется много программной логики. В зависимости от того, где вы находитесь во всем множестве данных, необходимо показать или скрыть предыдущие, следующие, первые или последние ссылки. Если имеется действительно массивный объем информации для просмотра, то вам придется также предложить ссылки для таких меток как 100, 200 и многих других значений. Поэтому меню обычно не кодируется жестко как в HTML, а создается на сервере. Это, однако, не изменяет правил - текущий фрагмент не должен ссылаться на себя самого, и вы не должны предлагать ссылки, которые никуда не ведут.   ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...  Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...  Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...  ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
