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

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

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

Мы будем создавать 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", т.е. меньше на 2 px, чем ширина изображения shapka_1.jpg.
  19. Откройте шаблон в блокноте и измените код, как показано на рисунке 15.
  20. Запустите web-страницу в браузере. Результат на рис. 16.

    Рисунок 16