Примеры верстки «шапок» для сайтов

верстка шапки

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

Пример 1 – Шапка для сайта со статическими размерами

пример 1

шапка для одного бизнес сайта, разработанная нами

Как правило, такого рода шапки заказывают для сайтов со статическими размерами, которые не меняются при изменении ширины окна. Верстка таких шапок самая простая и сводится к простой вставке фоновой картинки в блок шапки. Ширина и высота нашей шапочки 996x230 пикселей соответственно.

HTML-код

<div id="header"></div><!-- Блок с шапкой -->

CSS-код

#header {
  background: #a6b7d3 url(img/header-1.jpg) no-repeat;
  width: 996px;
  height: 230px;
}

В html коде мы вставили блок нашей шапки и дали ему идентификатор header, а в CSS указали этому идентификатору параметры фона, ширины и высоты. Кстати, помимо фонового рисунка я указал еще и цвет фона #a6b7d3 на случай, если картинки будут отключены. Параметр no-repeat говорит о том, что фон не будет повторяться.

Пример 2 – Шапка для сайта с «плавающими» размерами (резиновая). Вариант 1

пример 2
Шапочка находится в нашем портфолио

Верстка шапок для сайтов с «плавающими размерами» или как их называют – «резиновые» может быть нескольких видов. Это зависит от самой шапки. На примере вы видите шапочку, которая подходит под любое разрешение на данный момент, так как ее максимальная ширина составляет 1920px. Создание такой шапки должно учитывать все основные разрешения монитора и на любом из них должна быть законченная смысловая картинка. Верстка же практически не отличается от предыдущего варианта.

HTML-код

<div id="header"></div> <!-- Блок с шапкой -->

CSS-код

#header {
  background: #a6b7d3 url(img/header-2.jpg) no-repeat center;
  height: 250px;
}

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

Пример 3 – Шапка для сайта с «плавающими» размерами (резиновая). Вариант 2

пример 3
Шапка для сайта 7doors.ru

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

нарезка шапки

На картинке вы видите 5 основных блоков — нарезок. Все эти блоки будут размещены на нашем повторяющемся фоне стены и паркета.

фон стены и паркета
Фон стены и паркета

HTML-код

<div id="header"><!-- Блок с шапкой -->
  <div id="header-l"><!-- Крайняя левая дверь -->
   <div id="header-c"><!-- Центральная часть с лого -->
    <div id="text"></div><!-- Надпись межкомнатные двери -->
   </div>
  </div>
  <div id="header-r1"> <!-- Первая правая дверь -->
   <div id="header-r2"></div> <!-- Вторая правая дверь -->
  </div>
</div>

CSS-код

/** Блок header задает фон всей шапки повторяя картинку №0 **/
#header {
  background: #cc8f3e url(img/header-bg.jpg) repeat-x;
  width: 100%;
}

/** header-l – левая часть, состоящая из двух блоков (картинок) №1 и №2**/
#header-l {
  background: url(img/header-l.jpg) no-repeat left; /** Картинка №1**/
  width: 67%; /** Примерная ширина в процентах двух блоков №1 и №2**/
  float: left; /** Притягивание блоков с картинками №3 и №4**/
}

#header-c {
  background: url(img/header-c.jpg) no-repeat center; /** Картинка №2**/
  margin-left: 157px; /** Отступ слева в размере Картинки №1**/
}

/** header-r1 – правая часть, состоящая из двух блоков (картинок) №3 и №4**/
#header-r1 {
  background: url(img/header-r1.jpg) no-repeat left; /** Картинка №3**/
  width: 33%; /** 100% минус ширина блоков №1 и №2**/
  float: right; /** Притягивание к правой части шапки**/
}

#header-r2 {
  background: url(img/header-r2.jpg) no-repeat right; /** Картинка №4**/
}

/** Значение высоты блоков №1,2,3,4**/
#header, #header-l, #header-c, #header-r1, #header-r2 {
  height: 355px;
}

/** Позиционирование надписи «межкомнатные двери»**/
#text {
  background: url(img/text.png) no-repeat center;
  position: relative;
  top: 332px;
  left: 250px;
  height: 23px;
}

Данный вариант будет смотреться на всех разрешениях от 800px и выше. В данной верстке пришлось использовать прозрачный фон в формате .png для нашей надписи. Так как IE6 не понимает прозрачный .png, то не забываем использовать PngFix.

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

Если что-то упустил, то в комментариях дополню.

Отзывов к посту "Примеры верстки «шапок» для сайтов" уже 45:

Аватар пользователя Гость

Зделал шапку в фотошопе сохраняю для веб. потом фотошоп закриваится и гре тепер знать где она есть?

Аватар пользователя Сергей Иванов

Порядок такой:

Сохраняете для веб - Файл - Сохраниить для веб и устройст
потом выбираете нужный вам формат сверху - JPEG

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

Аватар пользователя Денчик

Здравствуйте! Сделал как вы сказали, но ничего не получаеться!(( Вставил код

между в html, и прописал в css код
#header {background: #3CA6C4; url ("header-1.jpg") no-repeat;
width: 1000px;
height: 190px;
но до сих пор нет изображения, хотя файл сохранил там, куда прописал код! Уже коды которые мешают удалил... В чём проблдема может быть?(( Подскажите, пожалуйста!!!

Аватар пользователя Сергей Иванов

Порядок такой:

Сохраняете для веб - Файл - Сохраниить для веб и устройст
потом выбираете нужный вам формат сверху - JPEG

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

Аватар пользователя Гость

Почему не работает в IE и в Opere все работает ,но между блоками появляеться просвет видный при увеличении????????

Аватар пользователя Svetli

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

Аватар пользователя Анжелика

Здравствуйте, как раз ищу информацию о том как поставить шапку на сайт.
Попробую ваши способы, еще раз спасибо.

Аватар пользователя Сергей Иванов

Надеюсь вам моя статья помогла)

Аватар пользователя Trasher

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

Аватар пользователя Сергей

Спасибо отличная шапка

Аватар пользователя Anopsa

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

Но вообще-то для меня проще резиновые шапки делать с помощью таблицы.
Они хорошо тянуться и код понятнее (для меня во всяком случае).

Жаль только, что такой классной идеей не воспользовались на самом сайте 7doors.ru - ширина в 800px на современном мониторе смотрится куцо и обрубленно с боков. Вполне можно было бы сделать резиновую шапку на весь монитор с шириной контента в 1000рх.

Но идея меня заинтересовала, возму у них img и попробую. Интересно, как она будет смотреться на разных разрешениях монитора, заодно и с кодом разберусь.
Спасибо автору за идею.

Аватар пользователя Игорь

Здравствуйте. У меня центральная часть с логотипом при уменьшении размера окна оказалась на заднем фоне. Можно ли её вывести на передний план?

Аватар пользователя Сергей Иванов

Игорь, не видя что у вас произошло, трудно что то посоветовать( Напишите мне http://www.blogohelp.ru/contact поподробнее о вашей проблеме)

Аватар пользователя vik

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

Аватар пользователя Сергей Иванов

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

Аватар пользователя Гость

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

Аватар пользователя vik

Спасибо, что ответили!
Буду работать над этим.

Аватар пользователя Kira

шапка №3 понравилась, решил поставить...и как мне кажется высота шапки осталась та которая в шаблоне(фон прижат к верху, а остальные картинки прижаты к низу и частично на белом фоне) ... как решить...я в Html и Css не оч))) заранее спасиб.

Аватар пользователя Гость

А куда вставлять html и css коды?

Аватар пользователя Виктор

Спасибо сейчас попробую

Аватар пользователя kotovskiy

Отлично*

Все работает правда у меня css теги отличаются по названиям и я в начале даже расстроился. Потом подогнал все под себя и все * заработало.
Огромное спасибо.

С уважением Павел

Аватар пользователя Сергей Иванов

Рад что разобрались)

Аватар пользователя Ирина

Здравствуйте,
подскажите, пожалуйста, следующее по верстке:

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

Аватар пользователя Сергей Иванов

Ирина попробуйте для вашей шапки сделать так:

<img src="img/header.jpg" width="100%">

а css стиль для шапки не прописывать, просто указать, что ширина вашей картинки равна 100% и укажите адрес к картинке.

Аватар пользователя Айрат

Спасибо! ценный материал, в закладки.

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

Аватар пользователя Сергей Иванов

Айрат, очень рад, что вам была полезна статья.

Отвечаю на ваш вопрос, нажимаете CTRL+T (свободная трансформация), далее зажимаете CTRL+ALT и не отпуская эти клавишы, трансформируете объект как вам нужно. Я ответил на ваш вопрос?

p.s. спасибо за комментарий.

Аватар пользователя Гость

Почитал Ваш материал. Спасибо. Есть вопрос: Кто сможет сделать шапку с лого для форума? Тематика общение на любые темы. Если у кого есть предложения стучите в Асю: 635940644 или 00008@pisem.net

Аватар пользователя Гость

Скажите пожалуйста, я сделал шапку по третьему варианту, но она перестала быть "кликабельной", не подскажите как это исправить?
Спасибо!

Аватар пользователя Сергей Иванов

ответил вам на почту.

Аватар пользователя Ольга

А как в шапку сайта встроить слайдер? Может подскажите?

Аватар пользователя Сергей Иванов

Ольга, вы хотите вставить какой то определенный слайдер в шапку?

К примеру вот по этой ссылке - http://webdesignfan.com/jquery-slider-tutorials-and-plugins/ есть 30 примеров слайдеров для сайта, так же там есть описание как какой-либо слайдер установить на сайт.

Аватар пользователя Ольга

Спасибо, посмотрю!

Аватар пользователя Юрий

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

Аватар пользователя fo1k

Большущее спасибо, все четко и понятно. Особенно комментарии в коде помогли.

Аватар пользователя Вячеслав

Хорошая статья, все коротко и ясно. Спасибо.

Аватар пользователя Александр

Непонятно, куда конкретно вы вставляете CSS-код.

Аватар пользователя Сергей Иванов

читаем тут - ru.html.net/tutorials/css/lesson2.php

Аватар пользователя kfyuecn

как сделать ссылки в шапке. Например: в фотошопе, сделали шапку и написали там главная блог поиск, а как сделать, чтобы они работали?

Аватар пользователя Сергей Иванов

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

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

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

Аватар пользователя Сергей Иванов

Ната очень рад, что вам у нас понравилось :ad:

Аватар пользователя Александр

Побольше бы таких хороших сайтов, где все ясно и четко разьясняют .Спасибо!

Аватар пользователя Sten

Хочу задать вопрос по Примеру 3 :

/** Блок header задает фон всей шапки повторяя картинку №0 **/<br />
#header {<br />
  background: #cc8f3e url(img/header-bg.jpg) repeat-x;<br />
  width: 100%;<br />
}</p>
<p>/** header-l – левая часть, состоящая из двух блоков (картинок) №1 и №2**/<br />
#header-l {<br />
  background: url(img/header-l.jpg) no-repeat left; /** Картинка №1**/<br />
  <strong>width: 67%; /** Примерная ширина в процентах двух блоков №1 и №2**/</strong><br />
  float: left; /** Притягивание блоков с картинками №3 и №4**/<br />
}</p>
<p>#header-c {<br />
  background: url(img/header-c.jpg) no-repeat center; /** Картинка №2**/<br />
  <strong>margin-left: 157px; /** Отступ слева в размере Картинки №1**/</strong><br />
}</p>
<p>/** header-r1 – правая часть, состоящая из двух блоков (картинок) №3 и №4**/<br />
#header-r1 {<br />
  background: url(img/header-r1.jpg) no-repeat left; /** Картинка №3**/<br />
  <strong>width: 33%; /** 100% минус ширина блоков №1 и №2**/</strong><br />
  float: right; /** Притягивание к правой части шапки**/<br />
}</p>
<p>#header-r2 {<br />
  background: url(img/header-r2.jpg) no-repeat right; /** Картинка №4**/<br />
}</p>
<p>/** Значение высоты блоков №1,2,3,4**/<br />
#header, #header-l, #header-c, #header-r1, #header-r2 {<br />
  height: 355px;<br />
}</p>
<p>/** Позиционирование надписи «межкомнатные двери»**/<br />
#text {<br />
  background: url(img/text.png) no-repeat center;<br />
  position: relative;<br />
  top: 332px;<br />
  left: 250px;<br />
  height: 23px;<br />
}

Расскажите поподробнее как высчитываются эти размеры которые выделиные.

Аватар пользователя Fatalist

Там где проценты - смотрим на глаз, ориентируясь на оригинал. Картинки 1 и 2 вместе занимают примерно 67% всей шапки. Просчитать процент можно просто замерив их ширину в оригинале и сравнить со всей шириной шапки.

отступ в 157px - это оригинальный размер картинки 1. Столько надо отступать, для того, чтобы шапка смотрелась при минимальных размерах.

Аватар пользователя Bron

огромное спасибо, материал очень помог

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.