Создание Шапки Сайта

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

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

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

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

CSS-код

#header {
background: #a6b7d3 url(img/header-1.jpg) no-repeat;
}

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

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

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

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

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

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

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

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

Создание Сайтов Самара

Создание Сайтов Чита

Создание Нового Сайта

Создание Промо Сайта