Элементы сайта
«Резиновая» шапка сайта
Если основой макета Вашего сайта является «резиновая» таблица, то иногда возникает необходимость создать шапку сайта так, чтобы при изменении ширины окна браузера и при разных разрешениях монитора свободное место заполнялось узором. Технологии создания резинового сайта читайте в нашей статье Как создать резиновый сайт. Технологии создания бесшовного узора читайте в нашей статье Как создать бесшовный узор для фона сайта.
В этой статье мы рассматриваем технологию создания «резиновой» шапки сайта.
Мы будем создавать 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