dhtml-2

Основи Web-майстерності

DDHHTTMMLL

Методичні вказівки та завдання до лабораторних робіт

Частина 2

Динамічне форматування веб-сторінок

Основи Web-майстерності: DHTML. Частина 2.

2

Основи Web-майстерності: DHTML. Частина 2. Методичні вказівки та завдання до лабораторних робіт. – 68 c.

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

магазина

МЕТОДИЧКА http://metodichka.com.ua/

МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

© НМЦ ПОЛИТЕХ Ніяка частина цього видання не може бути тиражована у будь-який спосіб без письмового дозволу правовласників. ® Методичка http://metodichka.com.ua/

http://metodichka.com.ua/



3

Зміст

ВСТУПНІ ЗАУВАЖЕННЯ .....................................................................................5 Організація робочого середовища..........................................................................................5 Порядок виконання вправ ........................................................................................................5

ЗАНЯТТЯ 1 (ПРОДОВЖЕННЯ)............................................................................6

Динамічне форматування (продовження) ............................................................................6 Основні питання заняття ..........................................................................................................6 Текст, що періодично змінює колір .......................................................................................6 Неоновий текст ...........................................................................................................................7 Гумовий текст .............................................................................................................................9 Текст, що блимає (тільки для ІЕ)..........................................................................................11 Доповнення до електронного довідника.............................................................................12 На цьому занятті .......................................................................................................................12

ЗАНЯТТЯ 2 .........................................................................................................13

Динамічна зміна видимості елементів.................................................................................13 Основні питання заняття ........................................................................................................13 Зникнення та поява елемента ................................................................................................13 Зникнення та поява вкладених елементів...........................................................................14 Динамічні меню ........................................................................................................................16 Доповнення до електронного довідника.............................................................................35 Удосконалення електронного довідника ............................................................................36 На цьому занятті .......................................................................................................................39

ЗАНЯТТЯ 3 .........................................................................................................40

Динамічне позиціонування ......................................................................................................40 Основні питання заняття ........................................................................................................40 Області прокрутки Елемент MARQUEE ............................................................................40 Анімаційний рухомий текст .................................................................................................43 Анімація на основі динамічного позиціонування зображення......................................44 Рухомий блок ............................................................................................................................46 Динамічний курсор ..................................................................................................................50 Відбивання об'єкта від країв вікна .......................................................................................58 Пульсуюче зображення...........................................................................................................61 Доповнення до електронного довідника.............................................................................62 Удосконалення електронного довідника ............................................................................63 На цьому занятті .......................................................................................................................65


4

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються основні можливості та практичні аспекти застосування технології DHTML, яка завдяки поєднанню можливостей CSS та JavaScript дозволяє створювати динамічні ефекти на веб-сторінках. Частина 2 методичних вказівок є продовженням частини 1, що містить відомості про динамічне форматування веб-сторінок, коли, завдяки застосуванню DHTML, форматування окремих елементів веб-сторінки або ж всієї веб-сторінки змінюється у відповідь на дії користувача. Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати використання технології DHTML у веб-дизайні та навчитись створювати динамічні веб-сторінки та веб-сайти. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".

Вступні зауваження

Організація робочого середовища Для створення Довідника веб-майстра у вашій робочій папці вже має бути наступне дерево папок:

Ваша папка \Web \Images \Sounds \Videos \HTML \CSS \JavaScript \DHTML


5

Ззберігайте всі файли, які будуть створені під час виконання вправ з вивчення DHTML, у папку DHTML. Суворо додержуйтесь методичних вказівок. Тоді, по закінченні роботи ви зможете одержати самостійно створений вами електронний "Довідник Веб-майстра".

Порядок виконання вправ При виконанні вправ, як і на попередніх заняттях з основ веб-майстерності, рекомендуємо наступний порядок:

1. Прочитайте вступні зауваження. 2. Ознайомтеся з лістингами. 3. Наберіть запропонований код у текстовому редакторі Блокнот. 4. Відкрийте створений HTML-файл подвійним клацанням і оцініть результат.

5. Внесіть зміни, якщо це необхідно, у код веб-сторінки або приєднаних зовнішніх CSS- та JS-файлів, і потім перезавантажте зв'язану головну веб-сторінку, щоб переглянути результат.

Заняття 1 (продовження)

Динамічне форматування (продовження)

Основні питання заняття - Текст, що періодично змінює колір - Неоновий текст - Гумовий текст - Текст, що блимає (тільки для ІЕ) - Доповнення до електронного довідника.

Текст, що періодично змінює колір Починаючи з цієї вправи, розглянемо декілька цікавих ефектів, пов’язаних з текстом на веб-сторінці. Всі вони ґрунтуються на управлінні стилями шрифта засобами JavaScript.

6

Лістинг 1.18. Файл 1.11.html <HTML><HEAD><TITLE>Текст, що періодично змінює колір</TITLE> <STYLE TYPE="text/css"> #changeColor { font-size: 14pt;color: gray; } </STYLE> <SCRIPT LANGUAGE = "JavaScript" type = "text/JavaScript"> //Функция,изменяющая цвет объекта function flashColor() { //Определение объекта стиля var elem = document.all.changeColor.style; if (elem.color == "gray") elem.color = "red"; else elem.color = "gray" } //Периодический вызов функции flashColor() setInterval ("flashColor()",500) </SCRIPT> </HEAD> <BODY><SPAN ID = "changeColor">Текст, що періодично змінює колір</SPAN></BODY> <!-- Цвет периодически становится серым или красным с периодом в миллисекундах определяется значением второго аргумента


7

в setInterval(). --> </HTML>

Гумовий текст Лістинг 1.20. Файл 1.13.html <HTML><HEAD><TITLE>Гумовий текст</TITLE> <SCRIPT LANGUAGE = "JavaScript" type = "text/JavaScript"> //Определение массива,содержащего межсимвольные интервалы var interv = new Array ("0px","1px","2px","3px","5px","8px"); var i = 0; //Функция,устанавливающая межсимвольный интервал function rubber () { //Определение объекта текста var elem = document.all.myText; //Задание значения свойства letterSpacing elem.style.letterSpacing = interv[i]; //Определение следующего элемента массива interv if (i == 0) delta = 1; i += delta; if (i >= interv.length) { delta = -1; i = interv.length - 2; } } </SCRIPT> </HEAD>


8

<BODY onload = 'setInterval("rubber()",100);'> <H1 id = "myText" align = "CENTER">Гумовий текст</H1> </BODY></HTML>

Используйте это методическое пособие,

чтобы детально, на прмерах, изучить применение DHTML в веб-дизайне


Заняття 2

Динамічна зміна видимості елементів Ефекти динамічної зміни та появи елементів HTML часто застосовують для створення динамічних (спадних) меню. Як і попередні ефекти, ефекти динамічної зміни видимості ґрунтуються на управлінні стилями елементу за допомогою JavaScript.

Основні питання заняття - Зникнення та поява елемента - Зникнення та поява вкладених елементів - Динамічні меню - Доповнення до електронного довідника - Удосконалення електронного довідника


9

Зникнення та поява елемента Лістинг 2.1. Файл 2.1.html <HTML><HEAD><TITLE>Зникнення та поява елемента</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="toggle(document.all.HideShow);"> <SPAN STYLE="color: blue" id=HideShow> Цей текст зникає і з'являється. (Клацніть ще раз, і текст знову не буде видно.) </SPAN> <DIV STYLE="cursor: hand" onClick="toggle(document.all.HideShow)"> Щоб побачити, що буде, КЛАЦНІТЬ ТУТ. </DIV> </BODY><HTML>

10

Зникнення та поява вкладених елементів Управління стилями у даному прикладі здійснює зовнішній сценарій, розміщений у наступному файлі. Лістинг 2.2.1. Файл show_hide.js 

Динамічні меню Ефекти зникнення та появи елементів найчастіше використовуються для створення динамічних меню. Приклад 2 . Горизонтальне каскадне меню. В цьому прикладі реалізовано інший спосіб створення спадних динамічних меню, а також використано зовнішнє підключення сценаріїв та стилів, (як це було рекомендовано у попередньому прикладі), що дозволяє з легкістю використовувати наступний код меню на усіх веб-сторінках сайту.


11

Особливістю даного меню є те, що воно працює коректно лише у браузерах IE5.0 та Netscape6.0 і вище, оскільки використовує останні нові можливості JavaScript версії 1.2. Компоненти меню містяться у трьох окремих файлах. Для вставки спадного меню на будь-яку іншу сторінку веб-сайту, необхідно включити в код веб-сторінки наступні рядки. В заголовок сторінки: <link rel="stylesheet" href="dropdown.css" type="text/css"> <script language="JavaScript1.2" src="menu_data.js"></script> У тіло сторінки, де має бути меню: <script language="JavaScript1.2" src="menu_script.js"></script> Спочатку створіть наступну сторінку, на який буде динамічне меню. Лістинг 2.3.2.1. Файл 2.4.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Каскадне меню - 2</title> <link rel="stylesheet" href="dropdown.css" type="text/css"> <script language="JavaScript1.2" src="menu_data.js"></script> <style type="text/css"> pre { color: brown;


12

} </style> </head> <body> <script language="JavaScript1.2" src="menu_script.js"></script> </body></html> У наступному файлі міститься зовнішня таблиця стилю меню. Лістинг 2.3.2.2. Файл dropdown.css table.menu { position: absolute; border: 1px solid black; cursor: pointer; cursor: hand; visibility: hidden; } /* Розташування меню - вгорі зліва #mainmenu { position: static; } */ /* Розташування меню у заданому місці */ #mainmenu { left: 120px; top: 80px; } table.menu td { color: #FFFFFF; /* Має бути таким самим, як


13

tdColor у файлі menu_script.js */ background-color: #993366; /* Має бути таким самим, як tdBgColor у файлі menu_script.js */ border: 0px; padding: 0px 8px 2px; font-family: Arial; font-size: 8pt; white-space: nowrap; } Наступний файл містить список пунктів меню та пов’язаних з ними файлів (гіперпосилань URL), які Ви можете змінювати на власний розсуд. Лістинг 2.3.2.3. Файл menu_data.js td_1 = "Головна сторінка" url_1 = "dropdowntest.htm" td_2 = "Online крамниця" td_3 = "Послуги" td_4 = "Про компанію" td_5 = "Контактна інформація" url_5 = "dropdowntest.htm" td_6 = "Застереження" url_6 = "dropdowntest.htm" td_7 = "Допомога" url_7 = "dropdowntest.htm" td_2_1 = "Category A" td_2_1_1 = "Subcategory A1" td_2_1_2 = "Subcategory A2" td_2_1_3 = "Subcategory A3"


14

td_2_1_4 = "Subcategory A4" td_2_1_5 = "Subcategory A5" td_2_1_6 = "Subcategory A6" td_2_1_7 = "Subcategory A7" url_2_1_1 = "dropdowntest.htm" url_2_1_2 = "dropdowntest.htm" url_2_1_3 = "dropdowntest.htm" url_2_1_4 = "dropdowntest.htm" url_2_1_5 = "dropdowntest.htm" url_2_1_6 = "dropdowntest.htm" url_2_1_7 = "dropdowntest.htm" td_2_2 = "Category B" td_2_2_1 = "Subcategory B1" td_2_2_2 = "Subcategory B2" td_2_2_3 = "Subcategory B3" url_2_2_1 = "dropdowntest.htm" url_2_2_2 = "dropdowntest.htm" url_2_2_3 = "dropdowntest.htm" td_2_3 = "Category C" *****************//////////////********* td_4_5 = "Гостьова книга" url_4_4 = "dropdowntest.htm" url_4_5 = "dropdowntest.htm" td_4_3_2_1 = "England" td_4_3_2_2 = "Austria" td_4_3_2_3 = "Poland"


15

td_4_3_2_4 = "France" td_4_3_2_5 = "Russia" url_4_3_2_1 = "dropdowntest.htm" url_4_3_2_2 = "dropdowntest.htm" url_4_3_2_3 = "dropdowntest.htm" url_4_3_2_4 = "dropdowntest.htm" url_4_3_2_5 = "dropdowntest.htm" url_4_4_1 = "dropdowntest.htm" url_4_4_2 = "dropdowntest.htm" url_4_4_3 = "dropdowntest.htm" url_4_4_4 = "dropdowntest.htm" Нарешті сам робочий код меню. Лістинг 2.3.2.4. Файл menu_script.js var ve=false; // true – вертикальне меню, false - горизонтальне //Після зміни розміщення меню внесіть також зміни // у файл *.css у властивості пунктів меню: var tdColor="#FFFFFF"; // text color var tdBgColor="#993366"; // background color var hlColor="#000000"; // text color var hlBgColor="#FFFFBB"; // background color var md=250; var ti=-1; var oTd=new Object; oTd=null; function doMenu(td){ clearTimeout(ti); td.style.backgroundColor=hlBgColor;


16

td.style.color=hlColor; var i; var sT=""; var tda=new Array(); tda=td.id.split("_"); if(oTd!=null){ var tdo=new Array(); tdo=oTd.id.split("_"); for(i=1;i<tdo.length;i++){ sT+="_"+tdo[i]; if(tdo[i]!=tda[i]){ document.getElementById("td"+sT).style.backgroundColor =tdBgColor; document.getElementById("td"+sT).style.color=tdColor; if(document.getElementById("tbl"+sT)!=null) document.getElementById("tbl"+sT).style.visibility ="hidden"; } } } oTd=td; sT="tbl"; for(i=1;i<tda.length;i++) sT+="_"+tda[i]; if(document.getElementById(sT)!=null) document.getElementById(sT).style.visibility ="visible"; } function clearMenu(){


17

if(oTd!=null){ var tdo=new Array(); tdo=oTd.id.split("_"); var sT=""; for(var i=1;i<tdo.length;i++){ sT+="_"+tdo[i]; document.getElementById("td"+sT).style.backgroundColor =tdBgColor; document.getElementById("td"+sT).style.color=tdColor; if(document.getElementById("tbl"+sT)!=null) document.getElementById("tbl"+sT).style.visibility= "hidden"; } oTd=null; } } function runMenu(strURL){ location.href=strURL; } ***********/////////*********** else document.write("<p>Ця сторінка використовує DHTML та DOM, але Ваш браузер не підтримує їх.</p>"); Для перевірки роботи меню створіть самостійно пробний файл dropdowntest.htm.


18

Заняття 3

Динамічне позиціонування

Основні питання заняття - Області прокрутки Елемент MARQUEE - Анімаційний текст - Анімація на основі динамічного позиціонування зображення - Рухомий блок - Динамічний курсор - Відбивання об'єкта від країв вікна - Пульсуюче зображення - Доповнення до електронного довідника - Удосконалення електронного довідника

Используйте это методическое пособие,

чтобы детально, на прмерах, изучить применение DHTML в веб-дизайне




19

Області прокрутки Елемент MARQUEE Лістинг 3.1. Файл 3.1.html <HTML><HEAD><TITLE>Область прокрутки на веб-сторінці (тільки IE4+)</TITLE> <STYLE> div {text-align: center;color:white;} </STYLE> </HEAD><BODY BGCOLOR="#66cc66"> <H1>Області прокрутки на веб-сторінці. Елемент MARQUEE</H1> <HR COLOR=BLACK> <P>Для створення областей прокрутки на веб-сторінці можна використати елемент MARQUEE, якій обмежує блок всередині якого здійснюється прокрутка. Але елемент MARQUEE працює тільки в броузері Internet Explorer, починаючи з версії 4.0. По суті, елемент MARQUEE є вбудованим скриптом. <P>Крім звичайних блокових атрибутів, які задають розміри, колір та інші властивості блоку, елемент MARQUEE має атрибути, які визначають характер прокрутки: <P>DIRECTION - напрям прокрутки. Можливі значення: UP (вгору), DOWN (вниз), LEFT (вправо), RIGHT (вліво), ALTERNATE (туди-сюди). <P>DIRECTION - поведінка. Можливе значення: ALTERNATE (туди-сюди). <P>SCROLLAMOUNT - крок прокрутки (в пікселях). Задає зміщення прокрутки за один крок. <P>SCROLLDELAY - затримка прокрутки (в мілісекундах). Задає час затримкі між кроками прокрутки.


20

</P> <MARQUEE >Область прокрутки 1</MARQUEE> <MARQUEE direction=right>Область прокрутки 2</MARQUEE> <MARQUEE direction=left scrollAmount=2 scrollDelay=1 style="background-color:#c0c0c0; float:left; width:33%; height: 240;"> <DIV style="width:293; height:100%; background-color:#008000; background-image:url(../images/svin.jpg); float:left;"> Область прокрутки 3 </DIV> </MARQUEE> <MARQUEE direction=right scrollAmount=2 scrollDelay=1 style="background-color:#d0d0d0; float:left; width:33%; height: 240;"> <DIV style="width:293; height:100%; background-color:#008000; background-image:url(../images/svin.jpg); float:left; text-align:center; color:white;"> Область прокрутки 4 </DIV> </MARQUEE> <MARQUEE direction=up scrollAmount=2 scrollDelay=1 style="background-color:#c0c0c0; float:left; width:34%; height: 240;"> <DIV style="width:100%; height:327; background-color:#008000; background-image:url(../images/svin.jpg); float:left; text-align:center; color:white;"> Область прокрутки 5 </DIV>

21

</MARQUEE> <MARQUEE behavior=alternate style="background-color:#336699; background-image:url(../images/snow.gif); background-attachment:fixed;"> <DIV style="background-image:url(../images/svin.jpg); width:293;"> <MARQUEE direction=up behavior=alternate scrollAmount=20 style="height:327;"> <DIV style="background-color:#336633;color:white; font: bold 20pt Arial; text-align:center; padding:0.5em;"> Це – круто !!! </DIV> </MARQUEE> </DIV> </MARQUEE> </BODY></HTML>

Анімаційний рухомий текст Лістинг 3.2. Файл 3.2.html <html><head><title>Анімаційний текст</title> <script language="javascript"> <!-- var paraOneLeft = 100; var paraTwoLeft = 400; var switchDirection = false; function animaTxt () {window.setInterval ("moveParas()", 50);}


22

function moveParas () { var paraOne = document.getElementById ("paraOneID"); var paraTwo = document.getElementById ("paraTwoID"); if (switchDirection == false) { paraOne.style.top = '10 px'; paraTwo.style.top = '30 px'; paraOne.style.color = '#0033ff'; paraTwo.style.color = '#ff3300'; paraOne.innerText = 'Вперед'; paraTwo.innerText = 'Назад'; paraOneLeft++; paraTwoLeft--; if (paraOneLeft == 400) {switchDirection = true;} } else { paraOne.style.top = '30 px'; paraTwo.style.top = '10 px'; paraOne.style.color = '#ff3300'; paraTwo.style.color = '#0033ff'; paraOneLeft--; paraTwoLeft++; if (paraOneLeft == 100) {switchDirection = false;} }


23

paraOne.style.left = paraOneLeft + ' px'; paraTwo.style.left = paraTwoLeft + ' px'; } // --> </script> </head><body onLoad="return animaTxt();"> <p style="position:absolute; left: 100px; top:10px" ID="paraOneID">Para 1</p> <p style="position:absolute; left: 400px; top:30px" ID="paraTwoID">Para 2</p> </body></html>


Магазин классных методичек!


Гимнастика для глаз

А. Динамический комплекс

1. Движения глаз вправо-влево, 30 секунд.

2. Движения глаз вверх-вниз, 30 секунд.

3. Движения глаз по диагоналям, по 30 секунд.

4. Круговые движения глазами по часовой стрелке, 30 секунд.

5. Круговые движения глазами против часовой стрелки, 30 секунд.

6. Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.

Б. Самомассаж глаз

1. Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.

2. Быстро моргать в течение 1-2 минут.

3. Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 25-30 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.

4. Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.

5. Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.

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

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

dhtml-2

Documents