Не знаете, как поставить шапку на сайт? Тогда вы попали по адресу! В этой статье описываются 2 простых примера, как верстать шапку для сайта (переводить изображение в html и css код для правильного отображения ее на сайте). Итак, основные нюансы при создании «шапок» для сайтов.

1. Вопрос: как поставить шапку на сайт? Способ 1:

Как вариант можно рассмотреть шапку для сайта с едиными размерами, которая не будет видоизменяться при увеличении рабочего окна.

2. Процесс написания html и css — кода для веб-страницы довольно понятен и прост, поскольку заключается в обычной установке фоновой картинки в блок шапки.

3. Размер в пикселях устанавливается самостоятельно (по умолчанию он составляет примерно 1000*250).

• HTML-код

• CSS-код

#header {
Bgcolor: #d3c3a6 url(img/kart.jpg) no-repeat;
width: 1000px;
height: 250px;
}

4. В первом варианте вместо текста отображен идентификатор header, а в CSS установлены размеры фоновой картинки. Так же указан оттенок изображения #d3c3a6 (он необходим в том случае, если рисунок не загрузится). Параметр no-repeat сообщает о том, что изображение не должно повторяться.

1. Решение задачи: как поставить шапку на сайт? Способ 2:

Существует несколько разновидностей шапок:

• «перемещающиеся»
• «двигающиеся»
• «подвижные»
• «скользящие».

2. Сегодня будет рассмотрена резиновая (плавающая) шапка, подходящая под любое разрешение, поскольку ее размер составляет 1920px. Работая над созданием такого варианта, важно принимать в внимание все существующие разрешения экрана, чтобы на каждом из них она выглядела так, как задумано.

3. При этом особых отличий при создании шапки не будет.

• HTML-код

• CSS-код

#header {
Bgcolor: #d3c3a6 url(img/kart.jpg) no-repeat center;
height: 300px;
}

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