Как вставить свою шапку на сайт?

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

Инструкция

Если вы хотите, чтобы сайт обладал статичными неизменными размерами, вам потребуется создать статичную шапку, которая не изменяется в зависимости от изменения ширины экрана. Определите ширину и высоту шапки (например, 996х230) и вставьте в верхний блок фоновую картинку, используя следующий CSS-код, где header-1.jpg – это фоновое изображение:#header {

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

width: 996px;

height: 230px;

}HTML-код шапки этого типа будет выглядеть так:

Если же сайт построен так, что его размеры подстраиваются под ширину экрана, шапка должна быть сверстана с учетом всех основных разрешений мониторов. Максимальная ширина такой шапки должна составлять 1920 пикселей. Для вставки такой шапки используйте CSS-код:#header { background: #a6b7d3 url(img/header-2.jpg) no-repeat center; height: 250px;}HTML-код является в данном случае аналогичным предыдущему. CSS-код изменен в некоторых параметрах – теперь в нем появился атрибут центровки изображения шапки, позволяющей подогнать фон под любую ширину экрана.

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

Оцените статью!