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


Содержание

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 неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в следующей части урока.

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

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

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

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

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

September 07, 2013

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Заголовок HTML-страницы

HTML-элемент

Элемент определяет базовый URL и цель для всех ссылок на странице:

Опускаем , и ?

Согласно стандарту HTML5 , теги , и можно опустить.

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

Примечание: Мы не рекомендуем опускать теги и . Это может негативно сказаться на работе DOM и XML , а также вызвать ошибки отображения веб-страниц в устаревших браузерах ( например, IE9 ).

Элементы HTML Head

Тег Описание
Предоставляет информацию о документе.
Задаёт заголовок документа.
Определяет основной адрес и цель для всех ссылок на странице.

Отвечает за связь между документом и внешними ресурсами.
Определяет метаданные документа.

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    название

    описание

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

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

    Илон Маск рекомендует:  Создание web приложений в среде delphi


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

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

    1. Откройте в консоли вкладку «Записи — Сделать новую».
    2. Переведите редактор в формат HTML, загрузите картинку, которую хотите добавить.
    3. После загрузки в редакторе появится код изображения. Скопируйте его, «Запись» удалите.
    4. Переместитесь во вкладку «Внешний вид — Редактор», откройте файл header.php для редактирования.
    5. В header.php найдите

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

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

    Не все владельцы ресурсов имеют необходимые навыки для самостоятельного создания сайтов и их элементов. В таких случаях лучше всего создать сайт на конструкторе и доработать готовый шаблон, чтобы сделать его непохожим на типовые сайты. На сервисе 1С-UMI это можно сделать самостоятельно. В библиотеке сервиса предусмотрено более 500 готовых шаблонов, поэтому вам понадобится всего лишь пара минут, чтобы сделать полноценную верхнюю часть ресурса. Обратите внимание: здесь нет возможности рисовать элемент с нуля. Однако в шаблонах доступно изменение текста, шрифта, картинки, а также стилизация готовых элементов через 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 необходимо вместо “::” использовать “:” для псевдоэлементов.

    Создание лаконичной и современной шапки сайта с использованием CSS3

    22 августа 2015 | Опубликовано в css | 5 Комментариев »

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

    Перед тем, как начать, посмотрите, что именно мы будем создавать:

    Посмотрите пример, и приступим к программированию.

    Шаг 1. Код HTML


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

    В этом коде легко разобраться. Здесь меню на обычной структуре ul – li и простая форма поиска.

    Шаг 2. Код CSS

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

    И, наконец, все, что нам осталось, — создать выпадение подпунктов меню. Эти стили создадут плавно выезжающий вложенный уровень меню:

    Заключение

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

    Одна «шапка» на главной странице, а другая на остальных: как я это реализовал?

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

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

    А самое классное заключается в том, что на реализацию функции уйдет совсем мало времени. У меня например ушло не более 5 минут.

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

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

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

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

    Ну что ж, раз Вы до сих пор читаете данную статью значит заинтересовались тем, как же все таки реализовать такую смену.

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

    2. После чего открываем файл header.php который находится в папке с темой блога и находим там строки, отвечающие за отображение шапки. Узнать какие строки за это отвечают можно следующим образом: в браузере Google Chrome наводите мышь на шапку, нажимаете правой кнопкой и выбираете «Просмотр кода элемента». После чего у Вас открывается консоль, где будет отображено какая строка отвечает за отображение шапки.

    Вот у меня например за вывод шапки отвечает

    Если взглянуть на файл header.php у меня, то вот как раз этот div:

    3. Теперь наша задача перед этим дивом поставить вот такой код:

    А после закрывающего тега

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

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

    4. Теперь нам нужно сделать так, чтобы другая шапка отображалась на всех страницах, кроме главной. Для этого Вам необходимо проделать все шаги, описанные выше только по отношению к другому элементу (шапке) и вписать немного другой код:

    Теперь у Вас на деле две шапки, но одна появляется только на главной, а другая на всех остальных. Мы с Вами молодцы!

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

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

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

    И на этому у меня все.

    Пошел дописывать книгу. Выходит бомба! Уже скоро…

    Спасибо за внимание.

    Желаю удачи и до встречи в следующей статье.


    С уважением, Константин Белан.

    Как оформить шапку сайта

    Начнем с основных показателей хорошей шапки.

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

    Обязательные элементы

    Логотип

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

    Не делайте логотип «центровым» элементом главной страницы — вашему клиенту важно решить свою проблему, а не оценить старания дизайнера. Самое важное — это соответствие запросу и ожиданиям; релевантность главной страницы и сайта вообще, если объявление контекстной рекламы ведет сюда.

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

    Создайте свой логотип за минуту:

    Краткое описание

    Оно всегда расположено рядом с логотипом. Это емкий текст о том, чем именно занимается или почему выгодно сотрудничество с компанией/магазином (уникальное торговое предложение).

    Номер телефона

    Есть три варианта: указать его в шапке крупным шрифтом, более мелким или вообще прописать только на странице «Контакты». Все зависит от того, откуда именно вы получаете максимум заказов. Эти данные у вас должны быть обязательно.

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

    Часы работы

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

    Второстепенная информация

    Адрес

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

    Обратный звонок

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

    Корзина, Личный кабинет

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

    Кнопка CTA

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

    Не для шапки

    Акции и специальные предложения

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

    Агрессивный CTA

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

    Слоганы, красивые фразы, цитаты и пр.

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

    Длинные формулировки

    Если информацию можно сообщить справочно, выберите именно такую подачу. Например: «Рабочие дни: пн-сб с 10 до 22. Вскр — выходной». Это понятно и доступно, можно без указания выходных.

    Рекомендации

    • Шапка не должна занимать весь первый экран, даже если это изображение вам очень нравится. Высота, по возможности, до 250 пикселей.
    • Не используйте теги H1-H6 для текста шапки, т. к. это может повлиять на оптимизацию.
    • Если у вас много текстовых материалов и ассортимент свыше 10-ти товаров, в шапке сайта должен присутствовать поиск.
    • Помните, что шапка будет одинаковой на всех страницах сайта. Следите за тем, чтобы она не контрастировала с другими страницами.
    • Пункт меню «Главная» сохраните, т. к. не все кликают по логотипу, чтобы вернуться на главную.

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

    Выводы

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

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