Как сделать резиновую шапку?

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

Вам понадобится

• - иметь собственный сайт

Инструкция

Чтобы сделать резиновую шапку, сначала нарисуйте ее в фотошопе. Затем отделите 3 части картинки: 2 боковых и середину. Эти части должны быть шириной примерно в 10-20 пикселей и высотой в нужную высоту шапки. Сохраните каждый элемент так, чтобы у вас получилось 3 разных файла: 1.gif, 2.gif, 3.gif. Залейте эти изображения на сайт.

Затем создайте таблицу, в которой будут помещаться элементы верхней части сайта. Для этого в HTML-коде напишите:

Таблица с шириной 100% будет растягиваться или сжиматься в зависимости от размеров экрана пользователя.

Сделайте в таблице строку, в ячейке которой разместите левую часть шапки сайта 1.gif:

Создайте среднюю часть шапки сайта, состоящую из повторяющейся картинки 2.gif. Для этого в CSS-коде сделайте такую запись:

.header{background-image:url('images/2.gif');}

Теперь в строке таблицы создайте еще одну ячейку и поместите в нее средний элемент верхней части сайта, указав на его название header в CSS-коде:

Название сайта

Создав третью ячейку в строке таблицы, расположите в этой ячейке правую часть шапки сайта 3.gif:

Название сайта

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