Практичне введення в програмування JavaScript
У якомусь сенсі кадр - це саме те, що означає це слово: рамка навколо картинки, віконце або сторінка. Вводячи таг, дизайнер НТМL-сторінки розділяє екран броузера на частини. У результаті людина, яка переглядає сторінку, може вивчати одну частину сторінки незалежно від решти. Фактично броузер, що розпізнає кадри, завантажує різні сторінки в різні секції, або кадри, екрану. Наприклад, ви можете побудувати сторінку таким чином, що фірмовий знак буде зафіксовано у верхній частині екрана, тоді як решту сторінки користувач перегортає звичайним способом. Можна розташувати збоку кнопки навігації, які не переміщаються, коли читач клацає їх мишкою, тому змінюється лише частина екрану, а сама смужка навігації залишається нерухомою.
Для чого можна використовувати фрейми
Хоча фіксація фірмового знака чи засобів навігації - найбільш очевидні способи використання фреймів, це означає, що й можливості тим і вичерпуються. Просто перераховані рішення - перше, що спадає на думку дизайнерам, коли вони думають про те, як використовувати фрейми. Але щоразу, коли в екран броузера вставляється кадр, ви урізаєте територію, де можна було б розмістити дані. Чим більше ви вводите кадри, тим менше залишається корисного простору і тим швидше ви заплутаєте своїх читачів, незнайомих з навігацією на Web-сторінці з кадрами.
Наприклад, розумно зберігати у кадрі логотип компанії лише на перших кількох рівнях найважливіших сторінок, а основні дані показувати без кадрів.
Як працюють фрейми
На перший погляд, фрейми - це щось складне, але їх легко зрозуміти, якщо провести аналогію з осередками таблиці. Розташування кадрів на екрані задається майже так само, як осередкиу таблиці: таги та атрибути працюють так само, як їх табличні родичі. Однак, хоча аналогія між одиничним кадром на сторінці та коміркою таблиці корисна, потрібно пам'ятати, що є й відмінності. Вміст комірки встановлено в коді HTML-сторінки з таблицею. Текст або графіка, що складають вміст таблиці, фактично вводяться на тій самій сторінці HTML, що таг або атрибут, що описують таблицю. Навпаки, екран з кадрами описується в НТМL-сторінці, що називається (frameset). Вміст кадру - це окрема HTML-сторінка, яка може знаходитися де завгодно - в іншому каталозі, на локальному сервері або на віддаленому вузлі десь в мережі. p align="justify"> Фреймова структура визначає тільки спосіб організації екрану з кадрами і вказує, де знаходиться початковий вміст кожного кадру. Для всіх кадрів задаються URL, що описують місцезнаходження їх даних. Як правило, на сторінці з кадровою структурою немає вмісту кадрів. Така сторінка зазвичай невелика - вона описує лише кадрову структуру екрана. Коли документ завантажується у кадр, ви можете клацати мишкою на посиланні в цьому документі, що спричинить появу пов'язаних документів в інших кадрах, заданих у кадровій структурі.
Створення простої сторінки з кадрами
Створимо, для кращого розуміння, пару простих сторінок з кадрами, щоб стало зрозуміло, якою є будова НТМL сторінки з кадрами і для чого потрібні основні таги та атрибути.
Завдання кадрової структури
Для початку ми повинні уявити загальний вигляд сторінки - де і якого розміру будуть кадри. Потім можна подумати про зміст. Нижче наводиться код простої кадрової структури з використанням тага. Зверніть увагу: сторінка з фреймовою структурою не містить тага.
Ось і весь код, необхідний для завданнякадрової структури. Зверніть увагу на таг. За кілька хвилин ми до нього повернемося. В результаті ми отримали екран, поділений на два вікна. Ліве вікно займає 25 відсотків екрану та містить сторінку з назвою a.html. Вікно праворуч займе 75 відсотків і спочатку покаже файл b.html. Поки у нас їх немає, то ви побачите сторінку з двома порожніми кадрами. Перш ніж вона з'явиться, нам доведеться кілька разів клацнути мишкою у відповідь на повідомлення про помилки, тому що броузер намагатиметься знайти неіснуючі сторінки. Зауважте, що праву сторінку ми назвали ( ) за допомогою рядка:
Це означає, що кадр під іменем main буде містити сторінку b.html. Зауважимо, що оскільки ми не збираємося показувати у лівому кадрі жодних сторінок, окрім menu.html, нам не потрібно його називати.
Підготовка вмісту кадру
Тепер завантажимо кадри з вмістом. Задамо сторінку menu.html у лівому кадрі, де ми збираємося клацати мишею, перемикаючись між двома сторінками у правому кадрі. Файл menu.html - це звичайна НТМL-сторінка, побудована як зміст. Насправді ми можемо взяти готову сторінку з змістом та використовувати її. Майте на увазі, що цей кадр вузький і високий, так що сторінка, яка завантажуватиметься в нього, повинна бути відповідним чином спроектована. Тепер ми повинні визначити, де будуть з'являтися інші сторінки при натисканні мишкою на посиланні. Оскільки ми хочемо, щоб вони відображалися у правому кадрі, додамо атрибут TARGET= (TARGET="main") у посилання. Це означає, що коли користувач клацає на посиланні, сторінка з'являється у кадрі main. Ми відображаємо всі сторінки у кадрі main, тому давайте додамо атрибут ТАRGЕТ="main" у всі таги посилань у змісті. Якщо ми не визначимо атрибут Target, тосторінка з'явиться там, де ми клацнули мишкою, - у лівому кадрі, що нас не влаштовує, хоча в якійсь іншій ситуації подібна поведінка була б дуже доречною. Наприклад, можна додати посилання , яке буде просто виводити наступні посилання. Має сенс зробити зміст довшим, щоб читачі бачили якнайбільше посилань. Але зараз давайте обмежимося простим прикладом. Нижче наведено код для лівого кадру menu.html.
Зауважимо, що тут нічого не йдеться про кадри. Про них все сказано у фреймовій структурі. Єдине, що потрібно подбати на кожній НТМL сторінці, що з'являється у кадрі, так це про те, де помістити посилання, що активують ті чи інші дії. У нашому прикладі, у лівому кадрі, де знаходиться зміст, буде розміщуватися лише одна сторінка. Ми хочемо, щоб при натисканні мишкою в лівій сторінці посилальний документ з'являвся б у правому кадрі main.
Підготовка кадру main
Правий кадр main буде містити HTML-сторінки. Ваше завдання так їх спроектувати, щоб вони добре виглядали в меншому, ніж зазвичай вікні, тому що частина екрану буде зайнята лівим кадром змісту. Але ці сторінки більше нічим не примітні. Нижче наводиться код для сторінки, згаданої першою в змісті (html-pr2-4.html).
Зверніть увагу: на сторінках ніде таємно не запрограмований кадр. Це означає, що можна без особливих проблем конвертувати всі документи вашого Web-сервера для використання у кадровій структурі.
Використання тага
У багатьох ваших відвідувачів ще залишилися броузери, які не вміють поводитися з кадрами. З цих причин розумно надати доступ до версії основних сторінок без кадрів. Якщо читач із застарілим броузером опиниться на вашій сторінці з фреймовоюСтруктура, все, що знаходиться на ній між тагами і буде виглядати відмінно - броузер просто проігнорує кадри. Ось чому обов'язково потрібно використовувати таги. Можливо, вам доведеться інакше організувати екран без кадрів.
На сторінку з кадрами можна помістити кнопку No Frames (Без кадрів). Її призначення очевидне. Такий варіант досить розумний і легко здійсненний.
На той випадок, якщо ви невпевнено почуваєтеся при використанні , нижче наведено приклад сторінки з структурою кадру з доданим в кінці розділом .
Майте на увазі, що броузер, що підтримує кадри, проігнорує все, що знаходиться між тагами і . І навпаки, броузер, що не підтримує фрейми, проігнорує все, що знаходиться між тегами і . Код без кадрів можна помістити і на початок, і на кінець сторінки.
Специфічні таги та атрибути фреймів
Вивчивши таги та атрибути для роботи з кадрами, давайте поговоримо про те, як найкраще проектувати сторінки з кадровою структурою.
Таги обрамляють текст, що описує компонування кадрів. Тут розміщується інформація про кількість фреймів, їх розміри та орієнтацію (горизонтальну або вертикальну). У тага лише два можливі атрибути: ROW=, що задає число рядків, і СОLS=, що задає число стовпців. Між тагами не потрібно вказівки тага, але його можна помістити між тагами наприкінці кадрової структури. Між тагами не повинно бути жодних тегів чи атрибутів, які зазвичай використовуються між тагами. Єдиними тагами, які можуть бути між тагами і , є таги , і . Це полегшує завдання. В основному все пов'язане з тагами та їх атрибутами. Якщо ж ви хочете поекспериментувати, можна зробити вкладені одна в одну таги аналогічно тагам.
Атрибути ROW= та СОLS= схожі. Майте на увазі, що длякожного рядка і стовпця, згаданих у тазі, повинен бути свій набір того.
Атрибут ROW= тага задає число та розмір рядків на сторінці. Кількість того повинна відповідати зазначеній кількості рядків. Праворуч від знака = можна визначити розмір кожного рядка в пікселях, відсотках від висоти екрана або у відносних величинах (зазвичай це вказівка зайняти частину місця, що залишилася). Не забувайте користуватися лапками та комами і залишати прогалини між значеннями атрибутів. Наприклад, наступний запис формує екран, що складається з трьох рядків: висота верхньої дорівнює 20 пікселів, середній - 80 пікселів, нижній - 20 пікселів:
Наступний таг створює екран, на якому верхній рядок займає 10% висоти екрану, середній - 60%, а нижній - 30%, що залишилися.
Можна зробити елегантніше, задаючи відносні значення в комбінації з фіксованими, вираженими у відсотках або пікселях. Наприклад, наступний таг створює екран, на якому верхній рядок має висоту 20 пікселів, середній - 80 пікселів, а нижній займає все місце, що залишилося:
А можна зробити так:
Число перед знаком показує, що відповідний рядок (в даному випадку - середній) займає вдвічі більше місця, що залишилося на екрані, ніж нижній. Не забувайте, що значення є відносними (вони залежать від розміру екрана). Це часто буває зручно, адже ви не завжди знаєте, який монітор у вашого користувача і який дозвіл він використовує.
Стовпці задаються так само, як рядки. Для них застосовні самі атрибути.
Таг визначає зовнішній вигляд та поведінку кадру. Цей таг не має тага, що закриває, оскільки в ньому нічого не міститься. Вся суть тага у його атрибутах. Їх шість: NАМЕ=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= та SRC=.
Якщо ви хочете, щоб при натисканнімиші на посилання відповідна сторінка відображалася у певному кадрі, ви повинні вказати цей кадр, щоб сторінка знала, куди що завантажувати. У попередніх прикладах ми назвали великий правий кадр main, і саме в ньому з'являлися сторінки, вибрані з змісту в лівому кадрі. Фрейм, де відображаються сторінки, називається цільовим (target). Фрейми, які є цільовими, називати необов'язково. Наприклад, можна записати такий рядок:
Імена цільових кадрів повинні починатися з літери чи цифри. Вибирайте назви простіші, щоб не заплутатися. Одні й самі імена дозволяється використовувати у кількох фреймових структурах. По клацанню миші відповідні сторінки відображатимуться у іменованому кадрі:
Атрибут МАRGINWITH = діє аналогічно до атрибуту таблиць CELLPADDING =. Він задає горизонтальний відступ між вмістом кадру та його межами. Найменше значення цього атрибуту дорівнює 1. Не можна вказати 0. Можна нічого не надавати - за умовчанням атрибут дорівнює б.
Атрибут МАRGINHEIGHT= діє як і, як і МАRGINWITH =. Він задає поля у верхній та нижній частині кадру.
Чи хочете ви, щоб ваші читачі користувалися прокруткою у кадрі? Іноді буває розумно позбавити їх цього насолоди. Можливі варіанти: SCROLLING = YES, SCROLLING = NО, SCROLLING = АUТО. SCROLLING =YES означає, що у кадрі завжди будуть смуги прокручування, навіть якщо це не потрібно. При завданні SCROLLING =NO про смуги прокручування не буде, навіть якщо вони необхідні. Якщо документ занадто великий, а ви задали режим без прокручування, документ просто буде обрізаний. Атрибут SCROLLING = АУТО надає броузеру самому вирішувати, потрібні смуги прокручування чи ні. Якщо атрибут SCROLLING= відсутній, результат буде таким самим, як і при заданні SCROLLING=АUТО.
Якправило, користувач може, переміщуючи межу кадру мишкою, змінити його розмір. Це зручно, але не завжди. Іноді вам знадобиться атрибут NORESIZE. Пам'ятайте: всі межі кадру, для якого ви задали NORESIZE, стають нерухомими - відповідно може виявитися так, що розміри сусідніх кадрів теж стануть фіксованими. Використовуйте цей атрибут з обережністю.
Атрибут ТАRGЕТ= можна задавати для кількох різних тегів. При використанні в тазі він направляє всі посилання певний цільовий кадр, якщо надалі особливо не обумовлено інше. Можна встановити атрибут ТАRGЕТ= у тазі в активному зображенні або в тазі . Фрейми корисні організації форм. Користувачі бачитимуть одночасно і форму, і результати свого вибору. Зазвичай при натисканні мишею кнопки Submit форма зникає і виникає сторінка з результатами вибору. Поєднання форм та кадрів може виявитися зручним засобом навігації.
"Чарівні" цільові фрейми
Імена цільових кадрів завжди починаються із символу підкреслення (_); ніякі інші кадри не можуть так називатися. фрейми необов'язково вказувати у фреймовій структурі. Якщо не виявити належної акуратності, то це ще один привід вашому броузеру відкрити купу вікон.
Фрейм "blank"
Якщо атрибут ТАRGЕТ= посилається на "blank", то документ завжди з'являтиметься у новому порожньому вікні.
Фрейм "self"
Фрейм "раrent"
Користуватись цим ім'ям небезпечно. Документи, викликані посиланням на "раrent", з'являються у батьківській фреймовій структурі. Це хороший спосіб остаточно спантеличити читачів. Та й у вас можуть виникнути труднощі у процесі форматування сторінок. Будьте обережні.
Вкладені та множинні кадрові структури
УВ основному вкладені кадри діють так само, як вкладені таблиці. Задайте кадрову структуру, а всередині якогось кадру в ній ще одну структуру. Пам'ятайте, що таг не має тага, що закриває. Ви, напевно, помітили, що при роботі з кадрами не використовуються таги та . Їхню роль відіграють множинні, або вкладені, фрейми. Задавши всередині однієї об'ємної фреймової структури дві незалежні підструктури, можна помістити в лівій частині екрана стовпець з двох, а в правій - з трьох фреймів.