Будь умным!


У вас вопросы?
У нас ответы:) SamZan.ru

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML-2009. ИСПОЛЬЗОВАНИЕ ТАБЛИЦ ДЛЯ ВЕРСТКИ

Работа добавлена на сайт samzan.ru: 2016-03-13

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 24.1.2022

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009

ИСПОЛЬЗОВАНИЕ ТАБЛИЦ ДЛЯ ВЕРСТКИ

Лабораторная работа 8.2.

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

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. Добавление тени к блоку текста

Покажите результат работы преподавателю.




1.  2 О некоторых вопросах применения судами законодательства о труде Изменения и дополнения- Постановл
2. Науки о человеке и обществе
3. Виды мониторинга- ~ в зависимости от масштабов системы мониторинга ~ глобальный национальн
4. 23 декабря 2013 г
5. Рождество Насти или Метаморфозы Зазеркал
6. на тему Разработка программы маркетинга трикотажных изделий ЗАО Трансфлот
7. Hed10 4.1.2 Код страницы загружаемой во фрейм menu11 4
8. Конкуренция и ее виды
9. Тема - Оподаткування суб~єктів підприємницької діяльності Мета - Розрахунок податку на додану вартість по
10. Современные криптографические методы.html
11. .2. Экономические методы управления Особенностью экономических методов управления является то что они не
12. Лекция 14- Политические элиты Возникновение понятия и теории элит 2
13. тематических наук профессор Институт физических проблем РАН
14.  232055 Вильнюс ул1
15. Понятие культуры в культурной антропологии некоторые тенденции
16. Мастерство сатирического изображения действительности в одном из произведений русской литературы XIX века
17. Рациональные выражения
18. Введение В первой половине XIX века государственный и общественный порядок в Российской империи находился
19. Гоголь Н.В.
20.  Обучение чтению и письму С какого возраста нужно начинать обучение грамоте А грамота у всех народов ка