- •Модуль 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. Вміст фреймів (елемент frame)
Вміст кожного окремого фрейму задається елементом FRAME, що вказує на документ, що завантажується в область фрейму. Кожному фрейму відповідає свій одиночний тег <FRAME>.
Завдання файлу-джерела (атрибут src)
В HTML не передбачено іншого опису вмісту фрейму, тому src - це обов'язковий атрибут тегу <FRAME>.
У кожному з тегів <FRAME> є присутнім атрибут src з URL-адресою початкової Web-сторінки або відповідного файлу, що завантажується в область фрейму. Як значення атрибута src можна вказувати адреси HTML-файлів, графічних, аудіо або відео файлів.
Якщо фрейм декларований в елементі frameset, але для нього не існує тегу <frame>, що вказує на документ-джерело, то на місці останнього фрейму браузер відобразить поле сірого (Internet Explorer) або білого (Netscape) кольору. Якщо в елементі frame зазначений невірний url, то у відповідному фреймі з'явиться повідомлення «Неможливо відобразити сторінку».
Порожній фрейм
Для того, щоб при початковому завантаженні сторінки який-небудь фрейм був порожнім, необхідно завантажити в нього порожню сторінку, що формується наступним кодом:
<HTML>
<HEAD> <ТІТLЕ> Порожня сторінка </ТIТLЕ></HEAD>
<BODY></BODY>
</HTML>
4. Вкладені фрейми
У пункті «Спільне використання атрибутів rows і cols» нами було розглянуто формування на сторінці вертикальних і горизонтальних фреймів одного рівня, що виконувалося за допомогою одного елемента FRAMESET. Більш складну структуру можна створити, якщо використовувати FRAMESET, вкладені один в одний. Розглянемо, як це робиться.
Нехай у батьківському елементі FRAMESET утримуються два вертикальних фрейми, причому один з них містить, у свою чергу, три фрейми однакової висоти:
<HTML> <HEAD> <ТIТLЕ>Вкладені фрейми </ТIТLЕ> </HEAD> <FRAMESET cols="200,*"> <FRAME src="rosel.gif"> <FRAMESET rows="*,*,*"> <FRAME src="rose2.gif"> <FRAME src="rose3.gif"> <FRAME src="rose4.gif"> </FRAMESET> </FRAMESET> </HTML> |
Мал. 7 Вкладені фрейми |
Безфреймова версія сторінки (елемент NOFRAMES)
Якщо браузер не відтворює вміст фреймів, то розроблювачі створюють два варіанти Web-сторінок: із фреймами й без фреймів (всі сучасні браузери підтримують фреймову структуру документа).
В HTML передбачений спеціальний елемент NOFRAMES, що включає альтернативний вміст вашої сторінки. Якщо браузер підтримує фрейми, то весь код між тегами <NOFRAMES> і </NOFRAMES> буде проігнорований.
5. Інші атрибути елемента frameset
Розташування й розміри фреймів, вид границь визначаються атрибутами елемента FRAMESET. Два головних атрибути цього елемента cols і rows ми вже описували, розглянемо інші атрибути.
Стильові властивості рамки
Фрейми відносяться до блочних HTML-елементів, тому при роботі з ними можна застосовувати стильові властивості, що вводяться атрибутом style. Перелічимо властивості, за допомогою яких можна управляти зовнішньою рамкою:
border-width - визначає товщину зовнішньої рамки навколо фреймів. Наприклад, вбудований стиль style="border-width: thick" встановлює відображення товстої рамки із зовнішньої сторони набору фреймів елемента FRAMESET;
border-color - задає колір зовнішньої рамки. Наприклад, стиль style= "border-color : aqua" буде вказувати браузеру на відображення рамки бірюзовим кольором;
border-style - встановлює стиль зовнішньої рамки, наприклад, атрибут style= "border-style: double" задає відображення рамки у вигляді подвійної лінії.
Фреймова структура використовується при створенні web-документів з метою організації головних та інших меню, розташування рекламної інформації, банерів і т.д.
При створенні фреймової структури необхідно спочатку розробити структуру web-документу (карту сайту). Після чого створити всі html сторінки, які будуть зберігатися й завантажуватися у вікнах фреймової структури. Після цього створюється головна фреймова сторінка (зі структурою frameset), що зберігається в папці розміщення сайту. У цій сторінці прописуються адреси, по яких у фрейми буде завантажувати вміст, створених web-сторінок.
При роботі з редактором Dreamweaver наступним кроком буде виділення й збереження кожного фрейму (для збереження фрейму, достатньо його виділити у вікні редактору та натиснути клавішу F5, після цього в вікні діалогу необхідно вказати місце та ім’я документу, що зберігається). Їх (фрейми) бажано зберігати в папці сайту.
Для того, що б перейти знову до головної фреймової структури в редакторі Dreamweaver, необхідно нажати лівою кнопкою миші на границю фрейму.
