Теоретический материал

Ход занятия: фильтры – это эффекты для изменения внешнего вида графики и текста на вашей страницы. Существуют статические и динамические фильтры. Подключение фильтров происходит с помощью атрибута style следующим образом: <img style=”filter:имя_фильтра (параметр1=значение, параметр2=значение и т.д.)”>

Ниже приведены полный список всех статических фильтров, их параметры и функции.

Фильтры	Необходимые параметры	Описание
Alpha	Opacity, finish opacity, style, startx, starty, finishx, finishy	Задает постоянный уровень прозрачности
Blur	Add, direction, strength	Создает эффект движения
Chroma	Color	Создает одноцветный транспарант
Dropshadow	Color, offx, offy, positive	Обводит силуэт объекта
Fliph		Делает горизонтальное отражение картинки
Flipv		Делает вертикальное отражение картинки
Glow	Color, strength	Создает эффект «тления»
Grayscale		Преобразует объект в черно-белый
Invert		Инвертирует цвета, оттенки и яркость
Light		Освещает объект от источника
Mask	Color	Делает из объекта маску-транспарант
Shadow	Color, direction	Создает силуэт объекта отдельно от объекта
Wave	Add, freq, lightstrength, phase, strength	Создает «волнистое» искажение объекта
xray		Показывает только контур объекта

Задание:

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

2. Создать новый документ, который назвать «filter.html», в котором расположить нарисованную картинку 14 раз (соответственно количеству фильтров).

2.1. Для первой картинки применить фильтр alpha со значениями параметров: opacity=50. Просмотреть результат. Самостоятельно изменить значение параметров и просмотреть результат.

2.2. Для второй картинки применить фильтр blur со значениями параметров: direction=45, strength=15, add=0 и просмотреть результат. Самостоятельно изменить значение параметров и просмотреть результат.

2.3. Для третьей картинки применить фильтр chroma и просмотреть результат.

2.4. Для четвертой картинки применить фильтр dropshadow со значениями параметров: offx=1, offy=9, color=red и просмотреть результат. Самостоятельно изменить значение параметров и просмотреть результат.

2.5. Для пятой картинки применить фильтр fliph и просмотреть результат.

2.6. Для шестой картинки применить фильтр flipv и просмотреть результат.

2.7. Для седьмой картинки применить фильтр glow со значениями параметров: strength=5, color=#ffff00 и просмотреть результат. Самостоятельно изменить значение параметров и просмотреть результат.

2.8. Для восьмой картинки применить фильтр grayscale и просмотреть результат.

2.9. Для девятой картинки применить фильтр invert и просмотреть результат.

2.10. Для десятой картинки применить фильтр light и просмотреть результат.

2.11. Для одиннадцатой картинки применить фильтр mask со значениями параметров: color=#ffff00 и просмотреть результат. Самостоятельно изменить значение параметров и просмотреть результат.

2.12. Для двенадцатой картинки применить фильтр shadow со значениями параметров: color=#ff0088, direction=315. Самостоятельно изменить значение параметров и просмотреть результат.

2.13. Для тринадцатой картинки применить фильтр wave со значениями параметров: freq=2, strength=6, phase=0, lightstrength=0, add=0. Самостоятельно изменить значение параметров и просмотреть результат.

2.14. Для последней картинки применить фильтр xray и просмотреть результат.

3. Также существует возможность объединения нескольких фильтров.

2.15. Выполнить не менее пяти объединений фильтров.

Лабораторная работа №9

Фреймы

Цель: научится создавать и использовать фреймы.

Студент должен знать: для чего нужны фреймы, cинтаксис

фрэймов

Студент должен уметь: создавать страницу-html c помощью фреймов.