Рамка со скругленными углами
Для создания рамки со скругленными краями необходимо ее предварительно нарисовать в каком-нибудь графическом редакторе (рис. 1). Затем это изображение разрезаем на 9 частей (рис. 2), помеченные на рисунке оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или подобной.
 |
 |
|
Рис.1. Отрисованный прямоугольник с закругленными
рамками
|
Рис.2. Разрезанный на элементы рисунок
|
После разрезания рисунка и обрезания фрагментов получим 8 изображений:
| Рисунок | Положение | Имя файла |
|---|---|---|
 |
Левый верний угол | 1.gif |
 |
Верхняя горизонтальная линия | 2.gif |
 |
Правый верхний угол | 3.gif |
 |
Левая вертикальная линия | 4.gif |
 |
Правая вертикальная линия | 6.gif |
 |
Левый нижний угол | 7.gif |
 |
Нижняя горизонтальная линия | 8.gif |
 |
Правый нижний угол | 9.gif |
Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3 и в ее ячейках размещаем созданные рисунки.
Пример. Создание окошка со скругленными углами
| <table width="400" border="0" cellspacing="0"
cellpadding="0"> <tr> <td height="13"><img src="1.gif" width="12" height="13"></td> <td background="2.gif" height="13"><img src="1x1.gif" height=13></td> <td height="13"><img src="3.gif" width="14" height="13"></td> </tr> <tr> <td background="4.gif" width="12"> </td> <td align=center> Содержимое </td> <td background="6.gif"> </td> </tr> <tr> <td height="13"><img src="7.gif" width="12" height="13"></td> <td background="8.gif"><img src="1x1.gif" height="13" width="1"></td> <td height="13"><img src="9.gif" width="14" height="13"></td> </tr> </table> |
В таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой.
Уголки вставляем как обычные рисунки с помощью тега IMG, а вот горизонтальные и вертикальные линии следует задавать с помощью фона ячейки таблицы, параметром background. Это позволит сделать нашу рамку масштабируемой и размер ее будет изменяться в зависимости от содержимого.
Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков.
В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку - это либо пробел, либо прозрачный GIF размером 1 на 1 пиксел (в примере файл называется 1x1.gif). Делается это для того, чтобы обмануть Netscape, который не показывает содержимое ячейки, если в ней ничего нет, фон не в счет.
Главная
|