Использование каскадных таблиц стилей, статических и динамических фильтров для создания визуальных эффектов в Web-сайтах

Страницы работы

Содержание работы

 

                                                                               В.И.Петров,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.  Копии экранных форм работы.

Похожие материалы

Информация о работе