My First Site

Панели — один из любимых элементов веб-мастеров. Панель — очень универсальный элемент, его можно задействовать, например, в качестве шапки сайта:

или горизонтального меню:

Чтобы панель была красивой, ей нужно придать объем, декоративные границы, тени, поэтому без графики здесь не обойтись. Самый простой способ — всю панель сохранить как изображение и в HTML-страницу вставить в виде элемента img или как фон элемента-контейнера. В то же время данный способ является наименее гибким и удобным, так как панель будет иметь жесткие размеры. Обычно для создания "резиновых" (то есть, легко изменяющих свои размеры) панелей используют особенность браузеров обработки фоновых изображений.

Элементу-контейнеру, будь то ячейка таблицы или блок div, можно задать фоновое изображение с помощью CSS-стиля background-image. Если размеры элемента больше размера фоновой картинки, то браузер будет автоматически дублировать фоновое изображение по горизонтали и вертикали, заполняя тем самым всю область элемента фоном. Для примера создадим простое фоновое изображение размером 16x16 пикселей (изображение увеличено в 4 раза):

и используем его как фоновое изображение для таблицы размером 160x160 пикселей:

Браузер полностью заполнил таблицу фоном, продублировав фоновое изображение 10 раз по горизонтали и вертикали. При помощи CSS-стиля background-repeat можно задать режим дублирования фона: repeat-x — дублировать только по горизонтали, repeat-y — дублировать только по вертикали, repeat — дублировать по горизонтали и вертикали (по умолчанию), no-repeat — не дублировать.

Эта особенность и используется для создания графических "резиновых" панелей. Алгоритм создания панели с динамической шириной следующий:

1. Рисуем панель в графическом редакторе. Панель должна быть средней ширины, пустая (без надписей и прочего):

2. Определяем участок панели с однородной текстурой, растянутой по горизонтали. Для этого необходимо выделить обрамляющие части (делаем это мысленно, то есть линии не рисуем):

3. Левую и правую обрамляющие части необходимо вырезать из общей панели и сохранить как отдельные изображения panel_left.jpg и panel_right.jpg;

4. Из средней части вырезаем полоску изображения высотой равной высоте панели и шириной 1-5 пикселей и также сохраняем как отдельное изображение panel_center.jpg. В результате у нас должно получиться три небольших изображения: panel_left.jpg, panel_center.jpg, panel_right.jpg:

5. Создаем HTML-таблицу с одной строкой и тремя ячейками. Задаем высоту таблицы равную высоте панели и произвольную ширину. Первой и третьей ячейке задаем ширину, соответствующую ширине изображений-обрамлений panel_left.jpg и panel_right.jpg:

<table width="300px" height="35px">
  <tr>
    <td width="8px"></td>
    <td></tr>
    <td width="8px"></td>
  </tr>
</table>

6. В первую и третью ячейку таблицы помещаем элементы img, отображающие наши изображения-обрамления. Центральной ячейке задаем фоновое изображение panel_center.jpg и дублирование по горизонтали. Это можно сделать одним CSS-стилем background:

<table width="300px" height="35px">
  <tr>
    <td width="8px"><img src="panel_left.jpg"></td>
    <td style="background: url(panel_center.jpg) repeat-x"></td>
    <td width="8px"><img src="panel_right.jpg"></td>
  </tr>
</table>

7. Необходимо убрать зазор между ячейками таблицы при помощи стиля border-collapse, а также убрать поля в первой и третьей ячейке при помощи стиля padding. Это позволит всем изображениям плотно примкнуть друг к другу:

<style>
  #panel {border-collapse: collapse}
  #panel .brd {padding: 0}
</style>
<table id="panel" width="300px" height="35px">
  <tr>
    <td width="8px" class="brd"><img src="panel_left.jpg"></td>
    <td style="background: url(panel_center.jpg) repeat-x"></td>
    <td width="8px" class="brd"><img src="panel_right.jpg"></td>
  </tr>
</table>

В результате мы получим панель в том же виде, какую мы ее нарисовали в графическом редакторе. Для изменения ширины панели достаточно изменить ширину таблицы. При этом можно задать ширину в процентах, тогда панель будет динамически изменять свою ширину при изменении размеров окна и разрешения экрана. На панели можно размещать контент, для этого его необходимо добавить в центральную ячейку таблицы.

Также стоит позаботиться о пользователях, у которых в браузерах отключена графика. Необходимо задать фоновый цвет панели, близкий к графическому цвету, а также указать размеры картинок в тегах img. Окончательный пример можно скачать здесь.