- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню.
Мета: вивчити основні можливості фреймів щодо представлення інформації у HTML-документах, опанувати технологію представлення інформації у HTML- документах за допомогою фреймів. Вивчити атрибути елементу FRAME: name, scrolling, noresize, marginwidth, marginheight. Опанувати технологію використання фреймів для створення навігації по сайту.
Основні теоретичні відомості
1. Основні поняття
Фрейми дозволяють розбити вікно перегляду на кілька прямокутних областей, що розташовуються поруч один з одним (причому, в кожин фрейм можна завантажити окремий HTM-документ, перегляд якого здійснюється незалежно від інших).
Фрейми застосовуються:
при необхідності організації управління завантаженням документів в одну з підобластей вікна перегляду браузера при роботі в інший підобласті;
для розташування в певнім місці вікна перегляду інформації, що повинна постійно перебувати на екрані незалежно від змісту інших підобластей екрану;
для подання інформації, яку зручно розташувати в декількох суміжних підобластях вікна, кожна з яких може проглядатися незалежно.
Оскільки документ із фреймами фактично складається з декількох документів, замість елемента BODY необхідно записувати FRAMESET - елемент фреймової структури. Цей елемент за допомогою своїх атрибутів задає набір фреймів, які відображаються браузером. Те, що перебуває усередині кожного фрейму, визначається елементом FRAME. Всі елементи FRAME розташовуються усередині контейнера <FRAMESET>---</FRAMESET>.
2. Елемент завдання фреймів frameset та його атрибути
Контейнер з тегів <FRAMESET> і </FRAMESET> обрамляє кожний блок визначень фрейму. Усередині контейнеру <FRAMESET> можуть утримуватися тільки теги <FRAME> і вкладені теги <FRAMESET>. Тег <FRAMESET> має два основних параметри: rows (рядка) і cols (стовпці):
<FRMESET ROWS= "список значень" СОLS= "список значень">.
Приклад:
<FRMESET ROWS="25%,50%,25%"> <FRMESET ROWS="*,2*,3*">
Кожний елемент FRAMESET формує фрейми, що відносяться до одного набору (або рівню). Щоб задати фрейми з різними властивостями (наприклад, різними розмірами або різними видами обрамлення), застосовуються вкладені фрейми.
Web-сторінка із фреймами по горизонталі й по вертикалі ділиться на певну кількість фреймів із заданою товщиною рамок, пофарбованих в обраний автором колір. Всі ці властивості фреймів задаються атрибутами початкового тегу <FRAMESET>, з яких головними є cols і rows.
Атрибут cols
Значення атрибуту cols задає кількість вертикальних фреймів (фреймів-стовпців) і їхні розміри. В якості значення цього атрибуту використовується список розмірів кожного фрейму, розділених комами, наприклад,
<FRAMESET cols="20%,55%,*">
Загальна кількість значень у списку дорівнює кількості фреймів, описуваних даним елементом FRAMESET. Перше значення відповідає ширині крайнього лівого фрейму, а наступні значення відносяться до другого, третього фрейму й т.д. У наведеному вище записі ширина першого фрейму 20% від загальної ширини вікна, другого фрейму - 55% , а третьому фрейму приділяється частина вікна, що залишилася, цей факт відзначається зірочкою (*). Можна також вказувати розмір у пікселях, наприклад: <FRAMESET cols="150, 25%, *">
Змінити розміри фрейму можна переміщенням мишею границі між фреймами. Границі допускають переміщення, якщо в <frameset> відсутній атрибут noresize.
Атрибут rows
Атрибут rows дає змогу вказати кількість і розміри горизонтальних фреймів. Значенням цього атрибуту є список розмірів (аналогічно значенню атрибуту cols). У послідовності чисел, що перераховуються, або символів, спочатку вказується висота верхнього фрейму, завершується список розміром нижнього фрейму.
Спільне використання атрибутів rows і cols
У тегу <FRAMESET> можна одночасно вказувати атрибути rows і cols. При цьому, кожен горизонтальний фрейм браузер розіб'є на задане число вертикальних фреймів. Наприклад, наступний HTML-код задає шість фреймів:
<HTML>
<HEAD><ТIТLЕ>Горизонтальні й вертикальні фрейми</ТIТLЕ> </HEAD>
<FRAMESET rows="50%,*” cols="30%,*,200">
<FRAME src="lime.html">
<FRAME src="yellow.html">
<FRAME src="cyan.html">
<FRAME src="white.html">
<FRAME src="aqua.html">
<FRAME src="red.html">
</FRAMESET>
де lime.html, yellow.html, cyan.html, white.html, aqua.html, red.html файли наступної структури:
<HTML>
<HEAD><ТIТLЕ>колірний фрейм</ТIТLЕ> </HEAD>
<BODY color=”lime”>
</BODY>
</HTML>
Товщина й колір рамок (атрибути border, bordercolor)
Для завдання товщини границь, що розділяють фрейми, користуються атрибутом border. Цей атрибут, значення якого записується в пікселах, міститься в тегу <FRAMESET>.
Атрибут bordercolor дозволяє управляти кольором границь між фреймами. Наприклад, bordercolor = "white " задає границю білого кольору. На екрані буде присутній вузька смужка від тіні рамки.