Создание графических панелей (HTML + CSS)

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

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

Чтобы панель была красивой, ей нужно придать объем, декоративные границы, тени, поэтому без графики здесь не обойтись. Самый простой способ — всю панель сохранить как изображение и в 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></td>
    <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. Окончательный пример можно скачать здесь.

Комментарии

Оставить комментарий »

 
Ta2i4
16 августа 2010, 7:44
#1
 

Спасибо! Полезная статья.

rost
9 сентября 2010, 13:59
#2
 

Хорошая статья, объяснено доходчиво)

Helly
7 февраля 2011, 14:58
#3
 

К сожалению, табличная верстка - это уже моветон.

Joker-jar
7 февраля 2011, 15:31
#4
 

Я согласен отчасти. Но, считаю, что сразу начинать с блочной верстки тоже неправильно. Все, кто пользуется и знает блочную верстку, знают также и о принципах табличной верстки, не правда ли? С нее, к тому же, проще начать изучение основ

André
13 февраля 2011, 1:26
#5
 

Спасибо Автору за статью !..

андрей
14 марта 2011, 9:54
#6
 

не знаю почему, но у меня браузер не отображал изображения пока я не убрал слеши в ссылках

Joker-jar
14 марта 2011, 12:35
#7
 

Зависит от настроек веб-сервера и места расположения контента. Ну отлично, раз разобрались :P

Николай
20 июля 2012, 0:45
#8
 

Уважаемый админ в 5 абзаце </tr> нужно поменять на </td>

Joker-jar
20 июля 2012, 10:46
#9
 

Николай, вижу, спасибо

Алексей
15 августа 2012, 12:46
#10
 

Joker-jar, подскажите!
В редакторе набираю:

<html>
  <head>
    <title>Главная страница</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head>
  <body>
     <table width="300px" height="35px">
  <tr>
    <td width="15px"><img src="left fon.jpg"></td>
    <td style="background: url(fon center.jpg) repeat-x"></td>
    <td width="15px"><img src="right fon.jpg"></td>
  </tr>
</table>
  </body>
</html>

В браузере боковые панели видны, а центральной нету, в чем ошибся??? (файлы все сохранены в папке TD1/www)

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий