Шапка веб-страницы


Содержание

Все про хедер (шапку сайта): назначение, дизайн и проектирование

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

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

Что такое хедер сайта?

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

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

Comics Shop Website

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

Что входит в шапку сайта?

Данный блок может включать в себя различные объекты:

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

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

Ниже приведены примеры размещения подобных элементов:

Bjorn Website (проект студии дизайна интерьера)

В верху макета находится фиксированная (прикрепленная) шапка сайта на странице, что позволяет ей оставаться постоянно видимой в процессе прокрутки. Слева она содержит логотип бренда, а справа — ссылки «Продукты», «Студия», «Новости» + иконку «Магазин». Центральная пустая область визуально разделяет эти два блока.

Event Agency Website

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

Почему важен header для сайта?

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

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

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

Достаточно часто пользователи демонстрируют следующий подход:

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

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

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

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

Проектирование хедера сайта

Читаемость и визуальная иерархия

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

Daily Bugle magazine

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

The Big Landscape

Здесь используется популярный тренд веб-дизайна 2020 с разбитой абстрактной сеткой, а header для сайта удачно его дополняет: левая часть визуально длиннее, состоит из логотипа и трех ссылок; правая — покороче, с элементами поиска и подписки.

Нужно помнить о том, что в процессе перемещения пользователя по странице шапка сайта может по разному себя вести:

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

Меню «гамбургер»

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

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

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

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

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

Фиксированный (липкий) хедер сайта

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

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

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

Двойное меню

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

На гифке ниже увидите «липкий» хедер, состоящий из двух «строк»:

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

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

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

Если есть что добавить по статье из личного рабочего опыта, пишите ниже — интересно почитать. Какой вариант реализации header вам больше понравился?

Адаптивная шапка сайта (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.

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

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

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

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

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

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 3 ):

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

    Илон Маск рекомендует:  Что такое код cpdf_lineto

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

    1 ссылка *Демонстрация шапки на flex* неверная, верная — https://europug.eu/demo/css3-responsive-header/css3-responsive-header-flex.html ; 2 *иначе не получиться развести логотип* — лишний ь

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    HTML — Урок 8: Верстаем шапку и простое меню для нашего HTML шаблона (Часть 1)

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

    Итак, что мы имеем на данный момент? Сейчас у нас вот такие стили:

    И вот такой код самого шаблона:

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

    Я поставил фиксированную ширину — width блока, размером 1024 пикселя, выровнял сам блок по центру, а текст в нем по левому краю с помощью text-align:left. Выровнять блок по центру мы можем с помощью стиля margin, задав величину отступа сверху и снизу 0, а по ширине auto. К сожалению, это не всегда работает в Internet Explorer 6, поэтому в body я прописал text-align: center; и именно поэтому мне пришлось выравнивать текст в обволакивающем блоке и подвале по левому краю. Также в body я указал margin:0, тем самым задав отступы от краев 0 пикселей. В итоге у Body получились вот такие стили:

    Также я внес изменения и в подвал:

    Тут все аналогично блоку wrapper: установил ширину 1024px, выровнял блок по центру, а текст по левому краю. Также добавил в container отступ от шапки margin-top: 20px; и убрал минимальную ширину, так как у нас фиксированная ширина обволакивающего.

    Ну что ж, шаблон мы подготовили, пора перейти и к шапке сайта. Стили будут такими:

    Высота блока 140px, фон белый, а величина отступа от верхнего края 40 пикселей. Вот и все изменения в стилях шапки.
    Что? Это всё? И в честь этого названа целая статья?
    Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.

    Пропишем в код HTML шаблона внутри блока header вот такую строчку:

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

    Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в следующей части урока.

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

    Шапка и подвал сайта: что такое, назначение

    Некоторые элементы веб-страницы более важны для создания первого впечатления, юзабилити и восприятия дизайна сайта в целом. Такими элементами является header и footer.

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

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

    Пример футера сайта:

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


    Что размещают в хедере сайта

    В шапку сайта могут помещать следующие разделы:

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

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

    Рассмотрим несколько примеров хедеров и остановимся на их особенностях.

    Примеры дизайна шапки сайта

    Классический вид

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

    Двойное меню

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

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

    Большое изображение: фото личности или продукта

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

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

    Анимация

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

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

    Меню «гамбургер»

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

    После нажатия на значок, появляется страница с меню:

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

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

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

    Шапка-иллюстрация

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

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

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

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

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

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

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

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

    Основные принципы создания хедера

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

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

    1. Обращайте внимание на типографику

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

    2. Принимайте во внимание стиль сайта и его назначение

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

    3. Обращайте внимание на расположение элементов

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

    4. Уделите внимание кнопке и веб-форме обратной связи

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

    5. Сделайте хедер фиксированным, если это не нарушает общую концепцию дизайна

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

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

    Зачем нужен подвал сайта

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

    Зачем нужен футер?

    1. Визуально завершает дизайн

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

    2. Помогает совершить целевое действие

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

    3. Направляет пользователя

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

    4. Предоставляет пользователю нужную информацию о компании

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

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

    Примеры дизайна подвала сайта

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


    Карта сайта

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

    Контактная информация

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

    Элементы навигации

    Чтобы улучшить навигацию, иногда в футере размещают другие элементы, помимо ссылок на разделы, например, кнопку «наверх», чтобы клиенту не пришлось прокручивать страницу обратно:

    Илон Маск рекомендует:  Что такое код array_unshift

    Ссылки на социальные сети

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

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

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

    Стилизованное оформление

    Иногда сайт завершают просто красиво оформленным подвалом с контактными данными:

    Без футера

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

    Основные принципы создания футера

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

    Несколько рекомендаций по разработке дизайна футера.

    1. Делайте футер отличным от общего контента сайта

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

    2. Обращайте внимание на типографику

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

    3. Учитывайте важность иерархии

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

    Студия дизайна IDBI уделяет особое внимание разработке header и footer сайта. Мы понимаем, что не будет второго шанса произвести первое впечатление, поэтому подходим со всей тщательностью к содержимому этих двух важных элементов сайта. Примеры наших работ можно посмотреть в разделе «Портфолио».

    Как правильно написать HTML код для шапки сайта?

    т.е. все остальное вы уже сверстали/знаете как сверстать, и проблема только с шапкой?

    Поправил:
    Что же вы так прицепились к «пустой» ячейке? Ее там нет, я ее не вижу и вы не должны видеть и вот почему: потому что там не пустая ячейка, а тянущиеся границы обертки линии меню+поиска, такие же как и справа.
    вот примерно, разметка проще не придумаешь:

    где .nav и .search флоатите или инлайните как хотите

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

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

    Первым делом для шапки сайта нужна картинка. Её лучше всего сделать в фотошопе.

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

    Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение

    Как только картинка будет готова, и размещена в папке images каталога сайта, возьмём каркас сайта, созданный на предыдущей странице, и приступим к установке шапки на сайт.

    В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки.

    Затем вставляем саму картинку.

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

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

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

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

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

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

    По моему, очень даже симпатично.

    Обобщим код этой страницы.

    Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок

    (к примеру, адрес моей картинки

    В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png); , и прописываем position: relative .

    А в селекторах тегов h1 и h3 , прописываем свойство position: absolute; .

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

    Всё остальное остаётся без изменения.

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

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

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

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

    Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php .

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

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

    Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img , добавляем атрибут style со свойством margin

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

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

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


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

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

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

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

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

    Здравствуййте,аонимаю вопрос ,не много, нне по теме ,но все же, как Вы сделали меню в шапке своего сайта,просто, я сейчас учусь верстать с psd-макетов и на одном из них менб в точности как у Вас(только шрифт и цвет другие) и мне очень интересно как вы сделеали свое меню.Буду точнее
    в Вашем меню используются шесть ячеек одного блока (Шпаргалки Web,Html на русском и т.д.) как их сделать я понимаю,но я не могу понять как вы сделали их разной ширины т.е ячейка «Html шаблоны на русском» шире чем «О сайте» ,уже третий день не могу доделать свой макет,буду благодарен если вы скинете html,css этого меню или просто обьясните.
    ЗАранее Спасибо!

    .clear <
    clear: both;
    > , а что это?

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

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

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

    Спасибо Starik!
    Этот код находится в хедере. Вставлял в style.css после юblog-info-sin-imagen
    селектор .main-logotip <
    position: absolute;
    top: 0px;
    left: 0px;
    > стоит насмерть логотип.
    Пробовал его вставить в это место if ( get_theme_mod(‘ribosome_display_top_bar’, и даже в другие (с тегами и без тегов, с class и без него) слетает сайт. Может опять что-то не то делаю. Вроде как ты написал. Еще где-то читал предлагали разбить на блоки и выставить в одну линию, но знаний не хватило, а конкретики маловато. Очень надеюсь на твою помощь. Может на прямой связи. я могу на мобилу набрать и под руководством сделаем.

    Ага. Вот так понятнее. Судя по всему тебе надо начать с начала, а не тыркаться с середины во все стороны. Вот смотри: есть веб-инспектор, в котором видно весь 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: **; Обязательно прочитай статьи по ссылкам.

    Чтобы перемещать твой логотип, нужно во первых найти его код в вебинспекторе вот он: . Затем найти этот код в файлах шаблона, скорее всего в header.php., но не обязон. Возможно логотип подгружается по php. Как бы там ни было, путь к картинке в теге img есть. И судя по тому что она в папке uploads, то была загружена пользователем, а не встроенная.

    Илон Маск рекомендует:  Что такое код pcntl_wifsignaled

    В общем тебе нужно найти код картинки, и вместо атрибута style=»position: absolute;», прописать в него . Затем создать (добавить) в style.css селектор .main-logotip и задать в нём свойства:

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

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

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

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

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

    Что я делал — в соответствии с разными предложениями в style.css менял параметры в т.ч. для blog-info-sin-imagen» и h1 и h2 и много еще разных попыток. Лого двигался или вбок или сверху добавлялась еще полоса . Сейчас я попробовал как ты говоришь написать так.
    и вставить в style css .ehp-logo1 такие параметры и другие, но не сработало
    <
    float:left;
    margin: 4px 10px 2px 0px;
    >
    Что-то видно не так делаю.
    Если можешь напиши конкретно, ПОМОГИ. Мозги кипят от непонимания
    С уважением Вик

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

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

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

    Добрый День!
    У меня сайт на вордпрессе. Я новичок. В шапке стоит логотип и название с описанием. Не могу логотип установить на одну строку с названием и описанием. Что только не делал. Советов много, но не получилось ничего. Как логотип был выше так и остался . Надеюсь на вас профессионалы. Кусок кода хедера ниже.

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

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

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

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

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

    Верстка шапки сайта.

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

    Как правило, на всех веб-страницах сайта — эта шапка сайта есть.

    В фреймворке Bulma за шапку сайта отвечает специальный раздел документации, который называется Layout — Hero.

    Пример кода для создания самой простой шапки сайта следующий:

    Код для шапки сайта, как правило размещается сразу после открывающего элемента .

    По сути, шапка сайта создается с помощью класса hero и hero-body.


    Чтобы изменить фоновый цвет, можно добавить какой-либо модификатор цвета для элемента с классом hero.

    Т.е. просто скопировав заготовку кода из документации Bulma — мы с вами создали полноценную шапку сайта.

    Если нам нужно в качестве фонового цвета использовать градиент, можно добавить модификатор is-bold.

    Есть также модификаторы, который отвечают за размер. Есть 3 основных значения:

    Сделает размер шапки «средним» размером.

    Это основы работы с шапкой (hero) в фреймворке Bulma. Все очень просто, копируем заготовку и применяем к ней различные модификаторы: для цвета, градиента или размера.

    Вот общий алгоритм, как это делается.

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

    Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

    Или зарегистрируйтесь через социальные сети:

    Шапка веб-страницы

    Создаем сайт для работы в Интернете

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

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

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

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

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

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

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

    Зачастую вроде бы простые задачи верстки требуют сложной структуры 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 необходимо вместо “::” использовать “:” для псевдоэлементов.

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

    September 07, 2013

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Но после “наводки” Kray Storm с форума проблема была решена. Для элементов и я поменял свойство на и для я дополнительно задал высоту строки , равную высоте блока . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

    Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими . Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.

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

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

    И, наконец, результат всего — готовая шапка сайта:

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL