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

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

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

Мы будем создавать 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