Кухня HTML-верстальщика

    Начало
    Глава 1
    Глава 2
    Глава 3
    Глава 4
    Глава 5
    Глава 6
    Глава 7
    Глава 8
    Глава 9
    Глава 10
    Глава 11
    Глава 12
    Глава 13
    Глава 14

3. Рамки в HTML и их создание

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

Параметр border

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

Internet Explorer Netscape Opera
 Internet Explorer, работа в интернете использование рамок, создание рамок, программирование в HTML Opera, применение рамок при создании сайта

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

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

Пример 3.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 задает расстояние от рамки до содержимого таблицы.

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

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

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

<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 или cellpadding (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы.
Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы.
Замечание: Перенос строки в тексте кода HTML автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк.

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

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

Заливка цветом, постоянная работа

Рис. 3.2.                                        Рис. 3.3

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

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

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

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

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

  • если размер таблицы задается в пикселах, надо задать фиксированные размеры всех ячеек;
  • когда ширина таблицы указана в процентах, внутри рамки нужно поместить текст, который «распирает» внутреннюю ячейку до нужной ширины; при отсутствии текста или другого содержимого внутри таблицы с рамкой, ее ширина окажется гораздо шире желаемой;
  • в ячейках, где проходит рамка, не должно быть никаких символов неразделяемого пробела (& nbsp;), что так любят автоматически добавлять некоторые редакторы веб-страниц;
  • перенос строки автоматически добавляет в текст пробел, поэтому между открывающим и закрывающим тегами <TD> и </TD> текст следует писать в одну строку, чтобы не было зазоров между ячейками.

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

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

Декоративная рамка, частичная занятость

Рис. 3.4.

Image Ready, свободный график работы

Рис. 3.5.

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

Декоративные элементы рамки, независимая работа

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

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

<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="spacer.gif" height="13"
width="1"></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" width="12"> </td>
</tr>
<tr>
<td height="13"><img src="7.gif" width="12" height="13"></td>
<td background="8.gif"><img src="spacer.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 пиксел (в примере файл называется spacer.gif). Делается это для того, чтобы обмануть браузер Netscape, который не показывает содержимое ячейки, если она пуста.
Приведенный способ позволяет создавать рамки практически любого вида.

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

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

Стили рамок, работа верстальщика HTML

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

Первые две типа рамок – dotted и dashed поддерживаются браузерами Netscape и Internet Explorer только со старших версий.
Рамка задается проще всего параметром border, который сразу указывает ее вид, толщину и цвет.

Пример 3.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 не добавляет рамку для таблиц и ограничивает ширину рамки ее содержимым.

top

Rambler's Top100

Кухня HTML-верстальщика © Copyright 2008г.

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь

Используются технологии uCoz