Підготовка фрейму 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> і < NOFRAMES>. Це спрощує завдання. В основному все пов'язано з тегами < FRАМЕ> та їх атрибутами. Якщо ж ви хочете поекспериментувати, можна створити вкладені одна в одну теги < FRAMESET> аналогічно тегам < ТАВLЕ>.

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

Атрибут 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АМЕ> в його атрибути. Їх шість: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE і SRC.

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

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

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

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

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

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

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

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

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

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

Завдання: створити сторінку з фреймами, таку, щоб в одному фреймі було навігаційне меню, в другому – загальні відомості, у третьому – фотографії.

Забезпечити відкриття сторінок завжди в одному фреймі, повернення на головну – на кожній сторінці.