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

2 ноября 2014 г. Просмотров: 344

«Шапка», или верхняя часть веб-страницы, делает ваш сайт уникальным, позволяет ему отличаться от других и отражать специфику именно вашего интернет-проекта. С помощью оригинальной и качественно сделанной шапки можно украсить и облагородить любую веб-страницу, и чтобы сделать шапку самому, вам нужно научиться верстке этого веб-элемента.
Создать сайт самостоятельно с 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-код такой шапки более сложен и обширен, и подразумевает повторения нескольких элементов фона в соответствии с плавающими размерами окна браузера, в котором могут просматривать ваш сайт.
  • Оцените статью!