Шапка для сайта. Как ее сделать и установить

Значениешапки для продвижения сайта

Поскольку шапка – это один из основных элементов оформления веб-сайта, её оформление имеет огромное значение для продвижения в сети. К тому же, нельзя забывать о том, что удобство пользования сайтом так же зависит от качественной шапки. Безусловно, она также важна и для юзабилити, так как предоставляет посетителям ключевую информацию о ресурсе. Основные элементы шапки должны давать ответы на следующие вопросы пользователей:

  1. Что представляет собой компания;
  2. Что она предлагает, как с ней связаться;
  3. Какие есть акции, гарантии и др.;

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

Шапка сайта без нагромождений – только элементы, п
Шапка сайта без нагромождений – только элементы, помогающие пользователю совершить конверсию

Видео

Назначение хедера: как сделать правильно

Шапка – это стратегический важный объект, который пользователи оценивают перед тем, как начать скроллить и изучать страницу. Если хедер не впечатлит и оттолкнет от себя дизайном, избытком информации или, напротив, отсутствием нужных данных, человек с большей вероятностью закроет сайт через несколько секунд, не продвинувшись дальше. Особенно это касается коммерческих ресурсов, где важно «поймать» и удержать потенциального клиента. Бывают сайты и без шапок, но о них мы упомянем позже. Сейчас рассмотрим Header как важный и нужный элемент веб-страницы.

Как установить шапку сайта на Вордпрессе

Есть много способов установить шапку для сайта. Но мы выбрали простой вариант, без кода. Заходите в админ панель на Вордпресс. Далее нажимаете раздел «Внешний вид» и «Заголовок».

После этого нажимаем кнопку «Изображение заголовка».

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

Когда загрузите картинку, нажимаете «Опубликовать» и шапка на сайт будет установлена. Это только пример создания данной шапки, вы сможете применить в Интернете другие варианты.

Разбор файла style.css

Разберем файл style.css и заодно познакомимся с CSS.

Сперва пропустим верхнюю часть кода и перейдем к участку:

Говоря по-русски, благодаря этому коду браузер будет искать в index.html тег с классом header и задаст этому тегу цвет фона #cb2d41 и высоту 100px.

А теперь по-подробнее.

Этот код задает стили для <header class=’header’>, который находится в index.html. Здесь задан цвет фона (background) и высота (height). 

Посмотрите на картинку ниже, на ней изображена структура стилей в CSS:

То есть структура следующая. Сперва пишется селект

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

#cb2d41 — такой формат задания цвета называется HEX. Это наиболее частый формат в верстке сайтов. Цвет можно задать просто английским словом, например, background: red. Но чаще (а точнее, практически всегда) применяется именно формат HEX.

В index.html я задал тегу header класс «header». И в style.css задал стили для этого класса — .header. В CSS точка перед названием селектора означает, что это селектора класса. Есть и другие селекторы, с ними Вы сможете познакомиться в следующих уроках.

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

Кстати, название класса может быть абсолютно любым, хоть abcdef, но все-таки удобнее называть классы по смыслу элемента. У нас таким элементом является тег <header>, и здесь можно не выдумывать велосипед и назвать класс тоже header.

В нашем коде для .header помимо background задана еще и высота height: 100px;. Сейчас эту высоту я задал только для наглядности, чтобы Вы могли увидеть <header></header> в браузере. Дело в том, что, если блок сайта пустой и внутри него нет никакого контента (текста, изображения, видео), то высота этого блока равна 0, и Вы этот блок не увидите в браузере. В следующих уроках высота у .header будет убрана.

И еще один вариант

Расскажу про еще один способ. Суть его состоит в т

Расскажу про еще один способ. Суть его состоит в том, чтобы вставить адрес, по которому находится подготовленная шапка, в блок  <div id=»header»> непосредственно перед первым заголовком, обозначенным тегом <h1>.

Обратите внимание! Вот как может выглядеть адрес картинки: <img src=»http://sitetree.com/img/0g/g1/dkr490trfdkl69746rekfklre..png»>. 

При таком «развитии событий» нужно в #header удалить строку background-image: и указать position: relative. А разделах h1 и h3 указать position: absolute;. Однако нужно будет поменять отступы заголовков. Что поможет в позиционировании.

#header{

width: 700px;

height: 500px;

background-color: #2980b9;

margin-bottom: 10px;

position:relative;

}

h1{

position: absolute;

color: #2980b9;

font: 50px Times New Roman;

left: 400px;

}

h3{

position: absolute;

width: 500px;

color: #2980b9;

font-style: italic;

top: 60px;

left:20px;

}

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

Теги