- •Модуль 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. Атрибути елемента frame
Відображення окремих фреймів визначається атрибутами елемента FRAME.
Атрибут name
Атрибут name є одним із самих основних. Він дозволяє звертатися до фрейму по імені в атрибуті target, вказуючи в якому фреймі буде відображатися вміст файлу, що завантажується.
Відображення смуг прокручування (атрибут scrolling)
Якщо вміст фрейму не вміщується у відведену йому область вікна браузера, то за замовчуванням уздовж границі фрейму з'являється смуга прокручування.
Атрибут scrolling може приймати значення:
yes - смуги прокручування завжди відображаються;
no - не відображаються;
auto - це значення встановлюється за замовчуванням і відповідає появі смуг прокручування лише якщо буде потреба.
Фіксація розмірів фрейму (атрибут noresize)
Для фіксації розмірів фрейму використовують атрибут noresize. Введення цього атрибута в тег <FRAME> забороняє зміну розмірів фрейму.
При використанні атрибута noresize в елементі фрейму потрібно враховувати, що заборона на зміну розмірів стосується як границь суміжних фреймів, так і тих фреймів, які мають границі, що є продовженням границь нерегульованого фрейму.
Відображення рамки навколо фрейму
У всіх наведених раніше прикладах кожний із фреймів був обмежений рамкою, що встановлюється за замовчуванням для елементів FRAME. Якщо необхідно управляти відображенням рамок навколо фрейму, то можна скористатися атрибутом frameborder. Цьому атрибуту можна привласнювати два значення: 0 (рамки не відображаються) і 1 (наявність рамок між поточним і суміжним фреймами). Останнє значення встановлюється за замовчуванням.
Вільні поля (атрибути marginwidth, marginheight)
Специфікацією HTML передбачено керування вільними полями усередині фрейму, тобто відступами вмісту фрейму від границь. Для цього використовуються атрибути marginwidth (відступ від лівої й правої границі) і marginheight (відступ від верхньої й нижньої границі). Наприклад, вільні поля ліворуч і праворуч розміром 30 пікселів встановлюються атрибутом marginwidth=30, верхнього й нижнього поля в 150 пікселів - атрибутом marginheight=150 . Дія зазначених атрибутів поширюється як на текст, так і на графіку.
Приклад завдання полів за допомогою атрибутів marginwidth і marginheight:
<HTML>
<HEAD>
<ТIТLЕ>Дванадцять стільців</ТIТLЕ>
</HEAD>
<FRAMESET cols="30%, *">
<FRAME name="leftframe" src="cont.html" marginwidth="30" marginheight="30">
<FRAME name="rightframe" src="glavl.html" marginwidth="30" marginheight="30">
</FRAMESET>
</HTML>
2. Посилання й навігація
Як відзначалося лабораторній роботі №8, за допомогою фреймів можна створити зручну систему навігації по сайту. В одному фреймі розміщаються посилання на сторінки сайту, а в іншому - уміст самих сторінок. Розглянемо докладніше технологію створення подібних посилань.
Цільові фрейми й елементи прив'язки
Щоб при активізації посилання виконувалося завантаження сторінки в певний фрейм, цьому фрейму (він називається цільовим) потрібно привласнити унікальне ім'я. Імена цільових фреймів можуть починатися з будь-якої рядкової або прописної букви латинського алфавіту. Ім'я привласнюється атрибутом name тегу <FRAME>. Наприклад, тег
<FRAME src="mydoc.html" name="report">
установлює, що вмістом фрейму report після початкового завантаження буде файл mydoc.html.
Ім'я цільового фрейму повинне бути зазначене в елементі прив'язки А через значення атрибута target, наприклад:
<А href="doc2.html" target="report"> Звіт </A>
При клацанні мишею по посиланню «Звіт» буде завантажений файл doc2.html у цільовий фрейм report. Таким чином, застосування посилання з атрибутом target дозволяє відкривати новий документ у конкретному фреймі.
Базовий фрейм (елемент BASE)
Документ, на який вказує посилання, завантажується в цільовий фрейм. Цей фрейм визначається атрибутом target. Допустимо, є файл, який має багато посилань, і необхідно, щоб всі документи, що відповідають посиланням, завантажувалися в той самий фрейм. Щоб організувати таке завантаження, не потрібно записувати атрибут target у кожний елемент прив'язки. Досить для цього скористатися елементом BASE.
Нагадаємо, що тег <BASE> застосовується також для вказівки базової URL-адреси при формуванні відносних гіперпосилань. Цей тег розміщується в заголовній частині HTML-файлу.
Фрейм, у який провадиться завантаження по гіперпосиланнях, називається базовим фреймом. Він задається значенням атрибута target в одиночному тегу <BASE>. Наприклад, файл навігації cont.html з декількома елементами прив'язки можна записати коротше в такий спосіб:
<HTML>
<HEAD>
<ТIТLЕ>Зміст роману</ТIТLЕ>
<BASE target="rightframe">
</HEAD>
<BODY>
<Н2>Зміст</Н2>
<A href="glavl.html">Розділ 1. Безенчук і німфи</A><BR></BR>
<А href="glav2.html">Розділ 2. Кончина мадам Пєтуховій </A> <BR></BR>
</BODY>
</HTML>
Таким чином, завдання базового фрейму дозволяє тільки один раз у документі вказати конкретний фрейм завантаження посилань, а не записувати його в кожному елементі прив'язки. У наведеному вище прикладі базовим є фрейм rightframe.
Спеціальні цільові фрейми
Цільові фрейми для відображення документів можна призначати не тільки залежно від їхньої позиції у вікні браузера (наприклад, правий верхній фрейм). Специфікацією HTML передбачено завантаження документів у нове вікно або в той же фрейм, з якого було активізоване посилання. Цільовий фрейм визначається додатковими значеннями атрибута target:
target="_blank" - встановлює завантаження документа в нове вікно;
target="_self " - визначає завантаження нового документа в поточний фрейм, у якому було активізоване посилання;
target="_parent" - задає завантаження документа в поточний батьківський фрейм, у якому відвідувач сторінки клацнув на посиланні; якщо поточний фрейм не має предків, це значення еквівалентно значенню _self;
target= "_top" - документ буде завантажуватися в поточне вікно браузера поверх документа, у якому була виконана активізація посилання.
target = “ім'я фрейму” - документ буде завантажений у відповідний фрейм.
Перераховані спеціальні значення атрибута target повинні починатися із символу підкреслення.