- •Модуль 1. Основи html. Лабораторна робота №1 html - основні поняття, структура документа
- •Основні теоретичні відомості.
- •1. Основні поняття
- •2. Правила запису тегів:
- •3. Структура документу
- •4. Визначення й оформлення функціональних розділів документа
- •5. Форматування html – документа Вирівнювання:
- •Індекси:
- •Параметри шрифту:
- •Існують наступні логічні стилі:
- •Існують наступні фізичні стилі:
- •Завдання до лабораторної роботи
- •Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки
- •Основні теоретичні відомості
- •1. Використання графічного зображення в якості фону
- •2. Формати графічних файлів для www
- •3. Вставка графічних зображень (елемент img та його атрибути)
- •4. Списки
- •Маркірований
- •Нумерований
- •Список визначень
- •Вкладені списки
- •Завдання до лабораторної роботи
- •Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання.
- •1. Основні теоретичні відомості.
- •2. Створення гіперпосилань
- •3. Види посилань
- •4. З'єднання з іншими документами
- •5. Звертання до певних розділів інших документів
- •6. Використання зображення як посилання
- •Завдання до лабораторної роботи
- •Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці.
- •Основні теоретичні відомості
- •1. Загальна структура таблиці
- •2. Завдання загальних параметрів таблиці
- •3. Форматування даних у таблиці, оформлення рамок (форматування рядків і комірок)
- •1. Вирівнювання даних у стовпцях таблиці
- •2. Завдання кольору рамок таблиці
- •3. Завдання фонового малюнка для таблиці
- •4. Структурування таблиці
- •Завдання до лабораторної роботи
- •Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Елемент завдання фреймів frameset та його атрибути
- •3. Вміст фреймів (елемент frame)
- •4. Вкладені фрейми
- •5. Інші атрибути елемента frameset
- •6. Атрибути елемента frame
- •2. Посилання й навігація
- •3. Плаваючі фрейми (елемент iframe)
- •Завдання до лабораторної роботи
- •Лабораторна робота №6 Карти зображень. Робота зі звуком.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Створення карти посилань в html
- •3. Створення карт посилань за допомогою редактора Dreamweaver
- •Робота з мультимедіа
- •Вбудовування звукових файлів в Web-сторінку
- •Фонові звуки
- •Рухомий текст
- •Завдання до лабораторної роботи
- •Модуль 2. Створення інтерактівності. Css. Dhtml. Лабораторна робота №7 Робота з формами
- •Основні теоретичні відомості
- •2. Створення елементів керування
- •Список, що розкривається:
- •Поле - список
- •Список із множинним вибором
- •Завдання до лабораторної роботи
- •Основні теоретичні відомості
- •1. Поняття про аркуші стилів
- •2. Поняття про внутрішні та зовнішні аркуші стилів
- •3. Вбудований стиль (атрибут style)
- •4. Заголовний стиль (елемент style)
- •6. Види селекторів
- •Стильові властивості
- •1. Значення властивостей
- •2. Властивості шрифтів
- •3. Властивості тексту
- •4. Властивості кольору і фону
- •Завдання до лабораторної роботи
- •Лабораторна робота №9 Зовнішні аркуші стилів . Стильові властивості
- •Основні теоретичні відомості
- •2. Звертання до зовнішнього аркуша стилів (елемент link)
- •3. Запис css-правил.
- •Стільові властивості (продовження)
- •1. Властивості блоку
- •2. Властивості списків
- •3. Інші групи стильових властивостей
- •4. Псевдокласи й псевдоелементи
- •Завдання до лабораторної роботи
- •Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти
- •Основні теоретичні відомості
- •1. Правила спадкування властивостей
- •2. Селектори нащадків
- •3. Каскади стилів
- •4. Пріоритети стилів
- •5. Шари й позиціонування елементів
- •6. Вирізання області (властивість clip)
- •Завдання до лабораторної роботи
- •Лабораторна робота № 11. Dhtml.
- •Завдання до лабораторної роботи
- •Вимоги до звіту та критерії оцінювання
- •Критерії оцінювання лабораторних робіт:
- •Критерії оцінювання індивідуальних робіт:
- •Для отримання заліку необхідно виконати 70% завдань і набрати не менше 145 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Лабораторна робота № 11. Dhtml.
Мета: отримати уявлення про динамічний HTML-документі. Навчитися використовувати елементи інтерактівності при створювані web сторінок. Ознайомитись з властивостями тегу <OBJECT>, а також елементами ACTIVEX.
Динамічний - означає зміна властивостей в реальному часі, наприклад при здійсненні якої-небудь події.
Події - це ядро будь-яких сучасних мов програмування. Наступна строчка, вставлена в стандартне ядро HTML сторінки примушує об'єкт заголовка змінити свій колір, коли користувач наведе на нього мишу.
<h3 onmouseover="this.style.color='red';">Цей рядок змінить колір на червоний</h3>
Цей простий приклад ілюструє доступ до властивості color елементу h3. Вся дія, власне, відбувається у виразі onmouseover="this.style.color='red'"; Це вираз мови JScript означає, що при походженні події onmouseover об'єкт, з яким відбулася подія (this - це), його безліч style і властивість в цій множині - color повинне поміняти своє значення на 'red'. (Відмітьте, що red пишеться в одинарних лапках. Це означає, що red - символьний рядок, а не яка-небудь змінна)
Щоб при виході із зони об'єкту, він знову міняв свій колір, наприклад назад, використовуйте подію onmouseout.
Приклад.
<H4 onmouseover="this.style.color='red';" onmouseout = "this.style.color = 'black';">
Цей рядок динамічно змінює свій колір
</H4>
Можете спробувати використовувати подію onclick, яке відбувається при клацанні миші на об'єкті.
Тепер, ви можете реально використовувати цей момент, наприклад в посиланнях. Додайте приведений вище код до об'єкту <A>.
Зміна зображення
Часто використовуваним прийомом анімації при створенні Web-сторінок є зміна картинки. Наприклад, при наведенні вказівника миші одна картинка, яка первісно була присутня на сторінці, замінюється на іншу картинку. Після того, як вказівник миші прибирається з картинки, попереднє зображення відновлюється.
Зміна зображення виконується за допомогою двох оброблювачів подій onMouseOver та onMouseOut. Елемент IMG записується при цьому так:
<img src="picture1.gif" onMouseOver="this.src=' picture2.gif '" onMouseOut="this.src=' picture1.gif '" OnClick="location.href=document1.html">
Цей код має недолік: він не може бути реалізований у Netscape, тому що даний браузер не підтримує події onMouseOver та onMouseOut для елемента IMG. Однак Netscape розуміє вказані події для елемента ANCHOR. Тому, для забезпечення зміни малюнка в обох браузерах краще вставити елемент IMG в ANCHOR. Наприклад:
<A href=" " onMouseOver="document.myPic.src=' picture2.gif ';" onMouseOut="this.src=' picture1.gif ';">
<IMG name=" myPic " border=0 src=" picture1.gif ">
</A>
При відтворенні цього коду в Netscape виникає ще одна проблема. Цей браузер фіксує розмір малюнка, встановлюючи його за розміром першого завантаженого малюнка. Тому щоб запобігти зміни масштабу picture2, краще робити малюнки рівного розміру. В елементі IMG введено атрибут border=0, який видаляє границю навкруги малюнка (границя відображується за замовчуванням).
Для вбудовування в HTML- сторінку зовнішніх об'єктів призначений тег <OBJECT>, який є контейнером для тегів <PARAM>, що визначають значення властивостей об'єкту, що включається. Тег <OBJECT> має декілька параметрів, два з яких безпосередньо пов'язані з елементами управління ACTIVEX.
Параметр CLSID задає унікальний ідентифікаційний номер вбудовуваного на сторінку елементу управління ACTIVEX, а значення параметра CODEBASE визначає URL- адрес розташування початкових файлів цього елементу. Але перш, ніж починати опис тега <ОВОЄСТ> і його параметрів, зупинимося на питаннях установки елементів управління ACTIVEX на комп'ютері користувача, оскільки вони тісно переплітаються з використанням елементів ACTIVEX на HTML - сторінках і в Web-додатках, реалізованих за допомогою вбудовуваних сценаріїв.
Будь-який встановлюваний на комп'ютері елемент управління ACTIVEX реєструється в системному реєстрі, куди заноситься і там же зберігається відповідна інформація. Надалі ця інформація використовується браузером Internet Explorer для обробки HTML - сторінок, що містять вбудовані елементи управління ACTIVEX.
У розділі HKEY_CLASSES_ROOT/CLSID/ реєстру зберігаються унікальні ідентифікаційні номери всіх встановлених на комп'ютері елементів управління ACTIVEX.
Для даного елементу управління ACTIVEX створений розділ, назвою для якого і служить унікальний ідентифікаційний номер елементу управління {BD96C556-65A3-iiDO-983A-ooc04FC29E33}, що привласнюється йому при створенні. Для цілей застосування елементів управління ACTIVEX на HTML-сторінках достатньо знати, що саме СОМ відповідальна за привласнення унікального ідентифікаційного номера. Можно звернутися до документації по розробці елементів управління ACTIVEX для докладнішого ознайомлення з механізмом призначення ідентифікаційних номерів.
Кожен розділ — це параметр реєстру. Якщо виділити розділ, що цікавить, в лівій панелі вікна програми роботи з реєстром Regedit.exe, то на правій панелі відобразиться значення цього параметра.
Окрім запису в розділі HKEY_CLASSES_ROOT/CLSID/ для елементу управління створюється власний розділ в каталозі HKEY_CLASSES_ROOT, в якому параметр clsid також має значення, рівне ідентифікаційному номеру елементу управління. Значенням параметра clsid є унікальний ідентифікаційний номер елементу управління RDS.Data Control.
Як наголошувалося вище, елементи управління ACTIVEX вбудовуються в сторінку HTML тегом-контейнером <OBJECT>. Він має велике число параметрів, і його повний синтаксис представлений нижчим:
<OBJECT
АССЕ S SKE.=клавіша
ALIGN=ABSBOTTOM | ABSMI
DOLE | BASELINE | BOTTOM I LEFT |
MIDDLE | RIGHT | TEXTTOP | TOP
CLASS=ім’я_класа
CLASSID=ідентифікатор_об’єкта
Соdе=ім’я_файла
CODEBASE=url-адрес[#version=a,b,c,d]
CODETYPE=media-тип
DАТА=url-адрес
DАТАFLD=ім’я_стовбца
DATASRC=# ідентифікатор _джерела
Неigнт=ціле_число
ID= ідентифікатор
LANG=мова
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS
NАМЕ=ім’я
STYLE=npaвила_CSS
Тавindex=ціле_число
TITLE=TЕKCT
Туре=мiме-тіп
WIDTH=ціле число>
Елемент HTML <OBJECT> є блоковим, тому для його правильної інтерпретації необхідно передбачити на сторінці закриваючий тег </OBJECT>. Завдання всіх параметрів, природно, не обов'язково, але деякі необхідні для правильної роботи вбудованого об'єкту і включення його самого на HTML-сторінку.
Для елементів управління ACTIVEX обов'язкове завдання параметра CLASSID.
Значенням його є унікальний ідентифікаційний номер вбудовуваного елементу управління ACTIVEX. При завантаженні сторінки браузер перевіряє, чи встановлений елемент управління на комп'ютері користувача, здійснюючи його пошук в системному реєстрі по заданому ідентифікаційному номеру. У разі відсутності запису в реєстрі браузер автоматично починає процедуру завантаження елементу управління ACTIVEX з сервера, URL-адреса якого вказана в параметрі CODEBASE тега <OBJECT>.
Значення параметра CLASSID представляє рядок, що визначає вбудовуваний об'єкт, і для зареєстрованих елементів управління ACTIVEX задається у формі:
"clsid:ХХХХХХХХ-ХХХХ-ХХХХ-ХХХХ-ХХХХХХХХХХХХ"
Перша частина clsid: повідомляє аналізатор браузера, що вставляється елемент управління ACTIVEX. Друга частина є унікальним ідентифікаційним номером цього елементу. Наприклад, кнопка управління з набору елементів управління, використовуваних при створенні форм в застосуваннях Office 97 фірм Microsoft, вбудовується на HTML-сторінку за допомогою наступного тега:
<OBJECT ID=cmdl CLASSID="CLSID:D7053240-CE69-11CD-A777-OODD01143C57">
</OBJECT>
У параметрі CODEBASE задається адреса компоненту, по якому браузер може завантажити його на комп'ютері користувача у разі відсутності:
<OBJECT ID="myActX" WIDTH=32 HEIGHT=32
CLASSID="CLSID:12D3959D-5048-11D3-A272-8C0305C10000"
CODEBASE="http://bhv.spb.ru/ActiveX/advert32.cab
#Version=l,0,0,0">
</OBJECT>
В даному прикладі визначена повна адреса елементу управління, причому звернемо увагу читача на розширення CAB завантаженого файлу. Дуже часто для прискорення завантаження різноманітних компонентів вони пересилаються по мережі в упакованому вигляді. В даному випадку елемент управління упакований програмою Cabarc.exe, використовуваною фірмою Microsoft для упаковки і розповсюдження своїх продуктів.
Після адреси елементу управління задається його версія у вигляді: #version=a,b,c,d, де а і b представляють, відповідно, старше і молодше слово максимально доступної на сервері версії елементу управління, а c і d — відповідно старше і молодше слово мінімальне доступній на сервері версії елементу управління. Ці значення використовуються браузером в процесі ухвалення рішення про завантаження елементу управління з сервера. Якщо на комп'ютері користувача встановлена новіша версія елементу управління, то завантаження не проводиться. У приведеному прикладі, якщо на комп'ютері користувача буде встановлена версія елементу управління вище, ніж 1.0, то завантаження не буде.
Значення, що визначають інтервал доступних версій компоненту можуть бути всі встановлено рівними "-i". В цьому випадку елемент управління завантажується, якщо дата випуску його версії на сервері пізніше за дату його установки на комп'ютері користувача.
Параметри WIDTH і HEIGHT задають в пікселах розміри візуального інтерфейсу елементу управління ACTIVEX, якщо він у нього існує. Наприклад, кнопка управління або мітка, реалізовані у вигляді елементів управління ACTIVEX, мають візуальні інтерфейси, а елементи управління RDS або TDC, що дозволяють працювати з даними, не мають.
Значення параметра ACCESSKEY визначає клавішу швидкого доступу до елементу управління. Це означає, що при одночасному натисненні комбінації клавіш <Alt> і заданою, елемент управління отримує фокус.
Кожен елемент управління ACTIVEX, будучи компонентом, розкриває свої властивості і методи програмі-контейнеру. При включенні елементу управління на HTML-сторінку можна задати значення його властивостей в тегах <PARAM>, що містяться в тілі тега <OBJЕСТ> Тег <PARAM> не є тегом контейнером і йому не потрібний закриваючий тег </PARAM>. Назва властивості і його значення визначаються параметрами NAME і VALUE тега <PARAM>:
<OBJECT ID="myActX" WIDTH=32 HEIGHT=32
CLASSID="CLSID:12D3959D-5048-11D3-A272-8C0305C10000"
CODEBASE="http://bhv.spb.ru/ActiveX/advert32.cab
#Version=l,0,0,0">
<PARAM NAME="Value" VALUE="TeKCT">
<PARAM NAME="TextColor" VALUE="red">
</OBJECT>
В даному прикладі задаються значення двох властивостей елементу управління. Якщо значення властивостей не задані при впровадженні елементу управління, то він ініціалізувався із значеннями властивостей за умовчанням.
Вставка тексту в сторінку
Текст може бути вставлений за допомогою тегу <OBJECT>. Для цього необхідно прописати шлях до текстового файлу і вказати параметри відображення, наприклад:
<OBJECT data="1.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>You're missing а really cool poem viewer ...
</OBJECT>
Вставка відео і анімації
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Інакше, малюнок GIF -->
<OBJECT data="TheEarth.gif" type="image/gif">
Вставка флєш зображення.
На веб-сервері сторінці flash прописується за допомогою тегів OBJECT і EMBED. Спершу – розглянемо атрибути тегів OBJECT і EMBED.
Необхідні атрибути
WIDTH - Ширина кліпу в пікселях або у відсотках від ширини вікна броузера;
HEIGHT - Висота кліпу в пікселях або у відсотках від висоти вікна броузера;
SRC - URL завантажуваного кліпу. Тільки для тега EMBED;
PLUGINSPAGE - Адреса (URL), звідки користувач може викачати плагин Flash Player, якщо він ще не встановлений. Тільки для тега EMBED. правильного значення цього атрибуту;
MOVIE - URL завантажуваного кліпу. Тільки для тега OBJECT
CLASSID - Ідентифікатор ActiveX-компонента. Тільки для тега OBJECT.
CODEBASE - URL, з якого браузер може автоматично викачати і встановити ActiveX-компонент Flash Player, якщо він ще не встановлений. Тільки для тегу OBJECT.
Необов'язкові атрибути і їх можливі значення
NAME - Ім'я флэш - кліпу для середовища, що його містить (звичайно це вікно браузера). Це ім'я може бути використане в скриптах html-сторинки, наприклад, в JavaScript або VBScript. Тільки для тега EMBED;
ID - Те ж, що і атрибут NAME, але тільки для тега OBJECT;
SWLIVECONNECT (true, false) - Вказує браузеру, чи потрібно запускати Java, коли Flash Player завантажується вперше. Значення за умовчанням (якщо цей атрибут опущений) false. Якщо ви спільно використовуєте JavaScript і Flash в межах однієї html-сторінки, цей атрибут повинен бути рівний true, щоб в Flash спрацьовувала функція FSCommand;
PLAY (true, false) - Визначає, чи буде кліп програватися відразу в процесі завантаження в браузер. Значення за умовчанням - true, якщо атрибут опущений;
LOOP (true, false) - Вказує, чи буде кліп програватися нескінченно, переходячи з останнього кадру на перший, або зупиниться. Значення за умовчанням – true (якщо атрибут опущений);
QUALITY (low, high, autolow, autohigh, best) - Low вказує програвачу, що частота зміни кадрів важливіша за зовнішній вигляд окремих кадрів. Антіаліасинг (згладжування) не використовується взагалі;
Autolow підкреслює важливість частоти зміни кадрів, але по можливості покращує зовнішній вигляд окремих кадрів. Програвач стартує без Antialias. Якщо виявляється, що процесор може проводити згладжування, Antialias включається;
Autohigh указує, що однаково важливі і частота зміни кадрів, і зовнішній вигляд окремих кадрів, але при необхідності жертвує зовнішнім виглядом в користь частоті. Програвач стартує з включеним Antialias. Якщо реальна частота кадрів стає нижчою за частоту кадрів, вказану в параметрах кліпу, згладжування вимикається, щоб підвищити швидкість. Використовуйте цю установку для емуляції режиму View > Antialias в середовищі розробки Flash;
Medium застосовує антиаліас, але не згладжує растрові зображення. Якість вища, ніж при значенні Low, але нижче, ніж при High;
High ставить красу окремого кадру вище за швидкість програвання всій послідовності кадрів. Згладжування проводиться завжди. Якщо кліп не містить анімації, растрові зображення згладжуються; якщо ж анімація в кліпі присутня, растри не згладжуються.
Best забезпечує найвищу якість відображення, але не враховує швидкість програвання. Згладжується все, у тому числі і растрові зображення;
BGCOLOR (#RRGGBB в дворозрядному шістнадцятиричному вигляді) Фоновий колір кліпу. Використовуйте цей атрибут, щоб перевизначити колір фону .swf-клипа, вказаний у файлі .fla. Цей атрибут не впливає на фоновий колір html-сторінки;
SCALE (show all, noborder, exact fit)
Show all (значення за умовчанням). Весь кліп уміщається в заданій області без спотворень, зберігаючи оригінальне співвідношення ширини і висоти. З двох сторін кліпу можуть виникати рамки;
No Border розтягує кліп так, щоб він завжди заповнював вказану область без спотворень, але, можливо, з деяким обрізанням. Оригінальне співвідношення ширини і висоти кліпу зберігається;
Exact Fit розтягує кліп так, щоб він завжди заповнював вказану область. Оригінальні пропорції не зберігаються, можуть виникати спотворення;
ALIGN (l, t, r, b)
За умовчанням кліп центрується у вікні браузера, і краї кліпу обрізаються, якщо вікно браузера менше, ніж сам кліп;
Значення L, R, T, і B вирівнюють кліп по відповідному краю вікна браузера і обрізають кліп з трьох решти сторін при необхідності;
SALIGN (l, t, r, b, tl, tr, bl, br)
Значення L, R, T, і B вирівнюють кліп щодо лівого, правого, верхнього або нижнього краю вікна браузера відповідно, і обрізають кліп з трьох решти сторін при необхідності.
Значення TL і TR вирівнюють кліп по верхньому лівому і верхньому правому куту вікна браузера відповідно і при необхідності обрізають кліп знизу і справа або знизу і зліва;
Значення BL і BR вирівнюють кліп по нижньому лівому і нижньому правому куту вікна браузера відповідно і обрізають кліп зверху і справа або зверху і зліва при необхідності;
BASE ("." або вказаний базовий каталог) Задає базовий каталог для дозволу зовнішніх відносних шляхів кліпу. Цей атрибут корисний, коли кліпи містяться не в тому ж каталозі, що і решта файлів;
MENU (true, false)
True відображає повне меню, дозволяючи користувачеві управляти програвачем і встановлювати якість програвання;
False показує меню з єдиною опцією — «About Flash Player». У Flash Player 6 також показується опція «Settings».
WMODE - Прозорість фону кліпу. За умовчанням (коли цей атрибут не заданий) фон кліпу непрозорий. Але якщо встановити для цього атрибуту значення "transparent", фон кліпу стане прозорим.
.
Приклад вбудовування флэш зображення, який підтримується всіма браузерами при встановленому флэш програвачі.
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version = 6,0,0,0" width="400" height="300">
<param name="movie" value="otkrbitka.swf" />
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="bgcolor" value="#ffffff" />
</object>
</body>