Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.
1. Создание декоративной рамки
Для создания желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на веб-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании изображения следует в первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со скругленными углами.
Рис. 1. Прямоугольная
рамка с закругленными углами
Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и решите для себя, насколько близко располагается он к границе.
Рис. 2. Изображение,
разрезанное на элементы
После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, текст, например.
Фрагменты 2 и 7 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 5, только их сокращаем по высоте. В результате получим восемь графических изображений представленных в табл. 1.
|
Табл. 1. Рисунки, необходимые для создания рамки |
||
|
Рисунок |
Положение |
Имя файла |
|
Левый верний угол |
01.gif |
|
|
Верхняя горизонтальная линия |
02.gif |
|
|
Правый верхний угол |
03.gif |
|
|
Левая вертикальная линия |
04.gif |
|
|
Правая вертикальная линия |
05.gif |
|
|
Левый нижний угол |
06.gif |
|
|
Нижняя горизонтальная линия |
07.gif |
|
|
Правый нижний угол |
08.gif |
После создания нужных фрагментов формируем таблицу размером 3х3 ячейки, как показано на рис. 3.
Рис. 3. Таблица для создания рамки
Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков - уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой (tabl_verstka_16.html).
В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега <IMG>, а вот горизонтальные и вертикальные линии задаются с помощью фона (стилевой параметр background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width="400" на width="100%", рамка будет отображаться по-прежнему корректно.
Приведенный способ позволяет создавать рамки практически любого вида.
2. Самостоятельно создайте произвольную рамку для страницы и сохраните результаты работы в файл tabl_verstka_17.html
3. Добавление тени
Добавление тени к изображению или блоку текста происходит практически аналогично созданию декоративной рамки. Вначале готовим исходную картинку с тенью (рис. 4), а затем посредством разрезания превращаем ее в набор фрагментов, которые необходимо распределить по ячейкам таблицы.
Рис. 4. Исходное изображение тени
В конечном итоге понадобится пять изображений, которые представлены в табл. 2.
|
Табл. 2. Рисунки, необходимые для создания тени |
||
|
Рисунок |
Положение |
Имя файла |
|
Вертикальная тень |
1_01.gif |
|
|
Горизонтальная тень |
1_02.gif |
|
|
Правый нижний уголок тени |
1_03.gif |
|
|
Правая верхняя заглушка |
1_04.gif |
|
|
Левая нижняя заглушка |
1_05.gif |
Заглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной.
Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (1_01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (1_02.gif).
Рис. 5. Таблица для создания тени
Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью параметра background тега <TD> (tabl_verstka_18.html).
Обратите внимание, что в данном примере выравнивание в правой верхней ячейке задается по верхнему краю через атрибут valign. Без этого действия соответствующая заглушка для тени не будет располагаться в нужном месте.
Результат данного примера показан на рис. 6.
Рис. 6. Добавление тени к блоку текста
Покажите результат работы преподавателю.