- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Лабораторна робота №9 Зовнішні аркуші стилів . Стильові властивості
Мета: опанувати принципи побудови зовнішніх аркушів стилів. Вивчити стильові властивості блоків, списків та інших елементів, їх значення, навчитися використовувати стильові властивості при створенні HTML-документів.
Основні теоретичні відомості
Зовнішні аркуші стилів записуються в окремих файлах і застосовуються для оформлення набору HTML-документів. Використання зовнішніх аркушів стилів дозволяє одноманітно оформляти множину Web-сторінок і навіть сайтів. Зручність зовнішніх стилів полягає також у тому, що автор Web-сторінок може змінювати стилі, не зачіпаючи змісту документів.
1. CSS-файли
У технології, що розглядається в даній роботі, опис стилів зберігається в окремому файлі, який має розширення .css (для стилів CSS) або .jss (для стилів JSSS - JavaScript Style Sheet, розроблених компанією Netscape). Такий файл є звичайним ASCII-файлом (як і HTML-файл). Для звернення до файлу зовнішніх стилів йому привласнюється ім'я, наприклад, style.css.
Змістовна частина CSS-файлу складається тільки з аркуша стилів. Для пояснень у ці файли можуть включатися коментарі. Кількість правил, описуваних у файлі стилів, не обмежено.
Приклад CSS-файлу:
P.red {font-weight: bold; color: red}
SPAN {font-style: italic; font-size: 14pt}
.yellow {background-color: yellow; font-family: Arial}
Як видно з прикладу, CSS-файл не містить яких-небудь заголовків або кінцевих елементів.
2. Звертання до зовнішнього аркуша стилів (елемент link)
Основним інструментом підключення до HTML-документа зовнішніх аркушів стилів є одиночний тег <LINK>. Цей тег розташовується в заголовній частині HEAD. До складу тегу <LINK> входить ряд атрибутів, з яких три є обов'язковими:
type ="text/ess" - указує браузеру, що застосовується, текст формату CSS.
href - задає URL-адресу файлу зовнішнього аркуша стилів. Якщо CSS-файл розташовується в тому ж каталозі, що й поточний документ, то вказується тільки ім'я файлу, наприклад, style.css.
rel=“stylesheet” - визначає відношення між поточним документом і об'єктом посилання href. Значення stylesheet указує на те, що елемент LINK установлює зв'язок із зовнішнім аркушем стилів.
Приклад:
<HTML>
<HEAD>
<TITLE>Назва сторінки</TITLE>
<LINK rel="stylesheet" href = "http: //www.generaledu.org/ Styles/ mainst.ess " type = "text/css">
</HEAD>
<BODY>
<! -зміст документа ->
</BODY>
</HTML>
Зауваження
Один елемент LINK установлює зв'язок тільки з одним CSS-файлом. Для звернення, наприклад, до трьох файлів, що містять аркуші стилів, у HTML-документ необхідно ввести три елементи LINK.
3. Запис css-правил.
Наступні прийоми запису CSS-правил спрощують запис та читання аркушів стилів.
Порядковий запис стильових властивостей. Такий запис стильових властивостей прийнятий для спрощення читання аркушів стилів. Прикладом порядкового запису стильових властивостей
Н2.blue {
color: blue;
font-family: Arial;
text-align: right
}
Скорочена форма запису. Такий запис стильових властивостей дозволяє призначати відразу кілька властивостей за допомогою одного ключового слова, наприклад, для властивостей шрифтів. Значення властивостей записуються після ключового слова font і впорядковуються у вигляді наступної послідовності:
font: font-style font-variant font-weight font-size/line-height font-family
Значення властивостей у скороченому записі представляються списком з одним розділовим символом - пробілом, наприклад:
DIV {font: italic small-caps bold 14pt/18pt serif}
Тут дві властивості, записані через косу риску, указують на розмір шрифту (font-size) і міжрядковий інтервал (line-height) відповідно. Пропущена в записі властивість приймає значення за замовчуванням.
Коментарі. Початок коментаря відзначається косою рискою із зірочкою (/*), а кінець - зірочкою з косою рискою (*/). Між цими символами розміщається будь-яке текстове повідомлення, наприклад:
/* Це аркуш стилів, оформлений окремим файлом */
Коментарі часто вставляються як перший рядок файлу з описом стилів. Вони використовуються також для тимчасового відключення правил або властивостей з аркуша стилів. Наприклад, щоб не змінювати запис стильового правила в цілому, можна закоментувати деякі властивості:
/* font-family:arial; font-style:italic;*/
Групування селекторів і визначень. Якщо відображення елементів задається однаковими CSS-правилами, то доцільно виконати групування селекторів. Наприклад, замість
H3 { font-family:sans-serif}
H4 { font-family:sans-serif}
використовують
H3, H4 { font-family:sans-serif}
Групування визначень здійснюється шляхом перерахування визначень через крапку з комою. Наприклад, замість
H2 {font-size: 11pt}
H2{line-height: 12pt}
H2{font-family: arial}
H2{font-style: oblique}
використовують
H2{ font-size: 11pt;
line-height: 12pt;
font-family: arial;
font-style: oblique}
Таким чином, групування селекторів відбувається шляхом їхнього перерахування через кому, а групування визначень - через крапку з комою.