Починаючи з браузера Netscape Navigator 2.0, HTML-автори отримали можливість розділяти основне вікно браузера на декілька незалежних кадрів-вікон (фреймів), у кожному з яких відображається свій документ. Одержувалось щось наподобі стіни з моніторів в операторській кімнаті на телебаченні. Фрейми, які зараз же завоювали популярність, були взяті на озброєння (та розширені) компанією Microsoft для браузера Internet Explorer. Тепер вони входять у стандарт HTML.
Для формування HTML-документів, які містять фрейми, послуговуються двома тегами: <frameset> і <frame>.
Набір кадрів – це просто сукупність кадрів, які покривають область перегляду браузера. Атрибути встановлення стовбців та рядків в тезі <frameset> дозволяють задавати кількість та початкові розміри стовбців і рядків кадрів. Тегом <frame> встановлюється, який документ – HTML чи інший – спочатку виводиться у кадрі. У цьому тезі можна задати ім’я фрейма, який використовуватиметься для уміщення цільових документів, отримуваних за гіперпосиланнями.
Розглянемо код деякого HTML-документа з фреймами, який відображається браузером так, як подано на рис. 5.1.
<html>
<head>
<title>Frames Example</title>
</head>
<frameset rows=”60%,*” cols=”65%,20%,*”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html” name=”fill_me”>
<frame src=”frame4.html” scrolling=yes>
<frame src=”frame5.html”>
<frame src=”frame6.html”>
</frameset>
</html>
Браузер заповнює кадри, які входять у набір, зліва направо у порядку слідування рядків. Окрім цього, оскільки задано відповідний атрибут в коді документа, четвертий кадр буде обладнаний лінійкою прокрутки, незалежно від того, чи поміщається уміст кадра у ньому цілком чи ні. (Лінійка прокрутки у фреймі відображається автоматично, якщо розмір умісту кадра перевищує розміри самого кадра та якщо цей режим не вимкнений явно атрибутом scrolling=no.)
Присвоївши ім’я фрейму, можна звертатися до нього, призначеного для відображення документа, на який вказує гіпертекстове посилання. Для цього потрібно додати спеціальний атрибут target до тега якоря первинного гіпертекстового посилання (<a>). Наприклад, для введення посилання на документ new.html з метою його відображення в кадрі 3 (цей фрейм має ім’я fill_me) якір потрібно сформувати так:
<a href=”new.html” target=”fill_me”>
Якщо користувач вибере це посилання, скажімо, в першому кадрі, то документ new.html замінить первинний уміст frame3.html у третьому фреймі.
Тег <frameset> встановлює сукупність кадрів або інші набори кадрів у документі. Допустимим є вкладення наборів кадрів, що забезпечує багатший діапазон можливостей компоновки. Тег <frameset> замінює в документі тег <body>. Документ не повинен включати нічого іншого, крім допустимого умісту <head> і <frameset>.
У тезі <frameset> використовують два атрибути, які дозволяють задати розмір і кількість стовбців (cols) і рядків (rows) кадрів або вкладених наборів кадрів, які необхідно відобразити у вікні документа. За допомогою цих атрибутів задається формат подання кадрів, подібно формату сітки чи таблиці. В кожному із вказаних атрибутів задається у лапках список значень, розділених комами. Цими значеннями задається або абсолютна чи відносна ширина (для стовбців), або абсолютна чи відносна висота (для рядків). Кількістю значень атрибута встановлюється, скільки рядків чи стовбців кадрів відображатиме браузер у вікні документа.
Кожне значення атрибутів rows і cols можна задати одним із трьох способів: як абсолютне число пікселів, у процентному відношенні від загальної ширини чи висоти набору кадрів або ж як частина простору, яка залишається після виділення місця для сусідніх елементів.
Браузер забезпечує максимально можливу відповідність специфікаціям розмірів. Проте слід відмітити, що при цьому, по-перше, не відбувається розширення меж головного вікна документа, і, по-друге, кадри розташовуються так, щоб не залишалось порожнього простору. При виділенні місця для конкретного кадру враховуються розміри всіх решта фреймів у рядку чи стовбці. Кадри розташовуються так, щоб заповнити все вікно документа. Окрім цього, головне вікно документа, яке містить кадри, не має лінійок прокрутки.
Ниже наведений приклад задання висоти рядків у пікселях:
<frameset rows="150,300,150">
Цим тегом задається створення трьох кадрів, кожен із яких займає у ширину все вікно документа. Висота верхнього та нижнього рядка встановлена у 150 пікселів. Висота середнього рядка – 300 пікселів. Якщо висота вікна браузера не дорівнює 600 пікселів, то браузер автоматично пропорційно розтягує або стискає верхній і нижній рядки так, щоб кожен з них зайняв четверту частину вікна. Для середнього рядка в цьому випадку відводиться половина вікна, яка залишається. У процентному відношенні розміщення аналізованого набору кадрів можна задати так:
<frameset rows=25%,50%,25%>
Природньо, що в сумі значення у процентах повинні складати 100. У протилежному випадку браузер пропорційно змінює розміри рядків.
Спростити задання розмірів рядків і стовбців можна за допомогою символу *, яким послуговуються для позначення однієї із рівних частин простору вікна, який залишається. Наприклад, тегом
<frameset cols="50,*">
створюється один фіксований 50-піксельний стовбець з лівого боку вікна, а решта місця відводиться під правий стовбець. Символ * можна використовувати й для позначення декількох стовбців або рядків. Наприклад, якщо заданий тег
<frameset rows="*,100,*">
то в результаті будуть створені: один рядок висотою 100 пікселів посередині набору кадрів і по одному рядку одинакової висоти над і під ним.
Якщо перед символом * поставити ціле значення, то для відповідного рядка чи стовбця буде виділено у пропорційному відношенні більше наявного простору. Наприклад, тегом
<frameset cols="10%,3*,*,*">
задається створення чотирьох стовбців. Перший займає 10% загальної ширини набору, другий – три п’ятих решта простору, а третій і четвертий стовбці – по одній п’ятій. Послуговування символом * забезпечує розподіл простору набору кадрів, який залишається.
Якщо явно не вказане протилежне, браузер забезпечує для користувача можливість вручну змінювати розміри окремих стовбців і рядків у документі, який містить кадри. Щоб цього не можна було зробити, потрібно додати в тег <frame> атрибут noresize.
Шляхом вкладення тегів <frameset> можна реалізувати складніші схеми роботи з фреймами. Будь-який кадр у наборі може вміщати інший набір кадрів.
Наприклад, на рис. 5.2 показане вікно, котре містить два стовбця кадрів. Перший стовбець складається з двох рядків, другий – із трьох. Таке подання створено за допомогою вкладення двох тегів <frameset> зі специфікаціями рядків в тег <frameset> верхнього рівня, яким задаються стовбці:
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<frameset rows="33%,33%,*">
<frame src="frameЗ.html">
<frame src="frame4.html">
<frame src="frame5.html">
</frameset>
</frameset>
Код HTML-документа, який містить кадри не включає в себе умісту, який відображається. Теги <frame> призначені для створення URL-посилань на окремі документи, які відображатимуться в кадрах. Теги <frame> – це автономні елементи, для яких не вимагається завершальних компонентів.
При розміщенні набору кадров у вікні вони впорядковуються так: зліва направо по стовбцям, зверху вниз по рядкам, тому порядок слідування і кількість тегів <frame> у тезі <frameset> відіграють дуже важливу роль.
Нижчее перераховані базові атрибути, якими можна послуговуватись в тезі <frame>.
srс=ім’я_документа
Значення атрибута src – URL документа, який відобразиться в аналізованому кадрі. Таким документом може бути будь-який HTML-документ або объект, що відображається, включаючи зображення і мультимедійні дані. Документ, на який вказує посилання, також може містити кадри.
name=ім’я_кадру
За допомогою необов’язкового атрибута name кадр помічається для наступного звернення шляхом задання атрибута target у тезі якоря гиперпосилання <а>. Якщо вибирається посилання на ім’я_кадру, документ відображається у поіменованому кадрі. Значення атрибута name – текстовий рядок у лапках.
noresize
Навіть якщо явно задати розміри через атрибути в тезі <frameset>, користувачі можуть вручну змінити розміри рядка чи стовбця у фреймовій структурі. Щоб вилучити таку можливість, потрібно в тегах наборів кадрів, відносні розміри рядків або стовбців яких необхідно залишити без змін, задати атрибут noresize.
scrolling=[yes,no,auto]
Кадри, уміст яких не поміщається в межах відведеного для них простору, при відображенні браузером зазвичай обладнуються лінійками прокрутки. Якщо місця для умісту достатньо, лінійки прокрутки відсутні. Атрибут scrolling надає користувачеві можливість явно задавати лінійку прокрутки. Значенням yes вмикається режим відображення лінійки, а no – вимикається. Значення auto відповідає режиму за замовчуванням; це рівносильне тому, що даний атрибут взагалі не використовується.
marginheight=висота marginwidth=ширина
Як правило, браузер відображаючи кадр залишає між його межами та його умістом поля невеликого розміру. Ці поля можна встановити вручну за допомогою атрибутів marginheight і marginwidth, значення яких задаються у пікселях. При цьому потрібно враховувати такі обмеження: розмір поля, по-перше, не повинен бути меншим одного пікселя і, по-друге, не можна задавати його настільки великим, що для умісту кадру не вистачатиме місця.
Для тегів <frameset> та <frame> існують атрибути, які дозволяють налаштувати відображення обрамлення кадрів.
Атрибутом frameborder послуговуються для перемикання із режиму відображення об’ємного обрамлення у режим відображення звичайних ліній. За замовчуванням використовується об’ємне обрамлення (значення атрибута yes або 1)[1]; якщо задане значення no або 0, то будуть відображатися звичайні рамки. Цей атрибут можна поміщати як у тег <frameset>, так і в тег <frame>. Установка в окремому тезі <frame> відміняє значення в зовнішньому тезі <frameset>.
Атрибут bordercolor дозволяє встановити колір обрамлення у тегах <frаmeset> і <frame>.
У тезі <frameset> можна задавати товщину ліній обрамлення для усього набору кадрів. Це роблять за допомогою атрибута border. Стандартна товщина – 5 пікселів. Щоб отримати кадри без обрамлення, задають border=0 і frameborder=no.
