Многостраничный сайт на html: Как самостоятельно сделать многостраничный сайт

15.05.2023 alexxlab

Содержание

Как создать многостраничный сайт на HTML?

Tchayk

14 Фев 2020

Если вопрос касается кода его нужно указывать. И что именно «не получается»? Простейший вариант решения: <body> <include src=»./header.html»></include> <p>Content</p> <include src=»./footer.html»></include> </body> Другие варианты — css-tricks.com/the-simplest-ways-to-handle-html-includes/ Но нужно не забывать, что при простом включением кода меню в страницу, не удастся выделять в нем активный пункт. Еще можно сделать шаблон с шапкой и подвалом. Копировать его и заполнять. Можно использовать статический генератор сайтов. Например, Jekyll.

Без этих инструментов PHP не будет работать, браузеры не работают с PHP языком и любым другим языком программирования кроме HTML CSS JS. Когда ты делаешь запрос к сайту через браузер к серверу на котором находится сайт приходит HTTP запрос что нужно взять такую то страницу например contact.php специальная программа apache передаёт этот файл интерпретатору который исполняет файл php и генерирует из нее HTML файл который обратно отдаёт программе apache а тот в свою очередь отдаёт по HTTP заголовку тебе в браузер. В браузер поступает не PHP а уже сгенерированная веб страница на HTML который уже понимают все браузеры. Вот поэтому при открытии PHP файла выходит исходный код, потому что браузеры кроме HTML ничего не понимают.

Позитивный голос 0
Paranoiac
Paranoiac
14 Фев 2020

Кроме PHP есть и другие языки, способные генерировать html-разметку. Это все языки программирования (лишь бы на сервере их можно было выполнить), и декларативные языки шаблонизаторов, и JSX. Выбор среди них обусловлен только твоими предпочтениями и возможностями. Импорты средствами HTML — завяли на стадии черновика, и скорее всего, уже никогда не будут стандартизированы (так как они оказались банально никому не нужны). Кстати, генерация разметки и импорты, не имеют отношения к многостраничности… Вообще. Многостраничный сайт — это сайт состоящий из нескольких страниц (внезапно), связанных хотя бы одной гиперссылкой.
Страницы при этом вполне могут быть статичными. Сейчас многостраничные сайты постепенно уходят в прошлое, отмирают как пережиток прошлого. На данный момент, будущее за веб-приложениями (может быть, впоследствии придумают еще что-то новое).

Позитивный голос 0
Disconnected
Disconnected

20 Фев 2020

Здравствуйте. Я ещё пробовал сверстать многостраничный сайт на HTML. Хотел вывести меню сайта, верхнюю и нижнюю часть сайта через импорт HTML, но ничего не получается. А делать одно и тоже меню переделывать — это муторная работа. Как сделать многостраничный сайт на HTML без PHP? Я пробовал PHP открывать в браузере, но вместо сайта отображался только код сайта.
Создать сайт
12 марта 2022  ·
8,4 K
ОтветитьУточнить
Эмилия Бондаренко
Маркетинг
20
Digital-маркетолог, создаю сайты, интернет-магазины, онлайн школы , помогаю в продвижении. ..  · 6 мар  · emiliyabondarenko.ru
Я рекомендую создавать блог на WordPress. Зачем что-то изобретать, если есть бесплатная система управления контентом, которая изначально создавалась для блогов. Потом она росла и развивалась и сейчас на WordPress можно создавать красивые лэндинги, интернет-магазины, онлайн-школы. К тому же если Вы знаете html и css, то это вообще огромный плюс, т.к. в WP можно встраивать свой код. Но даже и без опыта программирования, на вордпресс можно много что создать красивого и функционального.
К тому же, я предполагаю, что блог Вы хотите создать для продвижения своих товаров или услуг, для приема платежей, а для этих целей в WordPress есть очень много плагинов. Огромная база знаний, в интернете в поиске можно найти ответ на любой вопрос по Вордпресс.
Разработка сайтов. Продвижение товаров и услуг с помощью цифровых технологий
Перейти на emiliyabondarenko.ru
Комментировать ответ…Комментировать…
Владимир Сорокин
Фитнес
103
Специалист по построению красивого тела. Соавтор блога про адалт-индустрию.  · 12 мар 2022  · webcam-model.online
Через вордпресс.
Купите домен и хостинг. Установите на хостинг вордпресс. Потом выберите бесплатную тему для вордпресса и настройте ее.
Если что в ютубе есть куча уроков по вордпрессу. Если вы освоили html+css — с водпрессом вы точно справитесь.
Комментировать ответ…Комментировать…

Андрей Валерьевич
10
Индивидуальная разработка сайтов под задачи проекта без использования CMS.   · 2 февр
Любой из языков программирования для написания бэкенда. Можно начать с чего-то простого, например PHP. На нем можно написать всю серверную часть вашего будущего сайта. Процесс не быстрый, если заниматься по несколько часов в день, по 5 дней в неделю, за 3-4 месяца сможете написать свой первый проект. Рекомендую сразу смотреть в сторону MVC, а что это такое, узнаете при… Читать далее
Комментировать ответ…Комментировать…
Вы знаете ответ на этот вопрос?
Поделитесь своим опытом и знаниями

Войти и ответить на вопрос
О сообществе
Создать сайт
В сообществе буду делится своими навыками в области сайтостроения и веб дизайна, а также JavaScript анимации. Приглашаю экспертов или желающих ими стать.
Создание нескольких страниц с меню навигации
Содержание
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 вопросов для упражнений
Введение
В этой статье учебного плана по веб-стандартам мы поговорим о навигации по веб-сайту и меню. Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также коснемся темы удобства использования и доступности меню. Мы пока не будем углубляться в стилизацию меню, но в этой статье мы заложим основы. К этой статье можно загрузить примеры кода — мы будем ссылаться на них на протяжении всего руководства.
HTML5
меню
HTML5 определяет меню
, которое должно использоваться для основной навигации по веб-сайту, будь то список ссылок или элемент формы, такой как окно поиска. Это хорошая идея, так как раньше мы помещали блок навигации внутри чего-то вроде
. Да, вы можете довольно хорошо идентифицировать это в целях стилизации, но это
и, следовательно, семантически анонимно.
дает нам согласованный способ однозначного определения с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для слабовидящих пользователей, использующих программу чтения с экрана, которым будет намного проще находить навигацию. если он четко обозначен (это зависит от программы чтения с экрана, которую они используют, поддерживающей
элемент, так что это может быть еще далеко). Итак, блок навигации будет выглядеть примерно так:
<навигация> <ул>
Навигация

Меню

Ссылки

Имейте в виду, что
следует использовать только для основной пользовательской навигации по веб-странице, а не для рекламных ссылок внизу страницы или для вторичной навигации, относящейся к небольшой части страницы.
Ваши основные инструменты меню HTML — ссылки, якоря и списки
Существует несколько различных типов меню и идиом навигации, которые следует учитывать в HTML, и все они тесно связаны с элементами и (anchor). В двух словах:
элементов описывают отношения между несколькими документами. Например, вы можете сообщить пользовательскому агенту, что текущий документ является частью более крупного набора, охватывающего несколько документов, включая оглавление, и определить отношения между документами.
Якоря
(он же элементы ) позволяют вам либо ссылаться на другой документ, ресурс или раздел документа, либо на определенный раздел текущего документа. За ними автоматически не следует пользовательский агент; вместо этого они будут активированы вашими посетителями с помощью любого доступного им средства (мышь, клавиатура, распознавание голоса и т. д.)
они необходимые предпосылки для понимания этого.
Якоря/ссылки не просто становятся меню сами по себе — вам нужно структурировать и стилизовать их, чтобы и браузер, и ваши пользователи знали, что их функция — меню навигации, а не просто набор случайных ссылок. Если порядок страниц не важен, вы можете использовать неупорядоченный список, как в этом примере меню неупорядоченного списка.
Если важен порядок, в котором посетители просматривают все документы, необходимо использовать упорядоченный список. Например, если у вас есть многодокументный онлайн-курс, в котором одно руководство строится поверх предыдущего, вы можете использовать упорядоченный список, как в этом примере упорядоченного списка.
Использование
и списков для создания меню удобно по нескольким причинам:
Основные навигационные списки/ссылки легко отличить от других списков и ссылок на странице, поскольку они находятся внутри
. Это не только облегчит поиск для пользователей программ чтения с экрана, как упоминалось выше, но также упростит нацеливание на него с помощью CSS и JavaScript.
Списки могут быть вложенными, что означает, что вы можете легко создать несколько уровней навигационной иерархии.
Даже без применения стилей к списку рендеринг HTML в браузере имеет смысл, и посетитель может легко понять, что эти ссылки связаны друг с другом и составляют одну логическую единицу.
Вы вкладываете списки, встраивая вложенный список внутрь элемента
, а не после него. вы можете увидеть правильный и неправильный пример здесь.
Обратите внимание, что браузеры отображают оба примера одинаково. Отображение в браузере никогда не должно быть показателем качества вашего кода. Недопустимую конструкцию HTML, такую как неправильный пример, показанный на странице с примерами выше, будет сложно стилизовать, добавить поведение с помощью JavaScript или преобразовать в другой формат. Структура вложенных UL всегда должна быть
и никогда < /li> .
Потребность в гибкости
Маловероятно, что меню сайта будет оставаться одним и тем же очень долго — сайты имеют тенденцию к органическому росту по мере добавления функциональности и роста пользовательской базы, поэтому вы должны создавать меню с широкими возможностями для пунктов меню, которые будут добавляться и удаляться по мере развития сайта, а также для перевода меню на разные языки (поэтому ссылки будут меняться по длине). Кроме того, вы можете столкнуться с тем, что работаете с сайтами, где HTML для меню создается динамически с использованием серверных языков, а не статического HTML. Однако это не означает, что знание HTML устареет; на самом деле это станет более важным, поскольку эти знания по-прежнему будут необходимы для создания HTML-шаблонов для заполнения сценария на стороне сервера.
Различные типы меню
Существует несколько типов меню, которые вам придется создавать в 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 — попробуйте перейти на разные страницы в примере, чтобы увидеть, что происходит. Позже в курсе мы поговорим о стилизации меню такого типа с помощью CSS и добавлении поведения с помощью JavaScript. Одна важная вещь, которую следует учитывать, — это то, как выделить текущий документ в меню, чтобы дать пользователю ощущение того, что он находится в определенном месте и что он перемещается (хотя на самом деле это не так, если, конечно, они не использование мобильного устройства для просмотра веб-страниц!). В данном случае мы просто удаляем ссылку на текущую страницу, в каждом случае — это имеет смысл, так как вам не нужно ссылаться на тот же документ, на котором вы находитесь, и это дает понять, где вы находитесь в меню. Мы подробнее рассмотрим фразу «вы здесь» в следующем разделе.
Предоставление посетителям ощущения «Вы здесь»
Одно из золотых правил веб-разработки и навигации заключается в том, что текущий документ никогда не должен ссылаться сам на себя, а должен явно отличаться от других пунктов меню. Это важно, так как дает посетителям что-то, за что они могут зацепиться, и сообщает им, где они находятся в своем путешествии по вашему сайту. Есть крайние случаи, такие как веб-приложения, постоянные ссылки в блогах и так называемые «одностраничные» веб-сайты, но в 99% случаев ссылка на документ, который вы уже просматриваете, избыточна и сбивает с толку посетителя.
В HTML-ссылках — давайте создадим сеть, мы заявили, что ссылка — это соглашение и обязательство: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но вы должны быть осторожны — вы потеряете авторитет и доверие если эта ссылка не дает пользователям того, что они хотят, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, ее активация перезагрузит документ. Как пользователь вы этого не ожидаете — с какой целью вы нажали на эту ссылку? Это приводит пользователей в замешательство.
По этой причине никогда не следует ссылаться на текущую страницу из меню. Вы можете полностью удалить его или, что еще лучше, выделить его (например, окружив его элементом ) — это дает пользователям визуальную подсказку, а также сообщает слепым посетителям, что это очень важно — этот пример выделения текущей страницы иллюстрирует это.
Сколько вариантов вы должны предоставить пользователям одновременно?
Еще один вопрос, который следует учитывать, — это количество опций, которые вы хотите предоставить посетителям. Многие меню, которые вы видите в Интернете, стараются обеспечить доступ к каждой странице сайта из одного меню. Здесь в дело вступают скрипты и трюки с CSS — вы можете сделать меню более управляемым, скрывая определенные части до тех пор, пока пользователи не выберут определенные области (ролловер-меню, как их иногда называют). Это разумно с технической точки зрения, но с этим подходом есть несколько проблем:
Не все посетители смогут использовать хитрость по назначению; пользователям клавиатуры, например, придется переходить по всем ссылкам на странице только для того, чтобы найти ту, которую они ищут.
Для этого вам потребуется добавить много 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 в элементе . Код в нашем примере выглядит так:
<навигация> <имя карты="skillset_Map">

Обратите внимание, что это работает точно так же, как ссылки на странице, а это означает, что перед значением атрибута usemap необходимо поставить хэш.
Каждая область имеет несколько атрибутов:
href определяет URL-адрес, на который должна ссылаться область (который также может быть целью в том же документе).
alt определяет альтернативный текст, который может отображаться, если изображение по какой-либо причине недоступно для просмотра.
shape определяет форму области. Это может быть rect для прямоугольников, circle для кругов или poly для неправильных форм, определяемых с помощью многоугольников.
координаты определяет координаты на изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей вам нужно определить только верхний левый и нижний правый углы; для кругов нужно определить центр круга и радиус; для полигонов необходимо предоставить список всех угловых точек, разделенных запятыми.
Карты изображений не очень интересно определять и вводить в формате HTML, поэтому инструменты обработки изображений, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML для вас).
Экономия места на экране и предотвращение перегрузки ссылками с помощью форм
Еще один метод, который вы можете использовать, — это использование элемента управления формой для навигации. Например, вы можете использовать элемент . Ваши посетители могут выбрать вариант, а затем отправить форму для перехода на разные страницы. Вы можете найти пример меню формы здесь: обратите внимание, что на самом деле он не будет работать, так как он не подключен к какому-либо сценарию, чтобы заставить его работать.
Наиболее очевидным преимуществом использования этого типа меню является то, что вы можете предлагать множество опций, не занимая много места на экране, поскольку браузеры отображают меню как одну строку — см. рис. 4.
Рис. 4. Меню выбора занимают только одну строку на экране.
Вы можете пойти дальше, сгруппировав различные пункты меню с помощью элемента , как показано в этом примере optgroup.
Появится меню с невыбираемыми параметрами (это имена групп), как показано на рисунке 5:
Рис. 5. Меню выбора могут содержать группы опций, которые позволяют указать посетителям, какие опции связаны друг с другом.
Преимущество этого метода заключается в том, что он почти не занимает места, но это также означает, что вам нужен сценарий на стороне сервера для отправки посетителей на выбранные ими страницы. Вы также можете использовать JavaScript, чтобы ссылки работали, но вы не можете полагаться на доступность JavaScript — вам нужно убедиться, что ваши пользователи все еще могут использовать меню с отключенным JavaScript.
Другое, менее очевидное преимущество заключается в том, что вы не предлагаете слишком много ссылок в одном и том же документе. Это означает, что вы не перегружаете пользователей вспомогательных технологий (которые часто имеют тенденцию представлять ссылки в одном большом списке). Это также означает, что поисковые системы не считают ссылки на вашей странице бесполезными, поскольку соотношение ссылок и текста делает документ похожим на карту сайта. Однако многие вспомогательные технологии могут создавать карту ссылок ваших страниц; если все ваши важные ссылки находятся в меню выбора, есть шанс, что посетитель никогда не наткнется на них. Поэтому рекомендуется предлагать якорные ссылки на основные страницы назначения и для меню и в чем заключаются проблемы?
Что вы определяете с помощью элементов и для чего используется атрибут nohref элемента области (этого здесь нет, вам нужно провести онлайн-исследование)
Каковы преимущества пропуска ссылок?
Примечание. Этот материал изначально был опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с навигационными меню, написанной Кристианом Хейльманном. Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2.5.
Далее: Проверка вашего 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 вопросов для упражнений
Введение
В этой статье учебного курса по веб-стандартам мы поговорим о навигации и меню веб-сайта. Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также коснемся темы удобства использования и доступности меню. Мы пока не будем углубляться в стилизацию меню, но в этой статье мы заложим основы. К этой статье можно загрузить примеры кода — мы будем ссылаться на них на протяжении всего руководства.
меню HTML5

HTML5 определяет меню
, которое должно использоваться для основной навигации веб-сайта, будь то список ссылок или элемент формы, такой как поисковая строка. Это хорошая идея, так как раньше мы помещали блок навигации внутри чего-то вроде
. Да, вы можете довольно хорошо идентифицировать это в целях стилизации, но это
и, следовательно, семантически анонимно.
дает нам последовательный способ однозначного определения с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для слабовидящих пользователей, использующих программу чтения с экрана, которым будет намного проще находить навигацию. если он четко обозначен (это зависит от программы чтения с экрана, которую они используют, поддерживающей элемент
, так что это может быть еще немного далеко). Итак, блок навигации будет выглядеть примерно так:
<навигация> <ул>
Навигация

Меню

Ссылки

Имейте в виду, что
следует использовать только для основной пользовательской навигации по веб-странице, а не для рекламных ссылок внизу страницы или для вторичной навигации, относящейся к небольшой части страницы.
Инструменты главного HTML-меню — ссылки, якоря и списки
Существует несколько различных типов меню и идиом навигации, которые следует учитывать в HTML, и все они тесно связаны с элементами и (anchor). В двух словах:
элементов описывают отношения между несколькими документами. Например, вы можете сообщить пользовательскому агенту, что текущий документ является частью более крупного набора, охватывающего несколько документов, включая оглавление, и определить отношения между документами.
Якоря
(он же элементы ) позволяют вам либо ссылаться на другой документ, ресурс или раздел документа, либо на определенный раздел текущего документа. За ними автоматически не следует пользовательский агент; вместо этого они будут активированы вашими посетителями с помощью любого доступного им средства (мышь, клавиатура, распознавание голоса и т. д.)
они необходимые предпосылки для понимания этого.
Якоря/ссылки не просто становятся меню сами по себе — вам нужно структурировать и стилизовать их, чтобы и браузер, и ваши пользователи знали, что их функция — меню навигации, а не просто набор случайных ссылок. Если порядок страниц не важен, вы можете использовать неупорядоченный список, как в этом примере меню неупорядоченного списка.
Если важен порядок, в котором посетители просматривают все документы, необходимо использовать упорядоченный список. Например, если у вас есть многодокументный онлайн-курс, в котором одно руководство строится поверх предыдущего, вы можете использовать упорядоченный список, как в этом примере упорядоченного списка.
Использование
и списков для создания меню удобно по нескольким причинам:
Основные навигационные списки/ссылки легко отличить от других списков и ссылок на странице, поскольку они находятся внутри
. Это не только облегчит поиск для пользователей программ чтения с экрана, как упоминалось выше, но также упростит нацеливание на него с помощью CSS и JavaScript.
Списки могут быть вложенными, что означает, что вы можете легко создать несколько уровней навигационной иерархии.
Даже без применения стилей к списку рендеринг HTML в браузере имеет смысл, и посетитель может легко понять, что эти ссылки связаны друг с другом и составляют одну логическую единицу.
Вы вкладываете списки, встраивая вложенный список внутрь элемента
, а не после него. вы можете увидеть правильный и неправильный пример здесь.
Обратите внимание, что браузеры отображают оба примера одинаково. Отображение в браузере никогда не должно быть показателем качества вашего кода. Недопустимую конструкцию HTML, такую как неправильный пример, показанный на странице с примерами выше, будет сложно стилизовать, добавить поведение с помощью JavaScript или преобразовать в другой формат. Структура вложенных UL всегда должна быть
и никогда < /li> .
Потребность в гибкости
Маловероятно, что меню сайта будет оставаться одним и тем же очень долго — сайты имеют тенденцию к органическому росту по мере добавления функциональности и роста пользовательской базы, поэтому вы должны создавать меню с широкими возможностями для пунктов меню, которые будут добавляться и удаляться по мере развития сайта, а также для перевода меню на разные языки (поэтому ссылки будут меняться по длине). Кроме того, вы можете столкнуться с тем, что работаете с сайтами, где HTML для меню создается динамически с использованием серверных языков, а не статического HTML. Однако это не означает, что знание HTML устареет; на самом деле это станет более важным, поскольку эти знания по-прежнему будут необходимы для создания HTML-шаблонов для заполнения сценария на стороне сервера.
Различные типы меню
Существует несколько типов меню, которые вам придется создавать в 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 — попробуйте перейти на разные страницы в примере, чтобы увидеть, что происходит. Позже в курсе мы поговорим о стилизации меню такого типа с помощью CSS и добавлении поведения с помощью JavaScript. Одна важная вещь, которую следует учитывать, — это то, как выделить текущий документ в меню, чтобы дать пользователю ощущение того, что он находится в определенном месте и что он перемещается (хотя на самом деле это не так, если, конечно, они не использование мобильного устройства для просмотра веб-страниц!). В данном случае мы просто удаляем ссылку на текущую страницу, в каждом случае — это имеет смысл, так как вам не нужно ссылаться на тот же документ, на котором вы находитесь, и это дает понять, где вы находитесь в меню. Мы подробнее рассмотрим фразу «вы здесь» в следующем разделе.
Предоставление посетителям ощущения «Вы здесь»
Одно из золотых правил веб-разработки и навигации заключается в том, что текущий документ никогда не должен ссылаться сам на себя, а должен явно отличаться от других пунктов меню. Это важно, так как дает посетителям что-то, за что они могут зацепиться, и сообщает им, где они находятся в своем путешествии по вашему сайту. Есть крайние случаи, такие как веб-приложения, постоянные ссылки в блогах и так называемые «одностраничные» веб-сайты, но в 99% случаев ссылка на документ, который вы уже просматриваете, избыточна и сбивает с толку посетителя.
В HTML-ссылках — давайте создадим сеть, мы заявили, что ссылка — это соглашение и обязательство: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но вы должны быть осторожны — вы потеряете авторитет и доверие если эта ссылка не дает пользователям того, что они хотят, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, ее активация перезагрузит документ. Как пользователь вы этого не ожидаете — с какой целью вы нажали на эту ссылку? Это приводит пользователей в замешательство.
По этой причине никогда не следует ссылаться на текущую страницу из меню. Вы можете полностью удалить его или, что еще лучше, выделить его (например, окружив его элементом ) — это дает пользователям визуальную подсказку, а также сообщает слепым посетителям, что это очень важно — этот пример выделения текущей страницы иллюстрирует это.
Сколько вариантов вы должны предоставить пользователям одновременно?
Еще один вопрос, который следует учитывать, — это количество опций, которые вы хотите предоставить посетителям. Многие меню, которые вы видите в Интернете, стараются обеспечить доступ к каждой странице сайта из одного меню. Здесь в дело вступают скрипты и трюки с CSS — вы можете сделать меню более управляемым, скрывая определенные части до тех пор, пока пользователи не выберут определенные области (ролловер-меню, как их иногда называют). Это разумно с технической точки зрения, но с этим подходом есть несколько проблем:
Не все посетители смогут использовать хитрость по назначению; пользователям клавиатуры, например, придется переходить по всем ссылкам на странице только для того, чтобы найти ту, которую они ищут.
Для этого вам потребуется добавить много 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 в элементе . Код в нашем примере выглядит так:
<навигация> <имя карты="skillset_Map">

Обратите внимание, что это работает точно так же, как ссылки на странице, а это означает, что перед значением атрибута usemap необходимо поставить хэш.
Каждая область имеет несколько атрибутов:
href определяет URL-адрес, на который должна ссылаться область (который также может быть целью в том же документе).
alt определяет альтернативный текст, который может отображаться, если изображение по какой-либо причине недоступно для просмотра.
shape определяет форму области. Это может быть rect для прямоугольников, circle для кругов или poly для неправильных форм, определяемых с помощью многоугольников.
координаты определяет координаты на изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения и могут измеряться в пикселях или процентах. Для прямоугольных областей вам нужно определить только верхний левый и нижний правый углы; для кругов нужно определить центр круга и радиус; для полигонов необходимо предоставить список всех угловых точек, разделенных запятыми.
Карты изображений не очень интересно определять и вводить в формате HTML, поэтому инструменты обработки изображений, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML для вас).
Экономия места на экране и предотвращение перегрузки ссылками с помощью форм
Еще один метод, который вы можете использовать, — это использование элемента управления формой для навигации. Например, вы можете использовать элемент . Ваши посетители могут выбрать вариант, а затем отправить форму для перехода на разные страницы. Вы можете найти пример меню формы здесь: обратите внимание, что на самом деле он не будет работать, так как он не подключен к какому-либо сценарию, чтобы заставить его работать.
Наиболее очевидным преимуществом использования этого типа меню является то, что вы можете предлагать множество опций, не занимая много места на экране, поскольку браузеры отображают меню как одну строку — см. рис. 4.
Рис. 4. Меню выбора занимают только одну строку на экране.
Вы можете пойти дальше, сгруппировав различные пункты меню с помощью элемента , как показано в этом примере optgroup.
Появится меню с невыбираемыми параметрами (это имена групп), как показано на рисунке 5:
Рис. 5. Меню выбора могут содержать группы опций, которые позволяют указать посетителям, какие опции связаны друг с другом.
Преимущество этого метода заключается в том, что он почти не занимает места, но это также означает, что вам нужен сценарий на стороне сервера для отправки посетителей на выбранные ими страницы. Вы также можете использовать JavaScript, чтобы ссылки работали, но вы не можете полагаться на доступность JavaScript — вам нужно убедиться, что ваши пользователи все еще могут использовать меню с отключенным JavaScript.
Другое, менее очевидное преимущество заключается в том, что вы не предлагаете слишком много ссылок в одном и том же документе. Это означает, что вы не перегружаете пользователей вспомогательных технологий (которые часто имеют тенденцию представлять ссылки в одном большом списке). Это также означает, что поисковые системы не считают ссылки на вашей странице бесполезными, поскольку соотношение ссылок и текста делает документ похожим на карту сайта. Однако многие вспомогательные технологии могут создавать карту ссылок ваших страниц; если все ваши важные ссылки находятся в меню выбора, есть шанс, что посетитель никогда не наткнется на них. Поэтому рекомендуется предлагать якорные ссылки на основные страницы назначения и для меню и в чем заключаются проблемы?
Что вы определяете с помощью элементов и для чего используется атрибут nohref элемента области (этого здесь нет, вам нужно провести онлайн-исследование)
Каковы преимущества пропуска ссылок?
Примечание. Этот материал изначально был опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с навигационными меню, написанной Кристианом Хейльманном.