Сага про кадри

Навіщо застосовуються фрейми? Як правильно працювати з ними? Коли їх краще уникати і яке підводне каміння може підстерігати нас на цьому шляху?

Чи потрібно використовувати кадри?

Для початку давайте вирішимо, для чого використовуються кадри. Вони з'явилися ще в другій версії Netscape Navigator і призначалися для полегшення навігації при створенні сторінок (так тоді здавалося).

Техніка використання фреймів у тому, що це вікно броузера ділиться кілька областей, у кожну з яких можна завантажити незалежну сторінку. Крім цього, було запроваджено механізм, що дозволяє керувати будь-якою сторінкою з будь-якого вікна. Наприклад, можна в одному вікні організувати меню сайту, а в іншому - показувати його вміст. Причому, клацання на посилання у вікні меню відкривало сторінку зовсім в іншому вікні. Така побудова сайту найчастіше зустрічається, але ніщо не заважає нам зробити не два фрейми, а, наприклад, 3, 4, 5. і т.д. Але поки не поспішатимемо з обговоренням механізму роботи фреймів, а поговоримо про їхні недоліки та доречність застосування.

У яких випадках доречно використовувати фрейми?

Щиро кажучи, є дуже мало завдань, які не можна вирішити без використання кадрів. Спочатку введені для того, щоб полегшити створення механізму навігації по сайту, на даний момент вони, на мою думку, ясно показали, що не справляються з цим завданням. Для цієї мети краще підходить технологія SSI.

Проте, у яких випадках виправдано їхнє застосування?

якщо стоїть завдання швидко створити сайт і всі сторінки вже написані, а ні часу, ні бажання їх переробляти немає
якщо потрібно, щоб частина сторінки (найчастіше логотип чи меню) завжди знаходилися перед очима
для дизайнерських вишукувань, нарешті.

АлеІснує один вдалий спосіб застосування фреймів - створення системи допомоги для складних сайтів. В цьому випадку дуже зручно відкривати нове вікно, де вже використовується фреймова структура. Це дуже схоже на систему допомоги Windows.

Механізм роботи кадрів

Якщо все ж таки вирішено застосовувати фрейми, то давайте розберемося з тим, як правильно писати HTML-код і працювати з ними.

Будь-яка сторінка, що містить фрейми, починається з написання спеціальної сторінки-контейнера, яка сама не показується, але містить в собі вказівки для організації фреймової структури та посилань на файли, що беруть участь. Ось, як вона виглядає:

index.htm - сторінка контейнер

І відразу напишемо код для сторінок, що входять до кадрової структури.

left.htm - сторінка, що містить меню

right.htm - сторінка, де відображатимуться основні статті сайту.

Як можна помітити, сторінка-контейнер відрізняється від звичайної лише тим, що замість тегу ми використовуємо тег frameset, в якому безпосередньо і визначаються кадри. Але сам собою він визначає лише кількість і розміри кадрів і не визначає сторінки, що входять у кадр. Це можна зробити за допомогою тега frame >. Давайте докладніше розберемо наш приклад:

У параметрі тега frameset > ми визначаємо, що сторінка буде розділена по вертикалі і складатися з двох колонок (якщо нам потрібно розділити вікно по горизонталі, тоді замість параметра cols, потрібно застосовувати параметр rows).

У принципі, колонок може бути й більше, ніж дві. Їх кількість визначається значенням параметра cols (rows), яке є цифрами і знаками, розділеними комами. Кожне значення визначає ширину колонки. Ширина, як, втім, і висота, може задаватися у відсотках, пікселах та придопомоги знака зірочки, що позначає - "простір, що залишився". Ось приклади визначення кадрів:

- 2 колонки, одна з яких має фіксовану ширину 200 пікселів.

- 3 рядки, висоти яких визначено у відсотках від висоти вікна броузера.

- те саме, що й попередній рядок, але записана за допомогою зірочок. Цифра перед зірочкою вказує кількість повторів. Ширина однієї зірочки визначається як середнє арифметичне між усіма зірочками у рядку з урахуванням коефіцієнтів перед ними.

Як я вже сказав вище, тег є контейнером, і як його елементи повинні бути написані рядки для кожної колонки (рядки) за допомогою тега . Ось приклад опису:

src - URL сторінки, яка буде поміщена у кадр
name - ім'я сторінки, яким до неї можна буде звертатися.
scrolling, noresize, . - параметри, що управляють поведінкою кадру - можливістю змінювати користувачем ширину кадру і керувати появою смуги прокручування у разі, якщо вміст сторінки не міститься на екрані.

Зверніть увагу на параметр name - він дуже важливий і дозволяє нам маніпулювати з фреймом. Як це здійснюється? Уважно розглянемо файл left.htm, де міститься наше меню. У самому файлі немає нічого незвичайного, а ось у написанні посилань на сторінки є. Якщо придивитися, то можна помітити, що додався ще один параметр target = "content" - ось саме він і відповідає за те, в якому вікні завантажуватиметься файл за посиланням:

Як значення параметра вказується те саме ім'я, яке ми надали нашому кадру. Таким чином, ми можемо відкрити будь-яке посилання з будь-якого вікна та у будь-якому вікні. Достатньо лише знати його ім'я.

Крім імен, які визначаються безпосередньонами є частина вже певних, і найважливіші з них такі:

_blank - відкриває посилання у новому вікні
_top - відкриває посилання на все вікно, якщо воно знаходилося у кадрі. Іншими словами, вона руйнує структуру кадру і завантажує файл у вікно.
_parent - відкриває посилання у вікні.

До цих пір як елементи контейнера ми використовували прості теги, але ми також можемо використовувати контейнер. І тут ми отримуємо т.зв. вкладені кадри. Ось приклад:

В даному випадку визначено три кадри - один горизонтальний угорі, який ми можемо використовувати, наприклад, як логотип. І два вертикальні, які розділили другий горизонтальний кадр.

У загальному випадку можна використовувати скільки завгодно фреймів (у межах розумного, звичайно).

Невелике зауваження. В принципі, як джерело кадру може бути вказана не HTML-сторінка, а малюнок у форматі GIF або JPEG, але застосування такого механізму вважається поганим тоном.

Тепер про підводні камінчики. Найбільший з них наступний - Netscape Navigator не точно дотримується ширини кадру в пікселах і може приймати лише деякі кратні кроки. Тому якщо виникла така проблема, потрібно просто підкоригувати ширину кадру під стандарти Netscape.

До речі, рамку кадру можна забрати, вказавши параметр frameborder=0.