Учебник по HTML и CSS |
|
Статьи |
Применение таблицТаблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах. Создание декоративной рамкиДля создания желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на веб-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании изображения следует в первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со скругленными углами. Рис. 1. Прямоугольная рамка с закругленными углами Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и решите для себя, насколько близко располагается он к границе. Замечание Вообще-то отступы от текста до рамки не обязательно регулировать с помощью ширины рисунков, можно воспользоваться стилевым свойством padding, применяя его к ячейке с содержимым. Рис. 2. Изображение, разрезанное на элементы После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, текст, например. Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по высоте. В результате получим восемь графических изображений представленных в табл. 1.
После создания нужных фрагментов формируем таблицу размером 3х3 ячейки, как показано на рис. 3. Рис. 3. Таблица для создания рамки Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков — уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой (пример 1). Пример 1. Создание декоративной рамки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <style type="text/css"> #content { padding: 5px; /* Поля вокруг содержимого */ } </style> </head> <body> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="13" width="12"><img src="01.gif" width="12" height="13"></td> <td background="02.gif" height="13"></td> <td height="13" width="14"><img src="03.gif" width="14" height="13"></td> </tr> <tr> <td background="04.gif"></td> <td id="content">Содержимое</td> <td background="06.gif"></td> </tr> <tr> <td height="13"><img src="07.gif" height="13"></td> <td background="08.gif"></td> <td height="13"><img src="09.gif" height="13"></td> </tr> </table> </body> </html> В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега <IMG>, а вот горизонтальные и вертикальные линии задаются с помощью фона ячейки (параметр background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width="400" на width="100%", рамка будет отображаться по-прежнему корректно. Замечание Не обязательно указывать ширину всех ячеек в колонке, достаточно задать ширину первой ячейки и нижерасположенные ячейки будут подстраиваться под нее. Приведенный способ позволяет создавать рамки практически любого вида. Добавление тениДобавление тени к изображению или блоку текста происходит практически аналогично созданию декоративной рамки. Вначале готовим исходную картинку с тенью (рис. 4), а затем посредством разрезания превращаем ее в набор фрагментов, которые необходимо распределить по ячейкам таблицы. Рис. 4. Исходное изображение тени В конечном итоге понадобится пять изображений, которые представлены в табл. 2.
Заглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной. Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (02.gif). Рис. 5. Таблица для создания тени Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью параметра background тега <TD> (пример 2). Пример 2. Создание тени <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Обратите внимание, что в данном примере выравнивание в правой верхней ячейке задается по верхнему краю через атрибут valign. Без этого действия соответствующая заглушка для тени не будет располагаться в нужном месте. Результат данного примера показан на рис. 6. Рис. 6. Добавление тени к блоку текста |
При использовании материалов сайта ссылка на comnew.ru обязательна! |