Примеры верстки «шапок» для сайтов
10
2009
Занимаясь разработкой шапок, нам часто приходиться верстать их для наших клиентов, т.е. переводить картинку в html и css код для дальнейшей их вставки на сайт. Некоторые заказчики верстают «шапочки» сами, но многие из них опять возвращаются к нам. В связи с этим хочу показать основные моменты при верстке «шапок» для сайтов. Конечно же, верстка «шапок» ничем не отличается от верстки сайта или верстки какого-либо другого его участка. Давайте посмотрим несколько примеров.
Пример 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
Шапочка находится в нашем портфолио
Верстка шапок для сайтов с «плавающими размерами» или как их называют – «резиновые» может быть нескольких видов. Это зависит от самой шапки. На примере вы видите шапочку, которая подходит под любое разрешение на данный момент, так как ее максимальная ширина составляет 1920px. Создание такой шапки должно учитывать все основные разрешения монитора и на любом из них должна быть законченная смысловая картинка. Верстка же практически не отличается от предыдущего варианта.
HTML-код
<div id="header"></div> <!-- Блок с шапкой -->CSS-код
#header {
background: #a6b7d3 url(img/header-2.jpg) no-repeat center;
height: 250px;
}Как вы видите, мы добавили к свойству фона параметр center, который центрирует наше фоновое изображение. Ширину указывать нет необходимости, так как шапка под любую ширину окна браузера, но не более 1920px. При увеличении или уменьшении окна браузера, шапочка будет показана во всю ширину окна. Так как концы шапки, не попадающие в область окна браузера, обрезаются, то вид такой шапки на разных разрешениях должен быть хорошо продуман дизайнером.
Пример 3 – Шапка для сайта с «плавающими» размерами (резиновая). Вариант 2
Шапка для сайта 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.
На этом все. Представленных вариантов должно хватить, чтобы сверстать любую
шапочку.
Если что-то упустил, то в комментариях дополню.
Классный мануал! Сейчас как раз шапки на своих сайтиках решила обновить. Спасибки огромнейшее! Подписываюсь на РСС.
Ната очень рад, что вам у нас понравилось
Побольше бы таких хороших сайтов, где все ясно и четко разьясняют .Спасибо!
Хочу задать вопрос по Примеру 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 /> }Расскажите поподробнее как высчитываются эти размеры которые выделиные.
Там где проценты - смотрим на глаз, ориентируясь на оригинал. Картинки 1 и 2 вместе занимают примерно 67% всей шапки. Просчитать процент можно просто замерив их ширину в оригинале и сравнить со всей шириной шапки.
отступ в 157px - это оригинальный размер картинки 1. Столько надо отступать, для того, чтобы шапка смотрелась при минимальных размерах.
огромное спасибо, материал очень помог
Обсудить тему: «Примеры верстки «шапок» для сайтов»