
- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
3. Створення карт посилань за допомогою редактора Dreamweaver
Порядок створення карти посилань за допомогою редактора Dreamweaver наступний:
Створити файли, на які буде посилатися головний файл через карту посилань.
Створити головний файл, що буде містити посилання.
Завантажити в головний файл через тег IMG зображення, що буде використовуватися як карта посилань.
Нажати F5, при цьому панель властивостей прийме вид такий, як показано на малюнку 8.
Внизу панелі перебувають 4 інструменти, об'єднаних назвою map. Ці інструменти (покажчик, прямокутник, еліпс, багатокутник), використовуються для створення карт посилань. Лівою кнопкою миші вибирають вид виділення, потім, на зображенні мишкою визначають область посилання й набудовують через панель властивостей її властивості.
У параметрі map (дивіться малюнок 9) прописують ім'я карти. Параметри vspase і hspace, що перебувають поруч, задають відповідне розташування зображення, на якому перебуває карта посилань, відносно всього документа. Link – визначає url-адресу файлу або закладки (за замовчуванням), на яку перейде файл по посиланню. Target – визначає спосіб висновку файлу на екран (файл може бути виведений у фреймове вікно).
|
Мал.8 Зовнішній вигляд вікна редактора з панеллю властивостей. |
|
Мал.9 Настроювання прямокутного виділення |
Приклад
Сайт з картою посилань:
Файл mouse.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
</head>
<body>
<h2>Це губи</h2>
</body>
</html>
Файл eyes.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
</head>
<body>
<h1> це ока</h1>
</body>
</html>
Файл index.html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
</head>
<body>
<img src="PH03425I.JPG" width="415" height="324" hspace="300" vspace="200" border="0" usemap="#one" lowsrc="J0386764.JPG">
<map name="one" id="one">
<area shape="rect" coords="63,131,113,152" href="eyes.htm" target="_parent">
<area shape="circle" coords="85,169,16" href="eyes.htm" target="_parent">
<area shape = "poly" coords = "182, 119, 198, 125, 225, 128, 224, 141, 202, 137, 181, 134" href="eyes.htm" target="_blank">
<area shape = "poly" coords ="316, 163, 315, 144, 336, 138, 355, 136, 363, 144, 360, 152" href="eyes.htm">
<area shape = "poly" coords ="351, 180, 333, 181, 328, 171, 356, 166, 359, 174" href="mouth.htm">
<area shape="circle" coords="194, 159, 13" href="mouth.htm">
</map>
</body>
</html>
Робота з мультимедіа
Існує два типи звукових файлів, використовуваних в комп'ютерах: цифрові і музичні. Іноді виділяють ще один тип файлів - текстово-звукові, в яких використовується метод конвертації текстового файлу в звуки, близькі до людської мови, тобто заміна букв фонемами.
На якість оцифрованого звуку впливає декілька чинників. Найважливішим чинником є частота дискретизації звуку (sampling rate) або кількість перетворень аналогового звуку в цифровій (вимірів), виконуване за одну секунду. Чим більше частота дискретизації, тим вище якість звуку і тим більше при відтворенні він буде схожий на оригінал. Іншим чинником є розрядність дискретизації (sample rate), що визначає точність вимірів. Типовими значеннями є 16 битий, 8 битий і ін.