Учись Учиться

Визуальные фильтры

В Dynamic HTML под фильтром принято понимать некую функцию, так или иначе преобразующую внешний вид элемента на Web-странице. Преобразование осуществляется непосредственно в браузере, т. е. на стороне клиента (подключение сервера не требуется).

Следует отметить, что применение визуальных фильтров возможно только в браузерах Internet Explorer 4.x и выше. Тем не менее, горячие поклонники Microsoft Internet Explorer или разработчики, ориентирующиеся при создании Web-сайтов на показатели статистики в отношении применяемых браузеров, с помощью средств динамического HTML смогут существенно улучшить внешний вид своих электронных данных.

Визуальные динамические фильтры можно применить не ко всем элементам HTML-документа, а только к тем, которые способны определить в браузере блок прямоугольного вида. Чаще всего фильтры применяются к изображениям.

Формат записи фильтра достаточно прост и аналогичен правилам задания войств элементов с помощью тега {style}. Запись производится в следующем виде:

filter: название_фильтра(параметры),

где параметры определяются в стандартном для HTML виде:

название_параметра=значение_параметра

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

При использовании фильтров следует помнить, что некоторые из них имеют общие свойства, влияющие на характер действия заданных параметров фильтра. К таковым относятся enabled (со значением true или false, соответственно разрешающим или запрещающим применение фильтра, присоединенного к элементу документа), direction (определяет направление действия таких фильтров, как shadow, blur и др.), strength (задает интенсивность действия фильтра со значением от 0 до 255) и т. п. Часть фильтров помимо общих свойств имеют различные методы их определения (например, фильтр light).

Браузер Internet Explorer 4.x (и выше) поддерживает достаточно большое количество фильтров, широкие возможности по настройке которых представляют применение этой технологии в более выгодном свете.

Характеристика визуальных фильтров, работающих в браузере Internet Explorer:

Рассмотрим на примерах возможные варианты действия некоторых фильтров.

Фильтр WAVE

Фильтр wave создает синусоидальное искривление объекта в вертикальном направлении и имеет свойства add, enabled, freq, lightStrength, phase и strength, имеющие следующее назначение:

strength – задает интенсивность действия фильтра со значением  от 0 до 255

add – определяет необходимость добавления исходного вида объекта в его отфильтрованную интерпретацию (add=1 – добавить; add=0 – не добавлять)

freq – задает количество максимумов в волне искривления объекта;

lightstrength – добавляет эффект трехмерности гребням волны искажения объекта;

phase – определяет фазу смещения волны (ее значение задается в процентах относительно начальной фазы, равной 0).

На рис. 53 представлен результат работы фильтра с параметрами, прописанными в следующем коде:

{IMG SRC="dog.jpg" WIDTH="200" }

{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: wave(strength=10, add=0, lightstrength=20, freq=5)"}

{IMG SRC="dog.jpg" WIDTH="200"  STYLE="filter: wave(strength=5, add=0, phase=50, lightstrength=20, freq=20)"}

Рис.53 Использование визуального фильтра WAVE

Фильтр ALPHA

Данный фильтр использует такие свойства, как opacity, style и finishOpacity. Свойство opacity позволяет определить степень прозрачности объекта в интервале от 0 (полная прозрачность) до 100 (полная непрозрачность). Свойство style может принимать значения от 0 до 3.

При style=0  весь объект становится равномерно прозрачным  в соответствии со значением свойства opacity

При style=2, степень прозрачности изменяется от центра объекта к границе вписанного в объект круга (от значения opacity до значения finishOpacity).

Если свойство styie=3, то прозрачность меняется от центра объекта к его границам.

На рис. 54 представлены три примера действия фильтра alpha в соответствии с HTML-кодом:

{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: alpha(style=0, opacity=80)"}

{IMG SRC="dog.jpg" WIDTH="200"  STYLE="filter: alpha(style=3, opacity=100, finishOpacity=20)"}

{IMG SRC="dog.jpg" WIDTH="200"  STYLE="filter: alpha(style=2, opacity=100, finishOpacity=0)"}

Рис. 54. Использование визуального фильтра alpha

Фильтр dropShadow

Фильтр dropShadow создает сплошной силуэт объекта, смещенный в заданном направлении, и образует эффект тени.

Фильтр имеет следующие свойства:

color – определение цвета тени;

positive – выбор между тенью от прозрачных или непрозрачных точек объекта (при positive=1 тень будут создавать непрозрачные пиксели, а при positive=0 – прозрачные);

offX и offY – расстояние в пикселях в вертикальной и горизонтальной плоскостях, на которых будет отображаться тень от исходного объекта. Положительные значения offX и offY смещают тень, соответственно, вправо и вниз, отрицательные – влево и вверх.

На рис. 55 показано, как выглядит в браузере прозрачное gif-изображение и то же изображение с применением фильтра dropShadow с различными параметрами в соответствии с кодом:

{IMG SRC="ten.gif" }

{IMG SRC="ten.gif" STYLE="filter: dropShadow(color=#00ff00, positive=1, offX=-20, offY=30 )"}

{IMG SRC="ten.gif" STYLE="filter: dropShadow (color=#00ff00, positive=0, offX=20, offY=30 )"}

Рис. 55. Использование визуального фильтра dropShadow

Задание 3.8

Используя визуальные фильтры, создайте веб-страницу, представленную на рис. 56. При выполнении задания следует учесть следующее:

Заголовок выполнен с помощью фильтра dropShadow на основе изготовленного в PhotoShop прозрачного изображения в формате gif.

Первый ряд изображений получен  с помощью фильтра WAVE с использованием различных значений параметров.

Во втором ряду в центре – неискаженное изображение, а справа и слева от него к рисункам применен фильтр alpha.

Рис.56. Образец выполнения задания

Расположенное в центре третьего ряда изображение – результат одновременного применения сразу двух фильтров wave и alpha. Для одновременного применения запись фильтров осуществляется через пробел с указанием параметров для каждого из применяемых фильтров.

К остальным  рисункам нижнего ряда применен фильтр blur, размывающий изображение.  Использованы свойства:

ü strength, определяющее интенсивность размытия в пикселях,

ü direction, задающее направление размытия в градусах,

ü add, позволяющее демонстрировать размытое изображение на фоне исходного (add=1)

Бегущая строка

Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега {MARQUEE} … {/MARQUEE}.

Между {MARQUEE} и {/MARQUEE} могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием {IMG …}.

Формы

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

Форма представляет собой отдельную веб-страницу или часть страницы, на которой размещены разнообразные стандартные для Windows элементы интерактивного диалога: поля ввода текста, флажки и радиокнопки (переключатели) с поясняющими строками текста, раскрывающиеся списки, кнопки и т.п.

Учитывая, что форма является основным способом получения данных от пользователя – посетителя сайта, именно с проектирования и разработки содержащих ее страниц обычно начинается создание всего клиент-серверного механизма.

Форма в HTML-документе определяется в виде блока, обрамленного тэгами {FORM} и {/FORM}, между которыми располагаются тэги, задающие те или иные компоненты формы, а также играющие роль подсказок текстовые строки и ссылки на графические файлы. Кроме того, в составе тэга {FORM} записываются атрибуты, определяющие способ и характеристики обработки заключающейся в форме информации, в частности, способ пересылки ее на сервер и кодирования данных в процессе этой пересылки.

Для случая, когда предполагается отправка содержимого формы по e-mail для дальнейшей ручной расшифровки данных владельцем сайта заголовок формы может быть следующим:

{FORM ACTION="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it." или

{FORM ACTION="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it."

В этом случае, когда пользователь выполняет действие, приводящее к отправке заполненной формы (щелчок мышью на соответствующей кнопке), на его локальной ПЭВМ активизируется почтовый клиент и автоматически отправляет (или подготавливает к отправке, помещая в папку Исходящие) письмо, содержащее в поле Кому указанный в параметре ACTION адрес e-mail, к которому в качестве прикреплен файл данных формы.

Каждому отдельному элементу формы соответствует тэг {INPUT}, параметр TYPE которого указывает тип данного элемента, контейнер {TEXTAREA}…{/TEXTAREA} (для многострочного текстового окна) или контейнер {SELECT}...{/SELECT} (для раскрывающегося списка). Рассмотрим подробнее каждый из возможных элементов интерфейса с его параметрами.

Поле ввода текста {INPUT TYPE=text}

Поле ввода текста представляет собой прямоугольное поле, предназначенное для ввода одной строки текста.

При нажатии во время ввода текста в поле ввода TEXT клавиши Enter браузер автоматически инициирует отправку на сервер информации, содержащейся в данной форме (даже если она еще не заполнена до конца), независимо от наличия в ее составе кнопки Submit.

Поле ввода пароля (INPUT TYPE=password)

Прямоугольное однострочное текстовое поле, отличающееся от уже рассмотренного только тем, что вводимый текст отображается в нем только как соответствующее количество символов *.

Многострочная текстовая область {TEXTAREA} … {/TEXTAREA}

Прямоугольное текстовое поле с заданными шириной и высотой в HTML кодируется при помощи контейнера {TEXTAREA} … {/TEXTAREA}. Если объем вводимого текста превысит размеры поля, то автоматически генерируется вертикальная линейка прокрутки.

Текст, который должен быть изначально выведен в данной области, нужно ввести между тэгами {TEXTAREA} и {/TEXTAREA}.

Флажки (INPUT TYPE=checkbox)

Флажки служат для ответа пользователя по типу «Да»-«Нет» либо для предоставления возможности произвольного выбора из нескольких опций.

Текстовая строка – описание назначения данного флажка вставляется отдельно как обычный текст, расположенный рядом с флажком.

Радиокнопки (переключатели) (INPUT TYPE=radio)

В отличие от флажков, переключатели позволяют выбрать только одну из представленных опций. Одиночная радиокнопка функционально аналогична одиночному флажку, но если ее пометить хотя бы однажды, сбросить выделение уже нельзя.

Текстовая строка — описание назначения данной радио кнопки вставляется отдельно как обычный текст, расположенный рядом с ней.

Раскрывающиеся списки

Списки предназначаются для предоставления пользователю возможности выбора одной или нескольких опций, или для использования в качестве своеобразного меню, содержащего названия страниц, к которым может быть осуществлен переход. В HTML кодируется при помощи контейнера {SELECT}... {/SELECT}.

Если задан параметр MULTIPLE и/или значение параметра SIZE больше 1, то список выводится развернутым (тогда значение SIZE определяет количество одновременно видимых на экране пунктов списка, для просмотра остальных используется линейка прокрутки). В противном случае (при отсутствии параметра MULTIPLE и SIZE=1) выводится список, раскрывающийся щелчком мыши на кнопке .

Значения отдельных пунктов списка определяются при помощи тэгов {OPTION}, каждый из которых определяет один пункт. Название пункта записывается после тэга  {OPTION}.

Поле ввода имени пересылаемого файла (INPUT TYPE=file)

Поле такого типа предназначено для обеспечения пересылки на сервер вместе с заполненной формой указанного пользователем файла. Имя файла (и путь к нему) вводятся в однострочном текстовом поле или, после щелчка мышью на расположен ной справа кнопке Обзор требуемый файл выбирается в стандартном окне открытия файла.

Командные кнопки

1. Кнопка «Очистка формы» (INPUT TYPE=reset).

Щелчок мышью на этой кнопке очищает форму (т. е. при водит ее к изначальному виду, в том числе восстанавливая изначальные значения в текстовых полях и изначальную пометку флажков и радиокнопок).

2. Кнопка «Отправка формы» (INPUT TYPE=submit).

Щелчок мышью на данной кнопке вызывает отправку информации формы на сервер (в соответствии с указанным в тэге {FORM} методом обработки).

3. Пользовательские командные кнопки стандартного вида
(INPUT TYPE=button).

Кнопка, вид и функционирование которой является типовым для Windows, а назначение целиком определяется алгоритмом работы CGI-программы или скрипта, куда передается имя кнопки (NAME). Эти кнопки обычно используются также совместно со скриптами.

4. Графические командные кнопки (INPUT TYPE=image).

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

Задание 3.6

Создайте страничку, предназначенную для сбора сведений о посетителях вашего сайта. Сведения должны пересылаться по электронной почте на ваш адрес (если его у вас нет, придумайте – например, VasyaIvanov@Ivanov.kirov.ru) и никак не кодироваться.

Используйте следующие элементы пользовательских форм:

ü текстовая строка;

ü поле для ввода пароля;

ü поле выбора локального файла для загрузки на Web-сервер;

ü опция выбора нескольких вариантов данных;

ü опция переключения между несколькими вариантами данных;

ü текстовое поле;

ü ниспадающее меню;

ü список наименований;

ü кнопка отправления данных;

ü кнопка сброса данных.

Ваша страничка может выглядеть, например, так:

1. Используя в качестве способа определения стилевого шаблона внедрение в документ или включение в теговые конструкции, создайте страничку, изображенную на рис. 51.

Тень у слова CSS создается в результате двукратного ввода, причем второй абзац "надвигается" на первый использованием измененных внешних полей (значения отступов могут быть и отрицательными). Слова ТИП РЕГИСТРА в коде должны быть набраны строчными (маленькими) буквами, а между буквами слова "межбуквенный" не должно быть пробелов. Для создания блоков в нижней части страницы используйте тег-контейнер {DIV}

В документе не должны использоваться теги форматирования из арсенала классического HTML ({b}, {i}, {u} и др.), а также атрибуты тега {FONT} (color, size и др.)

2. На этой же странице расположите три рисунка, используя позиционирование (см. рис. 52).

3. Создайте файл style.css и сделайте на него ссылки со всех страничек вашей тренировочной работы.

В файле style.css должны располагаться определения, например, таких селекторов, как BODY, P и IMG.

Задайте в качестве основной для тела документа гарнитуру Arial и отступ первой строки (text-indent) 30рх.

Определения селекторов Р и IMG задайте самостоятельно.

Дополните файл style.css описанием псевдоклассов гиперссылок. Сделайте так. чтобы при наведении указателя мыши на гиперссылку менялся ее цвет, размер текста, цвет фона и т.п.

Проверьте, как изменился внешний вид ваших страниц.

Рис.51. Образец выполнения задания

Рис.52. Образец выполнения задания

Процедуры и функции

1. Напишите процедуру, которая считает для числа количество его делителей. Два числа вводятся с клавиатуры. С помощью этой процедуры найдите число с наибольшим количеством делителей.

2. Напишите функцию вычисления степени и функцию вычисления факториала числа. Натуральные n и a запрашиваются с клавиатуры. Вычислите с помощью этих функций  .

• · Все следующие задачи решаем только с помощью функций и процедур!

• · Задачу разбиваем на подзадачи.

• · Для решения каждой такой подзадачи пишем функцию или процедуру.

• · В основной программе к ним обращаемся.