и, следовательно, семантически анонимно.
дает нам согласованный способ однозначного определения с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для слабовидящих пользователей, использующих программу чтения с экрана, которым будет намного проще находить навигацию. если он четко обозначен (это зависит от программы чтения с экрана, которую они используют, поддерживающей
элемент, так что это может быть еще далеко).
Итак, блок навигации будет выглядеть примерно так:
<навигация>
<ул>
Навигация Меню Ссылки Имейте в виду, что
следует использовать только для основной пользовательской навигации по веб-странице, а не для рекламных ссылок внизу страницы или для вторичной навигации, относящейся к небольшой части страницы.
Основные инструменты HTML-меню — ссылки, якоря и списки
Существует несколько различных типов меню и идиом навигации, которые следует учитывать в HTML, и все они тесно связаны с элементами и (anchor). В двух словах:
элементов описывают отношения между несколькими документами. Например, вы можете сообщить пользовательскому агенту, что текущий документ является частью более крупного набора, охватывающего несколько документов, включая оглавление, и определить отношения между документами.
Якоря
(он же элементы
они необходимые предпосылки для понимания этого.
Якоря/ссылки не просто становятся меню сами по себе — вам нужно структурировать и стилизовать их, чтобы и браузер, и ваши пользователи знали, что их функция — меню навигации, а не просто набор случайных ссылок. Если порядок страниц не важен, вы можете использовать неупорядоченный список, как в этом примере меню неупорядоченного списка.
Если важен порядок, в котором посетители просматривают все документы, необходимо использовать упорядоченный список. Например, если у вас есть многодокументный онлайн-курс, в котором одно руководство строится поверх предыдущего, вы можете использовать упорядоченный список, как в этом примере упорядоченного списка.
Использование
и списков для создания меню удобно по нескольким причинам:
Основные навигационные списки/ссылки легко отличить от других списков и ссылок на странице, поскольку они находятся внутри
Списки могут быть вложенными, что означает, что вы можете легко создать несколько уровней навигационной иерархии.
Даже без применения каких-либо стилей к списку отображение HTML в браузере имеет смысл, и посетитель может легко понять, что эти ссылки связаны друг с другом и составляют одну логическую единицу.
Вы вкладываете списки, встраивая вложенный список внутрь элемента
, а не после него. вы можете увидеть правильный и неправильный пример здесь.
Обратите внимание, что браузеры отображают оба примера одинаково.
и никогда
.
Потребность в гибкости
Маловероятно, что меню сайта будет оставаться одним и тем же очень долго — сайты имеют тенденцию к органическому росту по мере добавления функциональности и роста пользовательской базы, поэтому вы должны создавать меню с широкими возможностями для пунктов меню, которые будут добавляться и удаляться по мере развития сайта, а также для перевода меню на разные языки (поэтому ссылки будут меняться по длине). Кроме того, вы можете столкнуться с тем, что работаете с сайтами, где HTML для меню создается динамически с использованием серверных языков, а не статического HTML.
Различные типы меню
Существует несколько типов меню, которые вам придется создавать в HTML при работе с различными веб-сайтами. Большинство из них можно создать с помощью списков, хотя иногда ограничения интерфейса заставляют вас использовать что-то другое (подробнее об этом позже). Меню на основе списка, которые вы, вероятно, создадите, следующие:
Внутристраничная навигация: например, оглавление для одной страницы со ссылками, указывающими на различные разделы на странице.
Навигация по сайту: Панель навигации для всего вашего веб-сайта (или его части) со ссылками, указывающими на разные страницы одного и того же сайта.
Контекстно-контекстная навигация: список ссылок, указывающих на страницы, тесно связанные с темой страницы, на которой вы сейчас находитесь, либо на том же сайте, либо на разных.
Файлы Sitemap: большие списки ссылок, которые указывают на все различные страницы веб-сайта, сгруппированные в связанные подсписки, чтобы их было легче понять.
Разбивка на страницы: Ссылки, указывающие на другие страницы, которые составляют дополнительные разделы или части целого вместе с текущей страницей, например, часть 1, часть 2 и часть 3 статьи.
Внутристраничная навигация (оглавление)
Мы уже частично рассмотрели это в учебнике о ссылках, но вот более подробное описание того, что означает внутристраничная навигация и что вам нужно сделать. сделай так, чтоб это работало.
В примере, относящемся к этому разделу внутристраничной навигации, мы использовали список ссылок, указывающих на якоря дальше по странице. Каждая ссылка меню выглядит так:
<навигация>
<ол>
Введение Атрибут href указывает на соответствующую привязку ниже по странице через значение атрибута id привязки, которому предшествует символ решетки (#).
Введение
Каждый раздел страницы также имеет ссылку «назад в меню», которая работает таким же образом, но вместо этого указывает на меню.
Технически, это все, что вам нужно для того, чтобы такая навигация работала, однако в Internet Explorer есть досадная ошибка, которая заставляет вас сделать немного больше.
Вы можете проверить эту ошибку самостоятельно:
Откройте документ в Internet Explorer 6 или 7
Не используйте мышь; вместо этого используйте клавиатуру для навигации по документу. Вы можете нажать клавишу табуляции, чтобы перейти от ссылки к ссылке, и клавишу ввода, чтобы активировать ссылку — в данном случае для перехода к разделу, на который она указывает.
Вроде бы все хорошо, когда вы это делаете — браузер прокручивается до того места, куда вы хотели перейти.
Если вы снова нажмете клавишу табуляции, правильное поведение для браузера будет заключаться в том, чтобы перейти (перевести фокус) на первую ссылку внутри выбранного вами раздела.
Способ обойти это ужасно запутанный и связан со специальным свойством Internet Explorer, называемым . Вы можете активировать это несколькими способами, все они описаны в отличной статье Инго Чао «О наличии макета». Самый простой способ — обернуть якорь в элемент, а затем установить ширину этого элемента с помощью CSS. В этом случае мы использовали элементов
, а затем установили их ширину на 100% с помощью CSS. Это то, что нужно IE — якорь должен находиться внутри элемента с .
Необходимость делать это раздражает, но это также помогает вам, если вы хотите по-разному стилизовать разделы — вы не можете добавить стиль ко всему разделу, если не поместите его в соответствующий элемент уровня блока.
Обратите внимание, что навигация с помощью клавиатуры по ссылкам в Opera немного отличается — попробуйте посмотреть приведенный выше пример в Opera, затем, удерживая нажатой клавишу Shift, используйте клавиши со стрелками для навигации по ссылкам (это также работает с элементами формы).
Навигация по сайту
Навигация по сайту — это наиболее распространенный тип меню, который вам нужно создать. Это меню всего сайта (или его части), показывающее как варианты, из которых посетители могут выбирать, так и иерархию сайта. Списки идеально подходят для этой цели, как вы увидите на этом примере навигации по сайту.
<навигация>
<ул>
Главная О нас Наши клиенты Наши продукты Наши услуги Свяжитесь с нами
Здесь не так много сюрпризов, по крайней мере, с точки зрения чистого HTML — попробуйте перейти на разные страницы в примере, чтобы увидеть, что происходит. Позже в курсе мы поговорим о стилизации меню такого типа с помощью CSS и добавлении поведения с помощью JavaScript.
Предоставление посетителям ощущения «Вы здесь»
Одно из золотых правил веб-разработки и навигации заключается в том, что текущий документ никогда не должен ссылаться сам на себя, а должен явно отличаться от других пунктов меню. Это важно, так как дает посетителям что-то, за что они могут зацепиться, и сообщает им, где они находятся в своем путешествии по вашему сайту. Есть крайние случаи, такие как веб-приложения, постоянные ссылки в блогах и так называемые «одностраничные» веб-сайты, но в 99% случаев ссылка на документ, который вы уже просматриваете, избыточна и сбивает с толку посетителя.
В HTML-ссылках — давайте создадим сеть, мы заявили, что ссылка — это соглашение и обязательство: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но вы должны быть осторожны — вы потеряете авторитет и доверие если эта ссылка не дает пользователям того, что они хотят, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, ее активация перезагрузит документ. Как пользователь вы этого не ожидаете — с какой целью вы нажали на эту ссылку? Это приводит пользователей в замешательство.
По этой причине никогда не следует ссылаться на текущую страницу из меню. Вы можете полностью удалить его или, что еще лучше, выделить его (например, окружив его элементом ) — это дает пользователям визуальную подсказку, а также сообщает слепым посетителям, что это очень важно — этот пример выделения текущей страницы иллюстрирует это.
Сколько вариантов вы должны предоставить пользователям одновременно?
Еще один вопрос, который следует учитывать, — это количество опций, которые вы хотите предоставить посетителям.
Не все посетители смогут использовать хитрость по назначению; пользователям клавиатуры, например, придется переходить по всем ссылкам на странице только для того, чтобы найти ту, которую они ищут.
Для этого вам потребуется добавить много HTML-кода в каждый документ вашего сайта, и многие из них могут быть избыточными на многих страницах. Если мы углубимся в меню на три уровня, чтобы добраться до документа, который хотим прочитать, нам не нужно будет видеть параметры, ведущие нас на 4, 5 и 6 уровни вглубь.
Вы можете ошеломить посетителей, если предложите им слишком много вариантов одновременно — люди не любят принимать решения.
Если на странице не так много контента, но много ссылок, поисковые системы сочтут, что на этой странице мало достоверной информации, и не уделят ей большого внимания, поэтому ее будет труднее найти при поиске в Интернете.
В общем, вам решать, сколько пунктов вы поместите в меню — разные дизайны потребуют разного выбора — но если вы сомневаетесь, вам следует попробовать сократить меню только до ссылок на основные разделы сайт. Вы всегда можете предоставить дополнительные подменю, где это необходимо.
Контекстные меню
Контекстные меню — это ссылки, основанные на содержании текущего документа и предлагающие дополнительную информацию, связанную с текущей страницей, на которой вы находитесь. Классический пример — ссылки на «похожие статьи», которые вы обычно получаете в нижней части новостных статей, как показано на рис. 1.
Рисунок 1: Пример контекстного меню — новостная статья, предлагающая связанные новости внизу.
Это немного отличается от контекстных меню в программных пользовательских интерфейсах, которые предлагают различные параметры в зависимости от того, где к ним осуществляется доступ (например, контекстное меню или меню, нажатое при нажатии клавиши Ctrl, которые вы найдете в настольных приложениях, которые предлагают определенные параметры в зависимости от того, где вы находитесь). указатель мыши находится в момент).
Контекстные меню на веб-сайтах — отличный способ продвижения контента в других частях сайта; с точки зрения HTML это просто еще один список ссылок.
Файлы Sitemap
Файлы Sitemap — это то, что вы могли ожидать — карты всех различных страниц (или основных разделов, если вы говорите о действительно огромных сайтах) вашего сайта. Они позволяют посетителям вашего сайта получить представление об общей структуре вашего сайта и быстро перейти в любое место, даже если нужная им страница находится глубоко в иерархии страниц.
Карты сайта и поиск по сайту — отличный способ предложить посетителям запасной вариант, когда они потерялись, или быстрый доступ для тех, кто спешит.
С точки зрения HTML они могут быть либо одним массивным вложенным списком, полным ссылок, либо — в случае очень больших сайтов — заголовками разделов с вложенными ссылками иерархии конкретных разделов или даже формами поиска для каждого из разделов.
Разбивка на страницы
Разбивка на страницы необходима, когда вам нужно предложить способ навигации по большим документам, разбитым на отдельные страницы. Вы найдете нумерацию страниц в больших архивах изображений или на страницах результатов поиска (например, в поиске Google или Yahoo).
Разбиение на страницы отличается от других типов навигации, поскольку обычно оно ссылается на тот же документ, но приводит к отображению дополнительных параметров или дополнительной информации. Некоторые примеры нумерации страниц показаны на рисунке 2:
Рис. 2. Меню разбивки на страницы позволяют посетителям просматривать большие наборы данных, не теряя при этом информации о том, где они находятся.
В HTML нет ничего новаторского — вы снова предлагаете список ссылок с выделением текущей ссылки (с указанием того, какой блок данных показан и как далеко вы находитесь в вашей разбивке на страницы) (например, с помощью элемент) и не связаны.
Основное отличие навигации по сайту заключается в том, что при нумерации страниц используется много программной логики. В зависимости от того, где вы находитесь во всем наборе данных, вам нужно показать или скрыть предыдущую, следующую, первую и последнюю ссылки. Если у вас есть действительно огромное количество информации для навигации, вы также захотите предложить ссылки на ориентиры, такие как результаты 0-100, результаты 101-200 и т. д. Вот почему вы вряд ли будете жестко кодировать меню, подобные этим, в HTML. но вместо этого создайте их на стороне сервера. Однако это не меняет правил — текущий фрагмент не должен ссылаться сам на себя, и вы не должны предлагать ссылки, которые никуда не ведут.
Когда списков недостаточно — карты изображений и формы
В 99% случаев упорядоченный или неупорядоченный список является достаточной HTML-конструкцией для меню, тем более что логический порядок и вложенность также позволяют очень хорошо стилизовать с помощью CSS.
Установка горячих точек с картами изображений
Одним из способов является использование карт изображений на стороне клиента. Карты изображений превращают изображение в меню, превращая части изображений в интерактивные области, которые можно связать с различными документами. Пример карты изображений, связанный с этим разделом, превращает изображение в интерактивное меню. Попробуйте это, перейдя по ссылке выше и щелкнув различные части треугольника на изображении, показанном на рис. 3.
Рис. 3. Определив карту с элементами области, вы можете превратить части изображения в интерактивные элементы.
Вы можете превратить любое изображение в меню, определив карту с различными областями (также называемыми горячими точками). Вы даете карте атрибут name и соединяете изображение и карту, используя атрибут usemap в элементе .
<навигация>
Обратите внимание, что это работает точно так же, как ссылки на странице, а это означает, что перед значением атрибута usemap необходимо поставить хэш.
Каждая область имеет несколько атрибутов:
href определяет URL-адрес, на который должна ссылаться область (который также может быть целью в том же документе).
alt определяет альтернативный текст, который может отображаться, если изображение по какой-либо причине недоступно для просмотра.
shape определяет форму области. Это может быть rect для прямоугольников, circle для кругов или poly для неправильных форм, определяемых с помощью многоугольников.
координаты определяет координаты на изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей вам нужно определить только верхний левый и нижний правый углы; для кругов нужно определить центр круга и радиус; для полигонов необходимо предоставить список всех угловых точек, разделенных запятыми.
Карты изображений не очень интересно определять и вводить в формате HTML, поэтому инструменты обработки изображений, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML для вас).
Экономия места на экране и предотвращение перегрузки ссылками с помощью форм
Еще один метод, который вы можете использовать, — это использование элемента управления формы для навигации. для навигации с различными страницами в качестве параметров. внутри элемента . Ваши посетители могут выбрать вариант, а затем отправить форму для перехода на разные страницы. Вы можете найти пример меню формы здесь: обратите внимание, что на самом деле он не будет работать, так как он не подключен к какому-либо сценарию, чтобы заставить его работать.
Наиболее очевидным преимуществом использования этого типа меню является то, что вы можете предлагать множество опций, не занимая много места на экране, поскольку браузеры отображают меню как одну строку — см. рис. 4.
Рис. 4. Меню выбора занимают только одну строку на экране.
Вы можете пойти дальше, сгруппировав различные пункты меню с помощью элемента , как показано в этом примере optgroup.
Появится меню с невыбираемыми параметрами (это имена групп), как показано на рисунке 5:
Рис.
Преимущество этого метода заключается в том, что он почти не занимает места, но это также означает, что вам нужен сценарий на стороне сервера для отправки посетителей на выбранные ими страницы. Вы также можете использовать JavaScript, чтобы ссылки работали, но вы не можете полагаться на доступность JavaScript — вам нужно убедиться, что ваши пользователи все еще могут использовать меню с отключенным JavaScript.
Другое, менее очевидное преимущество заключается в том, что вы не предлагаете слишком много ссылок в одном и том же документе. Это означает, что вы не перегружаете пользователей вспомогательных технологий (которые часто имеют тенденцию представлять ссылки в одном большом списке). Это также означает, что поисковые системы не считают ссылки на вашей странице бесполезными, поскольку соотношение ссылок и текста делает документ похожим на карту сайта. элементов меню, чтобы предложить больше опций. Посетители смогут их использовать, но таким машинам, как роботы поисковых систем, не нужно знать об их существовании.
Куда поместить меню и предложить варианты его пропуска
Последнее, что следует упомянуть о HTML-меню, это то, что размещение меню играет большую роль. Подумайте о посетителях, у которых нет механизма прокрутки или которые могут не видеть, поэтому полагайтесь на навигацию с помощью клавиатуры, чтобы ориентироваться на вашем сайте. Первое, с чем они столкнутся при загрузке документа, — это его местоположение и заголовок; затем документ читается сверху вниз, останавливаясь на каждой ссылке, чтобы спросить посетителя, хотят ли они перейти по этой ссылке или нет.
Если меню находится в верхней части документа, это будет первое, что увидит пользователь. Необходимость пропустить 15 или 20 ссылок, прежде чем они перейдут к какому-либо контенту, может стать очень раздражающей. Доступны два обходных пути. Во-первых, вы можете поместить меню после основного содержимого документа (при желании вы все равно можете разместить его вверху экрана с помощью CSS). Во-вторых, вы можете предложить ссылку для пропуска. Ссылки для пропуска — это просто ссылки, размещенные перед главным меню и ведущие к началу содержимого, что позволяет посетителю пропустить меню и сразу перейти к содержимому, если он того пожелает. Вы можете добавить еще одну ссылку «перейти в меню» в конце документа, чтобы упростить возврат наверх. Посмотрите пример skiplinks, чтобы получить больше информации.
Ссылки для пропуска не только полезны для людей с ограниченными возможностями, но и значительно облегчают жизнь при навигации по сайту на мобильном устройстве с маленьким экраном.
Резюме
В этом уроке мы рассмотрели различные типы меню, которые вам, вероятно, придется писать в HTML.
Вопросы для упражнений
Почему полезно размечать меню в виде списков?
Когда вы разрабатываете навигационное меню, что вам нужно запланировать на будущее?
Каковы преимущества использования элементов для меню и в чем заключаются проблемы?
Что вы определяете с помощью элементов и для чего используется атрибут nohref элемента области (этого здесь нет, вам нужно провести онлайн-исследование)
Каковы преимущества пропуска ссылок?
Примечание. Этот материал изначально был опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с навигационными меню, написанной Кристианом Хейльманном. Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2.
Далее: Проверка вашего HTML.
Создание нескольких страниц с меню навигации
Содержание
1 Введение
2 меню HTML5
3 Инструменты главного HTML-меню — ссылки, якоря и списки
4 Потребность в гибкости
5 Различные типы меню
5.1 Внутристраничная навигация (оглавление)
5.2 Навигация по сайту
5.2.1 Создание у посетителей ощущения «Вы здесь»
5.2.2 Сколько опций вы должны предоставить пользователям одновременно?
5.3 Контекстные меню
5.4 Файлы Sitemap
5.5 Пагинация
6 Когда списков недостаточно — карты изображений и формы
6.1 Настройка горячих точек с картами изображений
6.2 Экономия места на экране и предотвращение перегрузки ссылок формами
7 Куда поместить меню и предложить варианты его пропуска
8 Резюме
9 вопросов для упражнений
Введение
В этой статье учебного курса по веб-стандартам мы поговорим о навигации и меню веб-сайта.
меню HTML5
HTML5 определяет меню
, которое должно использоваться для основной навигации веб-сайта, будь то список ссылок или элемент формы, такой как поисковая строка. Это хорошая идея, так как раньше мы помещали блок навигации внутри чего-то вроде
. Да, вы можете довольно хорошо идентифицировать это в целях стилизации, но это
и, следовательно, семантически анонимно.
дает нам последовательный способ однозначно определить с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для слабовидящих пользователей, использующих программу чтения с экрана, которым будет намного проще находить навигацию.
если он четко обозначен (это зависит от программы чтения с экрана, которую они используют, поддерживающей элемент
, так что это может быть еще немного далеко). Итак, блок навигации будет выглядеть примерно так:
<навигация>
<ул>
Навигация Меню Ссылки Имейте в виду, что
следует использовать только для основной пользовательской навигации по веб-странице, а не для рекламных ссылок внизу страницы или для вторичной навигации, относящейся к небольшой части страницы.
Инструменты главного HTML-меню — ссылки, якоря и списки
Существует несколько различных типов меню и идиом навигации, которые следует учитывать в HTML, и все они тесно связаны с элементами и (anchor). В двух словах:
элементов описывают отношения между несколькими документами.
Якоря
(он же элементы
они необходимые предпосылки для понимания этого.
Якоря/ссылки не просто становятся меню сами по себе — вам нужно структурировать и стилизовать их, чтобы и браузер, и ваши пользователи знали, что их функция — меню навигации, а не просто набор случайных ссылок. Если порядок страниц не важен, вы можете использовать неупорядоченный список, как в этом примере меню неупорядоченного списка.
Если важен порядок, в котором посетители просматривают все документы, необходимо использовать упорядоченный список.
Использование
и списков для создания меню удобно по нескольким причинам:
Основные навигационные списки/ссылки легко отличить от других списков и ссылок на странице, поскольку они находятся внутри
Списки могут быть вложенными, что означает, что вы можете легко создать несколько уровней навигационной иерархии.
Даже без применения каких-либо стилей к списку отображение HTML в браузере имеет смысл, и посетитель может легко понять, что эти ссылки связаны друг с другом и составляют одну логическую единицу.
Вы вкладываете списки, встраивая вложенный список внутрь элемента
, а не после него. Обратите внимание, что браузеры отображают оба примера одинаково. Отображение в браузере никогда не должно быть показателем качества вашего кода. Неверную HTML-конструкцию, такую как неправильный пример, показанный на приведенной выше странице с примерами, будет сложно стилизовать, добавить поведение с помощью JavaScript или преобразовать в другой формат. Структура вложенных UL всегда должна быть
и никогда
.
Потребность в гибкости
Маловероятно, что меню сайта будет оставаться одним и тем же очень долго — сайты имеют тенденцию к органическому росту по мере добавления функциональности и роста пользовательской базы, поэтому вы должны создавать меню с широкими возможностями для пунктов меню, которые будут добавляться и удаляться по мере развития сайта, а также для перевода меню на разные языки (поэтому ссылки будут меняться по длине).
Различные типы меню
Существует несколько типов меню, которые вам придется создавать в HTML при работе с различными веб-сайтами. Большинство из них можно создать с помощью списков, хотя иногда ограничения интерфейса заставляют вас использовать что-то другое (подробнее об этом позже). Меню на основе списка, которые вы, вероятно, создадите, следующие:
Внутристраничная навигация: например, оглавление для одной страницы со ссылками, указывающими на различные разделы на странице.
Навигация по сайту: Панель навигации для всего вашего веб-сайта (или его части) со ссылками, указывающими на разные страницы одного и того же сайта.
Контекстно-контекстная навигация: список ссылок, указывающих на страницы, тесно связанные с темой страницы, на которой вы сейчас находитесь, либо на том же сайте, либо на разных.
Файлы Sitemap: большие списки ссылок, которые указывают на все различные страницы веб-сайта, сгруппированные в связанные подсписки, чтобы их было легче понять.
Разбивка на страницы: Ссылки, указывающие на другие страницы, которые составляют дополнительные разделы или части целого вместе с текущей страницей, например, часть 1, часть 2 и часть 3 статьи.
Внутристраничная навигация (оглавление)
Мы уже частично рассмотрели это в учебнике о ссылках, но вот более подробное описание того, что означает внутристраничная навигация и что вам нужно сделать. сделай так, чтоб это работало.
В примере, относящемся к этому разделу внутристраничной навигации, мы использовали список ссылок, указывающих на якоря дальше по странице. Каждая ссылка меню выглядит так:
<навигация>
<ол>
Введение Атрибут href указывает на соответствующую привязку ниже по странице через значение атрибута id привязки, которому предшествует символ решетки (#). Итак, якорь выглядит так:
Введение
Каждый раздел страницы также имеет ссылку «назад в меню», которая работает таким же образом, но вместо этого указывает на меню.
Технически, это все, что вам нужно для того, чтобы такая навигация работала, однако в Internet Explorer есть досадная ошибка, которая заставляет вас сделать немного больше.
Вы можете проверить эту ошибку самостоятельно:
Откройте документ в Internet Explorer 6 или 7
Не используйте мышь; вместо этого используйте клавиатуру для навигации по документу. Вы можете нажать клавишу табуляции, чтобы перейти от ссылки к ссылке, и клавишу ввода, чтобы активировать ссылку — в данном случае для перехода к разделу, на который она указывает.
Вроде бы все хорошо, когда вы это делаете — браузер прокручивается до того места, куда вы хотели перейти.
Если вы снова нажмете клавишу табуляции, правильное поведение для браузера будет заключаться в том, чтобы перейти (перевести фокус) на первую ссылку внутри выбранного вами раздела. Однако Internet Explorer вернет вас к началу меню в верхней части страницы!
Способ обойти это ужасно запутанный и связан со специальным свойством Internet Explorer, называемым . Вы можете активировать это несколькими способами, все они описаны в отличной статье Инго Чао «О наличии макета». Самый простой способ — обернуть якорь в элемент, а затем установить ширину этого элемента с помощью CSS. В этом случае мы использовали элементов
, а затем установили их ширину на 100% с помощью CSS. Это то, что нужно IE — якорь должен находиться внутри элемента с .
Необходимость делать это раздражает, но это также помогает вам, если вы хотите по-разному стилизовать разделы — вы не можете добавить стиль ко всему разделу, если не поместите его в соответствующий элемент уровня блока.
Обратите внимание, что навигация с помощью клавиатуры по ссылкам в Opera немного отличается — попробуйте посмотреть приведенный выше пример в Opera, затем, удерживая нажатой клавишу Shift, используйте клавиши со стрелками для навигации по ссылкам (это также работает с элементами формы). Это называется пространственной навигацией.
Навигация по сайту
Навигация по сайту — это наиболее распространенный тип меню, который вам нужно создать. Это меню всего сайта (или его части), показывающее как варианты, из которых посетители могут выбирать, так и иерархию сайта. Списки идеально подходят для этой цели, как вы увидите на этом примере навигации по сайту.
<навигация>
<ул>
Главная О нас Наши клиенты Наши продукты Наши услуги Свяжитесь с нами
Здесь не так много сюрпризов, по крайней мере, с точки зрения чистого HTML — попробуйте перейти на разные страницы в примере, чтобы увидеть, что происходит.
Предоставление посетителям ощущения «Вы здесь»
Одно из золотых правил веб-разработки и навигации заключается в том, что текущий документ никогда не должен ссылаться сам на себя, а должен явно отличаться от других пунктов меню. Это важно, так как дает посетителям что-то, за что они могут зацепиться, и сообщает им, где они находятся в своем путешествии по вашему сайту.
В HTML-ссылках — давайте создадим сеть, мы заявили, что ссылка — это соглашение и обязательство: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но вы должны быть осторожны — вы потеряете авторитет и доверие если эта ссылка не дает пользователям того, что они хотят, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, ее активация перезагрузит документ. Как пользователь вы этого не ожидаете — с какой целью вы нажали на эту ссылку? Это приводит пользователей в замешательство.
По этой причине никогда не следует ссылаться на текущую страницу из меню. Вы можете полностью удалить его или, что еще лучше, выделить его (например, окружив его элементом ) — это дает пользователям визуальную подсказку, а также сообщает слепым посетителям, что это очень важно — этот пример выделения текущей страницы иллюстрирует это.
Сколько вариантов вы должны предоставить пользователям одновременно?
Еще один вопрос, который следует учитывать, — это количество опций, которые вы хотите предоставить посетителям. Многие меню, которые вы видите в Интернете, стараются обеспечить доступ к каждой странице сайта из одного меню. Здесь в дело вступают скрипты и трюки с CSS — вы можете сделать меню более управляемым, скрывая определенные части до тех пор, пока пользователи не выберут определенные области (ролловер-меню, как их иногда называют). Это разумно с технической точки зрения, но с этим подходом есть несколько проблем:
Не все посетители смогут использовать хитрость по назначению; пользователям клавиатуры, например, придется переходить по всем ссылкам на странице только для того, чтобы найти ту, которую они ищут.
Для этого вам потребуется добавить много HTML-кода в каждый документ вашего сайта, и многие из них могут быть избыточными на многих страницах. Если мы углубимся в меню на три уровня, чтобы добраться до документа, который хотим прочитать, нам не нужно будет видеть параметры, ведущие нас на 4, 5 и 6 уровни вглубь.
Вы можете ошеломить посетителей, если предложите им слишком много вариантов одновременно — люди не любят принимать решения. Подумайте, сколько времени вам может понадобиться, чтобы выбрать блюдо из обширного ресторанного меню.
Если на странице не так много контента, но много ссылок, поисковые системы сочтут, что на этой странице мало достоверной информации, и не уделят ей большого внимания, поэтому ее будет труднее найти при поиске в Интернете.
В общем, вам решать, сколько пунктов вы поместите в меню — разные дизайны потребуют разного выбора — но если вы сомневаетесь, вам следует попробовать сократить меню только до ссылок на основные разделы сайт. Вы всегда можете предоставить дополнительные подменю, где это необходимо.
Контекстные меню
Контекстные меню — это ссылки, основанные на содержании текущего документа и предлагающие дополнительную информацию, связанную с текущей страницей, на которой вы находитесь. Классический пример — ссылки на «похожие статьи», которые вы обычно получаете в нижней части новостных статей, как показано на рис.
Рисунок 1: Пример контекстного меню — новостная статья, предлагающая связанные новости внизу.
Это немного отличается от контекстных меню в программных пользовательских интерфейсах, которые предлагают различные параметры в зависимости от того, где к ним осуществляется доступ (например, контекстное меню или меню, нажатое при нажатии клавиши Ctrl, которые вы найдете в настольных приложениях, которые предлагают определенные параметры в зависимости от того, где вы находитесь). указатель мыши находится в момент).
Контекстные меню на веб-сайтах — отличный способ продвижения контента в других частях сайта; с точки зрения HTML это просто еще один список ссылок.
Файлы Sitemap
Файлы Sitemap — это то, что вы могли ожидать — карты всех различных страниц (или основных разделов, если вы говорите о действительно огромных сайтах) вашего сайта. Они позволяют посетителям вашего сайта получить представление об общей структуре вашего сайта и быстро перейти в любое место, даже если нужная им страница находится глубоко в иерархии страниц.
Карты сайта и поиск по сайту — отличный способ предложить посетителям запасной вариант, когда они потерялись, или быстрый доступ для тех, кто спешит.
С точки зрения HTML они могут быть либо одним массивным вложенным списком, полным ссылок, либо — в случае очень больших сайтов — заголовками разделов с вложенными ссылками иерархии конкретных разделов или даже формами поиска для каждого из разделов.
Разбивка на страницы
Разбивка на страницы необходима, когда вам нужно предложить способ навигации по большим документам, разбитым на отдельные страницы. Вы найдете нумерацию страниц в больших архивах изображений или на страницах результатов поиска (например, в поиске Google или Yahoo).
Разбиение на страницы отличается от других типов навигации, поскольку обычно оно ссылается на тот же документ, но приводит к отображению дополнительных параметров или дополнительной информации. Некоторые примеры нумерации страниц показаны на рисунке 2:
Рис.
В HTML нет ничего новаторского — вы снова предлагаете список ссылок с выделением текущей ссылки (с указанием того, какой блок данных показан и как далеко вы находитесь в вашей разбивке на страницы) (например, с помощью элемент) и не связаны.
Основное отличие навигации по сайту заключается в том, что при нумерации страниц используется много программной логики. В зависимости от того, где вы находитесь во всем наборе данных, вам нужно показать или скрыть предыдущую, следующую, первую и последнюю ссылки. Если у вас есть действительно огромное количество информации для навигации, вы также захотите предложить ссылки на ориентиры, такие как результаты 0-100, результаты 101-200 и т. д. Вот почему вы вряд ли будете жестко кодировать меню, подобные этим, в HTML. но вместо этого создайте их на стороне сервера. Однако это не меняет правил — текущий фрагмент не должен ссылаться сам на себя, и вы не должны предлагать ссылки, которые никуда не ведут.
Когда списков недостаточно — карты изображений и формы
В 99% случаев упорядоченный или неупорядоченный список является достаточной HTML-конструкцией для меню, тем более что логический порядок и вложенность также позволяют очень хорошо стилизовать с помощью CSS. Однако в некоторых ситуациях могут потребоваться другие методы проектирования.
Установка горячих точек с картами изображений
Одним из способов является использование карт изображений на стороне клиента. Карты изображений превращают изображение в меню, превращая части изображений в интерактивные области, которые можно связать с различными документами. Пример карты изображений, связанный с этим разделом, превращает изображение в интерактивное меню. Попробуйте это, перейдя по ссылке выше и щелкнув различные части треугольника на изображении, показанном на рис. 3.
Рис. 3. Определив карту с элементами области, вы можете превратить части изображения в интерактивные элементы.
Вы можете превратить любое изображение в меню, определив карту с различными областями (также называемыми горячими точками). Вы даете карте атрибут name и соединяете изображение и карту, используя атрибут usemap в элементе . Код в нашем примере выглядит так:
<навигация>
Обратите внимание, что это работает точно так же, как ссылки на странице, а это означает, что перед значением атрибута usemap необходимо поставить хэш.
Каждая область имеет несколько атрибутов:
href определяет URL-адрес, на который должна ссылаться область (который также может быть целью в том же документе).
alt определяет альтернативный текст, который может отображаться, если изображение по какой-либо причине недоступно для просмотра.
shape определяет форму области. Это может быть rect для прямоугольников, circle для кругов или poly для неправильных форм, определяемых с помощью многоугольников.
координаты определяет координаты на изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей вам нужно определить только верхний левый и нижний правый углы; для кругов нужно определить центр круга и радиус; для полигонов необходимо предоставить список всех угловых точек, разделенных запятыми.
Карты изображений не очень интересно определять и вводить в формате HTML, поэтому инструменты обработки изображений, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML для вас).
Экономия места на экране и предотвращение перегрузки ссылками с помощью форм
Еще один метод, который вы можете использовать, — это использование элемента управления формы для навигации. Например, вы можете использовать элемент для навигации с различными страницами в качестве параметров. внутри элемента . Ваши посетители могут выбрать вариант, а затем отправить форму для перехода на разные страницы. Вы можете найти пример меню формы здесь: обратите внимание, что на самом деле он не будет работать, так как он не подключен к какому-либо сценарию, чтобы заставить его работать.
Наиболее очевидным преимуществом использования этого типа меню является то, что вы можете предлагать множество опций, не занимая много места на экране, поскольку браузеры отображают меню как одну строку — см.
Рис. 4. Меню выбора занимают только одну строку на экране.
Вы можете пойти дальше, сгруппировав различные пункты меню с помощью элемента , как показано в этом примере optgroup.
Появится меню с невыбираемыми параметрами (это имена групп), как показано на рисунке 5:
Рис. 5. Меню выбора могут содержать группы опций, которые позволяют указать посетителям, какие опции связаны друг с другом.
Преимущество этого метода заключается в том, что он почти не занимает места, но это также означает, что вам нужен сценарий на стороне сервера для отправки посетителей на выбранные ими страницы. Вы также можете использовать JavaScript, чтобы ссылки работали, но вы не можете полагаться на доступность JavaScript — вам нужно убедиться, что ваши пользователи все еще могут использовать меню с отключенным JavaScript.
Другое, менее очевидное преимущество заключается в том, что вы не предлагаете слишком много ссылок в одном и том же документе. элементов меню, чтобы предложить больше опций. Посетители смогут их использовать, но таким машинам, как роботы поисковых систем, не нужно знать об их существовании.
Куда поместить меню и предложить варианты его пропуска
Последнее, что следует упомянуть о HTML-меню, это то, что размещение меню играет большую роль. Подумайте о посетителях, у которых нет механизма прокрутки или которые могут не видеть, поэтому полагайтесь на навигацию с помощью клавиатуры, чтобы ориентироваться на вашем сайте.
Если меню находится в верхней части документа, это будет первое, что увидит пользователь. Необходимость пропустить 15 или 20 ссылок, прежде чем они перейдут к какому-либо контенту, может стать очень раздражающей. Доступны два обходных пути. Во-первых, вы можете поместить меню после основного содержимого документа (при желании вы все равно можете разместить его вверху экрана с помощью CSS). Во-вторых, вы можете предложить ссылку для пропуска. Ссылки для пропуска — это просто ссылки, размещенные перед главным меню и ведущие к началу содержимого, что позволяет посетителю пропустить меню и сразу перейти к содержимому, если он того пожелает. Вы можете добавить еще одну ссылку «перейти в меню» в конце документа, чтобы упростить возврат наверх.
Ссылки для пропуска не только полезны для людей с ограниченными возможностями, но и значительно облегчают жизнь при навигации по сайту на мобильном устройстве с маленьким экраном.
Резюме
В этом уроке мы рассмотрели различные типы меню, которые вам, вероятно, придется писать в HTML.
Вопросы для упражнений
Почему полезно размечать меню в виде списков?
Когда вы разрабатываете навигационное меню, что вам нужно запланировать на будущее?
Каковы преимущества использования элементов для меню и в чем заключаются проблемы?
Что вы определяете с помощью элементов и для чего используется атрибут nohref элемента области (этого здесь нет, вам нужно провести онлайн-исследование)
Каковы преимущества пропуска ссылок?
Примечание. Этот материал изначально был опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с навигационными меню, написанной Кристианом Хейльманном.
Post navigation
← Resizing figma что это: Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайнаСпецэффект взрыва: TikTok – Make Your Day →
Без этих инструментов PHP не будет работать, браузеры не работают с PHP языком и любым другим языком программирования кроме HTML CSS JS. Когда ты делаешь запрос к сайту через браузер к серверу на котором находится сайт приходит HTTP запрос что нужно взять такую то страницу например contact.php специальная программа apache передаёт этот файл интерпретатору который исполняет файл php и генерирует из нее HTML файл который обратно отдаёт программе apache а тот в свою очередь отдаёт по HTTP заголовку тебе в браузер. В браузер поступает не PHP а уже сгенерированная веб страница на HTML который уже понимают все браузеры. Вот поэтому при открытии PHP файла выходит исходный код, потому что браузеры кроме HTML ничего не понимают.
.
Страницы при этом вполне могут быть статичными. Сейчас многостраничные сайты постепенно уходят в прошлое, отмирают как пережиток прошлого. На данный момент, будущее за веб-приложениями (может быть, впоследствии придумают еще что-то новое).
.. Linux
</p> 
Как быть в этом случае?
Команда copy собирает из различных файлов один файл. Теперь, для того, чтобы изменить, например, новости, достаточно исправить файл news и запустить скрипт make.bat – все изменения автоматически произойдут во всех файлах. Чтобы добавить новый рездел, достаточно добавить строчку в menu, написать контентную часть в новый файл main4 и добавить строчку в скрипт make.bat (copy /b head+menu+main4+news+bottom novyi_fail.html). После запуска скрипта у вас будут уже четыре файла со всеми изменениями.
1 Внутристраничная навигация (оглавление) 
К этой статье можно загрузить примеры кода — мы будем ссылаться на них на протяжении всего руководства.