Узнайте, как создать «фиксированное» меню с помощью CSS.
Как создать фиксированное верхнее меню
Шаг 1) добавить HTML:
Пример
Home News
Contact
<div>
<p>Some text some text some text some text..</p> </div>
Шаг 2) добавить CSS:
Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0. Обратите внимание, что фиксированное меню будет накладывать другое содержимое. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше, чем высота вашего меню.
Пример
/* The navigation bar */ .navbar { overflow: hidden;
background-color: #333; position: fixed; /* Set
the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ width:
100%; /* Full width */ }
/* Links inside the navbar */ .navbar a { float: left;
/* Main
content */ .main { margin-top: 30px; /* Add a top
margin to avoid content overlay */ }
Как создать фиксированное нижнее меню
Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0:
Пример
/* The navigation bar */ .navbar {
position: fixed; /* Set the navbar to fixed position */
bottom: 0;
/* Position the navbar at the bottom of the page */ width:
100%; /* Full width */
}
/* Main
content */ .main
{ margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */ }
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.
Горизонтальное меню для сайта на HTML и CSS
Так уж исторически сложилось, что для реализации навигации на сайте используют ненумерованный список. Поэтому, имея стандартную структуру HTML, будем добиваться необходимого нам результата при помощи CSS стилей и в этой статье рассмотрим два, наиболее часто употребляемых варианта.
Как я и говорил, структура меню в обоих способах одинакова, меняется только id=menu_номер-примера:
Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с id=menu_1, в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.
Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;
Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;
Запрещаем обтекание, подробнее как сделать читаем в [url=http://falbar. ru/article/zapret-obtekaniya-tremya-sposobami-na-css target=_blank]ранее написанной статье[/url], это необходимое действие, так как для пунктов меню будет использоваться свойство float;
Используем float со значением left для элементов li, чтобы выстроить их в один ряд;
Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;
Готово.
В зависимости от дизайна макета, может возникнуть потребность растянуть меню на всю ширину, следует использовать следующие стили CSS, подробнее читаем в статье – HTML список на всю ширину.
HTML без изменений, для примера меняем id=menu_2.
Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:
После использования этих стилей все пункты станут одинаковыми по ширине, а также растянуться по всей ширине обертки.
Второй способ
Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.
Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами. =drop] { display: none; }
nav { margin:0; padding: 0; background-color: #254441; }
nav ul ul .katelovtesa, nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover, nav ul ul ul a { background-color: #000000; }
nav ul li ul li .katelovtesa, nav ul ul a, nav ul ul ul a{ padding:14px 20px; color:#FFF; font-size:17px; }
nav ul li ul li .katelovtesa, nav ul ul a { background-color: #212121; }
/* Hide Dropdowns by Default */ nav ul ul { float: none; position:static; color: #ffffff; }
nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; }
nav ul ul li { display: block; width: 100%; }
nav ul ul ul li { position: static;
}
}
@media all and (max-width : 330px) {
nav ul li { display:block; width: 94%; }
}
Конструктор меню — База знаний uCoz
Конструктор меню
Меню сайта — один из основных функциональных элементов, состоящий из набора ссылок на ключевые страницы. По умолчанию в него входят ссылки на активные модули и стандартные страницы («Информация о сайте», «Обратная связь»). Конструктор меню позволяет изменить набор ссылок без редактирования HTML-кода шаблонов сразу для всех страниц сайта.
Когда вы добавляете страницы на сайт, они могут автоматически добавляться и в меню. Кроме того, при активации модуля ссылка на него также попадает в меню сайта. Однако при удалении страницы или модуля ссылка не будет удалена из меню.
Вы можете создавать до 10 различных меню в рамках одного сайта.
Данная инструкция состоит из следующих шагов:
Как узнать, используется ли конструктор меню на моем сайте?
Редактирование меню
Создание и размещение нового меню на сайте
Адреса модулей системы
Как узнать, используется ли конструктор меню на моем сайте?
За отображение меню отвечают переменные вида $NMENU_n$. Подобные переменные встроены во все стандартные шаблоны.
В других случаях в панели управления нужно перейти в «Дизайн» / «Редактор» / «Глобальные блоки» и найти переменную в коде шаблона «Верхняя часть сайта»:
Не всегда меню размещается в указанном шаблоне, поэтому проверьте и другие: «Нижняя часть сайта», «Первый контейнер» и т.д.
Если вы разрабатываете свой шаблон, то включайте переменные меню в HTML-код. Когда покупаете шаблон в магазине или заказываете его разработку у фрилансеров, уточняйте, будет ли в шаблон встроен конструктор меню.
Редактирование меню
Чтобы отредактировать меню, перейдите в панель управления, откройте раздел «Дизайн» / «Конструктор меню»:
Выберите меню, которое хотите отредактировать:
Слева от названия меню нажмите на «Изменить параметры меню»:
Появится окно редактирования меню:
Название меню. Отображается только в панели управления и помогает администратору отличить одно меню от другого.
Ориентация меню. В зависимости от выбранного значения к меню будут применены разные стили оформления — горизонтальный или вертикальный.
Удалить. Полностью удаляет меню.
Когда закончите редактирование, нажмите на ссылку «Готово».
Изменить порядок пунктов в меню можно, перетащив его за точки с левой стороны от формы:
Чтобы изменить пункт, наведите на него курсор мыши и нажмите «Изменить»:
Появится окно редактирования пункта меню:
Название пункта. Отображается в списке пунктов меню, например, «Главная страница».
URL-адрес. Будет открываться при нажатии на пункт меню.
«Открывать в новом окне» добавляет атрибут target=”_blank” к ссылке.
CSS-класс предназначен для индивидуального оформления. Используйте его, когда нужно выделить один или несколько пунктов меню.
Удалить пункт меню.
Когда закончите редактирование пункта меню, нажмите на ссылку «Готово».
Для добавления пункта меню нажмите на изображение «+»:
и повторите действия по редактированию меню, которые мы рассмотрели ранее.
Важно! Перед добавлением пункта меню убедитесь, что страница, на которую он ссылается, существует и доступна для пользователей.
Чтобы внесенные изменения вступили в силу и отобразились на сайте, нажмите на кнопку «Сохранить»:
Создание и размещение нового меню на сайте
Чтобы создать новое меню, в панели управления откройте раздел «Дизайн» / «Конструктор меню» и нажмите на кнопку «Добавить»:
Появится новое меню:
Настройте меню, используя второй шаг данной инструкции.
Скопируйте переменную, которая отвечает за отображение меню в шаблоне (в нашем примере это $NMENU_2$).
В панели управления откройте раздел «Дизайн» / «Редактор» и найдите в меню слева «Глобальные блоки»:
Затем выполните следующие действия:
Выберите подходящий глобальный блок для размещения меню
Добавьте код в шаблон глобального блока
Нажмите на кнопку «Сохранить»
Меню появится на сайте.
Другой способ разместить меню на сайте, включив конструктор из панели инструментов сайта, — отредактировать HTML-код глобального блока:
Адреса модулей системы
В этом разделе приведена информация об адресах модулей системы, которая поможет указать корректные ссылки на них:
Модуль
Относительная ссылка
Пример абсолютной ссылки
Новости
/news/
//example.com/news/
Блог
/blog/
//example.com/blog/
Каталог сайтов
/dir/
//example.com/dir/
Каталог статей
/publ/
//example.com/publ/
Каталог файлов
/load/
//example. com/load/
Доска объявлений
/board/
//example.com/board/
FAQ
/faq/
//example.com/faq/
Интернет-магазин
/shop/
//example.com/shop/
Тесты
/tests/
//example.com/tests/
Видео
/video/
//example.com/video/
Форум
/forum/
//example.com/forum/
Фотоальбомы
/photo/
//example.com/photo/
Онлайн-игры
/stuff/
//example.com/stuff/
Гостевая книга
/gb/
//example.com/gb/
Конструктор меню
Web-разработка • HTML и CSS
Создание горизонтального адаптивного меню для сайта осуществляется с помощью компонента «Navbar». Компонент имеет два режима отображения:
десктопный (обычный) — выводятся все элементы меню;
мобильный (свёрнутый) — отображается бренд и кнопка «Гамбургер».
Режим отображения меню зависит от ширины viewport браузера. Точка перелома задается с помощью css-класса navbar-expand-{sm…xl}.
<nav>
<!-- Контейнер (определяет ширину компонента Navbar) -->
<div>
<!-- Бренд и кнопка «Гамбургер» -->
<a href="#">Brand</a>
<button type="button" data-toggle="collapse"
data-target="#navbar-example" aria-controls="navbar-example"
aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
<div>
<!-- Этот блок расположен слева -->
<ul>
<li>
<a href="#">
Первая ссылка <span>(текущая)</span>
</a>
</li>
<li>
<a href="#">Вторая ссылка</a>
</li>
<li>
<a href="#"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Выпадающее меню
</a>
<div aria-labelledby="navbarDropdown">
<a href="#">Третья ссылка</a>
<a href="#">Четвертая ссылка</a>
<div></div>
<a href="#">Пятая ссылка</a>
</div>
</li>
<li>
<a href="#">Не активная</a>
</li>
</ul>
<!-- Этот блок расположен справа -->
<form>
<input type="search" placeholder="Search"
aria-label="Search">
<button type="submit">Search</button>
</form>
</div>
</div>
</nav>
Для установки цветового оформления меню используются еще два дополнительных класса: navbar-{…} и bg-{…}. Для установки цвета фона к bg-{…} необходимо добавить любую из восьми цветовых схем — primary, secondary, dark, light, warning, danger, info, success. Класс navbar-{…} отвечает за цвет текста и поддерживает два варианта — navbar-dark и navbar-light.
<nav>
..........
</nav>
Для «NavBar» не обязателен контейнер, но если необходимо ограничить ширину всего меню, то можно его обернуть в .container.
<div>
<nav>
..........
</nav>
</div>
Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar.
<nav>
<div>
..........
</div>
</nav>
Для позиционирования меню фреймворк предлагает три дополнительных класса:
fixed-top — фиксирует меню в самом верху страницы;
fixed-bottom — фиксирует меню в самом низу страницы;
sticky-top — приклеивает меню в верху при прокрутке страницы.
<nav>
..........
</nav>
<nav>
..........
</nav>
<nav>
..........
</nav>
Элементы меню
Компонент «NavBar» состоит из нескольких подкомпонентов, которые можно добавлять или исключать по мере необходимости.
Имеет css-классы .collapse.navbar-collapse и скрывается в контрольной точке, которая задается классом navbar-expand-{sm…xl}. Может быть показано и скрыто по клику на кнопке .navbar-toggler:
Большинство сайтов имеют боковую панель или, как её ещё называют, сайдбар. Он служит для отображения информации, которая дополняет основной текст, но не является обязательной. Чаще всего это меню раздела, список определений из статьи, виджеты и т.д.
Для того, чтобы корректно разметить такую область, существует тег aside, внутри которого и располагается наша боковая панель. Добавим в пример из прошлого урока боковую панель с дополнительным меню.
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<aside> <!-- Боковая панель (сайдбар) -->
<nav> <!-- Дополнительное меню раздела -->
<ul>
<li><a href="/service-1/">Услуга 1</a></li>
<li><a href="/service-2/">Услуга 2</a></li>
<li><a href="/service-3/">Услуга 3</a></li>
</ul>
</nav>
</aside>
<main>
<p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>
<section>
<h3>Оставить заявку</h3>
<form>
<!-- Здесь форма заказа услуги -->
</form>
</section>
<section>
<h3>Читайте также</h3>
<article>
<h4>Услуга 2</h4>
<p>Описание новой услуги</p>
<a href="#">Ссылка на услугу</a>
</article>
<article>
<h4>Услуга 3</h4>
<p>Описание новой услуги</p>
<a href="#">Ссылка на услугу</a>
</article>
<article>
<h4>Услуга 4</h4>
<p>Описание новой услуги</p>
<a href="#">Ссылка на услугу</a>
</article>
</section>
</main>
Обратите внимание, что aside содержится вне тега main. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега main.
Задание
Создайте шапку сайта. Она состоит из 2-х элементов: * Логотип * Секция навигации. Внутри неё маркированный список из двух элементов
Добавьте секцию main. Внутри создайте секцию с заголовком в теге h3 и два блока с описанием новых услуг. Не забудьте, что внутри тега article обязательно содержится заголовок. Сами заголовки внутри article разметьте тегом h4.
Добавьте боковую панель. Она является уникальной для каждой страницы и содержит текст, относящийся только к этой странице. Внутри панели вставьте произвольный текст.
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github. com/hexlet-basics
Семантический HTML — Основы современной вёрстки
Основы современной вёрстки
При создании вёрстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.
Основная цель любой HTML-вёрстки — передача смысла блоков. Часто, помимо пользователей, по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют её полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу вёрстку и не может «глазами» отделить части макета.
Вторая важная причина необходимости создания семантической вёрстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».
Запомните: минимальная доступность лучше, чем её отсутствие.
Для решения этих вопросов в стандарте HTML5 появилось множество семантических тегов, которыми вы можете пользоваться. В этом уроке изучим базовые семантические теги и разметим целую HTML-страницу.
Шапка сайта
Верхняя область макета зачастую называется «шапкой» сайта. Она содержит название компании, основное меню, контактную информацию. Эта область очень важна для быстрой навигации по сайту, так как обычно содержит меню с основными разделами сайта.
Чтобы создать шапку сайта, используется парный тег header, внутри которого мы и располагаем необходимую информацию.
По своему поведению тег header работает так же, как и простой div. Почти все семантические элементы являются блочными и не имеют стилей по умолчанию. Это позволяет очень быстро добавить семантику в уже существующие проекты. Если стили в этих проектах не завязаны на тегах, то достаточно просто сменить название с div на header и мы получим уже семантичную шапку сайта.
Навигация
Попробуйте взглянуть на шапку сайта из примера выше глазами компьютера. Что он там видит?
Картинку.
Блочный элемент div.
Маркированный список.
Набор ссылок.
Если вы ещё не сверстали пару своих макетов, то по такому набору можете и не понять, что набор ссылок не что иное, как основное меню сайта. Вот и роботам не всегда просто это сделать. Конечно, они уже достаточно обучены, чтобы в таком простом наборе найти меню, но меню обычно может быть не одно и быть контекстно-зависимым. Тогда робот может принять за основное меню не то, что бы мы хотели.
Как же нам ему помочь? Для этого в стандарте HTML5 появился тег nav. Он обозначает навигационную область. Причём помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдёт ниже.
Заменим простой блочный элемент div на его семантичного брата nav:
Главной особенностью использования nav является то, что не обязательно оборачивать все меню на странице. Обычно достаточно обернуть только главное меню и, например, не оборачивать меню в футере. При этом не запрещается иметь сразу несколько элементов nav на странице. Выделяйте ими главные меню на странице.
Уникальный контент
Основной смысл каждой страницы — уникальный контент. Это самое главное, что должно быть на вашей странице. Пользователь вполне справится без меню или футера, но если на странице нет своего уникального контента, то страница бесполезна.
Для разметки уникального контента в стандарте HTML5 появился специальный тег main. Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нём держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.
Добавим такую область в нашу вёрстку:
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<h2>Хекслет — практические курсы по программированию</h2>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>
</main>
Наличие тега main также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит всё оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключённая в тег main. Такой режим отлично подходит для людей, у которых, в настоящий момент, слабое подключение к интернету.
Так как внутри main содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.
Секции
Контент на странице не является однородным. Обычно это цепочка логических областей, каждая из которых описывает что-то конкретное. Например, на странице могут присутствовать область с описанием преимуществ, цены, формы и так далее. Их хочется как-то выделить. И на это есть несколько причин:
С правильно разделённым контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти.
Правильная группировка разделов — важная часть при создании доступного web’а.
Для таких самостоятельных логических единиц существует специальный тег section, который внутри себя может содержать одну конкретную секцию. Добавим её в наш пример:
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<h2>Хекслет — практические курсы по программированию</h2>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>
<section>
<h3>Преимущества</h3>
<ul>
<li>Много теории</li>
<li>Много практики</li>
<li>Много менторов</li>
</ul>
</section>
</main>
Заметьте, как легко стало искать преимущества в коде, ведь они находятся в отдельной секции. Также вы могли обратить внимание на заголовок внутри секции. Так как секция — это самостоятельная единица, то почти всегда она имеет свой заголовок. Хоть это и не всегда так, и стандарт не обязывает нас включать заголовок в секцию, но старайтесь придерживаться этого правила.
Как быстро определить, стоит ли включать участок контента в отдельную секцию? Всё очень просто: если вы можете описать участок контента в одном или двух словах (преимущества, цены, форма заказа, каталог, контакты и так далее), то с большой вероятностью этот участок является самостоятельной секцией.
Независимые секции
Другим способом выделить логический участок текста является использование тега article. Может показаться, что какой смысл иметь два различных тега для выделения одного и того же?
Между section и article есть одна существенная разница: article является независимой секцией, то есть её можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.
Представьте себе блог и отдельную статью в нём. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег article.
Добавим колонку новостей в наш пример вёрстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в article. А что делать с обёрткой блока? Она объединяет по смыслу несколько различных новостей, её можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдёт тег section.
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<h2>Хекслет — практические курсы по программированию</h2>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>
<section>
<h3>Преимущества</h3>
<ul>
<li>Много теории</li>
<li>Много практики</li>
<li>Много менторов</li>
</ul>
</section>
<section>
<h3>Новости</h3>
<article>
<h4>Новость 1</h4>
<p>Текст новости 1</p>
<a href="#">Подробнее</a>
</article>
<article>
<h4>Новость 2</h4>
<p>Текст новости 2</p>
<a href="#">Подробнее</a>
</article>
<article>
<h4>Новость 3</h4>
<p>Текст новости 3</p>
<a href="#">Подробнее</a>
</article>
</section>
</main>
Дополняющие секции
Ещё одним крупным контейнером для нашего контента служит тег aside. Это область с дополнительной информацией. Она может быть как связана с текущей страницей, так и не очень. Подобные секции вы можете встречать в виде боковых панелей на сайтах. Там содержится дополнительное меню, баннеры, реклама и другая информация.
Обратите внимание, что aside не обязан являться боковой панелью по внешнему виду. Это может быть даже дополнительная информация внутри статьи. Но чаще всего внешнее оформление у такого тега именно в виде боковой панели.
Давайте добавим такую информацию в нашу вёрстку. Внутри этой дополнительной секции будет находиться ещё одно меню, которое не будем оборачивать в nav, так как оно не является основным.
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<aside>
<div>
<a href="#">Необязательный пункт 1</a>
<a href="#">Необязательный пункт 2</a>
<a href="#">Необязательный пункт 3</a>
</div>
</aside>
<main>
<h2>Хекслет — практические курсы по программированию</h2>
<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства. </p>
<section>
<h3>Преимущества</h3>
<ul>
<li>Много теории</li>
<li>Много практики</li>
<li>Много менторов</li>
</ul>
</section>
<section>
<h3>Новости</h3>
<article>
<h4>Новость 1</h4>
<p>Текст новости 1</p>
<a href="#">Подробнее</a>
</article>
<article>
<h4>Новость 2</h4>
<p>Текст новости 2</p>
<a href="#">Подробнее</a>
</article>
<article>
<h4>Новость 3</h4>
<p>Текст новости 3</p>
<a href="#">Подробнее</a>
</article>
</section>
</main>
Дополнительное задание
Создайте файл index.html на своём компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
CSS Горизонтальная панель навигации
Горизонтальная панель навигации
Есть два способа создать горизонтальную панель навигации. Используя встроенные или плавающие элементов списка.
Встроенные элементы списка
Одним из способов создания горизонтальной панели навигации является указание элементов
как встроенный, в дополнение к «стандартному» коду с предыдущей страницы:
Объяснение примера:
Дисплей: встроенный; — По умолчанию элементы
являются блочными.Мы тут
удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их в одной строке
Элементы плавающего списка
Еще один способ создания горизонтальной панели навигации — разместить
элементы и укажите макет для ссылок навигации:
Пример
Ли
{ плыть налево; }
а
{ дисплей: блок; отступ: 8 пикселей; цвет фона:
#dddddd; }
Попробуй сам »
Объяснение примера:
поплавок: левый; — используйте float, чтобы элементы блока скользили рядом друг с другом
дисплей: блок; —
Позволяет указать отступы (и
высота, ширина, поля и т. д.если хотите)
отступ: 8 пикселей; — Поскольку блочные элементы занимают всю доступную ширину, они
не могут плавать рядом друг с другом. Поэтому укажите отступы, чтобы
они хорошо выглядят
цвет фона: #dddddd; — Добавить серый цвет фона к каждому элементу a
/ * Добавляем серую правую границу ко всем элементам списка, кроме последнего элемента
(последний ребенок) * / li { граница справа: 1px solid #bbb; }
li: last-child { border-right: нет; }
Попробуй сам »
Фиксированная панель навигации
Сделать так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:
Примечание. Фиксированное положение может некорректно работать на мобильных устройствах.
Серая горизонтальная панель навигации
Пример серой горизонтальной панели навигации с тонкой серой рамкой:
Пример
ul { border: 1px solid # e7e7e7; цвет фона: # f3f3f3; }
li a { цвет:
# 666; }
Попробуй сам »
Липкая панель навигации
Добавить позиция: липкая; в
, чтобы создать липкую панель навигации.
Закрепленный элемент переключается между относительным и фиксированным, в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте — затем он «застревает» на месте (например, position: fixed).
Примечание. Internet Explorer не поддерживает фиксированное позиционирование. Safari требует -webkit-
префикс (см. пример выше). Вы также должны указать по крайней мере один из верхний , правый , нижний или левый для
липкое позиционирование для работы.
Другие примеры
Адаптивный Topnav
Как использовать медиа-запросы CSS для создания отзывчивой верхней навигации.
Попробуй сам »
Адаптивный Sidenav
Как использовать медиа-запросы CSS для создания адаптивной боковой навигации.
Попробуй сам »
Создание нескольких страниц с меню навигации
Введение
В этой статье учебной программы по веб-стандартам мы поговорим о навигации и меню веб-сайта.Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также затронем тему удобства использования и доступности меню. Мы пока не будем вдаваться в стилистику меню, но эта статья заложит основы. Есть примеры кода, которые можно загрузить вместе с этой статьей — мы будем ссылаться на них на протяжении всего руководства.
HTML5 определяет меню
Примечание. Этот материал был первоначально опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с меню навигации, написанной Кристианом Хейльманном.Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2.5.
Далее: Проверка вашего HTML.
Создание нескольких страниц с меню навигации
Введение
В этой статье учебной программы по веб-стандартам мы поговорим о навигации и меню веб-сайта. Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также затронем тему удобства использования и доступности меню.Мы пока не будем вдаваться в стилистику меню, но эта статья заложит основы. Есть примеры кода, которые можно загрузить вместе с этой статьей — мы будем ссылаться на них на протяжении всего руководства.
HTML5 определяет меню
, которое должно использоваться для содержания основной навигации веб-сайта, будь то список ссылок или элемент формы, такой как поле поиска. Это хорошая идея, так как до этого мы бы содержали блок навигации внутри чего-то вроде
.Да, вы можете довольно хорошо идентифицировать это для целей стилизации, но это
и, следовательно, семантически анонимный. дает нам последовательный способ однозначного определения с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для пользователей с ослабленным зрением, использующих программу чтения с экрана, которые смогут найти навигацию намного проще. если он четко обозначен (это зависит от используемого ими средства чтения с экрана, поддерживающего элемент , так что это может быть еще немного).Итак, блок навигации будет выглядеть примерно так:
следует использовать только для основной навигации пользователя по веб-странице, а не для рекламных ссылок внизу страницы или для дополнительной навигации, относящейся к небольшой части страницы.
Инструменты главного меню HTML — ссылки, привязки и списки
Существует несколько различных типов меню и идиом навигации, которые следует учитывать в HTML, все они тесно связаны с элементами и (привязка). В двух словах:
Атрибут 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 — это то, что вы могли ожидать — карты всех различных страниц (или основных разделов, если вы говорите о действительно огромных сайтах) вашего сайта. Они позволяют посетителям вашего сайта получить представление об общей структуре вашего сайта и быстро перейти в нужное место, даже если нужная им страница находится глубоко в иерархии ваших страниц.
Как карты сайта, так и поиск по сайту — отличный способ предложить посетителям запасной вариант, когда они потерялись, или предложить быстрый доступ тем, кто спешит.
С точки зрения HTML, они могут быть либо одним массивным вложенным списком, полным ссылок, либо — в случае очень больших сайтов — заголовками разделов с вложенными ссылками иерархий, специфичных для разделов, или даже формами поиска для каждого из разделов.
Разбиение на страницы необходимо, когда вам нужно предложить способ навигации по большим документам, разбитым на отдельные страницы.Вы найдете разбиение на страницы в больших архивах изображений или на страницах результатов поиска (например, в поиске Google или Yahoo).
Разбиение на страницы отличается от других типов навигации, поскольку обычно ведет обратную ссылку на один и тот же документ, но приводит к отображению большего количества параметров или дополнительной информации. Некоторые примеры разбивки на страницы показаны на рисунке 2:
Рис. 2. Меню разбиения на страницы позволяют посетителям просматривать большие наборы данных, не теряя при этом своего местоположения.
В HTML нет ничего новаторского — вы снова предлагаете список ссылок, в которых текущая ссылка (указывающая, какой фрагмент данных отображается и как далеко вы находитесь на странице) выделяется (например, с помощью элемент) и не связан.
Основное отличие навигации по сайту состоит в том, что при разбиении на страницы выполняется много логики программирования. В зависимости от того, где вы находитесь во всем наборе данных, вам необходимо показать или скрыть предыдущую, следующую, первую и последнюю ссылки.Если у вас действительно большой объем информации для навигации, вы также захотите предложить ссылки на такие ориентиры, как результаты 0–100, результаты 101–200 и т. Д. Вот почему вы вряд ли будете жестко кодировать такие меню в HTML. но вместо этого создайте их на стороне сервера. Однако это не меняет правил — текущий блок не должен ссылаться на сам себя, и вы не должны предлагать ссылки, которые никуда не ведут.
Когда списков мало — изображения карт и форм
В 99% случаев упорядоченный или неупорядоченный список является достаточной HTML-конструкцией для меню, особенно потому, что логический порядок и вложение также позволяют очень хорошо стилизовать с помощью CSS.Однако в некоторых ситуациях могут потребоваться другие методы проектирования.
Настройка точек доступа с помощью карт изображений
Один из методов — карты изображений на стороне клиента. Карты изображений превращают изображение в меню, превращая части изображений в интерактивные области, которые можно связывать с различными документами. Пример карты изображений, связанный с этим разделом, превращает изображение в интерактивное меню. Попробуйте это сделать, перейдя по ссылке выше и щелкнув разные части треугольника на изображении, показанном на рисунке 3.
Рисунок 3. Определив карту с элементами области, вы можете превратить части изображения в интерактивные элементы.
Вы можете превратить любое изображение в меню, определив карту с различными областями (также называемыми горячими точками). Вы присваиваете карте атрибут name и соединяете изображение и карту с помощью атрибута usemap в элементе . Код в нашем примере выглядит так:
Обратите внимание, что это работает точно так же, как внутристраничные ссылки, а это означает, что вам необходимо поставить перед значением атрибута usemap хеш.
Каждая область имеет несколько атрибутов:
href определяет URL-адрес, на который должна ссылаться область (которая также может быть целью в том же документе).
alt определяет альтернативный текст, который может отображаться, если изображение не отображается по какой-либо причине.
Форма определяет форму области. Это может быть прямоугольник для прямоугольников, круг, для кругов или поли для неправильных форм, определенных с помощью многоугольников.
coords определяет координаты на изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения и могут быть измерены в пикселях или процентах. Для прямоугольных областей вам нужно определить только верхний левый и нижний правый угол; для кругов нужно определить центр круга и радиус; для многоугольников необходимо предоставить список всех угловых точек, разделенных запятыми.
Карты изображений не очень интересно определять и вводить как HTML, поэтому инструменты для работы с изображениями, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML за вас).
Экономия места на экране и предотвращение перегрузки ссылок с помощью форм
Другой метод, который вы можете использовать, — это использование элемента управления формы для навигации — например, вы можете использовать элемент . Ваши посетители могут выбрать вариант, а затем отправить форму для перехода на разные страницы. Здесь вы можете найти пример меню формы: обратите внимание, что на самом деле он не будет работать, поскольку он не привязан к какому-либо сценарию, чтобы заставить его работать.
Наиболее очевидным преимуществом использования этого типа меню является то, что вы можете предлагать множество опций, не занимая много места на экране, поскольку браузеры отображают меню в виде одной строки — см. Рисунок 4.
Рисунок 4: Меню выбора занимают только одну строку на экране.
Вы можете пойти дальше, сгруппировав различные опции меню с помощью элемента , как показано в этом примере optgroup.
Появится меню с недоступными для выбора параметрами (это названия групп), как показано на рисунке 5:
Рисунок 5: Меню выбора могут иметь группы опций, которые позволяют сообщать посетителям, какие опции принадлежат друг другу.
Преимущество этого метода заключается в том, что он практически не занимает места, но он также означает, что вам нужен серверный скрипт для отправки посетителей на выбранные ими страницы. Вы также можете использовать JavaScript, чтобы ссылки работали, но вы не можете полагаться на доступность JavaScript — вам нужно убедиться, что ваши пользователи все еще могут использовать меню с отключенным JavaScript.
Еще одно, менее очевидное преимущество состоит в том, что вы не предлагаете слишком много ссылок в одном документе. Это означает, что вы не перегружаете пользователей вспомогательными технологиями (которым часто предлагаются ссылки в виде одного большого списка).Это также означает, что поисковые системы не считают ссылки на вашей странице бесполезными, поскольку соотношение ссылки и текста делает документ похожим на карту сайта. Однако многие вспомогательные технологии могут создавать карту ссылок на ваших страницах; если все ваши важные ссылки находятся в меню выбора, есть шанс, что посетитель никогда не наткнется на них. Поэтому рекомендуется предлагать якорные ссылки на основные целевые страницы и меню элементов для меню и в чем заключаются проблемы?
Что вы определяете с помощью элементов и для чего нужен атрибут nohref элемента area (здесь его нет, вам нужно провести онлайн-исследование)
Каковы преимущества пропуска ссылок?
Примечание. Этот материал был первоначально опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с меню навигации, написанной Кристианом Хейльманном.Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2. 5.
Далее: Проверка вашего HTML.
Создание нескольких страниц с меню навигации
Введение
В этой статье учебной программы по веб-стандартам мы поговорим о навигации и меню веб-сайта. Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также затронем тему удобства использования и доступности меню.Мы пока не будем вдаваться в стилистику меню, но эта статья заложит основы. Есть примеры кода, которые можно загрузить вместе с этой статьей — мы будем ссылаться на них на протяжении всего руководства.
HTML5 определяет меню
, которое должно использоваться для содержания основной навигации веб-сайта, будь то список ссылок или элемент формы, такой как поле поиска. Это хорошая идея, так как до этого мы бы содержали блок навигации внутри чего-то вроде
.Да, вы можете довольно хорошо идентифицировать это для целей стилизации, но это
и, следовательно, семантически анонимный. дает нам последовательный способ однозначного определения с помощью основной навигации, что хорошо для таких вещей, как поисковая оптимизация, и для пользователей с ослабленным зрением, использующих программу чтения с экрана, которые смогут найти навигацию намного проще. если он четко обозначен (это зависит от используемого ими средства чтения с экрана, поддерживающего элемент , так что это может быть еще немного).Итак, блок навигации будет выглядеть примерно так:
следует использовать только для основной навигации пользователя по веб-странице, а не для рекламных ссылок внизу страницы или для дополнительной навигации, относящейся к небольшой части страницы.
Инструменты главного меню HTML — ссылки, привязки и списки
Существует несколько различных типов меню и идиом навигации, которые следует учитывать в HTML, все они тесно связаны с элементами и (привязка). В двух словах:
Атрибут 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 — это то, что вы могли ожидать — карты всех различных страниц (или основных разделов, если вы говорите о действительно огромных сайтах) вашего сайта. Они позволяют посетителям вашего сайта получить представление об общей структуре вашего сайта и быстро перейти в нужное место, даже если нужная им страница находится глубоко в иерархии ваших страниц.
Как карты сайта, так и поиск по сайту — отличный способ предложить посетителям запасной вариант, когда они потерялись, или предложить быстрый доступ тем, кто спешит.
С точки зрения HTML, они могут быть либо одним массивным вложенным списком, полным ссылок, либо — в случае очень больших сайтов — заголовками разделов с вложенными ссылками иерархий, специфичных для разделов, или даже формами поиска для каждого из разделов.
Разбиение на страницы необходимо, когда вам нужно предложить способ навигации по большим документам, разбитым на отдельные страницы.Вы найдете разбиение на страницы в больших архивах изображений или на страницах результатов поиска (например, в поиске Google или Yahoo).
Разбиение на страницы отличается от других типов навигации, поскольку обычно ведет обратную ссылку на один и тот же документ, но приводит к отображению большего количества параметров или дополнительной информации. Некоторые примеры разбивки на страницы показаны на рисунке 2:
Рис. 2. Меню разбиения на страницы позволяют посетителям просматривать большие наборы данных, не теряя при этом своего местоположения.
В HTML нет ничего новаторского — вы снова предлагаете список ссылок, в которых текущая ссылка (указывающая, какой фрагмент данных отображается и как далеко вы находитесь на странице) выделяется (например, с помощью элемент) и не связан.
Основное отличие навигации по сайту состоит в том, что при разбиении на страницы выполняется много логики программирования. В зависимости от того, где вы находитесь во всем наборе данных, вам необходимо показать или скрыть предыдущую, следующую, первую и последнюю ссылки.Если у вас действительно большой объем информации для навигации, вы также захотите предложить ссылки на такие ориентиры, как результаты 0–100, результаты 101–200 и т. Д. Вот почему вы вряд ли будете жестко кодировать такие меню в HTML. но вместо этого создайте их на стороне сервера. Однако это не меняет правил — текущий блок не должен ссылаться на сам себя, и вы не должны предлагать ссылки, которые никуда не ведут.
Когда списков мало — изображения карт и форм
В 99% случаев упорядоченный или неупорядоченный список является достаточной HTML-конструкцией для меню, особенно потому, что логический порядок и вложение также позволяют очень хорошо стилизовать с помощью CSS. Однако в некоторых ситуациях могут потребоваться другие методы проектирования.
Настройка точек доступа с помощью карт изображений
Один из методов — карты изображений на стороне клиента. Карты изображений превращают изображение в меню, превращая части изображений в интерактивные области, которые можно связывать с различными документами. Пример карты изображений, связанный с этим разделом, превращает изображение в интерактивное меню. Попробуйте это сделать, перейдя по ссылке выше и щелкнув разные части треугольника на изображении, показанном на рисунке 3.
Рисунок 3. Определив карту с элементами области, вы можете превратить части изображения в интерактивные элементы.
Вы можете превратить любое изображение в меню, определив карту с различными областями (также называемыми горячими точками). Вы присваиваете карте атрибут name и соединяете изображение и карту с помощью атрибута usemap в элементе . Код в нашем примере выглядит так:
Обратите внимание, что это работает точно так же, как внутристраничные ссылки, а это означает, что вам необходимо поставить перед значением атрибута usemap хеш.
Каждая область имеет несколько атрибутов:
href определяет URL-адрес, на который должна ссылаться область (которая также может быть целью в том же документе).
alt определяет альтернативный текст, который может отображаться, если изображение не отображается по какой-либо причине.
Форма определяет форму области. Это может быть прямоугольник для прямоугольников, круг, для кругов или поли для неправильных форм, определенных с помощью многоугольников.
coords определяет координаты на изображении, которые должны стать горячими точками — эти значения измеряются от верхнего левого угла изображения и могут быть измерены в пикселях или процентах. Для прямоугольных областей вам нужно определить только верхний левый и нижний правый угол; для кругов нужно определить центр круга и радиус; для многоугольников необходимо предоставить список всех угловых точек, разделенных запятыми.
Карты изображений не очень интересно определять и вводить как HTML, поэтому инструменты для работы с изображениями, такие как Adobe Image Ready или Fireworks, предлагают возможность создавать их визуально (они генерируют HTML за вас).
Экономия места на экране и предотвращение перегрузки ссылок с помощью форм
Другой метод, который вы можете использовать, — это использование элемента управления формы для навигации — например, вы можете использовать элемент . Ваши посетители могут выбрать вариант, а затем отправить форму для перехода на разные страницы. Здесь вы можете найти пример меню формы: обратите внимание, что на самом деле он не будет работать, поскольку он не привязан к какому-либо сценарию, чтобы заставить его работать.
Наиболее очевидным преимуществом использования этого типа меню является то, что вы можете предлагать множество опций, не занимая много места на экране, поскольку браузеры отображают меню в виде одной строки — см. Рисунок 4.
Рисунок 4: Меню выбора занимают только одну строку на экране.
Вы можете пойти дальше, сгруппировав различные опции меню с помощью элемента , как показано в этом примере optgroup.
Появится меню с недоступными для выбора параметрами (это названия групп), как показано на рисунке 5:
Рисунок 5: Меню выбора могут иметь группы опций, которые позволяют сообщать посетителям, какие опции принадлежат друг другу.
Преимущество этого метода заключается в том, что он практически не занимает места, но он также означает, что вам нужен серверный скрипт для отправки посетителей на выбранные ими страницы. Вы также можете использовать JavaScript, чтобы ссылки работали, но вы не можете полагаться на доступность JavaScript — вам нужно убедиться, что ваши пользователи все еще могут использовать меню с отключенным JavaScript.
Еще одно, менее очевидное преимущество состоит в том, что вы не предлагаете слишком много ссылок в одном документе. Это означает, что вы не перегружаете пользователей вспомогательными технологиями (которым часто предлагаются ссылки в виде одного большого списка).Это также означает, что поисковые системы не считают ссылки на вашей странице бесполезными, поскольку соотношение ссылки и текста делает документ похожим на карту сайта. Однако многие вспомогательные технологии могут создавать карту ссылок на ваших страницах; если все ваши важные ссылки находятся в меню выбора, есть шанс, что посетитель никогда не наткнется на них. Поэтому рекомендуется предлагать якорные ссылки на основные целевые страницы и меню элементов для меню и в чем заключаются проблемы?
Что вы определяете с помощью элементов и для чего нужен атрибут nohref элемента area (здесь его нет, вам нужно провести онлайн-исследование)
Каковы преимущества пропуска ссылок?
Примечание. Этот материал был первоначально опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с меню навигации, написанной Кристианом Хейльманном. Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2.5.