Лекція 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>