CSS-управление динамическими HTML-фильтрами

“САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ  
АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ”

КАФЕДРА ВЫЧИСЛИТЕЛЬНЫХ CИСТЕМ И СЕТЕЙ

КУРСОВАЯ РАБОТА   
ЗАЩИЩЕНА С ОЦЕНКОЙ

РУКОВОДИТЕЛЬ

ассистент				И.В. Вересов
должность, уч. степень		подпись, дата		инициалы, фамилия

 

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА  К КУРСОВОЙ РАБОТЕ

 

CSS-УПРАВЛЕНИЕ ДИНАМИЧЕСКИМИ HTML-ФИЛЬТРАМИ

по дисциплине: ИНФОРМАТИКА

РАБОТУ  ВЫПОЛНИЛА

СТУДЕНТКА  ГР.	В8311				В.А. Салимон
			подпись, дата		инициалы, фамилия

 

Санкт-Петербург 
2010

 

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

 

                      CSS-УПРАВЛЕНИЕ ДИНАМИЧЕСКИМИ HTML-ФИЛЬТРАМИ

 

   Цель работы:  изучение  правил составления и приобретение  навыков использования кас-

кадных таблиц стилей при создании в едином стиле многостраничных web-сайтов.

 

                                                ИНДИВИДУАЛЬНЫЕ ЗАДАНИЯ

 

   С обязательным  использованием каскадных таблиц  стилей (CSS) разработать web-сайт,

обеспечивающий визуализацию на экране компьютера управляющего и демонстрационного

фрейма.

   Управляющий фрейм  должен занимать 10% площади экрана, примыкать к заданной грани-

це экрана и в него должен быть выведен документ с серым (gray) фоном и тремя разноцвет-                   

ными (red, green, blue) кнопками-гиперссылками.

   При щелчке мышью  по первой кнопке в демонстрационный  фрейм должен выводиться до-

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

   Фрагмент с параметрами  задания должен включать в  себя фамилию, имя, отчество, номер

группы автора и ,собственно, расчитанные параметры индивидуального задания. Этот фраг-

мент, в отличие от остальных  фрагментов, должен быть выведен в  формате используемого

текстового редактора  без применения html-элементов форматирования. 

   При щелчках мышью  по второй и третьей кнопках  в демонстрационный фрейм   должны 

выводиться подобные по структуре  и содержанию демонстрационные документы.

   Второй демонстрационный документ отличается тем, что в качестве четвертого фрагмента

должно формироваться  динамически исчезающее в течении 5 секунд изображение автора

(фильтр revealtrans), а в третьем демонстрационном  документе в качестве четвертого фраг- мента должно присутствовать изображение автора с направленной и рассеянной подсветкой

(фильтр light).

  Кроме того. выводимые на экран исходные html-тексты должны соответствовать показыва-  емым web-страницам. .

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

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

журнале следующим образом :

1  Размещение управляющего  фрейма определяется выражением [(3+N) mod 4],  где   резуль- :   тат трактуется как: 0- у левой границы экрана; 1- у верхней кромки экрана; 2- у правой .             

   границы экрана; 3- в нижней части экрана.

2. Местонахождение фрагмента  с параметрами индивидуального  задания во всех демонст-

    рационных документах [(N+1) mod 4 ], где результат означает: 0- в левом верхнем квадран-   

    те. 1-  в правом верхнем квадранте; 2- в правом нижнем квадранте; 3- в левом нижнем   

    квадранте.

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

    последнего фрагмента в первом и втором  демонстрационного документах [ N mod 24 ],    

    где результат   трактуется как: 0- Box In (стягивающийся прямоугольник); 1- Box Out

    (расширяющийся   прямоугольник); 2- Circle In (стягивающийся круг); 3- Circle 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) (случайный выбор из предыдущих вариантов).

4. Размещение источника  направленного освещения в последнем  фрагменте третьего демон- 

    демонстрационного  документа [N mod 4], где: 0- соответствует размещению в левом верх-  

    нем углу изображения автора; 1- в правом верхнем углу; 2- в правом нижнем углу; 3- в ле-

    вом нижнем углу.

5. Цвет направленной подсветки в  последнем фрагменте третьего демонстрационного доку- 

    мента   [N mod 3], где 0- соответствует red (красному); 1- green (зеленому) и 2- blue (си-

    нему) цвету.

6. Цвет рассеянной подсветки в последнем фрагменте третьего демонстрационного докумен-

    та  [(N+1) mod 3] в указанной выше интерпретации.

7. Цвет фона всех демонстрационных документов [(N+4) mod 2], где 0-означает white (бе-

    лый), а 1-yellow (желтый) цвет.

 

                                            СОДЕРЖАНИЕ ОТЧЕТА ПО РАБОТЕ

 

1. Текст настоящего задания.

2  Расчет параметров  задания.       

3  Тексты всех html-файлов.

4  Скриншоты всех web-страниц созданного сайта.

РАСЧЕТ  ПАРАМЕТРОВ ЗАДАНИЯ

1. Размещение управляющего фрейма определяется выражением

[(3+N) mod 4] = 38 mod 4 = 2

 

2. Местонахождение фрагмента с параметрами индивидуального задания во всех демонст-рационных документах

 

[(N+1) mod 4] = 36 mod 4 = 0

 

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

 

[ N mod 24] = 35 mod 24 = 11

 

4. Размещение  источника направленного освещения  в последнем фрагменте третьего демонстрационного документа

 

[N mod 4] = 35 mod 4 = 3

 

5. Цвет  направленной подсветки в  последнем  фрагменте третьего демонстрационного  доку- 

      мента  

 

[N mod 3] = 35 mod 3 = 2

 

6. Цвет  рассеянной подсветки в последнем  фрагменте третьего демонстрационного  докумен-

      та 

 

[(N+1) mod 3] =  36 mod 3 = 0

 

7. Цвет  фона всех демонстрационных документов

 

[(N+4) mod 2] = 39 mod 2 = 1

 

 

 

 

ПРОГРАММНЫЙ КОД

 

 

Файл CSSdinamic.css

 

body {color: black; background: yellow}

#bodyControl {background: gray}

#imgDem_1 {visibility: hidden; filter: revealtrans}

#imgDem_2 {visibility: visible; filter: revealtrans}

#imgDem_3 {position: relative; top: 0; left: 0; filter: light}

 

 

Файл CSSdinamicMain.html

 

<html>

  <head>

    <title>CSSdinamicMain</title>

  </head>

  <frameset cols="*,10%" border="2" frameborder="yes">

    <frame src="CSSdinamicDem1.html" name="DemFrame" marginheight="10">

    <frame src="CSSdinamicControl.html" >

  </frameset>

</html>

    

 

Файл CSSdinamicControl.html

 

<html>

  <head>

    <title>CSSdinamicControl</title>

    <link rel=stylesheet type=text/css href="CSSdinamic.css">

  </head>

  <body id="bodyControl">

    <table border="0" align="center">

     <tr>

      <td bgcolor="red">

        <a href="CSSdinamicDem1.html" target="DemFrame">

          DemPage_1

        </a>

      </td>

     </tr>

     <tr>

      <td bgcolor="gray">

          &nbsp;

      <td>

     <tr>

      <td bgcolor="green">

        <a href="CSSdinamicDem2.html" target="DemFrame">

          DemPage_2

        </a>

      </td>

     </tr>

     <tr>

      <td bgcolor="gray">

          &nbsp;

      </td>

     </tr>

     <tr>

      <td bgcolor="blue">

        <a href="CSSdinamicDem3.html" target="DemFrame">

          DemPage_3

        </a>

      </td>

     </tr>

  </body>

</html>

 

 

Файл CSSdinamicDem1.html

 

<html>

<head>

    <title>CSSdinamicDem1</title>

    <link rel=stylesheet type=text/css href="CSSdinamic.css">

</head>

<body>

<table align="center" border="0" cellpadding="2">

 <tr>

   <td>

     <pre>

 Салимон Валерия Александровна,группа в8311,вариант 35:

1. Размещение управляющего  фрейма=2

    (у правой границы  экрана).

2. Местонахождение параметров  индивидуального за-

    дания=0(левый верхний квадрант).

3. Тип динамического преобразования=11(Checker-

    board Down-закрывающаяся шахматная доска).

    закрывающаяся  шахматная доска).

4. Размещение источника  направленного освещения=3

    (в левом нижнем  углу изображения).

5. Цвет направленной подсветки=2(синий).

6. Цвет рассеянной подсветки=0(красный).

7. Цвет фона демонстрационных  документов=1

    (желтый).

     </pre>

   </td>

   <td>

     <textarea align="left" cols="55" rows="12" wrap="off">

<html>

<head>

    <title>CSSdinamicDem1</title>

    <link rel=stylesheet type=text/css href="CSSdinamic.css">

</head>

<body>

<table align="center" border="0" cellpadding="2">

 <tr>

   <td>

     <pre>

Салимон Валерия Александровна,группа в8311,вариант 35:

1. Размещение управляющего  фрейма=2

    (у правой границы  экрана).

2. Местонахождение параметров  индивидуального за-

    дания=0(левый верхний квадрант).

3. Тип динамического преобразования=11(Checker-

    board Down-закрывающаяся шахматная доска).

    закрывающаяся  шахматная доска).

4. Размещение источника  направленного освещения=3

    (в левом нижнем  углу изображения).

5. Цвет направленной подсветки=2(синий).

6. Цвет рассеянной подсветки=0(красный).

7. Цвет фона демонстрационных  документов=1

    (желтый).   

     </pre>

   </td>

   <td>

     <! не показано >

   </td>

</tr>

</table>

<table align="center" border="0" cellpadding="2">

<tr>

   <td>

      <img id="imgDem_1" src="Изображение.jpg">

      <script>

        function window.onload() {

        imgDem_1.filters("revealtrans").apply() /*Визуолизируем исходное изображение*/

        imgDem_1.style.visibility="visible" /*Устанавливаем новый стиль изображения*/

        imgDem_1.filters("revealtrans").transition=11 /*Задаем тип преобразования*/

        imgDem_1.filters("revealtrans").play(5) /*Выполняем преобразование*/

        }

      </script>

   </td>

   <td>

      <img src="Изображение.jpg">

   </td>

</tr>

</table>

<body>

</html>

     </textarea>

   </td>

</tr>

</table>

<table align="center" border="0" cellpadding="2">

<tr>

   <td>

      <img id="imgDem_1" src="Изображение.jpg">

      <script>

        function window.onload() {

        imgDem_1.filters("revealtrans").apply() /*Визуолизируем исходное изображение*/

        imgDem_1.style.visibility="visible" /*Устанавливаем новый стиль изображения*/

        imgDem_1.filters("revealtrans").transition=11 /*Задаем тип преобразования*/

        imgDem_1.filters("revealtrans").play(5) /*Выполняем преобразование*/

        }

      </script>

   </td>

   <td>

      <img src="Изображение.jpg">

   </td>

</tr>

</table>

<body>

</html>

 

 

Файл CSSdinamicDem2.html

 

<html>

<head>

    <title>CSSdinamicDem2</title>

    <link rel=stylesheet type=text/css href="CSSdinamic.css">

</head>

<body>

<table align="center" border="0" cellpadding="2">

 <tr>

   <td>

     <pre>   

 Салимон Валерия Александровна,группа в8311,вариант 35:

1. Размещение управляющего  фрейма=2

    (у правой границы  экрана).

2. Местонахождение параметров  индивидуального за-

    дания=0(левый верхний квадрант).

3. Тип динамического преобразования=11(Checker-

    board Down-закрывающаяся шахматная доска).

    закрывающаяся  шахматная доска).

4. Размещение источника  направленного освещения=3