DHTML-2 by Leonid Flegantov

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

DHTML

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

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

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

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

2. Методичні

Фрагмент методического пособия представлен для ознакомления с продукцией электронного магазина МЕТОДИЧКА http://metodichka.com.ua/ МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

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

Зміст ВСТУПНІ ЗАУВАЖЕННЯ .....................................................................................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

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

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

Вступні зауваження Організація робочого середовища Для створення Довідника веб-майстра у вашій робочій папці вже має бути наступне дерево папок: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS \JavaScript \DHTML 4

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

Ззберігайте всі файли, які будуть створені під час виконання вправ з вивчення DHTML, у папку DHTML. Суворо додержуйтесь методичних вказівок. Тоді, по закінченні роботи ви зможете одержати самостійно створений вами електронний "Довідник Веб-майстра". Порядок виконання вправ При виконанні вправ, як і на попередніх заняттях з основ вебмайстерності, рекомендуємо наступний порядок: 1. Прочитайте вступні зауваження. 2. Ознайомтеся з лістингами. 3. Наберіть запропонований код у текстовому редакторі Блокнот. 4. Відкрийте створений HTML-файл подвійним клацанням і оцініть результат. 5. Внесіть зміни, якщо це необхідно, у код веб-сторінки або приєднаних зовнішніх CSS- та JS-файлів, і потім перезавантажте зв'язану головну веб-сторінку, щоб переглянути результат.

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

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

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

Лістинг 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> <!-- Цвет периодически становится серым или красным с периодом в миллисекундах определяется значением второго аргумента 6

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

в 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> 7

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

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

Используйте это методическое пособие, чтобы детально, на прмерах, изучить применение DHTML в веб-дизайне МЕТОДИЧКА http://metodichka.com.ua/

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

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

Зникнення та поява елемента Лістинг 2.1. Файл 2.1.html <HTML><HEAD><TITLE>Зникнення та поява елемента</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function toggle(element) { if (element.style.display == "none") { element.style.display = ""; } else { element.style.display = "none"; } } // --> </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> 9

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

Зникнення та поява вкладених елементів Управління стилями у даному прикладі здійснює зовнішній сценарій, розміщений у наступному файлі. Лістинг 2.2.1. Файл show_hide.js <!-//стилі для блоків document.write ('<style>.block_off {display:none;} .block_on {display:yes;}</style>'); //Показати або сховати блоки 'div' або 'span' function OnOff(el) { if (el.parentNode) { el=el.parentNode.getElementsByTagName('div'||'span'); el=el[0]; if (el.style.display=='block') el.style.display='none'; else el.style.display='block'; } return false; } // --> Динамічні меню Ефекти зникнення та появи елементів найчастіше використовуються для створення динамічних меню. Приклад 2 . Горизонтальне каскадне меню. В цьому прикладі реалізовано інший спосіб створення спадних динамічних меню, а також використано зовнішнє підключення сценаріїв та стилів, (як це було рекомендовано у попередньому прикладі), що дозволяє з легкістю використовувати наступний код меню на усіх веб-сторінках сайту. 10

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

Особливістю даного меню є те, що воно працює коректно лише у браузерах 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; 11

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

} </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;

/* Має бути таким самим, як 12

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

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" 13

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

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" 14

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

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; 15

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

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(){

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

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.

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

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

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

Області прокрутки Елемент 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 - затримка прокрутки (в мілісекундах). Задає час затримкі між кроками прокрутки. 19

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

</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%; backgroundcolor:#008000; backgroundimage: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%; backgroundcolor:#008000; backgroundimage:url(../images/svin.jpg); float:left; textalign: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; backgroundcolor:#008000; backgroundimage:url(../images/svin.jpg); float:left; textalign:center; color:white;"> Область прокрутки 5 </DIV> 20

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

</MARQUEE> <MARQUEE behavior=alternate style="backgroundcolor:#336699; backgroundimage:url(../images/snow.gif); backgroundattachment:fixed;"> <DIV style="backgroundimage: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;"> Це &ndash; круто !!! </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);} 21

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

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

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>

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

Гимнастика для глаз А. Динамический комплекс 1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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