«Резиновая» шапка сайта

«Резиновая» шапка сайта может быть реализована различными способами. Главное, чтобы она подстраивалась под размеры экрана, как при уменьшении, так и при увеличении размера экрана. Например на сайте представительства завода по производству плит перекрытия ПБ шапка сайта сжимается при уменьшении экрана и все изображения становятся меньше по ширине. Мы рассмотрим другую технологию создания «резиновой» шапки для сайта.

Если основой макета Вашего сайта является «резиновая» таблица, то иногда возникает необходимость создать шапку сайта так, чтобы при изменении ширины окна браузера и при разных разрешениях монитора свободное место заполнялось узором. Технологии создания резинового сайта читайте в нашей статье Как создать резиновый сайт. Технологии создания бесшовного узора читайте в нашей статье Как создать бесшовный узор для фона сайта.

В этой статье мы рассматриваем технологию создания «резиновой» шапки сайта.

Мы будем создавать web-страницу, как показано на рисунке 1. Также Вы можете просмотреть ее по этой ссылке. Изменяйте ширину браузера и понаблюдайте, как работает «резиновая» шапка сайта.

Рисунок 1

Шапка сайта создана из изображения, показанного на рисунке 2.

Рисунок 2

Нарезка изображений для создания «резиновой» шапки

1. Откройте в Photoshop файл shapka.jpg. Скачать файл можно здесь.

2. Установите направляющие как на рисунке 3, «вытянув» их из линейки файла. Если линейки не отображаются, выполните команду View - Rules (Вид - Линейки).

Рисунок 3

3. Включите функцию Snap в меню View (Вид).

4. Инструментом прямоугольного выделения  выделите часть изображения до первой направляющей (рис. 4). При выделении пунктирная линия выделения должна «прилипать» к направляющей благодаря включенной функции Snap. Это обеспечивает точность выделения при нарезке изображения.

Рисунок 4

5. Из выделенной части создайте новый файл, сохраните под именем shapka_01.jpg. Ниже приведена последовательность команд для создания нового файла из выделенной зоны:

  • Edit - Copy (Правка - Копировать);
  • File - New (Файл - Новый), нажать OK;
  • Edit - Paste (Правка - Вставить);
  • Layer - Flatten Image (Слой - Соединить слои):
  • File - Save As… (Файл - Сохранить как…), задать имя файла shapka_1.jpg.

Результат на рис. 5.

Рисунок 5

6. Аналогичным образом инструментом прямоугольного выделения выделите часть изображения между направляющими (рис. 6).

Рисунок 6

7. Из выделенной части создайте новый файл, сохраните под именем shapka_2.jpg. Результат на рисунке 7.

Рисунок 7

8. Сделаем из файла shapka_2.jpg повторяющийся узор. Для этого сначала увеличьте холст изображения вправо ровно в два раза больше. Для этого выполните команду Image-Image Size… (Изображение-Размер холста…) и увеличьте размер по ширине в два раза (у меня этот размер равен 65х2=130 пикселей), анкор поставьте в левый средний квадрат, как на рисунке 8. Результат на рисунке 9.

Рисунок 8

Рисунок 9

9. Выделите цветную часть изображения. Скопируйте этот фрагмент командой Edit-Copy (Редактировать-Копировать), а затем вставьте Edit-Paste (Редактировать-Вставить).

10. Откройте палитру слоев Window-Layers (Окно-Слои). В палитре должно быть два слоя, как на рис. 10.

Рисунок 10

11. Инструментом перемещения  сдвиньте верхний слой и установите, как показано на рисунке 11.

Рисунок 11

12. Теперь верхний слой надо развернуть по горизонтали. Для этого выполните команду Edit-Transform-Flip Horizontal (Редактировать-Трансформация-Развернуть по горизонтали). Результат на рисунке 12.

Рисунок 12

13. Склейте все слои командой Layer-Flatten Image (Слой-Выполнить сведение). В результате в палитре слоев у Вас должен снова образоваться один слой (рис. 13).

Рисунок 13

14. Сохраните файл. Изображения для «резиновой» шапки готовы.

15. Дальше создаем саму шапку. Откройте файл шаблона web-страницы. Шаблон можно скачать здесь.

16. Для создания «резиновой» таблицы, нам необходимо знать размеры изображения shapka_1.jpg. Откройте в Photoshop файл shapka_1.jpg. Выполните команду Image - Image Size (Изображение - Размер изображения). Установите параметры, как на рисунке 14.

Рисунок 14

17. Код страницы для «резиновой» шапки приведен на рисунке 15.

Рисунок 15

18. Ячейка с фоном shapka_2.jpg будет «резиновой», т.к. в коде не описан параметр ширины ячейки width и она будет растягиваться в зависимости от свободного места экрана. Обратите внимание, что для первой ячейки мы делаем ширину width="347", т.е. меньше на 2px, чем ширина изображения shapka_1.jpg.

19. Откройте шаблон в блокноте и измените код, как показано на рисунке 15.

20. Запустите web-страницу в браузере. Результат на рис. 16.

Рисунок 16