HTML дозволяє поділити вікно броузера на окремі секції, які називаються фреймами. Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати незалежно від решти фреймів. Броузер, який «розпізнає» фрейми, завантажує різні сторінки в різні секції свого вікна. Наприклад, можна побудувати сторінку так, що фірмовий знак буде зафіксовано у верхній частині вікна, збоку буде розміщено панель навігації (меню) сторінками серевера, а в решту вікна будуть завантажуватися різні сторінки, які користувач зможе переглядати звичайним чином. Коли користувач клацає кнопкою миші на гіперпосиланні — змінюється лише частина вікна, а система навігації і фірмовий знак залишаються нерухомими.
Подібну структуру має сторінка, вигляд якої подано на рис. 1.23.
Рис. 1.23
Створимо, наприклад, найпростіший фреймовий Web-документ із двома фреймами. У лівий фрейм помістимо заголовки статей (зміст). Якщо клацнути лівою кнопкою миші на певному гіперпосиланні, то відповідна сторінка буде завантажуватися в правий фрейм. Це основний і найбільш розповсюджений спосіб використання фреймів.
Задания фреймової структури.Спочатку необхідно створити HTML-файл, в якому буде задаватись фреймова структура сторінки, — де і якого розміру будуть фрейми. Нижче наведено код фреймової структури сторінки firma.html з двома вертикальними фреймами. Відмітимо, що файл з фреймовою структурою не містить дескриптора <BODY>.
Лістинг 1.22
<НТМL>
<HEAD>
<TITLЕ>Приклад фреймів</ТІТLЕ>
</HEAD>
<FRAMESET C0LS="25%, 75%">
<FRAME SRC="Menu.html">
<FRAME SRC="Main.html" NAME="main">
</FRAMESET>
<NOFRAMES>
Ця частина коду відображується броузерами, які не підтримуютьL фреймові документи.
</NОFRAMES>
</HTML>
Для задания фреймової структури використовується дескриптор <FRAMESET> разом з двома головними атрибутами: ROWS — задає кількість рядків, COLS — задає кількість колонок. Загальний формат запису цього дескриптора:
<FRAMESET ROWS="value_list" COLS="value_list">
</FRAMESET>
«value_list» є списком значень, відокремлених між собою комами. Ці значення можуть виражатися у відсотках, пікселях, або пропорційних одиницях. Число рядків або стовпців встановлюється залежно від кількості значень у списку. У нашому прикладі (<FRAMESET CОLS="25%, 75%">) вікно броузера буде розділено на дві вертикальні секції. Ліва секція займає 25 відсотків, а права — 75 відсотків ширини вікна броузера.
Пропорційні значення присвоюються так:
<FRAMESET CОLS=" *, 2* ,3*">
У даному випадку вікно ділиться на 3 частини. Перша частина займає 1/6 ширини вікна, друга — 2/6 (1/3) загальної ширини і остання — 3/6 (1/2).
Дескриптори <FRAME> визначають окремі фрейми. Вони повинні розміщуватись у контейнері <FRAMESET>. Атрибути дескриптора <FRAME> та їх короткий опис подано у таблиці 1.6.
У наведеному прикладі в лівий фрейм повинен завантажуватись файл Menu, html, а в правий, який названо «main», — Main.html. Оскільки в лівий фрейм не будемо завантажувати інших сторінок, крім Menu, html, залишаємо його без назви.
Контейнер <NОFRAMES></NОFRAMES> забезпечує альтернативну інформацію для броузерів, які не підтримують роботи з фреймами.
Таблиця 1.6. Атрибути дескриптора <FRAME>
АТРИБУТ
ОПИС
SRC="URL"
Задає джерело фрейма. Вказує URL файла, що повинен бути завантажений у даний фрейм.
MARGINWIDTH="значення"
Задає ширину лівого та правого полів фрейма.
MARGINWIDTH="значення"
Задає ширину верхнього і нижнього полів фрейма.
NАМЕ="значення"
Дозволяє присвоїти ім'я фрейму, яке можна використовувати для посилання на фрейм з інших фреймів тієї самої структури.
SCROLLING="YES|NO|AUTO"
SCR0LL1NG=YES — у фреймі завжди будуть смуги прокрутки (незалежно від величини файла, завантаженого в нього). SCROLLING=NO — смуг прокрутки не буде, навіть якщо вони необхідні (надто великі документи просто обрізаються). SCROLLING=AUTO — надається можливість броузеру самому вирішити, чи потрібні смуги прокрутки. Якщо цей атрибут відсутній, то це рівносильно заданию SCROLLING= =AUTO.
NORESIZE
Забороняється зміна розмірів фрейма за допомогою миші.
Створення вмісту фреймів. Створимо сторінку Menu, html, яка буде завантажуватись у лівий фрейм і відображати список гіперпосилань (зміст). Цей фрейм вузький і високий, це необхідно враховувати під час проектування цієї сторінки. Щоб при натисканні на гіперпосиланні сторінки завантажувались у правий фрейм, додамомо до дескрипторів <А HREF.... > атрибут TARGET="main". У цьому випадку, якщо клацнути кнопкою миші на гіперпосиланні, сторінка, що викликається, завантажиться у фрейм «main». Без визначення цього атрибута сторінка з'явиться у тому фреймі, з якого вона викликається.
Зазначимо, що файл Menu.html є звичайним HTML-документом і не містить дескрипторів опису фреймів.
Створення вмісту фрейма main. Правий фрейм міститиме сторінки, які викликаються за допомогою меню, розміщеного у лівому фреймі. Після завантаження документа у правий фрейм автоматично завантажується файл Main.html.
Код файла Main.html може бути, наприклад, таким:
Лістинг 1.24
<HTML>
<HEAD>
<TITLE> Головна сторінка </TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Kомпанія</H2>
<HR>
<H4 ALIGN=LEFT>< І >Biдкрите акціонерне товариство
"Компанія" засноване у 1996 році</І></Н4>
<HR>
<Н4>Головними напрямами діяльності Компанії є:
<ОL>
<LІ>Розробка складних розподілених програмних комплексів
Вигляд фреймового документа firma. htm, завантаженого в броузер, подано на рис. 1.24.
Рис. 1.24
Дозволені імена фреймів.Імена фреймів не повинні починатися зі знака підкреслювання ( _ ). У HTML зарезервовано чотири неявних імені фреймів (подані в таблиці 1.7), які починаються зі знака підкреслення. Решта імен, які починаються із знака підкреслення, ігноруються.
Таблиця 1.7.Зарезервовані імена фреймів
ІМ'Я ФРЕЙМУ
ОПИС
_blank
Завантажує документ у нове вікно, яке немає імені. Це ім'я використовується для запуску нового вікна броузера.
_self
Завантажує документ у поточне вікно.
_parent
Завантажує документ у вікно батьківської фреймової структури.
_top
Завантажує документ у вікно фреймової структури верхнього рівня стосовно до даного фрейму. Якщо фрейм є верхнім, то це ім'я еквівалентне імені _self.
Зарезервовані імена використовуються таким чином. Якщо у фреймі міститься посилання
<А HREF="stuff.htm" TARGET="_blank"> ,
то при клацанні на ньому лівою кнопкою миші запускається нове вікно броузера, в яке завантажується документ stuff, htm. Це може бути простий HTML-документ або нова фреймова структура. При клацанні на гіперпосиланні
<А HREF="stuff.htm" TARGET="_self">
стирається фрейм, в якому воно знаходиться, і його вміст замінюється на документ stuff, htm.
Якщо у фреймі міститься посилання
<А HREF="stuff.htm" TARGET="_parent">,
то при клацанні на ньому фреймова структура, в якій міститься фрейм з гіпер-посиланням, замінюється документом stuff, htm.
Якщо у фреймі міститься гіперпосилання
<А HREF="stuff.htm" TARGET="_top"> ,
то при клацанні на ньому все вікно броузера замінюється документом stuff, htm.
Контрольні запитання
1. Для чого можуть використовуватися фрейми?
2. Як задати фреймову структуру?
3. Призначення дескриптора <FRAMESET> та його параметрів.
4. Назвіть атрибути дескриптора <FRAME>.
5. Коли доцільно використовувати фреймову структуру?
6. Як під час використання фреймової структури відобразити інформацію у броузерах, що не підтримують роботу з фреймами?
7. Як сховати рамку між фреймами?
8. Якими способами можна задати ширину та висоту фрейму?
