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

2 ноября 2014 г. Просмотров: 564 Инструкции
Верхняя часть сайта, которая еще называется шапкой, обычно отражает тематику ресурса и может содержать панель навигации. Если шапка сайта имеет определенную ширину, то на экранах пользователей, имеющих разное разрешение, эта часть сайта будет выглядеть по-разному. Для того, чтобы шапка сайта на любом экране выглядела одинаково, необходимо некоторые ее участки сделать растягивающимися или сжимающимися в зависимости от размеров экрана.
Такую резиновую шапку можно сделать, отказавшись от фиксации ее ширины в пикселях.
Создать сайт самостоятельно с 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:
  • Название сайта

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