- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Стільові властивості (продовження)
1. Властивості блоку
Текстові HTML-елементи можна представити у вигляді прямокутних блоків. До таких елементів відносяться Р, DIV, BODY. Для них у CSS передбачена спеціальна група властивостей, що дозволяє задавати поля, границі, відступи, розміри блоку. Розглянемо окремо кожну із властивостей блоку:
margin - це ключове слово позначає набір властивостей, що визначають кожне із чотирьох полів навколо блоку: margin-top (верхнє поле), margin-right (праве поле), margin-bottom (нижнє поле), margin-left (ліве поле). До властивостей поля відноситься також і margin, що дозволяє одним рядком задати значення всіх чотирьох полів. Значення полів виражаються в абсолютних числах (наприклад, 50pt, 10cm) або у відсотках від ширини блоку (наприклад, 70%). Можливе значення auto, при якому браузер сам підбирає оптимальне поле;
border - позначає набір властивостей відображення границі елемента. Розрізняють властивості:
border-style (керування виводом границі) Значеннями цієї властивості є dotted (границя із крапок), dashed (пунктирна границя), solid (звичайна суцільна границя), double (подвійна лінія), groove («утоплена» лінія границі), ridge (опукла границя), insert (об'єкт, «втиснений» у сторінку), outset (опуклий об'єкт);
border-width (ширина границі). Ширину границі можна задавати як в абсолютних одиницях (наприклад, 3 рх), так і за допомогою ключових слів: thin (тонка), medium (середня) і thick (товста);
border-color (колір границі) визначається символьною назвою кольору, шістнадцятирічним кодом #RRGGBB, у десятковому форматі (наприклад, rgb (56,28,18)) або в процентному форматі (наприклад, rgb(25%,3 0%, 70%)).
Властивості границь можуть застосовуватися до рядкових елементів (наприклад, SPAN). При цьому рядковий елемент автоматично перетворюється в блок, відділений від іншого тексту порожніми рядками.
padding - визначає просвіт між умістом блоку й границею. Для кожної границі є своя властивість: padding-top, padding-right, padding-bottom і padding-left. Значення властивості задається в абсолютних одиницях (наприклад, lcm, 5mm, 10pt);
width і height - задають відповідно ширину й висоту блоку без урахування відступів, границь і полів. Ці властивості вказуються в абсолютних одиницях (mm, cm, pt і т.д.), а ширину можна задавати також і у відсотках. У текстовому блоці, висоту можна не визначати, при цьому властивості height привласнюється значення за замовчуванням - auto. Розмірність абсолютної величини за замовчуванням зазначена в пікселях (наприклад, weight: 100);
float - визначає розміщення поточного елемента по горизонталі стосовно зовнішнього елемента. Наприклад, якщо ця властивість задана для малюнка IMG, за яким слідує текстовий блок, то float буде задавати обтікання малюнка текстом. Властивість float приймає значення left (розміщення елемента ліворуч), right (розміщення елемента праворуч) і none (відсутність обтікання при розміщенні елемента вздовж лівої границі документа);
clear - скасовує дію властивості float. Якщо, наприклад, було задане розміщення малюнка вздовж лівої границі з обтіканням тексту, то значення clear:left відключить це обтікання. Відключити обтікання по обидва боки можна значенням both.