Как сделать шапку сайта в html и css

31.07.202231.07.2022 admin 0 Comments

Как сделать шапку сайта в html и css

Шапка страницы

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

Рис. 6.3. Ширина шапки

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

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

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 6.14.

Шапка сайта и навигационное меню с помощью CSS

September 07, 2013

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

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

В основу создания шапки я положил свойство вложенных слоев на ‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).

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

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

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

При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (как мною задумано для простоты эксперимента). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка:

Теперь достаточно сместить список вправо с помощью и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:

Ниже приведу полный код html-каркаса и CSS-кода.

Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта:

Грамотное адаптивное выравнивание шапки сайта

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Высота шапки фиксированная, добавляем text-align: justify, для дочерних элементов:

Добавляем display: inline-block для всех элементов nav, чтобы можно было расположить их друг за другом:

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute. Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока — шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown, упомянутый Michał Czernow:

В результате получается то, что нужно:

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

Используем трюк с псевдоэлементом на header:

Выглядит намного лучше:

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

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

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Как сделать шапку сайта: простой способ

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

Как сделать шапку сайта: вводная информация

Начнем с общей информации о данном графическом и визуальном элементе. Он обладает несколькими неоспоримыми преимуществами:

Кстати! У сайта еще нет собственного логотипа? Его также можно сделать самостоятельно всего за 5 минут. В этом вам поможет наш проект.

Что должен/может включать в себя верхний блок любой площадки:

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

Как сделать шапку сайта: два способа достижения цели

Я пока не буду углубляться в вопросы «как сделать шапку сайта html» или «как сделать шапку сайта css». Сначала о том, как подготовить для нее «рисунок».

1. Сделать шапку для сайта онлайн

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

Сделать шапку для сайта онлайн очень просто. Только достичь оригинальности удается не всегда. Ведь работа предполагает использование шаблонов.

2. Adobe Photoshop

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

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

Промежуточный итог

Сделать графический элемент – половина дела. Необходимо еще правильно разместить его на страницах сайта. Сначала нужно поместить готовую картинку в папку IMAGES. Она находится в каталоге административной панели. После чего можно приступать к размещению изображения на страницах.

Как сделать шапку сайта CSS: помещаем изображение на сайт

Рассказываю, как сделать шапку сайта CSS. Переходим в #header и там вместо установленных параметров высоты прописываются габариты созданной картинки – высота и ширина изображения.

width: 1420px; — ширина

height: 300px; — высота

background-color: #25B33f; — фон

margin-bottom: 30px; — отступ снизу

Обратите внимание! Здесь и далее слова «Ширина», «Высота», «Фон» и прочие к коду не имеют отношения. Они лишь указывают, что значит та или иная строка.

После этого остается вставить только саму шапку:

background-image: url(images/i8.png) — картинка

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

Начинаю рассказывать, как сделать описание сайта и заголовок. Для этого нужно использовать тег body блок div с идентификатором и в нём два заголовка h1 и h3. В них и будет указано название проекта и его подробное описание.

Мой сайт

Теперь я знаю, как сделать шапку сайта

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

color: #2980b9; — цвет заголовка

font: 50px Times New Roman; — шрифт

margin-left: 500px; — отступ слева

width: 400px; — ширина

color: #9b59b6; — цвет

font-style: italic; — курсив

margin: 90px 0 0 40px; — расположение

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

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

Обратите внимание! Вот как может выглядеть адрес картинки: .

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

font: 50px Times New Roman;

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

Шапка сайта для WordPress

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

Для этого необходимо пройти по следующему пути:

Обратите внимание! Нужно немного изменить положение шапки на странице? Для этого возвратитесь в редактор, перейдите в код и в тег img, внесите атрибут style со свойством margin. Вот как это будет выглядеть: style=»margin:0 0 0 0;»

Как сделать шапку сайта: личный совет

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

Если вас интересуют прочие секреты, как работать с платформой WordPress, читайте мой блог. В нем много полезного по этой теме.

Верстка шапки — header, классы, селекторы и свойства в CSS

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

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

index.html:

style.css:

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

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

На вашем сайте в будет вся красная верхушка, как на 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.

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

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

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

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

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

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

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

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

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

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

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

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

Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя HTML и CSS

Блок для шапки сайта, обычно это «header» записывается так:

Фоновое изображение для шапки сайта делаем по размерам блока, т.е. 900px X 200px. Его лучше всего сделать в фотошопе.

Если, кто не владеет фотошопом, я предлагаю самый простой способ изготовления картинки для шапки сайта, в имеющимся на всех Windows по умолчанию Paint.

Готовое изображение прописываем в блок «header».

Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.

Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position

Следующий шаг — добавляем заголовка и описания сайта.

Для этого в HTML блока прописываем код заголовка и абзаца. Абзацу зададим класс, так как описание будет только в шапке.

Посмотрим, что у нас получается.

Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:
CSS

Теперь добавим логотип.

В качестве логотипа я возьму изображение вот такого чёртика

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

Чтоб разместить логотип проводим три изменения в коде:

а) в HTML блока добавим код картинки;

б) в CSS в блок header пропишем относительное позиционирование, так как логотип будет размещаться в этом блоке;

в) в CSS добавляем селектор логотипа, и позиционируем его абсолютно, относительно блока header.

Получилась вот такая шапка сайта.

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

По моему не плохо, надеюсь у вас получится лучше.

Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.

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

Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить.

В этом файле, находим строку

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

И двигаем изображение туда, куда нам нужно.

P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Редактируем тему оформления

Желаю творческих успехов.

Перемена

Пьяный никак не может затолкнуть двушку в прорезь автомата. — Напился, — а еще таксист, — сказала прохожая. — С чего взяла? — Шапка таксистская. — Да, — задумчиво произнес пьяный, — а была ондатровая.

65 комментариев на «Как сделать шапку сайта»

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

Спасибо мне 62 это мое хобби отвлекаюсь учебой от дурных мыслей никогда не думал что погрязну в изучении Сайто строения короче большое спасибо сейчас изучаю php не плохо если вы достигли более знаний с этим ресурсом выкинули шаблон сайта с базой данных и добавления статей непосредственно с кабинета мои маленькие наработки за пару лет https://my1001.wordpress.com/ и еще какой хостинг предлагает бесплатный ресурс

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

Спасибо. Полезная информация. А как сделать чтобы картинки были разные на других страницах. У меня сейчас картинка на всех страницах одинаковая.

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

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

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

Здраствуйте, я работаю в банке (на кредитном отделе). Вот хотел созать сайт чтоб от туда вышли кредитный договор и заключения. Можете помоч?

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

Сайт на WordPress, тема оформления TwentyTen — это что касается кода. Меню я конечно ковырял, но только по фону, шрифту, высоте и отступам. Ширина ячеек по умолчанию от размера текста. Я там ничего не менял.

Обрезать картинку до нужного размера.

Спасибо большое!
А я вот взял картинку, но, слишком большую, и она у меня не поместилась.
Правда, может я не внимательно читал.
Что делать?

А что именно уточнить? Вообще-то слайдер — это уже блочный элемент. Вопрос в какое место его спозиционировать. Или просто вставить в текст, или в шапку, сайдбар и т.д.? Слайдер самописный или плагин? И как у вас с html и css?

Доброго времени суток. Хотелось бы уточнить о возможности вставки в один из блоков страницы слайдшоу. С уважением, Сергей.

Спасибо автор ты мне очень сильно помог

У меня такое бывает когда ошибка в шапке подвале или виджете, т.е. в тех элементах которые подгружаются на каждую страницу.

Возможно я чего-то не знаю и не понимаю, но мне не понятен смысл двух хедеров и нескольких h2. На странице должен быть один хедер, один h1 — заголовок сайта, и один h2 — заголовок страницы. Всё остальное можно сделать другими тегами с тем же визуальным результатом. Может это для сниппета? Я в этом направлении ещё не копал.

А два хедера? Что принимать за начало, начало страницы, или начало статьи? Во втором хеадере микроразметка microformats.org. Может и в этом есть сакральный смысл? Откуда циклическая переадресация?

С таким шаблоном наверное можно работать только в визуальном редакторе и настройках, не залезая в код, тогда всё тайные замыслы создателя возможно сработают как надо.

ты посмотрел, когда я все исправил. А ошибки появляются тогда когда вносишь изменения, даже изменишь расстояния межде словами или слово добавишь или вставишь. Сразу во всех страницах возникают ОДНИ и ТЕ ЖЕ ошибки

У тебя одна ошибка и одно предупреждение, можно не париться.

Почему же не решить? Сходу не решить — эт точно.

Staric привет!
А не подскажешь почему возвращаются ошибки кода, которые исправляю с помощью валидатора, если вношу какие-нибудь изменения в страницу.

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

Действительно Рибосома. Только основательно переделанная. В оригинальном шаблоне название определяется по линкам стилей в head, а в твоём нет. Вообще, как переделаны стили, для меня полная непонятка, к тому же они сжаты, а это не читаемо. Вообще нет подключённых файлов стилей, только встроенные. Непонятно. В оригинальной Рибесоме всё как у людей, более-менее понятно и видно. Можешь сам посмотреть. Почувствовать, так сказать, разницу.

шаблон Ribosome на WordPress

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

Короче, помочь тебе сможет только создатель сего шедевра.

Привет Staric!
С шапкой вроде нет вопросов. Думал, что когда расположу на одной линии, то это предупреждение уйдет, но наверное полученный результат как-то с ним надо связать или не в этом дело.
А не подскажешь как решить такую проблемку если pageSpeed пишет

Оптимизируйте загрузку видимого контента
Для отображения верхней части страницы необходимы дополнительные сетевые запросы. Сократите объем HTML-кода в верхней части страницы, чтобы она быстрее открывалась в браузере.
Для показа верхней части страницы понадобилось 52 КБ данных с сервера, содержащих код HTML. Количество циклов передачи данных от пользователя на сервер и обратно: 3. Размещайте в верхней части страницы только важное содержание – оно отобразится после первых 2 циклов обмена информацией с сервером.
В верхней части страницы не удалось отобразить ни один элемент содержания на основе данных HTML, полученных с сервера (количество циклов передачи данных: 2).

Сделаем Витя, только недели через три, не раньше. Я ведь по профессии отделочник, а сайты и веб — просто хобби. Интересно.

Сейчас работа по плитке срочная, так что я кое как на комменты только успеваю отвечать. На большее не времени ни сил. И потом, в твоём шаблоне чёрт ногу сломит, и где только такой нарыл.

Между делом, нули то из top (отступ сверху), и left (отступ слева), меняй на другие значения, тогда и двигаться будет.

float — это обтекание элемента слева. psition и float вместе не работают. Или то, или другое.

Спасибо Staric!
Ты меня все таки натолкнул на мысль своими вариантами. И мне удалось сдвинуть h1 и h2 через float и position absolute

Ага. Вот так понятнее. Судя по всему тебе надо начать с начала, а не тыркаться с середины во все стороны. Вот смотри: есть веб-инспектор, в котором видно весь html сайта, все эламенты, и стили, которые этим элементам заданы.

Картинка находится в блоке blog-info-sin-imagen. Задавая стили для него ты можешь сделать его уже, шире, сместить вправо-влево (свойство margin) Картинка — самостоятельный элемент в блоке blog-info-sin-imagen, и ей задано позиционирование position: absolute;, что означает что она будет расположена в левом верхнем углу блока blog-info-sin-imagen, которому задано свойство position: relative;

Причём (и это вызывает удивление), position для блока задан как положено в style.css, а position картинки задан атрибутом style, который находится в теге img картинки.

Элементы которым задано position двигаются свойствами left: **; top: **; Обязательно прочитай статьи по ссылкам.

.main-logotip <
position: absolute;
top: 0px;
left: 0px;
>

Если не найдёшь код логотипа (возможно) и только в этом случае, то можно сделать следующее: Взять его код из веб-инспектора, или (я уже скопировал) из начала коммента и вставить в файл темы header.php, сразу после

Должны будут появится 2 логотипа. Первый надо будет убрать. Попробуй убирать из header.php

Посмотришь что это даст. Скорее всего первая часть уберёт первый логотип. Ну а тогда меняй значения в top и left и двигай второй.

Если и так не понятно, то от души — начни с основ html и css, чтобы нам понимать друг друга, попрактикуйся в шаблоне и вебинспекторе, и всё будет ОК.

В коде картинки-логотипа задан атрибут style=»position: absolute», без каких либо отступов. Он так и будет в верхнем левом углу торчать. Странно конечно, обычно это в стилях делается. А что вы только не делали, интересно? Вообще-то картинке нужно задать класс и в style.css задать этому классу позиционирование, тогда подвинется.

Интересный шаблон, в смысле замороченный. Позиционирование блоков (не только картинка-логотип) в html задано. Два хедера, два h1, h2 вообще полно. ПС свихнётся. Ну в смысле плохо это для поисковой оптимизации.

Может сменить шаблон? У него же ничего кроме адаптации. А сейчас адаптивных полно. Даже у того же вордпресса 5-я 6-я и 7-я адаптивные. Классные шаблоны.

Добрый вечер Алексей. Вам фоновое изображение в шапку хочется, правильно? Или просто картинку в шапку вставить? Нужна ли она вообще? Что то, что другое. По опыту, вряд ли Вы кого-то удивите и привлечёте красочной шапкой, учитывая специфику сайта, а вот скорость загрузки посадите однозначно. От картинок в шапке только вред.

Люди к вам пойдут за технической услугой. Надо им картинки? Ну туризм там — понятно. А тут. Лучше телефон (хорошо-бы бесплатный) и город в шапку.

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

Посмотрел вашу страницу в веб-инспекторе — картинки вообще нет. То есть не то чтоб её не видно — её кода просто нет в древе. Чтоб разобраться надо зайти в шаблон и копать, а это сами понимаете ….

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

Проектирование заголовочных частей сайтов с использованием CSS Flexbox

Когда я, изучив основы HTML и CSS в 2014 году, занялся разработкой сайтов, сложнее и страшнее всего для меня было создание их заголовочных частей. Тогда технология Flexbox была ещё достаточно новой, поэтому мы вынуждены были использовать старые методы — вроде float-позиционирования и техники clearfix. Сегодня мир фронтенд разработки стал совсем другим. А именно, технология Flexbox получила широкую браузерную поддержку, что открывает нам множество новых возможностей.

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

А именно, здесь я расскажу о том, как, используя Flexbox-макеты, создавать качественные заголовочные части сайтов. Я поделюсь некоторыми советами, а в итоге продемонстрирую мой проект, созданный специально для этого материала. Поэтому, если вам и правда интересна тема, которую я тут решил поднять, вам, определённо, стоит дочитать эту статью до конца.

Введение

Для начала давайте удостоверимся в том, что мы с вами называем «заголовочной частью сайта» или «заголовком сайта» одно и то же. Заголовочная часть сайта — это один из первых элементов страницы, которые пользователь видит, посещая сайт. Обычно она содержит логотип или название сайта, а также — навигационные ссылки. Взгляните на следующий рисунок.

Логотип сайта, навигационные ссылки и контейнер заголовочной части сайта

Вне зависимости от дизайна заголовочной части сайта её ключевыми элементами является логотип и список ссылок.

Технология Flexbox в действии

Когда макет для заголовочной части сайта создают с использованием технологии Flexbox, все элементы одного уровня выстраиваются в одну строку. Затем остаётся лишь воспользоваться свойством justify-content для выравнивания элементов путём распределения свободного пространства, имеющегося между ними.

Всё совсем несложно, правда? Ну, для столь простого заголовка — так оно и есть. Но на практике всё может оказаться куда сложнее.

Контейнер заголовочной части страницы

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

Макет заголовочной части страницы, созданный без использования внутреннего контейнера (выше) и с использованием контейнера (ниже)

Обратите внимание на то, что первый заголовок страницы оказывается слишком широким из-за того, что при его создании не применялся внутренний контейнер. А вот второй макет выглядит уже гораздо лучше. Поэтому HTML-код предыдущего примера стоит переписать так:

Использование свойства flex-wrap

Свойство flex-wrap — это нечто вроде защитного CSS-механизма. Если размеры экрана невелики, есть вероятность того, что для работы с заголовочной частью страницы придётся пользоваться горизонтальной прокруткой. Вот как это выглядит.

Для работы с заголовком страницы необходимо применять горизонтальную прокрутку. А всё дело в том, что тут не используется свойство flex-wrap: wrap

Исследование различных вариантов макетов заголовочных частей страниц

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

▍Вариант №1

Первый вариант заголовочной части страницы

Вот HTML-код, выражающий мою идею:

Элементы, благодаря margin-left: auto, прижаты к правой части контейнера

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

Заголовочная часть страницы на настольном и на мобильном устройстве

▍Вариант №2

Второй вариант заголовочной части страницы

Вот — стиль, применяемый к полю поиска:

Вот и всё! Теперь поле заполнит пустое место, которое имеется между логотипом и блоком ссылок. Правда, у такого подхода есть некоторые ограничения. На маленьких экранах заголовочная часть страницы будет выглядеть так, как показано ниже.

Заголовочная часть страницы на маленьком экране

Ширина поля поиска не должна быть меньше определённого размера. Иначе в него будет сложно вводить текст. Ниже приведено несколько вариантов решения этой проблемы.

Решение проблемы, вызванной уменьшением ширины поля поиска на небольших экранах

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

▍Вариант №3

Третий вариант заголовочной части страницыы

А вот как выглядит результат визуализации всего этого.

Использование свойства justify-content: space-between не приводит к выравниванию логотипа по центру. Благодаря этому свойству лишь распределяется свободное пространство между элементами

Равномерное распределение свободного пространства между элементами заголовочной части страницы

При таком подходе можно выровнять по центру и логотип, и кнопку:

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

Логотип больше не выровнен по центру

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

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

Советы по разработке заголовочных частей страниц, основанных на Flexbox

▍Свойство flex-basis

Я предпочитаю пользоваться свойством flex-basis: 100% в том случае, если элемент должен иметь полную ширину на мобильных устройствах. Например, если речь идёт о важном блоке навигационных ссылок, который нельзя скрывать.

Результат применения свойства flex-basis: 100%

Применение этого свойства, если взглянуть на предыдущий рисунок, может показаться простым делом. В реальности же это не так. Обычно заголовочная часть сайта может иметь внутренние отступы (padding), и если мы настраиваем элемент так, чтобы он занимал бы полную ширину, этого не произойдёт до тех пор, пока не окажутся перекрытыми внутренние отступы. Правда, убирать их — непрактично, так как это подействует на другие элементы макета.

Вот как можно решить эту проблему:

А вот как будет выглядеть пошаговое применение вышеописанных стилей к списку навигационных элементов.

Пошаговая стилизация элементов

▍Настройка расстояния между элементами

Использование свойства gap

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

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

Проект headers-css

Вот пример заголовочных частей страниц, которые созданы в рамках проекта headers-css.

Заголовочные части страниц из headers-css

Я решил сделать проект, в котором собраны шаблоны заголовочных частей веб-сайтов, оформленные в виде отдельных страниц. Теперь, если мне понадобится подобный элемент, я смогу быстро найти его и интегрировать в новый проект. А именно, я создал 17 вариантов заголовочной части страницы. В ближайшее время я планирую расширить этот проект. Работая над этими элементами, я обращал особое внимание на следующее:

Как вы создаёте заголовочные части веб-страниц?

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

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

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

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

HTML разметка

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

CSS код

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

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

На ширине экрана 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, иначе не получиться развести логотип и меню по разные стороны, меню будет прилипать к логотипу.

CSS код

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

display: flex; /* Включаем режим Flexbox. */
flex-direction: row; /* Держим элементы в строке */
justify-content: space-between; /* Распределяем элементы внутри шапки */
flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */

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

Вывод

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии ( 3 ):

Флексы это хорошо, но если названия пунктов меню будут длиннее или их будет не 3, а скажем 5-6, то как поведут себя они на флексе? Сейчас они в строчку выровнялись,т.к. влезли в нее. Тогда нужно будет тегу nav включить режим flex и медиазапросами ссылкам установить flex-direction: column я думаю

@media screen and (max-width: 510px) < nav < display: block; >nav a < display: block; >> https://codepen.io/ildarkhasanshin/pen/Nmymrx

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Создание шапки сайта html css

Дата публикации: 2016-03-09

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

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

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

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

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

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

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

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

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

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

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

Создание симпатичной и адаптивной «шапки» сайта — процесс всегда непростой. Для этого приходилось использовать float или другие сложные трюки и даже вручную настраивать значения пикселей. Но всё это позади!

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

Техника

В нашем демонстрационном примере мы построили шапку, которая разделена на три части с типичным для шапки содержимым внутри:

Ниже вы можете ознакомиться с упрощённой версией кода.

В первой вкладке располагается HTML, в котором мы группируем части через отдельные теги

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

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

Полная адаптивность

Трюк со space-between всегда будет следить за выравниванием, даже когда меняется размер экрана. Однако когда область просмотра становится слишком маленькой для горизонтальной шапки, мы можем сделать её вертикальной, изменив свойство flex-direction в медиа-запросе.

Выводы

Подведём итог нашего краткого руководства! Надеемся, что вы сочли его полезным и сразу начнёте его применять. В настоящее время Flexbox довольно хорошо поддерживается браузерами, так что если ваши пользователи не предпочитают IE, то эта техника может применяться без всякого вреда.

Чтобы узнать больше о Flexbox и об используемых нами свойствах CSS, ознакомьтесь со следующими ссылками:

Как сделать шапку сайта: вводная информация

Кстати! У сайта еще нет собственного логотипа? Его также можно сделать самостоятельно всего за 5 минут. В этом вам поможет наш проект.

Что должен/может включать в себя верхний блок любой площадки:

Как сделать шапку сайта: два способа достижения цели

1. Сделать шапку для сайта онлайн

2. Adobe Photoshop

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

Промежуточный итог

Как сделать шапку сайта CSS: помещаем изображение на сайт

width: 1420px; — ширина

height: 300px; — высота

background-color: #25B33f; — фон

margin-bottom: 30px; — отступ снизу

Обратите внимание! Здесь и далее слова «Ширина», «Высота», «Фон» и прочие к коду не имеют отношения. Они лишь указывают, что значит та или иная строка.

После этого остается вставить только саму шапку:

background-image: url(images/i8.png) — картинка

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

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

Теперь я знаю, как сделать шапку сайта

color: #2980b9; — цвет заголовка

font: 50px Times New Roman; — шрифт

margin-left: 500px; — отступ слева

width: 400px; — ширина

color: #9b59b6; — цвет

font-style: italic; — курсив

margin: 90px 0 0 40px; — расположение

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

Обратите внимание! Вот как может выглядеть адрес картинки: .

font: 50px Times New Roman;

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

Шапка сайта для WordPress

Для этого необходимо пройти по следующему пути:

Обратите внимание! Нужно немного изменить положение шапки на странице? Для этого возвратитесь в редактор, перейдите в код и в тег img, внесите атрибут style со свойством margin. Вот как это будет выглядеть: style=»margin:0 0 0 0;»

Как сделать шапку сайта: личный совет

Идеальная шапка сайта: оформление и содержание

Из этой статьи вы узнаете:

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

Роль шапки сайта для продвижения и юзабилити

Шапка (header) является одной из важнейших составляющих оформления интернет-ресурса и влияет не только на его привлекательность, но и на удобство использования. Именно шапка в первую очередь предоставляет пользователям ключевые сведения о сайте. Она важна и для юзабилити. С ее помощью владелец ресурса отвечает на вопросы клиентов о том, что собой представляет проект, рассказывает о его преимуществах и предложениях, способах связи и пр.

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

Составляющие элементы шапки сайта:

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

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

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

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

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

Этому есть логичное объяснение. Прежде всего, при посещении веб-сайта (особенно впервые) человек практически никогда не рассматривает внимательно всю страницу. Он быстро пробегает по ней взглядом, пытаясь обнаружить то, что вызовет у него интерес и убедит задержаться. В ходе проведения ряда экспериментов специалисты обнаружили, что при изучении веб-страниц глаза всех пользователей двигаются типичным образом. На основе этих результатов была разработана классификация, включающая в себя 3 основные модели движения глаз:

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

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

Довольно часто встречается и F-образная схема.

Рекомендуемые статьи по данной теме:

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

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

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

Все описанные выше модели показали, что пользователи начинают изучать интернет-ресурсы с верхней горизонтальной области. Выходит, что шапка страницы одновременно выполняет две задачи: дает возможность разработчику грамотно представить информацию, а посетителю – быстро отыскать интересующие его данные. Вот почему специалисты по контенту и маркетингу, а также UI/UX-дизайнеры придают блоку header такое большое значение.

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

Проектирование шапки сайта

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

Этот дизайн сегодня пользуется большой популярностью. Он позволяет спрятать ссылки на основные разделы за соответствующей кнопкой.

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

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

Это типичное решение для современных шаблонов в некоторых известных платформах. Так, навигация в шапке сайта «Вордпресс» включает в себя два отдельных меню. Вверху размещается кнопка меню, корзина интернет-магазина, поиск и ссылки на популярные соцсети, а в центре – логотип компании.

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

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

Основные принципы создания шапки сайта

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

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

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

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

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

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

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

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

При оформлении блока header придерживайтесь следующих правил:

6 правил разработки HTML-шапки

Чтобы успешно продвигать свой ресурс, учитывайте следующие моменты:

Особенности шапки того или иного сайта

1. Header для брендинга личности

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

Чтобы быстрее добиться признания, выстроить отношения и вызвать чувство причастности, разместите в блоке header фотографию счастливого, улыбающегося человека.

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

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

2. Header для брендинга бизнеса

Разработчикам корпоративных интернет-площадок следует понимать, что название и логотип в верхней части страницы не «взорвут» Интернет.

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

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

Самое главное, чтобы header на 100 % справлялся со своими задачами и мгновенно сообщал клиентам о предназначении ресурса.

3. Header для брендинга товаров и услуг

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

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

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

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

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

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

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

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

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

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

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

4. Шапка сайта для интернет-магазина

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

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

Рассмотрим важность каждого элемента шапки сайта с точки зрения классического розничного интернет-магазина:

Представляет собой основу стилистики интернет-площадки и используется для узнавания компании. Его размещают слева. Кроме того, логотип также является ссылкой на главную страницу (за исключением самой главной страницы). Конечно, этот элемент оформления достаточно важен. Однако не стоит акцентировать на нем внимание и делать его слишком большим. В противном случае вы просто потеряете полезное место. Высоты в 40–60 пикселей будет более чем достаточно. Помните, что все посетители переходят на сайт уже с конкретными ожиданиями, которые формируются описанием в сниппете органического поиска (или блоке объявлений контекстной рекламы), текстом ссылки либо еще чем-то. Делать большие и контрастные логотипы на ресурсах, не принадлежащих крупным известным брендам, просто нецелесообразно.

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

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

Помогает пользователям быстрее понять сферу деятельности организации. Описание размещают рядом с логотипом. Иногда его заменяют кратким УТП (не «чем мы занимаемся», а «что вы получите от сотрудничества с нами»). Но чаще всего для УТП выбирают более заметное место.

Этот пункт подходит не всем компаниям, так как зависит от специфики бизнеса. К примеру, тем, кто получает значительное количество заказов на звонках, необходимо поместить телефон в шапку сайта и выделить его. А когда большинство покупок оформляются через корзину, номер тоже стоит указать, но уже не таким крупным шрифтом. Размещайте свой телефонный номер в разделе «Контакты» лишь в том случае, если вы не желаете получать звонки. При ведении бизнеса в нескольких городах лучше не указывать сразу все телефоны (даже два – это не очень хорошо). Если вы управляете компанией общероссийского масштаба, оптимальным решением будет покупка номера 8-800 либо множества номеров (по одному на регион). Тогда в шапке сайта можно будет поместить выпадающий список «Ваш город». Другой вариант (более эффективный, но и более затратный) – выделение номера в зависимости от кода. Например, в городском номере следует выделять вторую часть – 8( 495) 666-00-00. А в общероссийском – первую, таким образом подчеркивая бесплатность – 8 (800) 888-00-00. При этом обязательно проставьте атрибут «tel», чтобы мобильные пользователи смогли позвонить вам в один клик. В блоке header телефонный номер обычно располагают по центру или справа.

Важность этих сведений тоже зависит от специфики организации. Если при оформлении шапки сайта у вас осталось слишком много свободного места, то можете дописать что-то вроде «Круглосуточно принимаем заказы» или «Время работы 9:30 – 19.30». В противном случае рабочий график лучше убрать в раздел «Контакты».

Что делать с второстепенными ссылками:

Каким элементам не место в шапке сайта

Иногда веб-мастера включают в header такие элементы, которым там совсем не место. Например:

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

4 распространенные ошибки при создании шапки

Ошибка № 1: Мелкая или растянутая картинка

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

Чтобы этого избежать, обязательно проверяйте правильность заданных размеров при оформлении блока header.

Ошибка № 2: Использование шрифта, предлагаемого по умолчанию

Создателю коммерческого блога очень хочется побыстрее оформить его шапку, ведь тогда он скорее приступит непосредственно к самим публикациям. В таком случае появляется соблазн использовать простейший стандартный шрифт (как правило, Arial или Times New Roman). Конечно, он может быть очень хорошим. Но вместе с тем настолько популярным, что все сразу поймут – вы не приложили никаких усилий, чтобы подобрать шрифт, соответствующий брендбуку.

Поэтому лучше попробовать 5–6 разных типов шрифта и подобрать для шапки сайта наиболее стильный и удобочитаемый вариант.

Ошибка № 3: Нечитабельные цветовые сочетания

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

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

Ошибка № 4: Захламление заголовка картинками

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

Источники информации: