В.И.Петров,2008г.
Лабораторная работа
ИСПОЛЬЗОВАНИЕ ФИЛЬТРОВ ДЛЯ СОЗДАНИЯ
ВИЗУАЛЬНЫХ ЭФФЕКТОВ В WEB-САЙТАХ
Цель работы: ознакомление с возможностями и приобретение
навыков использования каскадных таблиц стилей, а также статичес-
ких и динамических фильтров для создания визуальных эффектов
в Web-сайтах.
ИНДИВИДУАЛЬНЫЕ ЗАДАНИЯ
С использованием языка HTML разработать и отладить в браузере
MS Internet Explorer Web-сайт, состоящий из двух страниц.
Первая страница должна содержать постепенно появляющийся
текстовой блок –заголовок, два текстовых тестовых блока и ,соответст-
вено, две их искаженные фильтрацией копии.
Каждый текстовой блок должен быть абсолютно позиционирован,
иметь шрифт размером не менее 20 пикселов, общую рамку толщиной
10 пикселов с таким же отступом от наполнения.
Другие параметры первой web-страницы зависят от номера N студен-
та в журнале преподавателя.
Весь текст и рамки должен иметь цвет ( 1+N mod 3 ), фон-цвет
( 4+( N+1 ) mod 3 ), где 1-красный, 2-зеленый, 3-синий, 4-желтый, 5-салат-
ный, 6-голубой.
Заголовок должен содержать фамилию и имя автора, номер учебной
группы , номер варианта и краткое словесное описание динамического
преобразования заголовка.
Динамическое преобразование заголовка должно выполняться с по-
мощью фильтра revealtrans с длительностью преобразования 10 секунд
и типом преобразования, задаваемым выражением ( N mod 24 ), где:
0-Box In ( стягивающийся прямоугольник );
1-Box Out ( расширяющийся прямоугольник);
2-Circl In ( стягивающийся круг );
3-Circl Out (расширяющийся круг);
4-Wipe Up (стирание вверх);
5-Wipe Down (стирание вниз);
6-Wipe Right (стирание вправо);
7-Wipe Left (стирание влево);
8-Vertical Blinds (вертикальное жалюзи);
9-Horisontal Blinds (горизонтальное жалюзи);
10-Checkerboard Across (сужающиеся клетки шахматной доски);
11-Checkerboard Down (закрывающаяся шахматная доска);
12-Random Dissolve (случайный наплыв);
13-Split Vertical In (вертикальное деление внутрь);
14-Split Vertical Out (вертикальное деление наружу);
15-Split Horisontal In (горизонтальное деление внутрь);
16-Split Horisontal Out (горизонтальное деление наружу);
17-Strips Left Down (стирание влево вниз);
18-Strips Left Up (стирание влево вверх);
19-Strips Right Down (стирание вправо вниз);
20-Strips Right Up (стирание вправо вверх);
21-Random Bars Horisontal (случайные горизонтальные полосы);
22-Random Bars Vertical (случайные вертикальные полосы);
23-Random Selection of (0-22) (случайный выбор из предыдущих
вариантов).
В остальной части первой web-страницы должно иллюстрироваться
Использование двух статических фильтров, задаваемых номерами
(1+N mod 14) и (7+N mod 14), где:
1-alpha (эффект полупрозрачности);
2-blur (эффект размытости);
3-chroma (избирательная прозрачность);
4-dropShadow (создание силуэта и тени);
5-fliph (горизонтальное отражение);
6-flipv (вертикальное отражение);
7-glow (эффект слияния);
8-gray (монохромное представление);
9-invert (обращение цвета);
10-mask (прозрачная маска);
11-shadow (эффект объемности);
12-wave (волнистое искажение);
13-xray (рентгеновский снимок);
14-basicimage 9повороты).
Каждый тестовый блок должен содержать название используемого
статического фильтра и краткое словесное описание эффекта его дейст-
вия. Параметры статических фильтров задаются студентом произвольно,
но так чтобы явно наблюдались эффекты фильтрации.
Кроме того внизу первой web-страницы должна быть текстовая гипер-
ссылка на вторую web-страницу сайта.
На второй web-странице на одном произвольном графическом изобра-
жении должен иллюстрироваться эффект направленного освещения и
рассеянной подсветки с использованием статическогофильтра light, а
на копии полученного выше изображения эффект одновременного при-
менения всех трех задействованных в данной работе статических фильт-
ров.
Позиция источника направленного света должна совпадать с углом
графического изображения, определяемым в соответствии с выражении-
ем (1+N mod 4), где 1-левый верхний угол, 2-правый верхний угол, 3-пра-
вый нижний угол, 4-левый нижний угол.
Свет должен быть направлен вдоль соответствующей диагонали изоб-
ражения и иметь цвет (1+(N+2)mod 3) в указанной ранее интерпретации.
Угол конуса света произволен, но менее 90 градусов.
Параметры цвета и интенсивности рассеянного источника света (подсветки) должны быть такими же , как и у направленного источника.
Внизу вторая web-страница должна содержать текстовую гиперссылку
На первую web-страницу сайта.
Общие параметры каждой web-страницы должны быть оформлены в
HTML-тексте с использованием каскадных таблиц стилей.
ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
1. Выполнение данной работы возможно лишь при наличии знаний языка HTML и навыков создания статических web-сайтов в объеме курсовой работы по данной дисциплине. Дополнительно нужно изу-
чить лекционный материал по каскадным таблицам стилей и фильтрам.
2. Выполнить расчет параметров индивидуального задания и с учетом
экранного разрешения недостающих параметров размещения дан-
ных на экране дисплея.
3. Подобрать в файловой системе учебного компьютера графический
файл для формирования второй web-страницы в формате .bmp или
.jpg или .gif такой, чтобы на экране дисплея размещались без пере-
крытия два экземпляра соответствующего изображения и они покрывали большую часть экрана.
4. Разработать тексты двух связанных HTML-файлов и набрать их в
текстовом редакторе БЛОКНОТ, сохраняя их на диске в формате
.htm .
5. Отладить указанные файлы в MS Internet Explorer сначала по отдель
ности, а затем в комплексе, возможно корректируя параметры раз-
мещения данных на экране.
6. Продемонстрировать преподавателю результаты выполнения работы на компьютере.
7. Подготовить отчет по лабораторной работе.
8. Защитить отчет у преподавателя и получить зачет по работе.
СОДЕРЖАНИЕ ОТЧЕТА
1. Текст настоящего задания.
2. Расчеты параметров задания.
3. Листинги разработанных программ с комментариями.
4. Копии экранных форм работы.
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.