Визначення та сутність фреймів

Ось ми добралися і до фреймів (frames). Що ж це таке і чим вони чудові? Фрейми дозволяють нам відкрити у вікні броузера - не один, а одночасні декілька документів (допустимо, документ menu.html, який містить меню, logo.html - документ, який містить логотип, шапку сторінки, і content.html - документ з безпосереднім вмістом нашого сайту).

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

Ви могли чути на форумах або десь ще про те, що фрейми це погано. Звідси у вас сповна закономірно може виникнути до мене питання: "Фрейми це добре, або все ж погано?"

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

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

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

Оскільки перший документ на сайті, який показується відвідувачеві це index.html (або на зразок його), то ми його і мучитимемо, хай він буде фрейм-документом. Створимо документ index.html:

<html>

<head>

<title>Хождение по фреймам</title>

</head>

</html>

На перший погляд - сповна стандартний початок, лише ось... опа! немає тега body! І це не помилка, фрейм-документ не містить тега body, такого обов'язкового в інших випадках.

Що ж, не сумуватимемо про тег body, і знайдемо йому сповна гідного заступника:

Здрастуйте Frameset, яке красиве ім'я, говорять, що ви вирішили змінити дещо в житті нашого сайту і ввести фрейми:), дуже приємно, ми завжди рады новим і практичним рішенням.

Тепер треба знайти frameset гідних помічників і задати йому деякі життєво необхідні атрибути, але це на наступній сходинці.

Перш, ніж що-небудь робити далі, треба вирішити за яким принципом ми розміщуватимемо наші документи, і взагалі, які документи ми показуватимемо відвідувачеві одночасно. Пропоную класичний варіант - logo.html, menu.html, content.html - про яке я згадувала в попередній главі.

Розташувати ми можемо це по-різному, ось для прикладу чотири варіанти з безлічі можливих:

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

Оскільки документи, які ми розміщуємо у фреймах незалежні, то відповідно кожен документ може містити в собі що завгодно (і текст, і картинки, і таблиці). Чому я особливо обумовлюю цей момент: деякі безрозсудні читачі чомусь уявляють, що фрейми - це альтернатива таблицям. ЦЕ НЕ ВІРНО!

Отже, спочатку створимо такий варіант (заздалегідь не забудьте створити звичайні *.html документи з логотипом, меню і основним вмістом

<html>

<head>

<title>Хождение по фреймам</title>

</head>
<frameset rows="100,*,150" >

<frame src="logo.html">

<frame src="content.html">

<frame src="menu.html">

</frameset>

</html>

Давайте розберемося, що і для чого. За допомогою атрибуту rows тега <frameset> ми вказали, що наші фрейми будуть розташовані горизонтально (рядами). У значенні атрибуту rows ми прописали висоту кожного фрейма (rows="100,*,150"). Висота першого фрейма - 100 пікселів, третього - 150, а другою займає простір, що все залишився, по висоті (це ми вказали значком *), - вважаю, тут повинно бути все ясно.

Тег frame повідомляє броузеру які ж документи у нас будуть завантажені у фреймах. У нашому випадку: у першому фреймі буде завантажений - logo.html (документ з логотипом), другий фрейм займе документ з безпосереднім вмістом (content.html), а третій - меню. Якщо ви хочете, аби меню було в другому ряду (фреймі), то вам слід поміняти його місцями з content.html

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset rows="100,*,150">

<frame src="logo.html">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

Поглянете що у нас вийшло. Опаньки... Поміняти-то ми їх місцями - поміняли, а ось тепер треба задати нові значення атрибуту rows, аби меню у нас знову займало лише 150 пікселів по висоті, а вміст - все інше:

Ось тепер інша справа:) Все-таки від зміни місць доданків дещо міняється...

Цю главу ми почнемо з невеликого фокусу: заміните атрибут rows, на cols:

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset cols ="100,150,*">

<frame src="logo.html">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства:

Отже, атрибут cols говорить нашому броузеру, що наші фрейми будуть розташовані вертикально (стовпцями). Тобто значення атрибуту cols (cols="100,150,*") задають вже не висоту, а ширину кожного фрейма. Ширіна першого фрейма - 100 пікселів, ширина другого - 150, а третій фрейм займає по ширині простір, що все залишився.

До речі, ми отримали ще один з чотирьох варіантів, які збиралися зробити:

Отже, підведемо підсумки. Ми можемо розташувати наші фрейми горизонтально (рядами) або вертикально (колонками) відносно один одного, робимо ми це за допомогою параметрів тега <frameset> Cols і Rows. Іншого способу ділення не існує. Одночасно ці параметри використовувати не можна.

За допомогою rows ми розбиваємо розташовуємо фрейми горизонтально (рядами) і задаємо яку висоту матиме кожен фрейм, за допомогою cols розташовуємо фрейми вертикально (стовпцями) і задаємо яку ширину матиме кожен фрейм.

До речі, ширина і висота можуть задаватися не лише в пікселях, але і у відсотках від загальної ширини (висоти) вікна:

Пам'ятаєте, що в сумі це все повинно дорівнювати 100%. А то бувають же розумники...

У цій главі ми розберемося, як розташувати документи у вікні таким чином

или

У попередній главі я говорила, що не можемо використовувати атрибути rows і cols одночасно стосовно одного тега <frameset>. Тоді як же розташувати наші документи у вікні так, як вказано на малюнках? Просто, ввести в наш фрейм документ ще одного пана <frameset>, але про все по порядку.

Почнемо з першого малюнка:

Яким чином ми ділитимемо вікно? - На ряди. У першому ряду у нас розташовуватиметься logo.html, а другий ряд ми поділимо на два стовпці, в яких розташовуватимуться документи menu.html і content.html.

<html>

<head>

<title>Хождение по фреймам</title>

</head>

< ??? >

</frameset>

</html>

Принцип побудови ясний, лише от як позначити ряд, розбитий на два стовпці? Як я вже говорила, тут нам допоможе пан Frameset.

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset rows="100,*">

<frame src="logo.html">

<frameset cols="150,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

Для тих, хто не устежив за рухами моїх рук, пояснюю. Перший ряд ми оформили як годиться, за допомогою тега frame. У другому ряду на сцену выгодит тег <frameset></frameset>.

За допомогою атрибуту cols тега <frameset></frameset> ми ділимо другий ряд на два стовпці (перший шириною 150 пікселами, другою по ширині займає простір, що все залишився). А теги <frame>, які містить <frameset></frameset>, визначають, які документи будуть показані завантажені у вертикальних фреймах в другому ряду (menu.html і content.html).

Тепер розберемо варіант, змальований на другому малюнку:

Тут ми ділитимемо вікно на стовпці. Другий стовпець міститиме в собі документ content.html (вміст), а перший стовпець ми розіб'ємо на два ряди, і помістимо в них документи logo.html і menu.html.

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset cols="100,*">

<frameset rows="100,*">

<frame src="logo.html">

<frame src="menu.html">

</frameset>

<frame src="content.html">

</frameset>

</html>

Ось так. Нічого складного тут не немає:)

Проте, якщо у вас виникли труднощі з освоєнням фреймів, і ви вважаєте, що вам потрібні детальніші уроки і простіше оповідання, то я раджу вам звернутися до підручника по фреймах Джо Барта <http://postroika.ru/1step2.html>, який ми перевели для вас, і який ви можете знайти на нашому сайті.

А ми ж з тими, у кого не виникає проблем з предметом, переступимо на наступну сходинку, аби взнати, що ще можна зробити з фреймами.

Допустимо, ми вирішили зупинитися на останньому варіанті <file:///D:\Documents%20and%20Settings\user\ Мої%20документи\alex%20new\ НТУУ\ Прочие\steps\primtoframez6.html> фреймової структури для нашої сторінки, означає наводитимемо його в більш-менш нормальний вигляд. Спершу позбавимося від смуги прокрутки (скрулинга) у фреймі, що містить документ logo.html.

html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset cols="100,*">

<frameset rows="100,*">

<frame src="logo.html" scrolling="no" >

<frame src="menu.html">

</frameset>

<frame src="content.html">

</frameset>

</html>

Scrolling - атрибут тега <frame>. Він може набувати декілька значень: no - це означає зовсім не буде смуги прокрутки, ні за яких обставин; yes - це означає смуга прокрутки буде завжди; auto - смуга прокрутки з'явиться лише тоді, коли вона потрібна.

Власне, scrolling="auto", можна не прописувати, оскільки якщо атрибут scrolling не заданий, то смуга прокрутки з'явиться, якщо вона потрібна, а якщо немає - її не буде.

Якщо ви підведете мишку до кордону якого-небудь фрейма, то побачите, що потягнувши за неї, ви можете змінити розміри фрейма. Як же заборонити вашому відвідувачеві це робити? За допомогою атрибуту noresize для тега <frame>:

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset cols="100,*">

<frameset rows="100,*">

<frame src="logo.html" scrolling="no" noresize >

<frame src="menu.html" noresize >

</frameset>

<frame src="content.html" noresize >

</frameset>

</html>

Тепер давайте позбавимося від рамок між фреймами. Для цього ми використовуємо параметр border, з яким ми раніше вже зустрічалися. Отже, border="0".

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset cols="100,*" border="0" >

<frameset rows="100,*">

<frame src="logo.html" scrolling="no">

<frame src="menu.html">

</frameset>

<frame src="content.html">

</frameset>

</html>

Так вже краще:). Але все таки, щось ще хочеться виправити... А! Картинку з бісом так і хочеться притиснути в лівий верхній кут:

<html>

<head>

<title>Хождение по фреймам</title>

</head>

<frameset cols="100,*" border="0">

<frameset rows="100,*">

<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0" >

<frame src="menu.html">

</frameset>

<frame src="content.html">

</frameset>

</html>

Атрибути marginwidth і marginheight вам вже знайомі, вони визначають ширину полів фрейма. У нашому документі ми прибрали поля, задавши значення цим атрибутам рівні нулю для фрейма, що містить документ з нашим бісом (logo.html).

Стоп, стоп, скаже мій читач, ви ж говорили про ці атрибути, як про нестандартних. Так, звичайно, але не стандартні вони лише при вживанні з тегом <body>, оскільки цього специфікація не передбачає, проте для тега <frame>, вони можуть використовуватися без побоювань, оскільки для нього вони в специфікації якраз і передбачені.

У цій главі ми поговоримо про те, що ставати проблемою для кожної людини, початківця освоювати фрейми.

Отже, звернемося до нашого прикладу. Натискуйте на будь-яке із заслань. Документ, на який введе заслання, відкриється в тому ж фреймі, в якому розташовується документ з меню. А нам потрібно, аби він відкрився у фреймі з основним вмістом, а меню залишилося в незайманому вигляді. Як це зробити?

Спершу, господа, познайомтеся з новим атрибутом тега <frame> - name (до речі, name, мені здається, що ми з вами вже знайомі:). Пустимо name в справу:

<html>

<head>

<title>Хождение по фреймам</title>

</head>

</frameset><frame src="content.html" name="window-1" >

</frameset>

</html>

Параметр name задає унікальне ім'я для фрейма (у нашому випадку для того, який містить документ content.html).

Ім'я фрейма може бути надалі використане для заслання на нього з інших документів (фреймів), за допомогою атрибуту тега <a> target (target="имя_фрейма"), з яким ми, до речі, теж вже знайомі.

Введемо атрибут target в документі із засланнями - menu.html.

<html>

<head>

<title>Документ с Меню</title>

</head>

<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">

<center>

<a href="content.html">Главная</a>

<a href="tumki.html">Тумки</a>

<a href="bumki.html">Бумки</a>

<a href="tururumki.html">Турурумки</a>

<a href="tra-la-la.html">Траляля</a>

</center>

</body>

</html>

Ось такий він (menu.html), в нашому випадку. Тепер для кожного заслання вкажемо параметр target="window-1", де window-1 - це ім'я фрейма, в якому у нас розташовується документ з основним вмістом (content.html).

<html>

<head>

<title>Документ с Меню</title>

</head>

<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">

<center>

<a href="content.html" target="window-1" >Главная</a>

<a href="tumki.html" target="window-1" >Тумки</a>

<a href="bumki.html" target="window-1" >Бумки</a>

<a href="tururumki.html" target="window-1" >Турурумки</a>

<a href="tra-la-la.html" target="window-1" >Траляля</a>

</center>

</body>

</html>

Тепер, всі заслання відкриваються в потрібному нам фреймі, а меню нікуди не зникає, при цьому ми не доклали жодних особливих зусиль, а лише змінили трохи два документи:) - наш фрейм-документ (index) і документ, що містить заслання (меню).

Бувають ситуації, коли нам потрібно, аби документ, що відкривається, відкрився у все вікно, для цього треба параметру target задати значення _top:

<а href="project.html" target="_top">Мой проект про рыбках</a>

Сторінка з проектом про рибок відкриється в повне вікно, закривши (знищивши) останні кадри (фрейми).

Ось ми добралися і до останньої глави про фрейми. Власне, про фрейми ми закінчили говорити в попередній главі, а на цій сходинці ми поговоримо про IFrame - "плаваючому" фреймі.

Отже, що таке Iframe, і чим він відрізняється від просто фреймів. IFrame - "плаваючий" або вбудований фрейм. Ви, напевно зустрічали його вже багато раз на різних сайтах. Для Iframe нам не потрібно створювати фрейм-документ, і прописувати в нім фреймову структуру нашої сторінки. Iframe дозволяє нам вставити один html-документ в інший html-документ.

Як це виглядає:

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

«Плаваючий» фрейм вводиться в наш звичайний html-документ за допомогою тега <iframe></iframe>:

<IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1">

</IFRAME>

У атрибуті src ми вказуємо дорогу до документа, який відображуватися у вбудованому фреймі.

Атрибути height і width відповідають за ширину і висоту вбудованого фрейма.

Атрибут scrolling (смуга прокрутки) і його значення ми теж вже знаємо з уроків по фреймах: він може набувати декілька значень: no - це означає зовсім не буде смуги прокрутки, ні за яких обставин; yes - це означає смуга прокрутки буде завжди; auto - смуга прокрутки з'явиться лише тоді, коли вона потрібна.

Атрибут frameborder вказує відображувати чи ні кордони вбудованого фрейма, можливі значення 1 (так, відображувати) і 0 (ні, не відображувати).

Кордони вбудованого фрейма розтягувати за допомогою миші ваш відвідувач не може, тому атрибуту noresize вбудовані фрейми не мають.

Iframe може вирівнюватися відносно вмісту сторінки: тексту і картинок, і може, відповідно, бути поміщений в теги вирівнювання і таблиці.

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

На цьому наша розмова про фрейми завершена, нагадую про корисні заслання в правій колонці, раджу вивчити, а після переходити до наступної сходинки, на якій ми почнемо нову тему поговоримо про об'єкти і додаткові засоби, які полегшують наше життя, роблять html-документы динамічними, розширюють наші можливості при створенні сторінок.

Недоліки фреймів:

1. При щонайменших неточностях в логіці взаємодії фреймів можна ускладнити навігацію по сайту.

2. Дизайнерові доводитися контролювати не один, а декілька файлів одночасні.

3. Фрейми при натисненні користувачем кнопки "Відновити" вантажать йому ті файли які вказані у фреймі, що містить файл, навіть якщо користувач вже пройшов декілька сторінок.

4. Фрейми ігноруються пошуковими роботами, тому не враховуються пошуковими системами.

5. У адресному рядку завжди одна адреса, тому не можливо зберегти абсолютне заслання на яку те інформацію.