Підготовка утримуваного фрейма

Тепер завантажимо фрейми з вмістом. Задамо сторінку menu.html в лівому фреймі, де ми збираємося клацати мишею, перемикаючись між двома сторінками в правому фреймі. menu.html — це звичайна НТМL— сторінка, побудована як зміст. Насправді ми можемо узяти готову сторінку зі змістом і використати її. Майте на увазі, що цей фрейм вузький і високий, так що сторінка, яка в нього завантажуватиметься, має бути спроектована відповідним чином. Тепер ми повинні визначити, де з'являтимуться інші сторінки при клацанні мишкою на посиланні. Оскільки ми хочемо, щоб вони відображалися в правому фреймі, додамо атрибут ТАRGET(TARGЕТ=«main») в тег посилання. Це означає, що, коли користувач клацає на посиланні, сторінка, що викликається, з'являється у фреймі main. Ми відображаємо усі сторінки у фреймі main, тому давайте додамо атрибут ТАRGЕТ=«main» в усі теги посилань в змісті. Якщо ми не визначимо атрибут ТАRGЕТ, то сторінка з'явиться там, де ми клацнули мишкою, — в лівому фреймі.

Підготовка фрейма main

Правий фрейм main міститиме самі HTML— сторінки. Ваше завдання — спроектувати їх так, щоб вони добре виглядали в меншому, ніж зазвичай, вікні, тому що частина екрану буде зайнята лівим кадром змісту. Але більше ці сторінки нічим не примітні.

Використання тега <NOFRAMES>

У деяких користувачів ще залишилися браузери, що не уміють поводитися з фреймами. З цієї причини розумно надати доступ до версії ваших основних сторінок без фреймів. Якщо читач із застарілим браузером виявиться на вашій сторінці з фреймовою структурою, все, що знаходиться на ній між тегами <NOFRAMES> і </NOFRAMES>, виглядатиме відмінно — браузер просто проігнорує фрейми. Ось чому обов'язково треба використати теги <ВODY> </ВОDY>. Можливо, екран без фреймів доведеться організувати інакше.

Приклад сторінки з фреймовою структурою з доданим у кінці розділом <NOFRAMES>.

<HTML>

<HEAD>

<TITLE>Приклад фреймів</TITLE>

</HEAD>

<FRAMESET COLS="25%, 75%">

<FRAME SRC="menu.html">

<FRAME SRC="main.html" NAME="main">

<NOFRAMES>

Ви переглядаєте цю сторінку з допомогою

браузеру, що не підтримує фрейми.

</NOFRAMES>

</FRAMESET>

</HTML>

Майте на увазі, що підтримувальний фрейми браузер проігнорує все, що знаходиться між тегами <NOFRAMES> і </NOFRAMES>. І навпаки, не підтримувальний фрейми браузер проігнорує все, що знаходиться між тегами <FRAMESET> і </FRAMESET>. Код без фреймів можна помістити і в початок, і в кінець сторінки.

Макетування фреймів — тег <FRAMESET>

Теги <FRAMESET> обрамляють текст, що описує компонування фреймів. Тут розміщується інформація про число фреймів, їх розміри і орієнтацію(горизонтальною або вертикальною). У тега <FRAMESET> тільки два можливі атрибути: ROWS, задаючий число рядків, і СОLS, задаючий число стовпців. Між тегами <FRAMESET> не вимагається вказувати тег <ВОDY>, але його можна помістити між тегами <NOFRAMES> у кінці фреймової структури. Між тегами <FRAMESET> не повинно бути ніяких тегів або атрибутів, які зазвичай використовуються між тегами <ВОDY>. Єдиними тегами, які можуть знаходитися між тегами <FRAMESET> і </FRAMESET>, являються теги <FRAME>, <FRAMESET> і <NOFRAME>. Це спрощує завдання. В основному все пов'язано з тегами <FRАМЕ> і їх атрибутами. Якщо ж ви хочете поекспериментувати, можна створити вкладені один в одного теги <FRAMESET> аналогічно тегам <ТАВLЕ>.

Атрибути ROWS і СОLS

Для кожного рядка і стовпця, згаданих в тегу <FRAMESET>, потрібний свій набір тегів <FRАМЕ>.

Атрибут ROWS

Атрибут ROWS тега <FRAMESET> задає число і розмір рядків на сторінці. Кількість тегів <FRАМЕ> повинно відповідати вказаному числу рядків. Праворуч від знаку «=» можна визначити розмір кожного рядка в пікселах, відсотках від висоти екрану або у відносних величинах(звичайна ця вказівка зайняти частину місця, що залишилася). Слід користуватися лапками і комами, а також залишати пропуски між значеннями атрибутів. Наприклад, наступний запис формує екран, що складається з трьох рядків : висота верхньої — 20 пікселів, середньої — 80 пікселів, нижньої — 20 пікселів:

<FRAMESET ROWS="20, 80, 20">

Наступний тег — <FRAMESET> — створює екран, на якому верхній рядок займає 10% висоти екрану, середня — 60%, а нижня — решта 30% :

<FRAMESET ROWS="10%, 60%, 30%">

Можна задати відносні значення в комбінації з фіксованими, вираженими у відсотках або пікселах. Наприклад, наступний тег створює екран, на якому верхній рядок має висоту 20 пікселів, середня — 80 пікселів, а нижня займає місце, що все залишилося :

<FRAMESET ROWS="20, 80, *">

Атрибут СOLS

Стовпці задаються так само, як рядки. Для них застосовні ті ж атрибути.

Завдання утримуваного фрейма — елемент FRАМЕ

Тег <FRАМЕ> визначає зовнішній вигляд і поведінку фрейма. Цей тег не має закриваючого тега, оскільки в нім нічого не міститься. Уся суть тега <FRАМЕ> у його атрибутах. Їх шість : NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE і SRC.

Атрибут NАМЕ

Якщо ви хочете, щоб при клацанні мишею на посиланні відповідна сторінка відображалася в певному фреймі, необхідно вказати цей фрейм, щоб сторінка «знала», що куди завантажувати. У попередніх прикладах ми назвали великий правий фрейм main, і саме в нім з'являлися сторінки, вибрані зі змісту в лівому фреймі. Фрейм, в якому відображаються сторінки, називається цільовим(target). Фрейми, які не є цільовими, іменувати не обов'язково. Наприклад, можна записати такий рядок:

<FRАМЕ SRC="my.html" NАМЕ="main">

Імена цільових фреймів повинні розпочинатися з букви або цифри. Одні і ті ж імена дозволяється використати в декількох фреймових структурах. По клацанню миші відповідні сторінки відображатимуться в іменованому фреймі.

Атрибут МАRGINWIDTH

Атрибут МАRGINWIDTH діє аналогічно атрибуту таблиць CELLPADDING. Він задає горизонтальний відступ між вмістом кадру і його межами. Найменше значення цього атрибуту дорівнює 1. Не можна вказати 0. Можна не привласнювати нічого — за умовчанням атрибут дорівнює 6.

Атрибут МАRGINHEIGHT

Атрибут МАRGINHEIGHT діє так само як і МАRGINWIDTH. Він задає поля у верхній і нижній частинах фрейма.

Атрибут SCROLLING

Атрибут SCROLLING дає можливість користуватися прокруткою у фреймі. Можливі варіанти: SCROLLING=yes, SCROLLING=nо, SCROLLING=аutо. SCROLLING=yes означає, що у фреймі завжди будуть смуги прокрутки, навіть якщо це не треба. Якщо задати SCROLLING=no, смуг прокрутки не буде, навіть коли це необхідно. Якщо документ занадто великий, а ви задали режим без прокрутки, документ просто буде обрізаний. Атрибут SCROLLING=аutо надає браузеру самому вирішувати, потрібно смуги прокрутки або ні. Якщо атрибут SCROLLING відсутній, результат буде таким же, як при використанні SCROLLING=аutо.

Атрибут NORESIZE

Як правило, користувач може, переміщаючи межу фрейма мишкою, змінити його розмір. Це зручно, але не завжди. Іноді потрібно атрибут NORESIZE. Пам'ятайте: усі межі фрейма, для якого ви задали NORESIZE, стають нерухомими - відповідно, може виявитися так, що розміри сусідніх фреймів теж стануть фіксованими. Користуйтеся цим атрибутом з обережністю.

Атрибут SRС

Атрибут SRС застосовується в тегу FRАМЕ при розробці фреймової структури для того, щоб визначити, яка сторінка з'явиться в тому або іншому кадрі. Якщо ви задасте атрибут SRС не для усіх фреймів, у вас виникнуть проблеми. Навіть якщо сторінки, що відображаються у фреймі, вибираються в сусідньому фреймі, ви повинні принаймні задати для кожного фрейма початкову сторінку. Якщо ви не вкажете початкову сторінку і URL, фрейм виявиться порожнім, а результати можуть бути найнесподіванішими.

Атрибут ТАRGЕТ

Щоб розібратися з атрибутом ТАRGЕТ, необхідно повернутися до простого прикладу з кадром змісту. Коли користувач клацає мишкою на одному з посилань в лівому фреймі, відповідна сторінка повинна з'явитися в правому фреймі, а зміст залишається незмінним. Щоб цього добитися, треба визначити цільовий фрейм ТАRGЕТ, в якому відображатиметься сторінка для кожного пункту змісту. Цільові фрейми задаються в посиланнях лівого фрейма. Ось навіщо усім кадрам у фреймовій структурі були присвоєні імена. Правий фрейм називається main, так що треба в кожному посиланні додати атрибут ТАRGЕТ=«main», внаслідок чого відповідна сторінка з'явиться у фреймі main. Зверніть увагу: кожне посилання містить атрибут ТАRGЕТ=«main», який по клацанню миші відображає сторінку у фреймі main.

Атрибут ТАRGЕТ можна задавати для декількох різних тегів. При використанні в тегу <ВАSЕ> він направляє усі посилання в певний цільовий фрейм, якщо надалі не передбачене інше. Можна задати атрибут ТАRGЕТ в тегу <АRЕА> у активному зображенні або в тегу <FОRМ>. Фрейми корисні для організації форм. Користувачі бачитимуть одночасно і форму, і результат свого вибору. Зазвичай при клацанні мишею кнопки Submit форма зникає, і з'являється сторінка з результатами вибору. Поєднання форм і фреймів може виявитися зручним способом навігації.