DHTML-1 by Leonid Flegantov

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

DHTML

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

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

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

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

1. Методичні

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

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

Зміст ЗАНЯТТЯ 1 .................................................................................... 5 Динамічне форматування........................................................................... 5 Основні питання заняття............................................................................ 5 Організація робочого середовища ........................................................... 5 Порядок виконання вправ.......................................................................... 6 Динамічна зміна елементів стилю шрифту............................................ 7 Інтерактивна зміна розміру шрифту........................................................ 8 Динамічна зміна фонового кольору ......................................................11 Інтерактивна зміна фонового кольору ..................................................13 Одночасна зміна кольору фону і тексту ...............................................14 Інтерактивний підбір кольорів ...............................................................15 Інтерактивний підбір кольорів за назвою у "дочірньому" вікні ......19 Інтерактивний підбір кольорів RGB......................................................29 Інтерактивне задання фонового кольору..............................................34 Інтерактивна заміна стилю веб-сторінки..............................................40 Доповнення електронного довідника темою „Динамічне форматування” ...........................................................................................44 На цьому занятті ........................................................................................45

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

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

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

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

Заняття 1 Динамічне форматування Основні питання заняття - Організація робочого середовища - Порядок виконання вправ - Динамічна зміна елементів стилю шрифту - Інтерактивна зміна розміру шрифту - Динамічна зміна фонового кольору - Інтерактивна зміна фонового кольору - Одночасна зміна кольору фону і тексту - Інтерактивний підбір кольорів - Інтерактивний підбір кольорів за назвою у "дочірньому" вікні - Інтерактивний підбір кольорів RGB - Інтерактивне задання фонового кольору - Інтерактивна заміна стилю веб-сторінки -

Доповнення електронного форматування”

довідника

темою

Організація робочого середовища У вашій робочій папці має бути наступне дерево папок: Ваша папка \Web \Images \Sounds \Videos \HTML \CSS \JavaScript Створіть у папці Web ще одну папку під назвою DHTML. 5

„Динамічне

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

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

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

Інтерактивна зміна розміру шрифту В цьому прикладі використовується три зовнішніх таблиці стилю, які зберігаються у трьох різних css-файлах. Крім того демонструється ще одна можливість підключення зовнішніх таблиць стилю шляхом їх імпортування. Перший з трьох css-файлів забезпечує відображення інтерактивного перемикача розміру шрифту на екрані тільки у тих броузерах, які підтримують запропонований механізм. Якщо броузер не підтримує відповідної технології, то перемикач розміру просто не буде відображатися на екрані. Лістинг 1.2. Файл textSizer.css #textSizer {display:block} Другий css-файл містить таблицю відображення тексту малими літерами.

стилю,

що

забезпечує

Лістинг 1.3. Файл smallFont.css body {font-size:xx-small} Третій css-файл містить таблицю стилю, що забезпечує відображення тексту великими літерами. Лістинг 1.4. Файл largeFont.css body {font-size:large} Головний файл – веб-сторінка, до якої підключені зовнішні файли. Вона містить також сценарій JavaScript, якій здійснює перемикання розмірів шрифту шляхом заміни вимикання та вмикання таблиць стилю. Лістинг 1.5. Файл 1.2.html <html><head> <title>Інтерактивна зміна розміру шрифту</title> <style id="normalStyle" type="text/css"> body {font-family:Verdana, Helvetica, sans-serif; 7

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

font-size:small} #textSizer {text-align:right; display:none} .textSize {border:1px solid black} </style> <style id="sizer" type="text/css" disabled="disabled"> @import url("textSizer.css"); </style> <style id="smallStyle" type="text/css" disabled="disabled"> @import url("smallFont.css"); </style> <style id="largeStyle" type="text/css" disabled="disabled"> @import url("largeFont.css"); </style> <script type="text/javascript"> // викликається при клацанні на значку розміру function changeSizeStyle(styleID) { if (document.getElementById) { document.getElementById("sizer").disabled = false; var styleIDs = ["smallStyle", "largeStyle"]; for (var i = 0; i < styleIDs.length; i++) { if (styleID == styleIDs[i]) {document.getElementById(styleIDs[i]).disabled = false;} else 8

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

{document.getElementById(styleIDs[i]).disabled = true;} } } } // встановлюємо початковий стиль changeSizeStyle(""); </script> </head> <body style="background-color:#ffffff"> <h1>Інтерактивна зміна розміру шрифту шляхом заміни стилю документу</h1> <div id="textSizer"> <a href="" onclick="changeSizeStyle('smallStyle'); return false"><img class="textSize" src="../images/fontSmall.jpg" height="18" width="18" alt="Маленький" /></a><a href="" onclick="changeSizeStyle(''); return false"><img class="textSize" src="../images/fontMedium.jpg" height="18" width="18" alt="Звичайний" /></a><a href="" onclick="changeSizeStyle('largeStyle'); return false"><img class="textSize" src="../images/fontLarge.jpg" height="18" width="18" alt="Великий" /></a> </div> <hr /> <p>Пробний текст. Встановлення розміру шрифту шляхом заміни стилю документу.</p> </body></html>

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

Інтерактивний підбір кольорів за назвою у "дочірньому" вікні DHTML надає можливість здійснювати інтерактивний підбір параметрів форматування веб-сторінки, не впроваджуючи механізм підбору у поточну веб-сторінку, а відкриваючи для цього спеціальну окрему веб-сторінку, яка містить механізм інтерактивного форматування, в окремому „дочірньому” вікні. Завдяки цьому, механізм інтерактивного форматування можна підключити і використати не для однієї, а для багатьох веб-сторінок одночасно. Дана вправа реалізує механізм інтерактивного форматування, що відкривається у „дочірньому” вікні, на прикладі інтерактивного вибору кольорів (фону, тексту, гіперпосилань тощо) за їх назвою з фіксованого набору кольорів. Для виконання вправи необхідно створити дві веб-сторінки. Перша веб-сторінка – головна. Саме для неї буде здійснюватися інтерактивний підбір кольорів. Головна веб-сторінка містить сценарій JavaScript, якій відкриває у „дочірньому” вікні другу веб-сторінку, яка містить механізм DHTML, що дозволяє вибирати параметри форматування та значення кольору, яке буде встановлено для цього параметра у „батьківському” (головному) вікні. Створіть головну веб-сторінку. Лістинг 1.10. Файл 1.7.html <html><head> <title>Інтерактивний підбір кольорів у "дочірньому" вікні</title> <script language="JavaScript" type="text/javascript"> <!-var new_window function open_window() { 10

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

if (!window_available()) { new_window = window.open("1.7a.html", "", "width=300,height=175") } else { new_window.focus() } } function window_available() { if (!new_window) { return false } else if (new_window.closed) { return false } else { return true } } //--> </script> </head> <body> <h1>Інтерактивний підбір кольорів у "дочірньому" вікні</h1> <hr> <p><a href="javascript:open_window()">Вікно вибору кольорів</a> 11

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

<p><a href="#">Це відвідане гіперпосилання</a> <p><a href="proba.html">Це невідвідане гіперпосилання</a> </body></html> Відкрийте головну веб-сторінку у броузері і випробуйте механізм інтерактивного вибору кольорів.

Інтерактивне задання фонового кольору Дана вправа використовує механізм інтерактивного встановлення параметрів форматування веб-сторінки аналогічний попереднім. Але механізм DHTML в ній має суттєве удосконалення: за допомогою використання cookies встановлені параметри форматування запам’ятовуються, і при повторному відкритті веб-сторінки, користувачеві пропонується той варіант дизайну (той колір), якій він вибрав і встановив сам. Створіть головнну веб-сторінку. На відміну від попередніх вона містить сценарій для роботи з cookies. Лістинг 1.14. Файл 1.9.html <html><head> <title>Інтерактивне задання фонового 12

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

кольору</title> <script language="JavaScript" type="text/javascript"> <!-function get_cookie(name_to_get) { var cookie_pair var cookie_name var cookie_value // Розбиття cookies на елементи і перетворення на масив var cookie_array = document.cookie.split("; ") // Перегляд масиву даних cookies for (counter = 0; counter < cookie_array.length; counter++) { // Розбиття cookies на пари name/value (ім'я/значення) cookie_pair = cookie_array[counter].split("=") cookie_name = cookie_pair[0] cookie_value = cookie_pair[1] // Порівнюємо імена cookies із заданим іменем if (cookie_name == name_to_get) { // Якщо співпадає, повертаємо занчення 13

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

cookies return unescape(cookie_value) } } // Якщо такого cookie не існує, повертаємо null return null } // Одержуємо cookie з ім'ям bgColor var bg_color = get_cookie("bgColor_cookie") // Чи існує cookie ? if (bg_color) { self.document.bgColor = bg_color } //--> </script> <script language="JavaScript" type="text/javascript"> <!-var new_window function open_window() { if (!window_available()) { new_window = window.open("1.9a.html", "", "width=320,height=150") 14

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

} else { new_window.focus() } } function window_available() { if (!new_window) { return false } else if (new_window.closed) { return false } else { return true } } //--> </script> </head> <body> <a href="javascript:open_window()"> Встановити і запам'ятати фоновий колір у цьому вікні.</a> </body></html> Друга веб-сторінка, що відкривається у „дочірньому” вікні, містить механізм інтерактивного вибору і встановлення фонового кольору у „бітьківському” вікні. Частину коду веб-сторінки, яка створює список вибору кольорів, можна скопіювати з лістингу 1.11. 15

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

Інтерактивна заміна стилю веб-сторінки Дана вправа демонструє можливість повної заміни стилю вебсторінки. Для цього веб-майстром створюється декілька варіантів стилю в окремих таблицях стилю, які пропонуються на вибір користувачеві. У цьому прикладі реалізована можливість вибору одного з трьох варіантів стилю. Всі три варіанти стилю містяться у зовнішніх CSS-файлах і підключаються до веб-сторінки шляхом імпортування. (Імпортувати зовнішні таблиці стилю не обов’язково. Можна підключити їх звичайним способом.) Спочатку створіть три зовнішні таблиці стилю. Перша таблиця містить звичайний стиль, якій встановлюється при завантаженні веб-сторінки. Лістинг 1.16. Файл normalStyle.css body { background-image: url(../images/bg_new.gif); color:#000; } hr{ color:#000; } Друга таблиця стилю містить „синій” варіант оформлення вебсторінки. Лістинг 1.17. Файл blueStyle.css body { background-color:99ccff; background-image: url(../images/bg_snow.gif); background-position: bottom right; 16

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

background-repeat: repeat-y; color:#000000; } hr { color:#336699; } h1 { font-family: Arial; color:#336699 } Третя таблиця стилю містить „помаранчовий” варіант оформлення веб-сторінки. Лістинг 1.18. Файл orangeStyle.css body { background-image: url(../images/bg_orange.jpg); background-position: right; background-repeat: repeat-y; color:#000000; } hr { color:#ff9900; } h1 { font-family:"Comic Sans MS"; color:#ff9900; } 17

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

Створіть головну веб-сторінку, яка містить механізм інтерактивної заміни стилю. Лістинг 1.19. Файл 1.10.html <html><head> <title>Інтерактивна заміна стилю вебсторінки</title> <style id="normal" type="text/css" disabled="disabled"> @import url("normalStyle.css"); </style> <style id="blue" type="text/css" disabled="disabled"> @import url("blueStyle.css"); </style> <style id="orange" type="text/css" disabled="disabled"> @import url("orangeStyle.css"); </style> <script type="text/javascript"> // викликається при клацанні на значку розміру function setStyle(styleID) { if (document.getElementById) { var styleIDs = ["normal", "blue", "orange"]; for (var i = 0; i < styleIDs.length; i++) { if (styleID == styleIDs[i]) {document.getElementById(styleIDs[i]).disabled = false;} 18

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

else {document.getElementById(styleIDs[i]).disabled = true;} } } } // встановлюємо початковий стиль setStyle("normal"); </script> </head> <body> <h1>Інтерактивна заміна стилю веб-сторінки</h1> <hr> <a href="" onclick="setStyle('blue'); return false"> Синій стиль</a> <a href="" onclick="setStyle('normal'); return false"> Звичайний стиль</a> <a href="" onclick="setStyle('orange'); return false"> Помаранчовий стиль</a> <hr> <p>Пробний текст.</p> </body></html> Відкрийте створену веб-сторінку і випробуйте інтерактивну заміну стилю.

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

Доповнення електронного довідника темою „Динамічне форматування” Щоб додати розділ про DHTML та тему „Динамічне форматування” до складу електронного довідника, у головний файл електронного довідника index.html після закриваючого тегу </OL> в кінці файлу додайте наступні рядки: Лістинг 1.17. Доповнення до файлу index.html <H2>DHTML &ndash; Динамічний HTML</H2> <OL> <LI> Динамічне форматування <UL> <LI><A HREF="dhtml/1.1.html">Динамічна зміна елементів стилю шрифту</A> <LI><A HREF="dhtml/1.2.html">Інтерактивна зміна розміру шрифту</A> <LI><A HREF="dhtml/1.3.html">Динамічна зміна фонового кольору</A> <LI><A HREF="dhtml/1.4.html">Інтерактивна зміна фонового кольору</A> <LI><A HREF="dhtml/1.5.html">Одночасна зміна кольору фону і тексту</A> <LI><A HREF="dhtml/1.6.html">Інтерактивний підбір кольорів</A> <LI><A HREF="dhtml/1.7.html">Інтерактивний підбір кольорів за назвою у "дочірньому" вікні</A> <LI><A HREF="dhtml/1.8.html">Інтерактивний підбір кольорів RGB</A> <LI><A HREF="dhtml/1.9.html">Інтерактивне задання фонового кольору</A> <LI><A HREF="dhtml/1.10.html">Інтерактивна заміна стилю веб-сторінки</A> 20

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

</UL> </OL> На цьому занятті - Організація робочого середовища - Порядок виконання вправ - Динамічна зміна елементів стилю шрифту - Інтерактивна зміна розміру шрифту - Динамічна зміна фонового кольору - Інтерактивна зміна фонового кольору - Одночасна зміна кольору фону і тексту - Інтерактивний підбір кольорів - Інтерактивний підбір кольорів за назвою у "дочірньому" вікні - Інтерактивний підбір кольорів RGB - Інтерактивне задання фонового кольору - Інтерактивна заміна стилю веб-сторінки -

Доповнення електронного форматування”

довідника

темою

МЕТОДИЧКА 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-му шейному позвонку и обратно до появления чувства «прилива» к голове.

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