ЗАГОЛОВОК
1. Подання фреймів на Web-сторінці
1.1 Завдання фреймової структури
1.2 Завдання параметрів фреймів
2 Плаваючі фрейми
3 Розробка багатовіконної Web сторінки
3.1 Кадр "title"
3.2 Кадр "left"
Приклад № 1
1. Подання фреймів на Web-сторінці
1.1 Завдання фреймової структури
Щоб зробити перегляд документів на Web-сторінці більш зручним, можна скористатися многооконным інтерфейсом, реалізованим за допомогою фреймів. У цьому випадку можна завантажити відразу кілька документів (Web-сторінок) і працювати одночасно з усіма ними.
У відмінності від звичайного HTML-документа в документ з описом фреймів немає тега-контейнера <BODY> . . . </BODY>. Замість нього використовується тег-контейнер <FRAMESET> . . . </FRAMESET>, який ділить екран на кілька горизонтальних частин (вікон), або на кілька вертикальних вікон. Кожне з вікон описується у вигляді кадрі за допомогою тега <FRAME>. Тег <FRAMESET> містить наступні параметри:
- COLS - вказує через кому ширину вертикальних вікон у пікселях або у % від ширини екрана (якщо задається *, то цього вікна відводиться частина екрану);
- ROWS - вказує через кому висоту горизонтальних вікон у пікселях або у % від висоти екрану (якщо задається *, то цього вікна відводиться частина екрану);
- FRAMEBORDER :
- 1 - кадри мають рамку;
- 0 - вони не мають рамку.
- FRAMESPACING - вказує відстань між кадрами в пікселях.
Наприклад, тег
<FRAMESET COLS="20%,30%,*">
<FRAME . . . >
<FRAME . . . >
<FRAME . . . >
</FRAMESET>
ділить екран на три вертикальних вікна, які займають відповідно 20%, 30% і решту (50%) екрана. На місці кожного з тегів <FRAME> може бути вказано тег <FRAMESET> . . . </FRAMESET>. Це дозволяє формувати на екрані складну багатовіконне структуру.
прикладі № 1 показано побудова і використання трехоконной структури на Web-сторінці.
1.2 Завдання параметрів фреймів
Для опису характеристик кожного вікна використовується тег <FRAME>, який містить наступні параметри:
- MARGINHEIGHT - вказує інтервал у точках по висоті від кордонів кадру;
- MARGINWIDTH - вказує інтервал у точках по ширині від кордонів кадру;
- FRAMEBORDER - має ті ж значення (0,1), що і однойменний параметр тега FRAMESET;
- NAME - вказує ім'я кадру, яке може бути використане в посиланнях для завантаження Web сторінки в потрібне вікно екрану (див. опис параметр TARGET в розділі 1.1 описания лабораторної роботи №6); є ряд стандартних доменів вікон:
- _self - для завантаження Web сторінки в поточне вікно (приймається за замовчуванням, якщо посилання не вказаний параметр TARGET);
- _top - для завантаження web-сторінки на весь екран;
- _blank - для завантаження Web сторінки в нове вікно (відрізняється від _top тим, що нельза повернутися в початкове вікно за стрілкою "Тому").
- NORESIZE - забороняє змінювати за допомогою мишки фрейму;
- SCROLING - вказує на один з трьох режимів перегляду кадру:
- yes - з створенням смуги прокрутки;
- no - без створення смуги прокрутки;
- auto - з створенням смуги прокрутки тільки тоді, коли завантажувані дані не поміщаються у вікні кадру (приймається за замовчуванням).
- SRC - URL-адреса Web-сторінка завантажується у вікно кадру;
- BORDERCOLOR - вказує колір кордону кадру (ширина межі визначається параметром FRAMESPACING).
2 Плаваючі кадри в HTML
При створенні багатовіконної Web сторінки окрім застосування фреймової структури на базі тега <FRAMESET> . . . </FRAMESET> (див. пункт 1.1) також можуть бути використані плаваючі фрейми. У цьому випадку в HTML-документі замість тега <FRAMESET> . . . </FRAMESET> використовується, як і у всіх інших Web-сторінках, тег <BODY> . . . <BODY>
пПлавающий кадр, подібно зображення, буде розташовуватися на екрані в тому місці, яке відповідає розташуванню тегу з його описом в HTML-документі. Для завдання плаваючого кадру використовується тег-контейнер <IFRAME></IFRAME>. Оскільки плаваючий фрейм у чому поєднує властивості кадру та зображення, то він має частина параметрів (MARGINHEIGHT, MARGINWIDTH, NAME, SCROLING, SRC, BORDERCOLOR ), які властиві фреймах і розглянуті в пункті 1.2, інша частина його параметрів (ALIGN, HEIGHT, WIDTH, HSPACE, VSPACE) характерна для зображень та розглянута в HTML зображення у пункті 1.1.
Нижче наведено приклад завдання плаваючого кадру, з ім'ям "ff", розміром 200*200 пікселів, який завантажується Web-сторінка з адресою "prim3-1.htm":
<IFRAME NAME="ff" SRC="prim3-1.htm" HEIGHT=200 WIDTH=200> </IFRAME>
прикладі № 1 поряд зі звичайними текстовими кадрами показано застосування плаваючих фреймів (у файлі "left.htm").
3 Розробка багатовіконної Web сторінки
У прикладі (№ 1) показано побудова трехоконной Web-сторінки, яка має відповідно три кадру: один горизонтальний ("title") і два вертикальних ("" left; і "right").
Приклад 1
<HTML>
<HEAD>
<TITLE> Кадри в HTML на Web-сторінці </TITLE>
</HEAD>
<FRAMESET ROWS="60,*" FRAMESPACING=0>
<FRAME NAME="title" SRC="title.htm" NORESIZE SCROLLING="no"
MARGINHEIGHT=0 MARGINTEIGHT=0
STYLE="border: red 6 dashed" >
<FRAMESET COLS="30%,*" FRAMESPACING=2 >
<FRAME NAME="left" SRC="left.htm" FRAMEBORDER=0 >
<FRAME NAME="right" SRC="prim1-1.htm" FRAMEBORDER=1
BORDERCOLOR=#0000E0 >
</FRAMESET>
</FRAMESET>
</HTML>
Як видно з фреймової структури екран спочатку ділиться на два горизонтальних вікна: перше вікно має розмір 60 пікселів, друге місце займає частину екрана. Потім друге горизонтальне вікно ділиться на два вертикальних з розмірами відповідно 30% і 70% екрана.
3.1 Кадр "title"
Кадр "title" використовується для визначення загальних або заголовних відомостей. Може бути використаний як домашня сторінка (home page). У ньому заборонені смуги прокрутки та зміна розміру вікна.
Файл "title.htm", завантаження в windows "title", містить HTML-документ з двох рядків, що задають колір фону, параметри написи і саму напис:
<P STYLE="background:#E0FFE0; color:#0000C0;font: italic 10mm; text-align:center"> ВИВЧЕННЯ HTML
3.2 Кадр "left"
Файл "left.htm", завантаження в windows "left" містить HTML-документ, в якому вказано набір посилань у вигляді кнопок, які здійснюють доступ до описів лобораторных робіт, і плаваючий кадр:
<HTML>
<HEAD>
<LINK REL=stylesheet HREF="my_d.css">
</HEAD>
<BODY>
<A CLASS="kn" HREF="2.htm" TARGET="right"> Сторінка №2
</A> <BR>
<A CLASS="kn" HREF="3.htm" TARGET="right"> Сторінка №3
</A> <BR>
<A CLASS="kn" HREF="4.htm" TARGET="right"> Сторінка №4
</A> <BR>
<A CLASS="kn" HREF="5.htm" TARGET="_top"> Сторінка №5
</A> <BR>
<A CLASS="kn" HREF="6.htm" TARGET="ff"> Сторінка №6
</A> <BR><BR>
<IFRAME NAME="ff" SRC="prim2-2.htm" HEIGHT=200 WIDTH=200>
</IFRAME>
</BODY>
</HTML>
Перші три посилання download Web сторінки з описом лабораторних робіт №2, №3 та №4 у кадр з ім'ям "right", четверта посилання завантажує Web-сторінку з описом лабораторної роботи №5 на весь екран, а остання посилання завантажує Web-сторінку з описом лабораторної роботи №6 в плаваючий кадр з ім'ям "ff". Опис параметрів плаваючого кадру та його використання на Web-сторінці наведено в розділі 2.
