Фильтры
Фильтры позволяют преобразовывать все элементы, у которых атрибут style обладает свойством filter. А именно, <BODY>, <BUTTON>, <DIV>, <IMG>, <INPUT>, <MARQUEE>, <SPAN>, <TABLE>, <TD>, <TEXTAREA>, <TFOOT>, <TH>, <THEAD>, <TR>. При этом для элементов <DIV> и <SPAN> надо указывать либо точное расположение, либо их размеры.
Синтаксис:
{filter: filtername (fparameter1, fparameter2…)}
где filtername – имя фильтра, fparameter – его параметры.
Таблица 1.7. Основные фильтры
Фильтр |
Описание |
Alpha |
Устанавливает уровень прозрачности элемента. Alpha(opacity=, finishOpacity=, style=, startX=, startY=, finishX=, finishY=)
Например: <IMG src=”dot.gif” style=”filter: Alpha(opacity=10, finishOpacity=100, style=2)” |
Blur |
Размытый образ, создающий эффект движения с большой скоростью. Blur(add=, direction=, strength=)
Например: <DIV style=”font: 40 pt bold; color: red; position: absolute; top:0; filter:Blur(add=1, direction=45, strength=10)”> Размытый образ </DIV> |
Chroma |
Делает указанный цвет прозрачным. Chroma(color=) где соlor – цет, который будет прозрачным. Например, следующий код делает белый цвет рисунка прозрачным: <IMG id=”imgDot” src=”dot.bmp” style=”position: absolute; width: 77 px; height: 77px; filter: Chroma(Color=white)”> |
DropShadow
|
Создаёт тень в виде офсетного образа. DropShadow(color=, offX=, offY=, positive=)
Например: <SPAN style=”font: 80pt bold; color: navy; posiyion: absolute; top: 80px; filter:DropShadow(color=red, offX=5, offY=10, positive=1)”> Текст с тенью </SPAN> |
FlipH, FlipV |
Создают горизонтальный и вертикальный зеркальный образ. Например: <FONT style=”font: 40 pt bold”> <SPAN style=”position: absolute; left:0; top: 0pt; color: red”> Mr Big </SPAN> <SPAN style=”position: absolute; left:0; top: 40pt; color: navy; filter: flipV”> Mr Big </SPAN> |
Glow |
Создаёт ореол вокруг объекта. Glow(color=, strength=)
Например: <SPAN style=”font: 40 pt bold; color: yellow; position: absolute; top: 0; filter:Glow(Color=green, Strength=5)”> Ореол вокруг объекта <SPAN> |
Grayscale |
Переводит изображение в чёрно-белый формат. Например: <IMG src=”dot.gif” style=”filter: Gray”> |
Invert |
Инвертирует компоненты и интенсивность цвета. |
Wave |
Создаёт волнообразное искажение образа вдоль оси абсцисс. Wave(add=, freq=, lightStrength=, phase=, strength=)
Например: <SPAN style=”font: 80 pt bold; color: navy; position: absolute; top: 80 px; filter:Wave(add=0, freq=5, lightStrength=100, phase=10, strength=10)”> Волнообразное искажение образа </SPAN> |
XRay |
Создаёт чёрно-белый рентгеновский образ элемента. |
Задание 15. Создать HTML – документ с применением указанных фильтров.
Списки и таблицы
Списки и таблицы являются наиболее удобными средствами форматирования Web-страницы.
Списки
Документ для лучшего восприятия должен быть не только отформатирован, но и продуманно структурирован. Структурировать информацию можно при помощи списков и таблиц. Наиболее часто используемыми списками является маркированный, упорядоченный (или нумерованный) и список определений. Описание первых двух приведено в табл. 1.8.
Таблица 1.8. Маркированные и упорядоченные списки
Тег |
Описание |
<LI> |
Как правило, парный тег. Определяет элемент в маркированном и упорядоченном списке. Используется совместно с парными тегами <UL> и <OL>. Синтаксис: <LI type=1 | A | a | I | i value=value >
|
<UL>, <OL> |
Текст, помещённый в пару тегов <UL> … </UL>, образует маркированный список, а в пару тегов <OL> … </OL> - нумерованный список. Элементы тегов размещаются между парами тегов <LI> … </LI>. <OL type=1 | A | a | I | i value=value > |
Задание 16. Создать двухуровневый (разнотипный) список «Времена года».
Кроме маркированного и упорядоченного списка, разработчиками также часто используется список определений, теги которого описаны в табл. 1.9.
Таблица 1.9. Список определений
Тег |
Описание |
<DL> |
Парный тег <DL> задаёт список определений, который представляет собой текст в форме словарной статьи |
<DT> |
Как правило, парный тег. Помечает определённый термин словаря |
<DD> |
Как правило, парный тег. Помечает определение термина, заданного тегом <DT> |
Задание 17. Создать словарь тегов HTML (буквы A и B, по 2 понятия).
Задание 18. В качестве маркера списка может быть использовано графическое изображение. Для этого достаточно для тега <LI> определить значение свойства list-style-image атрибута style или создать пользовательский стиль. Создать маркированный список с использованием графического изображения в качестве значка списка.
Таблицы
Данные в документе можно форматировать не только с помощью списков, но и таблиц. Таблицы создаются с помощью двойного тега <TABLE>. Внутри этого тега располагаются парные теги, приведённые в табл. 1.10.
Таблица 1.10. Теги таблицы
Тег |
Описание |
<TR> |
Строка таблицы. Таблица в HTML вводится по строкам, а каждая строка состоит из ячеек |
<TH> |
Ячейка заголовка. В ней текст выделен полужирным шрифтом и выровнен по центру |
<TD> |
Ячейка таблицы. В качестве содержимого ячейки может быть что угодно, от пустой ячейки до целой таблицы |
<CAPTION> |
Заголовок таблицы |
Синтаксис тега <TABLE>:
<TABLE
align=center | left | right
background=url
bgcolor=color
bordercolor=color
bordercolordark=color
bordercolorlight=color
border=n
cellpadding=n
cellspacing=n
cols=n
frame=above | below | box | insides | lhs | rhs | void | vsides
height=n
rules=all | cols | groups | none | rows
width=n
>
Приведём описание атрибутов.
align – задаёт выравнивание таблицы; по умолчанию – по левому краю;
background – URL фонового изображения;
bgcolor, bordercolor, bordercolordark, bordercolorlight – цвет фона, рамки, тени рамки и её подсветки;
border – толщина рамки в пикселах;
cellpadding – расстояние в пикселах между данными в ячейке и её границами;
cellspacing – расстояние в пикселах по вертикали и горизонтали между ячейками;
cols – число столбцов в таблице;
frame – задаёт те части таблицы, которые будут отображаться на экране. Допустимые значения: border (отображается вся рамка, используется по умолчанию), void (рамка без внешних границ), above (нет рамки в основании таблицы), below (нет рамки в верхней части таблицы), hsides (нет рамки по краям), lhs (нет рамки с правого края), rhs (нет рамки с левого края), vsides (нет рамки в основании и в верхней части таблицы);
height и width – высота и ширина таблицы либо в пикселах, либо в процентах;
rules – задаёт внутренние разделительные линии, которые будут отображаться. Допустимые значения: none (линии не отображаются), groups (отображаются горизонтальные линии между группами элементов в таблице), rows (отображаются горизонтальные линии), all (отображаются все линии).
Задание 19. Сконструировать таблицу телефонов и адресов электронной почты 3-4 человек (адрес – гиперссылка).
Задание 20. Таблицы позволяют разработчику с лёгкостью сконструировать внешний вид Web – страницы. Создайте страницу, образованную таблицей из 2 строк и 2 столбцов. В левую верхнюю ячейку таблицы внедрён рисунок, а каждая из оставшихся ячеек обладает своим фоновым рисунком. Кроме того, в левой нижней ячейке располагается список с пользовательским маркером.
Задание 21. Другим применением таблиц может быть выравнивание полей в формах. Создайте бланк заказа. (ФИО, Адрес, Город, Код). При помещении текста и полей ввода в соответствующих ячейках таблицы поля будут автоматически выровняны. Задавайте значение атрибута colspan равнм 3 в первых двух строках таблицы. Это позволит вам подогнать размеры полей ввода в третьей строке так, чтобы суммарно три нижних ячейки имели тот же размер, что и одна верхняя.