Хедер и футер что это

Хедер и футер что это

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

Вводную часть страницы, которую чаще называют «шапкой», описывает тег . Аналогично ему, заключительную часть страницы, или «подвал», описывает тег .

Обычно на странице появляется по одному тегу и , но их может быть и больше.

Давайте разметим шапку и подвал главной страницы. В качестве содержания пока используем текстовые «заглушки».

Тег — это не только шапка сайта с логотипом и меню, он может использоваться, например, и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.

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

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 26 мая по 29 июля 2020. Только 2 дня цена 20 400 21 800

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

Чтобы сделать хедер, создайте новую страницу и добавьте нужные элементы: меню или логотип. Перейдите Настройки сайта > Шапка и подвал и назначьте эту страницу как шапку (header).

Footer (футер, подвал) — блок в нижней части страницы. Содержит полезную, но не первостепенную информацию. Виден на всех страницах сайта. В футер можно вынести: копирайт, название студии, которая разрабатывала сайт, контакты. Иногда в футере дублируются пункты меню. Футер создается аналогично хедеру: создайте новую страницу, на ней оформите футер, перейдите Настройки сайта > Шапка и подвал и назначьте эту страницу как подвал (footer).

Читайте также:  Открыть закрытую вкладку chrome сочетание клавиш

16 ноября 2017 года. Опубликовано в разделах: Азбука терминов. 9733

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Что такое хедер (шапка) сайта на примере нашей жизни? Например, на голове у строителя мы видим каску, а повара – белый колпак. Голову невесты украшает фата, а мусульманку покрывает хеджаб. У короля на голове мы можем увидеть корону. Говорят, что головной убор влияет на поведение, и именно по нему мы можем часто безошибочно определить, что за человек стоит перед нами.

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

Что следует писать в шапке сайта

Как и для посетителей, также и для поисковика ваш сайт начинается с хедера. Поэтому в шапке располагаются:

  • логотип;
  • название компании (или сайта);
  • контакты;
  • прочие важные элементы: слоган, время работы, краткое описание деятельности и т.п.;
  • верхнее горизонтальное меню — именно оно должно завершать хедер.

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

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

Почему важно размещать контакты в хедере

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

Читайте также:  Ноутбук с двойным экраном

Шапка сайта и правила HTML

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

  • Название и контакты никогда не отображать в виде картинки. Только текст, который может воспринять поисковик.
  • Наличие заголовка H1, одинакового на всех страницах вашего сайта, будет мешать при продвижении ресурса.
  • Не используйте тяжелые изображения, флеш и много графики. Это затрудняет загрузку сайта и раздражает многих пользователей.
  • Не встраивайте горизонтальное меню во флеш, не отображайте меню в виде картинок. Используйте только текст. Иначе при необходимости внесения изменений в пункты меню вы можете столкнуться с определенными трудностями.
  • Создавайте HTML-шапки. Долой хедеры, состоящие полностью из картинки или флэш-анимации! Зачем усложнять себе работу? Если вы хотите выделиться — можно ненавязчиво использовать динамические элементы в дизайне, работающие на скриптах.
  • Шапка должна быть такой высоты, которая не помешает восприятию контента. Для информационных ресурсов логично делать невысокую шапку (100-200 пикселей). Для лэндингов и презентационных сайтов-визиток размер хедера может быть несколько выше.

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

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

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

Предположим, что нам нужен хедер для сайта прачечной. Подберите фото стиральной машинки (нужно сразу показать посетителю, на какой сайт он попал, и что ему могут здесь предложить). Как вариант, можно использовать фото привлекательной девушки, стирающей белье, а также элементы дизайна, вызывающие ощущение чистоты и свежести. Каждое фото должно быть уникальным, или хотя бы уникализированным при помощи графического редактора. Можно создать логотип, к примеру, схематичный стиральный барабан и волну внутри него. Рядом с логотипом указываем название.

Читайте также:  Как поменять год на компьютере

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

Ссылка на основную публикацию
Форге оф импаерс великие строения
Другое название: Кузница Империй Ниже мы приводим подробный гайд по игре Forge of Empires с советами как вам быстрее отстроить...
Троттлинг процессора что это
Простой компьютерный блог для души) Всем привет. Сегодня мы затронем тему процессоров, а если быть точнее, то такое явление как...
Троянские программы и хакерские утилиты
В данную категорию входят программы, осуществляющие различные несанкционированные пользователем действия: сбор информации и ее передачу злоумышленнику, ее разрушение или злонамеренную...
Форза хорайзен 3 список машин
Серия игр Forza всегда поражала количеством доступных автомобилей. На момент выхода игры доступно уже более 150 автомобилей, а разработчики обещают...
Adblock detector