Код шапки сайта html: Простейший способ создания адаптивной шапки

Как сделать шапку сайта? — UMI

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

Преимущества и содержание

Наличие уникальной шапки (header) дает немало плюсов:

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

Для специалиста вопрос того, как сделать шапку для сайта в короткие сроки, является простым. Новичку же придется изучить приличное количество материала на эту тему. Если вы собираетесь всерьез освоить веб-строительство, создавать контент и графику, вам необходимо разобраться с HTML, CSS, научиться пользоваться Photoshop и другимм программами. На сервисе 1С-UMI эта задача уже решена ― в ассортименте сотни шаблонов с уже готовыми привлекательными шапками, достаточно разместить свой лого, слоган и изображения, можно добавить индивидуальности при помощи стилей.

Верхний блок должен содержать:

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

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

Как сделать шапку сайта?

Существует три способа выполнить задачу.

1. С помощью специальных сервисов. Этот вариант самый элементарный, не требующий обучения работе с графическими редакторами. Надо отыскать в сети ресурсы, предоставляющие готовые шаблоны, и просто скачать понравившийся. Сервисы бывают платными и бесплатными.
2. Xheader. Если вы — креативный человек, то получить индивидуальный продукт очень даже просто. Здесь предлагается вполне приемлемый набор инструментов или каталог с графическими образцами. В последнем присутствует удобная навигация — все примеры распределены по категориям, выбрать соответствующий тематике проекта не составит труда. Еще Xheader предлагает редактор картинок, где можно менять размеры, применять слои для распределения элементов в нужном порядке. Проекты сохраняются в формате XHF для обеспечения возможности редактирования, окончательный вариант имеет расширение JPG. Xheader обладает достаточными функциями для новичка, но веб-мастеру, решившему заняться разработкой на профессиональном уровне, следует все-таки обратиться к Photoshop.
3. Adobe Photoshop. Эта программа предоставляет большие возможности для работы с графическим контентом. Здесь вы можете создавать полностью уникальные блоки, менять параметры, подбирать тон, обыгрывать контрасты, использовать нулевой градиент (он придаст необычные переливы). В ваших руках расположение элементов, внедрение в графику логотипа, слогана, применение различных шрифтов (только не переусердствуйте, лаконичность в таком случае важна). В общем, это наилучший инструмент в настоящее время для воплощения самых смелых и креативных идей. Как сделать шапку сайта в Фотошопе? Если вы мало работали с такой программой, посмотрите видеоуроки и поищите онлайн-пособия. Необходимо лишь понять, что делают разные инструменты, и приступить к выполнению задачи.

Как разместить блок?

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

Пример, как сделать шапку сайта CSS:

• В описании #header удалите имеющиеся значения и обозначьте ширину и высоту вашего изображения.

  
  #header{
width: ширина px;
height: фон px;
background-color: #25B33f; — фон
margin-bottom: отступ снизу px;
}

• Вставьте картинку.

  
  #header{
width: ширина px;
height: высота px;
background-color: #25B33f;
margin-bottom: отступ снизу px;
background-image: url(images/имя файла)
}

• Background-color используется, если изображение не отобразится в каком-либо браузере. Фиксация фотографии (во избежание ее смещения) осуществляется путем прописывания position: fixed.

Как сделать шапку сайта HTML:

• В тег body вставьте div, идентифицировав его с двумя заголовками h2 и h4, которые являются названием и описанием соответственно.

  
  <div>
<h2>название</h2>
<h4>описание</h4>
</div>

• Придайте вид заголовку и тексту — создайте для них два описания и укажите такие свойства:

  
  h2{
color:#цвет заголовка;
font: размер px шрифт;
margin-left: отступ слева px;
}
h4{
width: ширина px;
color: #цвет;
font-style: стиль шрифта;
margin: расположение px;
}

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

Размещение на WordPress

Поскольку большинство блогов базируются на платформе WordPress, многие веб-мастера интересуются, каким образом установить блок на этой CMS. Движок уже оснащен готовыми темами и блоками. Но есть возможность видоизменить их, добавить логотип, изображение. Как это осуществить?

1. Откройте в консоли вкладку «Записи — Сделать новую».
2. Переведите редактор в формат HTML, загрузите картинку, которую хотите добавить.
3. После загрузки в редакторе появится код изображения. Скопируйте его, «Запись» удалите.
4. Переместитесь во вкладку «Внешний вид — Редактор», откройте файл header.php для редактирования.
5. В header.php найдите <div> и под этой строкой вставьте ранее скопированный код фотографии.
6. Обновите файл и посмотрите, как теперь выглядит ваша шапка вместе со вставленным изображением.
7. Если вам требуется передвинуть картинку, вернитесь в файловый редактор, добавьте в тег img в коде графического элемента запись style со значением margin. Пример:;
8. Подвиньте фото туда, куда вам надо.

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

Работа на конструкторе

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

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

Как сделать и оформить в css шапку сайта

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

Шапка сайта – какой она бывает

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

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.

header{
width: 100%;
background: #D8E3AB;
height: 70px;
}

Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.

Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.

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

<div id = «wrap»>
<header></header>
</div>

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

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Для этого достаточно дописать некоторые правила к фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

<div class = «title»>Название сайта</div>
<ul class = «menu»>
<li><a href = «#»>Контакты</a></li>
<li><a href = «#»>О нас</a></li>
<li><a href = «#»>Услуги</a></li>
</ul>

Теперь все это оформим.

.title{
font-size: 36px;
padding-top: 10px;
text-align: center;
}
.menu{
list-style: none;
position: absolute;
top: 10px;
right: 100px;
}

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

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

Сместим меню в правый край с помощью абсолютного позиционирования. Чтобы это заработало, нужно также дописать для header такое правило: position: relative;

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

Как зафиксировать блок, чтобы он не исчезал при прокрутке?

Если вы хотите фиксировать шапку в css (такое ее поведение можно увидеть на многих веб-ресурсах), то вам может помочь фиксированное позиционирование. Нужно добавить такие стили:

А также координаты (top, left, right, bottom) какие вам нужны. Обычно фиксацию делают с помощью jQuery, прописывая соответствующий сценарий и привязывая его к событию – вертикальному скроллу страницы.

Если вы хотите научиться верстать сайты, в том числе и шапки, но рассмотренный материал вам непонятен, то нужно начинать с самых азов – изучения основ HTML и CSS. В этом вам может помочь наш премимум-раздел, там есть два соответствующих видеокурса по этим технологиям, в которых все разъясняется по полочкам.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Адаптивная шапка сайта (float vs flex)

Вы здесь:
Главная — CSS — CSS3 — Адаптивная шапка сайта (float vs flex)

Я большой сторонник минимализма при планировании HTML структуры сайта. Любой сайт начинается с шапки и если у вас небольшое меню, то желательно логотип и навигацию, разместить в один ряд. Само собой, наша шапка должна быть адаптивной.
Кроме того, сделаем нашу верстку двумя разными способами, используя технологию – float и flex. В конце статьи, сделаем вывод, как быстрее и проще сверстать адаптивную шапку.

Демонстрация шапки на float

Первый способ (float)

HTML разметка

Внутри хедера справа будет логотип, а слева навигационный блок с тремя ссылками меню. Разметка – проще некуда.


<header>

  <a href="#logo">Логотип сайта</a>

  <nav>

    <a href="#home">Главная</a>

    <a href="#contact">Контакты</a>

    <a href="#about">О нас</a>

  </nav>

</header>


CSS код

В потоке документа, ссылки, заняли бы место под логотипом, но мы меняем естественный ход событий и для логотипа прописываем float: left, а для блока nav – float: right. Как бы разводим их по разные стороны хедера.

See the Pen Адаптивная шапка сайта (float) by porsake (@porsake) on CodePen.

Делаем шапку адаптивной

На ширине экрана 500 пикселей и выше, мы отменяем обтекание float, там где оно было. После отмены, ссылки меню повели себя так, как и должны – встали в столбик. Мы получили адаптивную шапку первым способом (float).


@media screen and (max-width: 500px) {

  header a {

    float: none;

    display: block;

     text-align: left;

  }

  nav {

     float: none;

  }

}


Демонстрация шапки на flex

Второй способ (flex)

HTML разметка

Здесь нам пришлось логотип обернуть в блок с классом wrap-logo, иначе не получиться развести логотип и меню по разные стороны, меню будет прилипать к логотипу.


<header>

  <div>

  <a href="#logo">Логотип сайта</a>

  </div>

  <nav>

    <a href="#home">Главная</a>

    <a href="#contact">Контакты</a>

    <a href="#about">О нас</a>

  </nav>

</header>


CSS код

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


display: flex; /* Включаем режим Flexbox. */

flex-direction: row; /* Держим элементы в строке */

justify-content: space-between; /* Распределяем элементы внутри шапки */

flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */


See the Pen Адаптивная шапка сайта (flex) by porsake (@porsake) on CodePen.

Что у нас с адаптивностью? При уменьшении экрана, блок с ссылками меню, сам переносится на новую строку и встает под логотипом. Отвечает за это свойство flex-wrap: wrap. Иными словами мы получили адаптивную шапку без медиа-запросов.

Вывод

Плюсы флексов:

На экранах смартфонов, шапка на flex-ах почти в 2 раза занимает меньше места по высоте, это огромный плюс. Мы не тратили время на медиа-запросы.

Минусы флексов:

Нам пришлось создать лишний блок, написать больше кода в стилях.

Плюсы флоатов:

Простой и понятный код.

Минусы флоатов:

Необходимость в медиа-запросах и отмены флоатов (clearfix).

Плюсов и минусов примерно одинаково. Но если вы хорошо освоите флексы, то минусов не останется. Так, что я выбираю флексы.

• 
  Создано 07.12.2018 10:30:00

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk. com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. 
   Кнопка:
   
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

Урок 10. Верстаем шаблон

Представим, что у нас есть вот такой html шаблон. Он который сверстан табличным методом:

 Этот HTML шаблон имеет следующий код:

<html>

   <head>
        <title>CSS позиционирование</title>
   </head>

   <body>

     <table  border=»1″
          align=»center» cellspacing=»0″ cellpadding=»10″>

        <tr bgcolor=»darkred»>
            <td colspan=»2″>шапка сайта</td>
        </tr>

        <tr bgcolor=»oldlace»>
            <td >меню</td>
            <td>контент</td>
        </tr>

        <tr bgcolor=»darkred»>
            <td colspan=»2″>низ сайта</td>
        </tr>

    </table>

   </body>

</html>   

 Давайте сверстаем этот HTML шаблон с помощью CSS.

Визуально можно разделить страницу на четыре блока: шапка сайта, меню, контент и низ сайта. Пишем html-код страницы с четырьмя div-ами и каждому назначаем id:

<html>

   <head>
     <title>CSS позиционирование</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>контент</div>
     <div>низ сайта</div>
   </body>

 </html>    

Заходим в таблицу стилей (style.css) и задаем свойства которые уже знаем (ширина, высота и фон каждого блока):

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
}    

Смотрим на наш новый HTML шаблон:

Все элементы отображаются сверху вниз друг за другом, — это называется позиционированием в нормальном потоке. Для верстки нашего HTML шаблона нам это позиционированные не совсем подходит, давайте воспользуемся другими видами позиционирования, в CSS есть еще три вида позиционирования:

абсолютное
относительное
плавающая блоковая модель

Для определения позиционирования используется свойство position, имеет четыре значения:

static — блок позиционируется в нормальном потоке. Значение по умолчанию
relative — относительное позиционирование (относительно нормального потока)
absolute — абсолютное позиционирование
fixed — фиксированное позиционирование (фиксируется относительно области просмотра)

В этом уроке мы будем рассматривать абсолютное позиционирование:

При абсолютном позиционирование расположение блока на странице не зависит html-кода (в каком месте html-кода расположен этот блок). Расположение задается указанием, в каком месте экрана отобразить данный блок. В этом нам помогают четыре свойства:

left — указывает на сколько надо сместить блок относительно левого края окна
right — указывает на сколько надо сместить блок относительно правого края окна
top — указывает на сколько надо сместить блок относительно верхнего края окна
bottom — указывает на сколько надо сместить блок относительно нижнего края окна

Вернемся к нашему HTML шаблону. Блоки header, menu и footer расположены там где и должны быть, поэтому пусть позиционируются в нормальном потоке. Блок content нужно расположить в другом месте, поэтому указываем свойство position: absolute и задаем смещение: от левого края окна на ширину блока menu, а от верхнего края окна на высоту блока header.

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
  position:absolute;
  left:190px;
  top:100px;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
}    

Блок встал не совсем так, как задумывалось. Произошло это так как: у браузеров есть свои, встроенные таблицы стилей. Если мы не задаем свойство, то браузер использует свойство по умолчанию.

По умолчанию для элемента body определены поля, которые мы не учли. Чтобы выровнять блок в нашем HTML шаблоне, достаточно задать для body собственные значения margin:0px:

body{
  margin:0px;
}

Проверяем:

Главное, что необходимо запомнить: при абсолютном позиционировании смещения происходит относительно «родительского» элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может бывает и по-другому.

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

В html-страницу в div мы добавим div:

<html>

   <head>
     <title>css potision</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>
       контент
       <div>блок новостей</div>
     </div>
     <div>низ сайта</div>
   </body>

 </html>    

В таблице стилей смещение будем указывать относительно блока content:

#news{
  background:yellow;
  width:150px;
  height:280px;
  position:absolute;
  left:365px;
  top:10px;
}   

Ширина блока content 525px, а ширина news — 150px. Следовательно, смещение от левого края равно (525-150) 375px, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365px. Аналогично рассчитываем смещение от верхнего края.

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

Меняем параметры шапки сайта на WordPress через админку

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

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

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

Вот как это выглядит на примере стандартной темы TwentyTwelve (Внешний вид > Заголовок):

Шаг 1.

Функция add_theme_support() — подключаем необходимый функционал в теме WordPress

Начиная с версии WordPress 3.4 мы можем использовать функцию add_theme_support() в файле functions.php для задействования данной возможности движка.

add_theme_support( 'custom-header' );

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

function true_custom_header_support(){
	add_theme_support( 'custom-header' );
}
 
add_action('after_setup_theme', 'true_custom_header_support');

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

Вот эти параметры:

$defaults = array(
	'default-image'          => '', // фон шапки по умолчанию
	'random-default'         => false, // нужно ли выводить изображения в случайном порядке
	'width'                  => 0, // ширина шапки
	'height'                 => 0, // высота шапки
	'flex-height'            => false, // резиновая высота true / false
	'flex-width'             => false, // резиновая ширина true / false
	'default-text-color'     => '', // цвет текста по умолчанию
	'header-text'            => true, // можно ли выводить текст в шапке
	'uploads'                => true, // возможность пользователю загружать свои изображения
	'wp-head-callback'       => '',
	'admin-head-callback'    => '',
	'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

Шаг 2.

Выводим шапку и ее параметры

Используйте функцию header_image() для вывода URL изображения шапки, а функцию get_custom_header() — для получения параметров шапки, например:

<img src="<?php header_image(); ?>" alt="" />

Также есть функция get_header_textcolor(), которая возвращает установленный цвет.

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Тег header. Классы, селекторы и свойства в CSS

Листинги кода урока

Листинг кода — это просто код, который можно скопировать и перенести в Ваш редактор. Ниже будут представлены листинги кода файлов index.html и style.css.

Новые участки кода находятся между <!— New —><!— End —>. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом Вы увидите какой результат будет по итогу урока.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Store</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>	

	
        <!-- New -->
	<header>
	</header>
        <!-- End -->

	
</body>
</html>

style.css:

html, body{
	margin: 0;
}
.header{
	background: #cb2d41;
	height: 100px;
}

Начало урока. Разбор файла index.html

В index.html по сравнению с предыдущим уроком изменилось немного. Я только добавил после <body> следующий код:

<header>
</header>

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

На вашем сайте в <header></header> будет вся красная верхушка, как на imdiz.ru/store/:

Цвет фона для header я задал свойством background в style.css. Если Вы еще не открыли файл style.css в SublimeText, то откройте.

Сейчас у Вас в SublimeText открыто 2 файла: index.html и style.css. Для удобства сделайте следующее: вверху SublimeText нажмите View, в выпавшем окне наведите на Layout, и выберите там Columns: 2. Ваш редактор разделится на 2 колонки и файлы можно разместить в разных колонках. Так вы будете видеть сразу оба файла. Смотрите видео:

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

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

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

.header{
	background: #cb2d41;
	height: 100px;
}

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

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

Этот код задает стили для <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 будет убрана.

Переопределение стилей браузера. Инструменты разработчика в браузере

Теперь в Вашем style.css вернитесь к участку кода:

html, body{
	margin: 0;
}

Селекторы можно прописывать через запятую. В данном случае CSS-стили в фигурных скобках будут применены и для тега html, и для тега body.

Этот код равнозначен следующему:

html{
	margin: 0;
}

body{
	margin: 0;
}

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

А теперь о том, для чего нужен этот участок кода. Если Вы удалите этот участок кода и сохраните style.css, то увидите в браузере, что шапка не на всю ширину браузера (слева, справа, а также сверху, будут белые полоски). Это потому, что в каждом браузере уже прописаны некоторые стили для всех HTML-тегов. Это стили браузера по умолчанию. В нашем случае белые полосы будут из-за того, что для тега <body></body> в браузере указаны отступы (в CSS для этого используется свойство margin).  Чтобы это увидеть вызовите в браузере средства разработчика. Для этого, если у вас Google Chrome или Yandex Browser, просто нажмите на клавиатуре F12.

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

В средствах разработчика видна структура HTML, а справа CSS-стили выделенного HTML-тега. Если Вы нажмете на <body>, то справа в CSS увидите, что помимо наших стилей у body есть еще другие стили, и в них margin: 8px;.  Задав в style.css margin: 0; я переопределил стиль margin для тегов html и body.

Комментарии в HTML

Помните в начале урока написано, что новые участки кода находятся между <!— New —><!— End —>. Сами <!— New —> и <!— End —> никак не отобразятся в браузере. С помощью <!—  —> осуществляется комментирование в HTML. Всё, что Вы поместите внутрь данной конструкции не отобразится в браузере, оно будет закомментировано. С помощью комментариев можно помещать какие-то подсказки для себя. Также, комментировать можно некоторые участки кода, чтобы временно их скрыть, при этом не придется их удалять.

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

В следующем уроке будет много CSS-свойств и еще больше новой, полезной и очень интересной информации. Переходите в следующий урок — Flex, логотип сайта. Form и input в HTML. Класс container. Иконочный шрифт.

Конец урока. В данном уроке вы узнали:

background — CSS-свойство для задания фона HTML-элемента

height — свойство для задания высоты

margin — внешние отступы

<header></header> — тег для «шапки» сайта.

Блок не отображается на сайте, если он пустой или ему не задана высота.

Стандартные стили браузера нужно переопределять.

В Google Chrome и Yandex Browser есть инструменты разработчика, которые  вызываются клавишей F12.

Стили в CSS задаются через селекторы. В качестве селектора нужно стараться выбирать класс HTML-элемента.

Анимированные шапки для сайта — делаем крутые шапки на сайте

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

Четыре примера вы можете посмотреть по следующей ссылке:

Посмотреть примерСкачать

Как пользоваться? — Анимированные шапки для сайта

HTML часть

В коде страницы всё что нужно вставить, это:

1
2
3

<div>
    <canvas></canvas>
</div>

В блоке <div> с идентификатором и классом large-header находится тег <canvas>, в которм и происходит вся анимация. А блок <div> лишь содержит фоновое изображение.

Javascript часть

Затем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js (в архиве с исходниками — ссылка в начале статьи).

Например, для примера №1 нужно подключить следующие библиотеки:

1
2
3
4

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack. min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>

Для 2-го примера:

1
2

<script src="js/rAF.js"></script>
<script src="js/demo-2.js"></script>

Для 3-го:

1
2
3
4

<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-3.js"></script>

И, наконец, для 4-го:

1
2

<script src="js/rAF.js"></script>
<script src="js/demo-4.js"></script>

Ниже я сделал скриншоты каждого из эффектов:

Вывод

Все шапки имеют ширину окна браузера пользователя. Эти примеры используют Canvas и Javascript. Также в первом демо вы могли заметить что при перемещении указателя мыши перемещается эффект на заднем плане, что придает еще большую интерактивность.

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

Успехов!

Источник: http://tympanus.net/codrops/2014/09/23/animated-background-headers/

С Уважением, Юрий Немец

Как создать отзывчивый заголовок

Узнайте, как создать адаптивный заголовок с помощью CSS.

Адаптивный заголовок

Измените дизайн заголовка в зависимости от размера экрана. Измените размер окна браузера, чтобы увидеть эффект.

Попробуйте сами »

Создать адаптивный заголовок

Шаг 1) Добавьте HTML:

Пример

Шаг 2) Добавьте CSS:

Пример

/ * Стиль заголовка с серым фоном и небольшим отступом * /
. заголовок {
переполнение: скрыто;
цвет фона: # f1f1f1;
отступ: 20 пикселей
10px;
}

/ * Стиль ссылок заголовков * /
.header a {
float:
оставил;
цвет: черный;
выравнивание текста: по центру;
набивка:
12px;
текст-оформление: нет;
размер шрифта: 18 пикселей;
высота строки: 25 пикселей;
border-radius: 4px;
}

/ * Стиль логотипа
ссылка (обратите внимание, что мы установили одинаковое значение line-height и font-size равным
предотвратить увеличение заголовка при увеличении шрифта * /
.заголовок a.logo
{
font-size: 25 пикселей;
font-weight: жирный;
}

/ *
Измените цвет фона при наведении указателя мыши * /
.header a: hover {
цвет фона: #ddd;
цвет: черный;
}

/ * Стиль
активная / текущая ссылка * /
. заголовок a.активный {
цвет фона: голубой;
цвет: белый;
}

/ * Плавающий
раздел ссылок справа * /
. header-right {
float: right;
}

/ * Добавьте медиа-запросы для оперативности — когда
экран имеет ширину 500 пикселей или меньше, размещайте ссылки друг на друга * /
экран @media и (максимальная ширина: 500 пикселей) {
.заголовок a {
float: none; Дисплей
:
блокировать;
выравнивание текста: по левому краю;
}
.header-right {
float: none;
}
}

Попробуй сам »

Совет: Перейдите к нашему руководству CSS Navbar Tutorial, чтобы узнать больше о панелях навигации.

Тег заголовка HTML

Пример

Заголовок для

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Элемент