2.13 Фрейми

Мова HTML дозволяє в межах однієї WEB-сторінки відображати декілька документів. В цьому випадку сторінка поділяється на декілька областей – фреймів. Структура такого HTML-документу має свої особливості: елемент BODY відсутній, а при наявності – ігнорується браузером. Тіло документа замінюється описом фреймів, які задаються парним тегом <FRAMESET>.

Відкриваючий тег <FRAMESET> має обов’язковий атрибут COLS= або ROWS=, який визначає спосіб розбивки вікна. Атрибут COLS= розбиває вікно вертикальними лініями, а ROWS= - горизонтальними. Якщо задано обидва атрибута, створюється сітка фреймів. Значення атрибуту задається у % або у пікселях. Наприклад,

1) <FRAMESET COLS="60%,40%">

За цим тегом вікно розбивається на 2 вертикальних фрейми, лівий з яких займає 60% вікна, а правий – 40%.

2) <FRAMESET ROWS="40%,30%,*>

За цим тегом вікно розбивається на 3 горизонтальних фрейми, верхній з яких займає 40% вікна, середній – 30%, а нижній – простір, що залишився.

3) <FRAMESET ROWS="10%,*">

<FRAMESET COLS="40%,60%">

За цими тегами вікно розбивається на 2 горизонтальних фрейми, верхній з яких займає 10% простору, а нижній фрейм розбивається на 2 вертикальних фрейми, лівий з яких займає 40 %. А правий – 60 % простору.

Спосіб використання фрейму визначає непарний тег <FRAME>, який містить обов’язковий атрибут SRC=, за допомогою якого указується, який документ завантажується у відповідний фрейм. Значення цього атрибута – адреса потрібного документа. Наприклад,

<FRAME SRC=D:/Docum/Таблиця.html>

Атрибут NAME= дозволяє задати ім’я створеного фрейму у вигляді послідовності латинських літер і цифр, що використовуються як значення цього атрибута. Наприклад

<FRAME SRC=D:/Docum/Таблиця.html> NAME=pole3

Цей атрибут можна використовувати для завантаження документів в зазначений фрейм. Для цього в тег <A>, який визначає гіпертекстове посилання, необхідно додати атрибут TARGET= , значення якого збігається з ім’ям фрейму. При переході за гіперпосиланням документ завантажується в зазначений фрейм.

Приклад 8. Створення фреймів на Web-сторінках. Мовою HTML створити WEB-сторінку дисципліни "Економічна інформатика", яка містить 4 фрейми (рис.5).

Рис. 5. Вікно браузера з завантаженим документом "Створення фреймів"

У верхньому горизонтальному фреймі, який займає 20% вікна, створити 2 вертикальних фрейми. Розмір верхнього лівого фрейму - 20%, в ньому розташувати графічний об‘єкт (малюнок), а у правому верхньому фреймі – розташувати рухомий рядок з текстом: "Студентам, які вивчають дисципліну "Економічна інформатика".

У нижньому горизонтальному фреймі створити 2 вертикальних фрейми. Розмір лівого нижнього фрейму – 40%, в ньому розташувати сторінку з гіпертекстовими посиланнями з текстом: "Тематичний вміст дисципліни: лекції, лабораторні роботи, навчальна практика, самостійна робота, теми рефератів". При натисненні на гіпертекстові посилання (лекції, лабораторні роботи, теми рефератів, самостійна робота або навчальна практика) повинен з‘явитись відповідний нумерований список тем, передбачити можливість повернення на головну сторінку.

У правому нижньому вертикальному фреймі розташувати таблицю наступного вмісту:

Таблиця 5 Виписка з навчального плану дисципліни "Економічна інформатика"

Види занять	Кількість годин
Лекції	20
Лабораторні заняття	80
Самостійна робота	80
Навчальна практика	144
Всього	324

При створенні сторінки широко використовувати знання та навички яскравого, естетичного оформлення.

Порядок виконання

1. Використовуючи набуті знання та навички (пункт 2.10) створити HTML-документ з графічним об‘єктом. Документ зберегти у файлі з ім‘ям Рисунок.html

2. Використовуючи набуті знання та навички (пункт 2.9) створити HTML-документ рухомого рядка з текстом "Студентам, які вивчають дисципліну "Економічна інформатика". Документ зберегти у фалі з ім‘ям Заголовок.html

3. Використовуючи набуті знання та навички (пункт 2.12) створити HTML-документ з заданою таблицею, зберегти у файлі Виписка.html

4. Використовуючи набуті знання та навички (пункт 2.11) створити HTML-документ, який містить гіпертекстові посилання.

• Головна сторінка повинна містити текст "Тематичний вміст дисципліни: лекції, лабораторні роботи, навчальна практика самостійна робота, теми рефератів". Зберегти у файлі Головна.html

• Сторінка Лекції.html повинна містити наступний текст:

Тематика лекцій

1. Введення до "Економічної інформатики"

2. Теоретичні основи "Економічної інформатики"

3. Бази даних

4. Експертні системи

Повернення до головної сторінки

• Сторінка Лабораторні.html повинна містити наступний текст:

Тематика лабораторних занять

1. Текстовий редактор Word

2. Табличний редактор Excel

3. Система управління базами даних Access

4. Створення та подання презентацій Power Point

Повернення до головної сторінки

• Сторінка Практика.html повинна містити наступний текст:

Тематика навчальної практики

1. Основи WEB-дизайну

2. Основи програмування мовою Visual Basic

Повернення до головної сторінки

• Сторінка Самостійна.html повинна містити наступний текст:

Тематика самостійної роботи студентів

1. Основи алгоритмізації та програмування

2. Основи об‘єктно-орієнтованого програмування

3. Розробка проектів мовою Visual Basic

4. Створення додатків користувача мовою VBA

Повернення до головної сторінки

• Сторінка Реферати.html повинна містити наступний текст:

Тематика рефератів

1. Використання Internet в економіці

2. Перспективи розвитку інформаційних технологій

Повернення до головної сторінки

5. Створити HTML-документ з чотирма фреймами, до яких завантажуються документи згідно завданню. Документ зберегти у файлі з ім‘ям Фрейми.html

<HTML>

<HEAD>

<TITLE>Створення фреймів </TITLE></HEAD>

<FRAMESET ROWS="20%,60%">

<FRAMESET COLS="20%,*%">

<FRAME NAME=obl1 SRC=Рисунок.html>

<FRAME NAME=obl2 SRC=Заголовок.html>

</FRAMESET>

<FRAMESET COLS="40%,60%">

<FRAME NAME=obl3 SRC=Головна.html>

<FRAME NAME=obl4 SRC=Виписка.html>

</FRAMESET>

</FRAMESET>

</HTML>

6. Для того, щоб гіпертекстові посилання відображались у фреймі obl3, змінити теги <A> у файлі Головна.html, додавши атрибут TARGET=obl3, таким чином, текст файлу може бути наступним

<html>

<head>

<title>Головна сторінака</title>

<body>

<body bgcolor="silver">

<p > <font size=+3, color="navy", face="times new roman">Тематичний вміст дисципліни:

<p><a href=Лекції.html target=obl3>лекції </a>

<p><a href=Лабораторні.html target=obl3> лабораторні роботи</a>

<p> <a href=Практика.html target=obl3>навчальна практика</a>

<p><a href=Самостійна.html target=obl3>самостійна робота</a>

<p><a href=Реферати.html target=obl3>теми рефератів</a>

</font>

</body>

</head>

</html>