- •Модуль 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. Плаваючі фрейми (елемент iframe)
Розмістити фрейм у звичайному HTML-документі (у межах елемента <BODY>) можна за допомогою елемента IFRAME. Фрейми, створювані цими елементами, називаються плаваючими. Уперше концепція плаваючих фреймів була реалізована компанією Microsoft у браузері Internet Explorer 3.0.
Ім'я елемента плаваючого фрейму IFRAME походить від скорочення англійського терміна "inline frame" - рядковий фрейм. Контейнер <IFRAME> може розміщатися в будь-якому місці елемента <BODY>. Причому вміст, розміщений між тегами <IFRAME> і </FRAME>, буде відображатися тільки браузерами, які не підтримують технологію плаваючих фреймів.
Завдання плаваючого фрейму аналогічно опису елемента IMG. Основні припустимі атрибути тегу <IFRAME>:
src - задає URL-адресу файлу, що завантажується;
width, height - визначають ширину й висоту плаваючого фрейму;
align - установлює вирівнювання фрейму щодо вікна браузера;
marginwidth, marginheight, frameborder і scrolling - призначають розміри вільних полів між видом рамки фрейму й смуг прокручування;
name - задає ім'я фрейму, використовується при визначенні цільового фрейму.
На відміну від звичайних фреймів, розміри плаваючого фрейму не можуть бути змінені відвідувачем сторінки, тому в число припустимих атрибутів тегу <IFRAME> не входить noresize.
Приклад:
<HTML>
<HEAD>
<ТIТLЕ>Історія обчислювальних машин </ТІТLЕ>
</HEAD>
<BODY>
<Н2>Перше покоління ЕОМ</Н2>
<!- Вміст основної частини документа ->
<IFRAME name="stepl"
src="compmach.html" width=450 height=180 align="right">
</IFRAME>
<!- Уміст основної частини документа ->
</BODY>
</HTML>
Завдання до лабораторної роботи
Завдання №1.
1. Створити за допомогою редактора Dreamweaver чотири Web-документи, зберегти їх в одній папці з ім'ям ФРЕЙМ (у цій же папці зберігається основний документ).
2. Створити документ із фреймовою структурою, аналогічно запропонованому прикладу (при цьому назви файлів необхідно використовувати свої):
<html>
<head><title>Фрейми</title></head>
<frameset rows="25%,50%,25%">
<frame src="f1.htm">
<frameset cols="25%,75%">*/ вкладений фрейм*/
<frame src="f3.htm">
<frame src="m1.htm">
</frameset>
<frame src="f2.htm">
</frameset>
</html>
Завдання №2.
1. Створіть HTML-документ, який містить чотири фрейма, використовуючи для цього документи k1-1.html, k2-1.html, k3.html, k4.html (дивись нижче) і збережіть їх в одній папці, назва папки FRAME.
2. Змініть колір фону кожної сторінки, використовуючи атрибут bgcolor тегу BODY: на сторінці 1 вкажіть колір FF00FF, на сторінці 2 - 00FF00, на сторінці 3 - FFFF00, на сторінці 4 – FFFFFF.
Базовий HTML- документ збережіть з назвою web.html.
Файл k1-1.html
<HTML>
<HEAD><TITLE>Кадр. Сторінка 1</TITLE></HEAD>
<BODY BGCOLOR="#FF00FF">
Кадр 1 рожевого кольору
</BODY>
</HTML>
Файл k2-1.html
<HTML>
<HEAD><TITLE>Кадр. Сторінка 2</TITLE></HEAD>
<BODY BGCOLOR="#00FF00">
Кадр 2 зеленого кольору
</BODY>
</HTML>
Файл k3.html
<HTML>
<HEAD><TITLE>Кадр. Сторінка 3</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00">
Кадр 3 жовтого кольору
</BODY>
</HTML>
Файл k4.html
<HTML>
<HEAD><TITLE>Кадр. Сторінка 4</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
Кадр 4 білого кольору
</BODY>
</HTML>
Базовий документ web.html
<HTML>
<HEAD><TITLE>Демонстрація фреймів</TITLE></HEAD>
<FRAMESET COLS="25%, 25%, 25%, 25%">
<FRAME SRC="k1-1.html">
<FRAME SRC="k2-1.html">
<FRAME SRC="k3.html">
<FRAME SRC="k4.html">
</FRAMESET>
</HTML>
Завдання №3.
1. Створити на диску папку ФРЕЙМИ
2. Створити в редакторі Dreamweaver файли menu.html, 1.html, 2.html, 3.html, Index.html (зміст файлів приведено нижче) і зберегти їх у папці ФРЕЙМИ.
Файл menu.html
<html>
<head><title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"></head>
<body bgcolor="#FFCCCC">
<h3> Меню </h3>
<ol title="1" type="1">
<li> <a href="1.htm" target="main">перший </a></li>
<li> <a href="2.htm" target="main">другий</a> </li>
</ol>
</body>
</html>
Файл 1.html
<html>
<head><title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"></head>
<body bgcolor="#99FF00">
<h4> перший файл, завантажений у головний фрейм </h4>
</body>
</html>
Файл 2.html
<html>
<head><title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"></head>
<body bgcolor="#0099FF">
<h2> другий файл, завантажений у головний фрейм </h2>
</body>
</html>
Файл 3.html
<html>
<head><title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"></head>
<body bgcolor="#FFFF33">
<h5> третій файл, завантажений у вкладений третій фрейм </h5>
</body>
</html>
Файл Index.html
<html>
<head><title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251"></head>
<frameset cols="25%,*">
<frame name="menu" marginheight="3" marginwidth="4" bordercolor="#00FF99" src="menu.htm">
<frameset rows="85%,*">
<frame name="main" marginheight="4" scrolling="yes" frameborder="yes" bordercolor="#FF6600" src="1.htm">
<frame name="logo" src="3.htm">
</frameset>
</frameset>
</html>
3. Проаналізувати роботу програму, запустивши файл Index.html.
Завдання №2.
1. Створити в редакторі Dreamweaver будь-які шість файлів, з яких один буде файлом меню. Файл меню буде називатися menu.html і мати такий вигляд:
-
Меню
Перший
Другий
Третій
Четвертий
де «Перший», «Другий», «Третій» та «Четвертий» – гіперпосилання на інші файли.
2. Завантажити будь-які із створених п'яти файлів у фреймову структуру наступного виду (у відсотках зазначені розміри фреймів):
40%
|
20% |
50% |
|
60% |
|
30% |
Завдання №3.
1. Використовуючи шість створених файлів з попереднього завдання. Створити фреймове меню з панеллю навігації наступного виду:
Файл меню |
Завантажувальні по посиланням файли («Перший», «Другий», «Третій» та «Четвертий») |
П'ятий файл |
2. Додати в кожний із файлів плаваючий фрейм.
Контрольні питання:
Яка структура фреймового документа?
Для чого використовується тег Noframes?
Які атрибути визначають колір і розміри рамок?
Які атрибути визначають кількість і розміри фреймів?
Які типи файлів можу бути розміщені у фреймах?
Як організується плаваючий фрейм?
Як завантажити документ усередину зазначеного фрейму?
Назвіть атрибути, відповідальні за рамки й поля фреймів?
Як забрати поля прокручування?
Як організувати панель навігації?