GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Создание рамок(15988)
Особенности верстки веб-страниц(12696)
Правила грамотной верстки сайта(9551)
Как оформить таблицу?(9537)
Несколько слов о <META HTTP-EQUIV...>(8647)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » HTML » Создание рамок

Создание рамок


Влад Мержевич
vlad@htmlbook.ru
http://www.htmlbook.ru/

Информация, обведенная рамкой, позволяет отделить один материал на веб-странице от другого и привлечь внимание читателя. Кроме того, рамка вносит элегантность в оформление сайта.

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

Использование параметра таблицы border

Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет. Рамки созданные таким образом отличаются по своему виду в разных браузерах (рис. 1).

Internet ExplorerNetscapeOpera
Рис. 1. Рамка полученная с помощью параметра border

Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной.

Пример 1. Использование параметра border

<table border=2 bordercolor=#ff0000 width=100 height=100 cellpadding=6 cellspacing=0 bgcolor=#e0e0e0>
<tr>
<td>Содержимое</td>
</tr>
</table>

Параметр border определяет толщину рамки, bordercolor - ее цвет, cellpadding задает расстояние от рамки до содержимого таблицы.

Использование параметра таблицы cellspacing и bgcolor

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

Пример 2. Использование параметра bgcolor

<table cellpadding=6 cellspacing=1 border=0 width=100 height=100 bgcolor=#000000>
<tr>
<td bgcolor=#ffffff>
<table>
<tr>
<td>Содержимое</td>
</tr>
</table>
</td>
</tr>
</table>

Толщину рамки можно варьировать, изменяя значение параметра cellspacing, а отступы от края границы до содержимого - параметром cellpadding.

Вложенные таблицы

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

Если мы возьмем прямоугольник из, например, красной бумаги и сверху на него наложим еще один прямоугольник белого цвета, чуть меньшего размера, то увидим красную рамку. Только вместо листов бумаги используем тег TABLE, а цвет задаем параметром bgcolor.

Пример 3. Использование вложенных таблиц

<table width=300 height=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#FF0000>
<tr>
<td><table border=0 cellspacing=0 cellpadding=10 bgcolor=#FFFFFF width=300 height=300>
<tr>
<td align=center>Содержимое</td>
</tr>
</table>
</td>
</tr>
</table>

В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor задаем цвет рамки, cellspacing присваиваем нулю, а cellpadding управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка.

Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан белый. Параметр cellspacing или cellpading (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы.

Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы.

Замечание: Перенос строки в тексте автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк.

Заливка ячеек таблицы цветом

Использование цвета фона ячеек таблицы - один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 2) и заливаем крайние ячейки нужным цветом (рис. 3).


Рис. 2

Рис. 3

Толщина рамки определяется шириной и высотой ячеек. Обязательно следует поместить внутри этих ячеек таблицы распорку - прозрачный рисунок размером 1 на 1 пиксел (в примере он называется 1x1.gif), иначе в Netscape этот способ работать не будет.

Пример 4. Создание рамки заливкой цветом ячеек таблицы

<table width=200 border=0 height=200 cellspacing=0 cellpadding=0>
<tr bgcolor=#FF6633>
<td width=2 height=2><img src=1x1.gif width=2 height=2></td>
<td height=2><img src=1x1.gif width=2 height=2></td>
<td width=2 height=2><img src=1x1.gif width=2 height=2></td>
</tr>
<tr>
<td width=2 bgcolor=#FF6633><img src=1x1.gif width=2 height=2></td>
<td align=center>Содержимое</td>
<td width=2 bgcolor=#FF6633><img src=1x1.gif width=2 height=2></td>
</tr>
<tr bgcolor=#FF6633>
<td width=2 height=2><img src=1x1.gif width=2 height=2></td>
<td height=2><img src=1x1.gif width=2 height=2></td>
<td width=2 height=2><img src=1x1.gif width=2 height=2></td>
</tr>
</table>

В данном примере делается красная рамка толщиной 2 пиксела, она смотрится наиболее элегантно. Параметры таблицы cellspacing и cellpadding приравниваются нулю, чтобы рамка оставалась нужной толщины и без зазоров. Если поместить внутрь такой таблицы текст, он будет плотно прилегать к рамке, что некрасиво и плохо читается. Чтобы добавить отступы можно создать для этой цели дополнительные ячейки, использовать вложенную таблицу или воспользоваться стилями.

Замечание: Приведенный способ чувствителен к разным параметрам, поэтому, в случае неправильной отрисовки рамки следует проверить следующее:

  • если размер таблицы задается в пикселах, надо задать фиксированные размеры всех ячеек;

  • когда ширина таблицы указана в процентах, внутри рамки нужно поместить текст, который "распирает" внутреннюю ячейку до нужной ширины; при отсутствии текста или другого содержимого внутри таблицы с рамкой, ее ширина окажется гораздо шире желаемой;

  • в ячейках, где проходит рамка, не должно быть никаких символов неразделяемого пробела (&nbsp;), что так любят автоматически добавлять некоторые редакторы веб-страниц.

  • перенос строки автоматически добавляет в текст пробел, поэтому между открывающим и закрывающим тегами <td> и </td> текст следует писать в одну строку, чтобы не было зазоров между ячейками.

Декоративная рамка

Для создания желаемой рамки ее необходимо предварительно нарисовать в каком-нибудь графическом редакторе. На рис. 4, например, показана рамка со скругленными углами. Затем это изображение разрезаем на 9 частей, помеченные на рисунке 5 оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или другой подобной.

Рис.4. Отрисованный прямоугольник с закругленными рамками Рис.5. Разрезанный на элементы рисунок

После разрезания рисунка на части получим 8 фрагментов:

РисунокПоложениеИмя файла
Левый верний угол1.gif
Верхняя горизонтальная линия2.gif
Правый верхний угол3.gif
Левая вертикальная линия4.gif
Правая вертикальная линия6.gif
Левый нижний угол7.gif
Нижняя горизонтальная линия8.gif
Правый нижний угол9.gif

Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3, как показано на рис. 2 и в ее ячейках размещаем созданные рисунки.

Пример 5. Создание декоративной рамки

<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>&nbsp;</td>
<td align=center>Содержимое</td>
<td background=6.gif width=12>&nbsp;</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, который не показывает содержимое ячейки, если она пуста.

Приведенный способ позволяет создавать рамки практически любого вида.

Использование стилей

С помощью стилей рамку можно применить к любому блочному тегу, например, параграфу (тег P), таблице и тегу DIV. Стили позволяют создать рамку проще и удобней, чем с использованием таблиц и предоставляют разные виды рамок, которые показаны на рис. 6..


Рис. 6. Вид рамок задаваемых с помощью стилей

Первые две типа рамок - dotted и dashed поддерживаются браузерами Netscape и Internet Explorer только со старших версий.

Рамка задается проще всего параметром border, который сразу указывает ее вид, толщину и цвет.

Пример 6. Использование стилей

<html>
<head>
<style type="text/css">
P { border: double 4px #336699; padding: 5px}
</style>
</head>

<body>
<p>При работе на вычислительной технике необходимо 
сесть так, чтобы руки с предплечьями образовывали прямой 
угол, глаза поставить на расстояние 30-40 см от рабочей 
поверхности монитора.
</p>
</body>
</html>

В примере используется двойная рамка, толщина которой складывается из толщины линий и расстояния между ними. Чтобы рамка не соприкасалась с текстом, задан отступ от рамки до содержимого параметром padding.

Замечание: Браузер Netscape 4.x не добавляет рамку для таблиц и ограничивает ширину рамки ее содержимым.

 
19.05.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.