Как сделать шапку сайта html: Шапка | HTML | CodeBasics

Что такое хедер или шапка сайта, для чего нужна, примеры

Web-ресурс — это сложная структура со своими правилами и сложившимися традициями. Хедер сайта — это голова, центр полетов, отвечающий за навигацию и юзабилити. Над хедером придется кропотливо поработать, ведь от каждой детали в этом блоке зависит, насколько людям будет удобно пользоваться вашим сайтом.

Что такое хедер и футер сайта

Header — так называется шапка сайта на английском языке. Это информационный блок в виде узкой полосы в верхней части каждой web-страницы.

Термин в web пришел из полиграфии. В печатных изданиях header и footer — это общепринятые названия верхнего и нижнего колонтитула — сквозной строки сверху или снизу страницы с дополнительной информацией: об авторе, номере страницы, параграфе, названии книги и т.п. Header от слова head — голова, footer от слова foot — ноги. Из полиграфии терминология переползла в верстку сайтов, хотя в русском языке наравне с хедером и футером прижились «шапка» и «подвал» сайта.

Зачем нужна шапка сайта

Шапка — блок, который постоянно на виду, ведь большинство web-мастеров закрепляют его в верхней части страницы. У хедера три главных функции:

• идентификация — логотип и название компании в шапке сообщают пользователю, с чьим ресурсом он сейчас взаимодействует;
• навигация — ссылки в хедере помогают находить нужные разделы сайта и быстро перемещаться между ними;
• отстройка от конкурентов — среди однотипных вкладок пользователь предпочтет сайт с удобным и понятным хедером или, наоборот, с оригинальным и нестандартным.

В шапку выносится ключевая информация о вашем проекте. Здесь вы сообщаете пользователям, кто вы, чем занимаетесь, что предлагаете, как устроен ваш сайт, как с вами связаться. Но тут важно не терять голову и сосредоточиться на самом главном: напихав полную шапку информации и кнопок, вы рискуете отпугнуть пользователя. Перегруженный хедер — плохой хедер.

Информация в шапке должна быть хорошо структурирована и продумана. Оформление меню влияет на юзабилити — удобство пользования ресурсом. А юзабилити — это один из ключевых аспектов, влияющих на поведенческие факторы, важные для продвижения сайта в поисковых системах.

На вопрос для чего нужна шапка сайта, можно ответить глобально: правильный хедер улучшает юзабилити и благотворно влияет на поведенческие факторы.

Как сделать хедер для сайта: основные принципы

В первую очередь, нужно решить, какого размера должна быть шапка сайта. Ширина может меняться от 1024 px до 1920 px (для мониторов с высоким разрешением). По высоте размер стандартной шапки не должен перекрывать половину экрана и мешать знакомству с контентом на сайте, обычно достаточно от 100 до 250 пикселей.

После запуска сайта, убедитесь, что хедер корректно отображается на разных устройствах и мониторах с разным разрешением.

• Выберите из перечня стандартных элементов шапки (об этом речь пойдет далее) наиболее важные и подходящие для вашего проекта пункты.
• Подберите читаемый, четкий шрифт. Если в компании разработан корпоративный стиль, то используйте фирменные шрифты, это станет дополнительным элементом идентификации бренда. Информация в шапке должна хорошо читаться людьми с разным зрением и с разного расстояния. Уделите внимание типографике — правилам оформления текста.
• Шапка должна соответствовать назначению сайта и гармонично вписываться в общий стиль web-ресурса.
• Поставьте в шапку логотип компании. Он должен быть в высоком разрешении.
• Избавьтесь от всех лишних элементов, отвлекающих от самого главного. Воспринимайте хедер, как навигацию на вокзале: чем чище и точнее схема, тем она понятнее. Продумывайте не только наличие нужных элементов, но и их расположение. Пользователи привыкли, что контакты обычно находятся в правой части шапки сайта, а логотип и название компании — в левой.
• Зафиксируйте шапку, чтобы она не исчезала при скроллинге страницы. Это поможет пользователям всегда иметь перед глазами важную информацию.

Стандартные элементы шапки сайта

Проанализируйте примеры шапок сайтов, которые вам нравятся. У них много общего, но все же набор элементов отличается. Все зависит от ниши бизнеса, особенностей маркетинговой стратегии, самой структуры сайта и целей web-ресурса. Перечислим стандартные элементы хедера.

Контакты компании

Телефон и e-mail обычно располагаются в правой части шапки. Сюда же можно поместить кнопки мессенджеров для быстрой связи с менеджерами. Желательно иметь хотя бы один городской номер телефона. Исключительно сотовые номера могут вызвать у пользователей подозрения в ненадежности компании.

Все контакты должны быть кликабельны и сразу перекидывать пользователя на звонок, в почтовую программу или мессенджер.

Адрес

Если для вашего бизнеса важно физическое расположение офиса или магазина, то адрес нужно указывать в шапке (а если не важно, помните о том, что адрес компании в хедере – фактор ранжирования). Адреса сети магазинов или офисов оформляются выпадающим списком. Для онлайн-сервисов адрес не имеет значения, поэтому его можно спрятать в разделе «Контакты» или в подвал.

Обратный звонок

Чтобы не упустить заказчиков, которые не могут позвонить вам сами, например, из-за бешеных цен на роуминг, поставьте в шапке рядом с контактными данными кнопку со ссылкой на форму заказа обратного звонка.

Меню

Горизонтальное меню в шапке может состоять из разных пунктов: разделов сайта, каталога и пр. Об этом элементе мы поговорим более подробно в отдельной главе.

Личный кабинет

Если на сайте предусмотрено создание личного кабинета, то ссылки для входа и регистрации нужно размещать в шапке на видном месте, обычно в правой части экрана.

Корзина

Ссылку на корзину тоже размещают в шапке интернет-магазина. Обычно это пиктограмма тележки из супермаркета, в которой для удобства покупателей отображается количество товаров и сумма.

Избранное и список сравнения

Рядом с корзиной ставят пиктограммы для быстрого перехода в пользовательские списки отложенных товаров. Ссылки «Корзина», «Избранное», «Сравнить» должны идти одним блоком, т.к. это инструменты одного порядка — для манипуляций с товарными карточками магазина.

Отличительные знаки компании

Шапка сайта — то место, где находятся все опознавательные знаки вашей компании: логотип, дескриптор, слоган, персонаж и прочее. Обычно вся эта информация расположена в левой части экрана, а логотип по умолчанию еще и является ссылкой перехода на Главную, почти как портал для трансгрессии в «Гарри Поттере».

Отличительные знаки помогают поднять узнаваемость бренда и идентифицировать страницу, на которой находится пользователь.

Поле для поиска и другие элементы навигации

Если у вас крупный ресурс с большим массивом контента и сложной структурой, добавьте поиск по сайту. Обычно это поле для ввода запроса и пиктограмма лупы, понятная всем интуитивно.

Наличие в шапке веб-сайта кнопок для перехода в соцсети неоднозначная история. С одной стороны, так вы продвигаете свои аккаунты в соцсетях, но с другой — вы уводите пользователя на другие ресурсы, а это плохо для поведенческих факторов и конверсии.

Часто web-мастера просто дублируют посты из аккаунтов соцсетей на главной, если это вписывается в специфику сайта, или ставят ссылки на соцсети в футере.

Поле для выбора региона

Предоставив пользователям возможность настроить регион, вы отсеиваете нецелевую аудиторию.

Призывы к действию

Кнопки с призывом к действию увеличивают конверсию. Кнопка CTA (Call-To-Action) может быть рассчитана на долгосрочную перспективу, например, «Связаться с нами», или размещаться на время проведения акции: «Получить скидку 5%».

Нужна или нет такая кнопка в шапке, зависит от целей и характера проекта.

Краткая информация о продукте

Иногда уместно разместить подзаголовок с кратким описанием товара или услуги, если сайт рекламирует какую-то схожую группу продуктов.

Кнопки переключения языков

Мультиязычные сайты в шапке размещают кнопки переключения языков, обычно это или пиктограммы флагов, или сокращение типа rus, eng.

Горизонтальное меню шапки

Горизонтальное меню — это тело хедера, его базовая и самая объемная часть, поэтому ему нужно уделить больше внимания, чем остальным элементам. Здесь располагаются ссылки для быстрого перехода между разделами сайта, это важнейший элемент навигации.

В горизонтальное меню должны попасть самые важные разделы вашего сайта. Перечислим наиболее распространенные:

• Каталог товаров или услуг.
• Акции.
• Портфолио, отзывы клиентов.
• Условия оплаты, доставки, гарантии, возврат товара.
• Блог, статьи, новости.
• Раздел о компании.
• Контакты.

В зависимости от ниши, разделы могут иметь свою специфику. В их формировании важно учитывать интересы и удобство аудитории сайта.

Советы по оформлению горизонтального меню:

• максимум 5–7 разделов, исключение — каталог с категориями товаров и услуг, его можно оформить, как вариант выпадающего меню в шапке сайта;
• не использовать кнопки типа «Еще» или «…», за которыми прячется еще десяток ссылок;
• все, что не влезло, нужно объединять в тематические группы и оформлять выпадающим списком;
• цветом подсвечивается раздел, в котором сейчас находится пользователь, поэтому не нужно делать разноцветные кнопки в горизонтальном меню.

В хедере не принято размещать дополнительные разделы:

• политику обработки персональных данных;
• вакансии;
• карту сайта.

Все эти ссылки живут в нижней шапке сайта, которая называется футером или подвалом.

Виды дизайна шапки сайта

• Классика.

  Слева — логотип, справа — корзина и контакты, по центру — ссылки на разделы сайта.

• Двухуровневое меню.

  Для больших интернет-магазинов с кучей настроек и товаров или для крупных сайтов с разветвленной структурой разработчики делают двухуровневое меню, в котором есть стандартная шапка с ключевыми элементами и выпадающие каталоги с более подробной сегментацией на разделы и подразделы.

• Большое изображение.

  Большая фоновая фотография, поверх которой размещены ссылки на разделы сайта или баннер в шапке сайта — прием, привлекающий внимание к знаменитости, продукту или акции. По мере прокрутки большая картинка исчезает и остается классическое меню с навигацией.

• Анимация.

  Хедеры с анимированными элементами привлекают внимание и выделяются на фоне стандартных решений. Анимированными могут быть как сами элементы шапки, так и фоновое изображение.

• «Гамбургер».

  Меню в виде трех горизонтальных полосок, которое при нажатии раскрывается в полноценный каталог. Хороший вид шапки для сайта в минималистическом стиле, когда все внимание должно быть сосредоточено на контенте без отвлекающих элементов.

  Гамбургер привычен аудитории, т.к. часто используется в мобильных приложениях. Собственно, там его использовать уместнее всего.

• Шапка на главном экране.

  Еще один пример хедера сайта в минималистическом стиле. Здесь шапка встроена в фоновое изображение первого экрана и никак визуально от него не отгорожена. Прием используется на промо-сайтах и в лендингах.

• Стилизованная шапка.

  Хедер, оформляющийся под стиль главной страницы. Чаще всего этот прием используется в праздники или для сезонных акций: открытие дачного сезона с лопатами и шашлыками, новогодние распродажи с гирляндами и снежинками, пасхальная неделя с яйцами-писанками и куличами.

• Страница без шапки.

  Креативщики в битве за оригинальность могут сделать сайт без хедера, встроив навигационные элементы в дизайн страницы. Этот прием любят использовать фотографы и современные художники для сайтов-портфолио. Иногда это уместно и не вызывает неудобств, но для стандартных сайтов решение спорное, т.к. страдает юзабилити.

Почему важно правильно оформить шапку сайта

Человек, попав на сайт никогда не изучает его досконально, прочитывая каждую букву. Исследователи выявили 3 модели движения глаз пользователя, смотрящего на экран:

• Модель Гуттенберга, характерна для страниц с однородной структурой текста: верхний и нижний абзац по прямой, тело страницы по диагонали.
• Z-образная модель, характерна для страниц с визуально разделенными блоками контента.
• F-образная модель, когда горизонтальное сканирование страницы затухает по ходу движения вниз.

Во всех трех моделях ключевое внимание уделяется верхней горизонтальной линии экрана. Поэтому от того, как выглядит шапка сайта, зависит дальнейшее поведение пользователя и его впечатление о вашем ресурсе.

Шапки для разных типов сайтов

Если вы решили заказать шапку для сайта, нужно определить, какую задачу должен выполнять ваш web-ресурс.

• Продвижение личности: музыканта, специалиста, преподавателя, врача, консультанта и т.п.

  Акцент делается на личность и в хедер выносится привлекательный портрет улыбающегося героя. Задача — вызвать доверие, ощущение давно знакомого, почти родного человека.

• Продвижение бизнеса.

  Чтобы действительно выделиться, придется отказаться от классических приемов оформления хедера. Для стартапов важно держать марку первопроходцев, оригиналов. Поэтому здесь уместно рвать шаблоны, делать акцент на необычный дизайн и минимализм в оформлении шапки. Главное делать это без фанатизма, понимая, что шапка сайта – это все-таки не про красоту, а про удобство для пользователей и ранжирование.

• Шапка сайта интернет-магазина.

  В сервисах онлайн-торговли хедер играет ключевую роль, т.к. покупатели активно с ним взаимодействуют.

  Здесь важно правильно расставить акценты и не сваливать в кучу всевозможные элементы меню. Хедер не справочник и не энциклопедия, сюда попадает только самое главное, без чего пользователю невозможно обойтись.

  Кроме обязательного горизонтального меню и корзины в шапке магазина должны быть:

  • логотип — заметный, но не крупный.
  • дескриптор — краткое описание специализации компании;
  • номер телефона: городской или федеральный на 8-800;
  • если еще осталось свободное место, поставьте в хедер график работы.

Ошибки в создании шапки

• Траблы с картинками: мыльное изображение, искажения при трансформации, недостаточное разрешение, наоборот, слишком высокое разрешение, из-за которого картинка медленно подгружается.
• Неудачный шрифт: избитый, типа Arial, нечитабельный, слишком витиеватый, со слипающимися буквами.
• Низкая контрастность цветов, из-за которой не читается текст.
• Ссылки в горизонтальном меню физически являются картинками: все слова должны быть сверстаны как текст.
• В верстке шапки использованы теги h2–H6.
• Хедер собран из картинок или флеш-элементов: правильная шапка должна быть сверстана в HTML.

Заключение

В этой статье мы разобрались, какой должна быть шапка сайта. Это критически важный информационный блок web-ресурса, который отвечает за юзабилити и поведенческие факторы пользователей. Хедер должен помогать посетителям ориентироваться в структуре вашего проекта, находить нужную информацию и совершать целевые действия. Неудобный и непродуманный хедер может убить хороший сайт.

 

Обсудим сотрудничество?

Какие задачи нужно решить:

Разработка сайта / интернет-магазина

Продвижение (SEO, Директ и т.п.)

Контент-маркетинг

Поддержка сайта (информационная, техническая)

Аудит сайта / интернет-магазина

Консультация

Уменьшающаяся при прокрутке “шапка” страницы без JavaScript

Представьте себе красивую и массивную “шапку” (header) веб-страницы с множеством отступов сверху и снизу от содержимого. Когда страница прокручивается (скроллится) вниз, “шапка” сжимается, уменьшая отступы и содержимое, чтобы оставить больше места на экране для остального контента.

Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.

Начинаем, как обычно, с HTML-разметки. Здесь нет ничего сложного: <header> с одним потомком <div>, который, содержит логотип и навигацию.

<header>
  <div>
    <div>...</div>
    <nav>...</nav>
  </div>
</header>

Затем в CSS, объявим высоту для <header>

(120 пикселей) и настроим его как flex-контейнер, который выравнивает содержимое по центру. Затем сделаем его “липким” (sticky).

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
}

Все остальные элементы “шапки”: логотип и навигация – размещаются во внутреннем контейнере. В некотором смысле этот контейнер и является “шапкой”, тогда как единственная функция родительского HTML-элемента <header> – обозначить её размеры, чтобы было что сокращать.

Настроим внутренний контейнер, указываем для .header-inner высоту 70 пикселей и тоже делаем его “липким” (sticky).

.header-inner {
  height: 70px;
  position: sticky;
  top: 0; 
}

Для чего top: 0;? Это нужно для того, чтобы контейнер, когда он становится “липким” (sticky), крепился к самому верху окна.

А теперь хитрость! Чтобы внутренний контейнер прилипал к верхнему краю страницы, нужно указать родительскому элементу <header> отрицательное значение top, равное разнице высот между двумя контейнерами, чтобы он прилипал чуть выше окна. Это 70 пикселей минус 120 пикселей, так и напишем -50 пикселей.

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
  /* top равно разнице высот
  между внешним и внутренним
  контейнерами */
  top: -50px;
}

Собираем теперь это всё воедино. <header> выдвигается за пределы экрана, а внутренний контейнер аккуратно помещается в верхней части области просмотра.

See this code Shrinking header on scroll without Javascript on x.xhtml.ru.

Таким образом можно приклеить к верхней части окна любой элемент. Например, важное объявление.

See this code Sticky banner on x.xhtml.ru.

При всём великолепии этого метода приклеивания элементов к верху окна при скролле с помощью только CSS, у него есть ограничения. Например, для внутреннего и внешнего контейнера нужно указать фиксированную высоту. При этом, они становятся уязвимыми для изменений, например, когда элементы навигации переносятся, потому что количество пунктов меню превышает количество отведенного для них места.

Еще одно ограничение? Не уменьшается логотип. Это, пожалуй, самый большой недостаток, поскольку логотипы часто являются самым большим потребителем свободного места. Наверное, когда-нибудь получится применять стили, основанные на липкости элемента…

How to Create a Shrinking Header on Scroll Without JavaScript.

position: sticky

Как создать адаптивный заголовок с помощью CSS?

Как создать адаптивный заголовок с помощью CSS?

Как создать адаптивный заголовок с помощью CSS?

share-outline Курс Javascript — Освоение основ

Мринал Бхаттачарья

Бесплатно

star 4.8

Зачислено:

1000

9000 9 Курс Javascript — Освоение основ

Мринал Бхаттачарья

Бесплатно

Начать обучение

Обзор

Вы знакомы с заголовками на веб-сайтах и ​​знаете, что независимо от размера экрана они точно соответствуют вашему устройству. Пример CSS оформления такого заголовка показан ниже. Обратите внимание, что этот заголовок меняется в зависимости от размера экрана и идеально соответствует ширине устройства.

Заголовок, видимый на рабочем столе:

Заголовок, видимый на мобильном устройстве:

И многие люди в настоящее время предпочитают использовать мобильные телефоны вместо настольных компьютеров для просмотра веб-сайтов. Заголовки играют важную роль в навигации по всему веб-сайту, поэтому он должен выглядеть чистым на всех устройствах. В этом разделе мы узнаем, как можно создать дизайн CSS для заголовка, чтобы он хорошо выглядел на устройствах всех размеров.

Предварительные условия

• Функции JavaScript
• Показать свойство в CSS
• Свойство позиции в CSS
• Запросы мультимедиа CSS
• переменные CSS

Техника

Существует не только один правильный способ, но и множество способов разработки и построения дизайна заголовков CSS.

В этой статье мы собираемся создать заголовок с помощью CSS flexbox. Заголовок разделен на три раздела, и внутри заголовка есть некоторый контент или ссылки для навигации по веб-сайту.

Три раздела включают:

• Средний раздел: Содержит гиперссылки для навигации по веб-сайту.

• Левая часть: Логотип компании или брендинг компании.

• Правая часть: Кнопка призыва к действию.

Хотя это не единственный способ оформления CSS заголовков, в этой статье мы собираемся создавать такие заголовки, следуя описанной выше технике.

Код — HTML, CSS и JavaScript

Теперь давайте рассмотрим пример оформления заголовка CSS.

HTML

Вышеприведенный HTML-код дает следующий результат. Как показано в выводе ниже, в CSS дизайна заголовка нет рисунков или цветов. Кроме того, заголовок не полностью структурирован должным образом.

Выход:

Вы можете применить CSS, как показано ниже, чтобы добавить дизайн, цвет и выравнивание заголовка.

CSS

Вывод заголовка с прикрепленным к нему файлом CSS показан ниже:

Вывод:

Как вы можете видеть на изображении ниже, заголовок еще не отвечает. При уменьшении размера экрана ломается CSS оформления шапки и все содержимое шапки не выравнивается как раньше.

Вывод:

Итак, чтобы сделать его адаптивным, вам нужно добавить еще немного CSS, который используется для придания заголовку адаптивного поведения.

Добавление отзывчивости

Добавление приведенного ниже кода CSS к вышеперечисленным программам добавляет отзывчивости к дизайну заголовков CSS. Когда размер экрана уменьшается, заголовок принимает новую форму с меню-гамбургером.

Отзывчивость

Вывод:

Как показано в выводе выше, заголовок реструктурирован в соответствии с адаптивным дизайном, добавленным в код CSS. JavaScript используется для открытия и закрытия гамбургер-меню, которое показано в коде ниже:

JavaScript

Результат:

Заключение

• В этой статье вы узнали, как создать адаптивный дизайн заголовка с помощью CSS.
• Отзывчивость в заголовке может быть включена с помощью различных приемов CSS, таких как метод flexbox, медиа-запросы и т. д.
• В приведенном выше примере мы использовали медиа-запросы и функции JS, чтобы добавить адаптивное поведение в заголовок.

Заголовок веб-сайта решен с помощью Flexbox

Это потрясающе! Логотип слева, навигация справа.
Ничего страшного, но этот совет поможет вам сэкономить время во многих проектах.

Определение наших потребностей

Я думаю, что есть два способа справиться с такой ситуацией, но только CSS изменит игру. Мой список потребностей:

• Логотип слева, навигация справа,
• Логотип и навигация должны располагаться вертикально по центру,
• Горизонтальное выравнивание должно быть общим для логотипа и навигации
• Когда ширины экрана становится недостаточно для обоих в одной строке, логотип и навигация должны быть в двух разных строках с центрированным содержимым.
• (необязательно) Когда оба находятся в одной строке, логотип застревает в самом левом углу, а навигация — в самом правом

Я поставил этот последний пункт как необязательный, потому что… это зависит от проекта, который вы делаете, но может возникнуть необходимость.

Давайте закодируем это

Наши основы HTML

 

<дел>



<навигация>
<ул>

Главная


О нас


Наши клиенты


Контакт

 /**
 * Изображения теперь реагируют
 */
картинка {
максимальная ширина: 100%;
высота: авто;
}
/**
 * Ограничьте контейнер в
 * ширина для больших экранов
 */
.контейнер {
ширина: 960 пикселей;
максимальная ширина: 100%;
отступ: 20 пикселей;
поле: 0 авто;
}
/**
 * Используя display: flex
 * Логотип и навигация в 2-х колонках
 * align-items делают их
 * по центру по вертикали
 * оправдать-распределение контента
 * горизонтальные пространства вокруг
 * и flex-wrap разрывают
 * вещи в две строки в
 * маленькие экраны
 */
. 
No related posts.