- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Лабораторна робота №6 Карти зображень. Робота зі звуком.
Мета: вивчити призначення карт зображень; опанувати технологію створення карт зображень в HTML-документах. Навчитися озвучувати web-сторінки.
Основні теоретичні відомості
1. Основні поняття
Web-сторінки для організації посилань використовують візуалізований вид організації посилань: карти зображень. HTML дозволяє прив'язувати посилання до різних областей зображення. Карта посилань являє собою зображення, розбите на фрагменти, причому кожний фрагмент є одночасно гіперпосиланням.
Основи використання карт зображень
Карти-зображення - особливий вид подання гіперпосилання. Щоб виконати перехід по посиланню, варто просто нажати мишею на потрібне місце зображення. Замість текстових меню, користувачі можуть працювати з наочно-графічними.
Графічне подання зображення
Карта зображень - це звичайне графічне зображення формату GIF, JPG або інше. При цьому у форматі GIF може використовуватися прозорий колір, а також режим чергування рядків. У тегу <IMG> є атрибут usemap, що визначає дане зображення як карту посилань. Як значення цього атрибута використовується ім'я елементу MAP, що містить опис карти. Наприклад, тег
<IMG sгс="mapl.gif" usemap="#navigation">
Опис структури карти міститься в елементі з ім'ям navig. Символ # у значенні атрибута usemap показує, що за цим символом слідує ім'я закладки, розміщеної в поточному HTML-документі.
Значення атрибута name тегу <map> з точністю повинне збігатися зі значенням атрибута usemap тегу <IMG>. Символ # - вказує, що після нього йде ім'я закладки
Активні області можуть мати форму прямокутників, кіл і багатокутників. Допускається будь-яка комбінація цих фігур.
Переваги й недоліки карт зображень
У використанні карт зображень є як позитивні, так і негативні моменти. Більшість із них носить естетичний характер.
Переваги.
Карти зображень найбільше зручно використовувати в наступних ситуаціях:
для подання просторових зв'язків, наприклад географії координат, які було б важко задати окремими кнопками;
у якості меню верхнього рівня, що з'являється на кожній сторінці. Наявність такого меню надає можливість переходу в кожний розділ сервера з будь-якої сторінки й у будь-який момент.
Недоліки:
якщо не передбачене альтернативне текстове меню, то не залишається засобів навігації для користувачів, які не включають графіку;
збільшується час завантаження Web-сторінки;
не відзначає іншим кольором пройдені посилання.
2. Створення карти посилань в html
Процедура завдання карт посилань
Процедура завдання карт посилань розбивається на декілька етапів:
завдання всього зображення карти зі спеціальною вказівкою, що це зображення являє собою карту, а не простий малюнок;
розбивка зображення на окремі фрагменти й складання їхнього опису;
опис кожного фрагмента.
Варіанти карт зображень
Серверний (розглядатися не буде)- браузер надсилає запит на сервер для одержання адреси обраного посилання. Це може зажадати додаткового часу на очікування.
Клієнтський - дозволяє розмістити всю інформацію про конфігурацію карти в HTML-файлі, у який вбудоване зображення. При клієнтському варіанті число звертань до сервера зменшується, і збільшується швидкість доступу до інформації. Для вказівки того, що убудоване зображення є опорним для карти, використовується параметр usemap тегу <img>.
Тег <MAP>
Тег <MAP> призначений для опису конфігурації областей карти зображення. Єдиний параметр тегу <MAP> – name. Значення атрибуту name визначає ім'я, що повинне відповідати імені в usemap. Тег <MAP> вимагає закриваючий тег. Усередині цієї пари тегів повинні розташовуватися описи активних областей карти, для цього використовується тег <AREA>.
Тег <AREA>
Тег <AREA> задає одну активну область. Активні області можуть перекриватися, при цьому, виконуватися буде те посилання, опис якого розташовується першим в списку областей. В таблиці 4 розглянуті основні атрибути тегу <AREA>
Таблиця 4. Атрибути тегу <AREA>
Параметр |
Опис |
shape |
Визначає форму активної області:
|
coords |
Задає координати окремої активної області. Значенням параметра є список координат точок, що визначають область, розділених комами. Координати записуються у вигляді цілих невід’ємних чисел. Початок координат розташовується у верхньому лівому куті зображення, якому відповідає значення 0,0. Перше число визначає координату по горизонталі, друге - по вертикалі. Список координат залежить від типу області.
|
href, nohref
|
Параметри href і nohref є взаємовиключними. Якщо не заданий жоден із цих параметрів, то вважається, що для даної області нема посилання.
|
target |
Вживається при роботі з фреймами. Він вказує ім'я фрейму, у який буде розміщено документ, що завантажується по посиланню. |
alt |
Дозволяє записати альтернативний текст для кожної з активних областей зображення. Цей текст буде відігравати роль лише для творця документа, тому що ніколи на екрані не з'явиться. |
Приклад
Два прямокутних посилання
<html>
<body>
<h2>Приклад карти посилань</h2>
<hr><br>
<img src="NOTEPAD.GIF" width="100" height="100" border="0" usemap="#f" hspace="250">
<map name="f">
<area shape="rect" coords="0,0,99,50" href="s.htm" alt="верхня ">
<area shape="rect" coords="0,50,99,99" href="privet.htm" alt="нижня">
</map>
</body>
</html>