Лекція 12. ФРЕЙМИ
Лекція 12. ФРЕЙМИ
Фрейми (Frames - кадри) надають користувачеві можливість поділяти екран на дві або більше незалежних динамічних або статичних частини.
Кожен фрейм може мати такі властивості:
- всі фрейми мають свій URL, що дозволяє завантажувати їх незалежно від інших фреймів;
- кожний фрейм має власне ім’я (атрибут NAME), яке дозволяє переходити до нього з іншого фрейма;
- розмір фрейма може бути змінений користувачем безпосередньо на екрані за допомогою мишки.
Ці властивості фреймів дозволяють:
- розміщувати статичну інформацію, яку автор вважає за необхідне постійно показувати користувачу, у одному статичному фреймі;
- розміщувати у статичному фреймі зміст всіх або частини документів, які містяться на сервері, що дозволяє користувачеві швидко знаходити інформацію, яка його цікавить;
- створювати вікна результатів запитів, коли в одному фреймі знаходиться власне запит, а в другому – результати запиту.
Фрейм-документ є специфічним видом HTML-документа, оскільки не містить елемента BODY і, відповідно, будь-якого змістового навантаження. Він описує тільки фрейми, які будуть містити інформацію.
Основний документ, який містить опис фреймів, виглядає так:
<HTML>
<HEAD> …..</HEAD>
<FRAMESET>….</FRAMESET>
</HTML>
Атрибути тегу <FRAMESET>
Атрибут |
Призначення |
ROWS=pixels|persent|* |
поділ екрану на декілька смуг |
COLS=pixels|persent|* |
Поділ екрану на декілька стовпчиків |
FRAMEBORDER |
описує сітку фреймової структури (за замовчуванням значення YES - тривимірна сітка, NO - без сітки) |
BORDER |
ширина сітки фреймової структури (за замовчуванням значення 5) |
BORDERCOLOR |
колір сітки фреймової структури |
Значення (*) відповідає використанню всього простору екрану, який залишився.
Для вміщення змісту в фрейми, які утворились в результаті поділу, використовується тег <FRAME>... </FRAME>. Важливим атрибутом цього тега є атрибут SRC, який сповіщає URL документа, який необхідно завантажити у фрейм.
Кожний елемент фреймової структури описується за допомогою тега <FRAME>, який має такі атрибути:
- SRC - URL вмісту фрейма;
NAME – ім‘я фрейма (аналогія імені вікна браузера) для здійснення доступу до фрейма і оновлення його змісту;
MARGINHEIGHT - ширина верхнього і нижнього вільного поля фрейма у пікселях;
MARGINWIDTH - ширина лівого і правого вільного поля фрейма у пікселях;
SCROLLING – смуги гортання для перегляду вмісту фрейма (AUTO/YES/NO, за замовчуванням значення - AUTO);
NORESIZE – наявністю даного атрибута користувачу забороняється змінювати розміри фрейма при перегляді документа (за замовчуванням це можливо за допомогою миші);
FRAMEBORDER – описує сітку фрейма (YES/NO);
BORDERCOLOR – колір сітки фрейма.
Визначення структури фреймів:
Порядок створення сторінки з фреймами:
1. Створюється початкова сторінка, у якій задаються розміри і кількість фреймів, а також імена файлів, які відповідають фреймам і атрибути
для кожного фрейма.
2. Створюються окремі сторінки для кожного фрейма.
Необхідно уявити собі загальний вигляд сторінки – де і якого розміру будуть фрейми. Наприклад, ліворуч має бути фрейм змісту з переліком статей, праворуч – сторінка із власне статтями. Необхідно зробити так, щоб натискання мишкою на назві статті у лівій частині екрану, викликало появу змісту статті у правій частині. Або фреймова структура має ділити екран на три поздовжні частини. Верхня частина займає 15% висоти вікна браузера, її змістом є документ header.htm. Середній фрейм займає 70% вікна, в нього виводиться зміст документа body.htm. Решту частини вікна браузера займає фрейм, у який виводиться зміст документа footer.htm.
<FRAMESET ROWS=”15%, 70%, 15%”>
<FRAME SRC=”header.htm” NORESIZE SCROLLING=NO>
<FRAME SRC=”body.htm”>
<FRAME SRC=”footer.htm” NORESIZE SCROLLING=NO>
</FRAMESET>
Верхній і нижній фрейми даної структури не містять смуг прокрутки вмісту і мають постійний розмір. Атрибут NORESIZE для середнього фрейму не задається, оскільки заборона зміни розмірів фреймів, які знаходяться поруч,
не дозволяє змінити розмір середнього фрейма.
Для створення “вкладеної” структури фреймів, наприклад, у середній області фрейма з попереднього прикладу, яка поділяє її на два рівних стовпці,
можна навести такий приклад:
FRAMESET ROWS=”15%, 70%, 15%”>
<FRAME SRC=”header.htm” NORESIZE SCROLLING=NO>
<FRAMESET COLS=”*,*”>
<FRAME SRC=”left.htm”>
<FRAME SRC=”right.htm”>
</FRAMESET>
<FRAME SRC=”footer.htm” NORESIZE SCROLLING=NO>
</FRAMESET>
Створення індексного (початкового) екрана з двох фреймів:
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<FRAMESET cols=”*,310">
<FRAME SRC=”LAB_fr.htm” NAME=”frame1">
<FRAME SRC=”home_fr.htm” NAME=”frame2">
</FRAMESET>
</HTML>
У лівому фреймі у пункті “Обрядова їжа” зроблене посилання на відповідний файл, який розкриє зміст цього пункту і буде відображений у правому вікні. Для цього зміни вносяться до файлу, який завантажується у цей фрейм. При встановленні гіперпосилання вказують на NAME відповідного
фрейма введенням команди TARGET.
Відображення файлу програмою-браузером:
|
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<BODY>
<H1 ALIGN=CENTER>
УКРАЇНСЬКА МИНУВЩИНА</H1><BR>
<P ALIGN=CENTER><B>УКРАЇНСЬКА КУХНЯ</B></P>
<UL>
<LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI>
<LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ
</LI>
<A HREF=”LAB2-4_FR.HTM” TARGET = “FRAME2”> <LI>
ОБРЯДОВА ЇЖА </LI></A>
</UL>
</BODY>
</HTML>