Незважаючи на те, що сайти з фреймами зустрічаються все рідше, вивчення HTML було б неповним без розгляду теми про фрейми. До того ж фрейми в якомусь сенсі зайняли свою нішу і застосовуються для систем адміністрування та довідки. Там, де недоліки фреймів не мають особливого значення, а переваги навпаки, активно затребувані.
Для створення фрейма використовується тег <frameset> , який замінює тег <body> в документі і застосовується для поділу екрана на області. Усередині даного тега знаходяться теги <frame> , які вказують на HTML-документ, призначений для завантаження в область (рис. 13.1).
При використанні фреймів необхідно як мінімум три HTML-файлу: перший визначає фреймової структуру і ділить вікно браузера на дві частини, а що залишилися два документа завантажуються в задані вікна. Кількість фреймів не обов'язково дорівнює двом, може бути і більше, але ніяк не менше двох, інакше взагалі втрачається сенс застосування фреймів.
Розглянемо етапи створення фреймів на основі сторінки, продемонстрованої на рис. 13.1. Нам знадобиться три файли: index.html — визначає структуру документа, menu.html — завантажується в лівий фрейм і content.html — завантажується в правий фрейм. З них тільки index.html відрізняється за структурою свого коду від інших файлів (приклад 13.1).
Приклад 13.1. Файл index.html
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Фрейми </title> </head> <frameset cols="100, *"> <frame src="menu.html" name="MENU"> <frame src="content.html" name="CONTENT"> </frameset> </html>
В разі використання фреймів в першому рядку коду пишеться наступний тип документа.
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">
Даний <!DOCTYPE> вказує браузеру, що він має справу з фреймами, цей рядок коду є обов'язковою. Контейнер <head> містить типову інформацію на зразок кодування сторінки і заголовка документа. Ось тільки врахуйте, що заголовок залишається незмінним, поки HTML-файли відкриваються всередині фреймів.
В даному прикладі вікно браузера розбивається на дві колонки за допомогою атрибута cols, ліва колонка займає 100 пікселів, а права — простір, що залишився, заданий символом зірочки. Ширину або висоту фреймів можна також задавати в процентному відношенні, на зразок таблиць.
В тезі <frame> задається ім'я HTML-файла, що завантажується в зазначену область за допомогою атрибута src . У ліве вікно буде завантажений файл, названий menu.html (приклад 13.2), а в праве — content.html (приклад 13.3). Кожному фрейму бажано поставити його унікальне ім'я, щоб документи можна було завантажувати в вказане вікно за допомогою атрибута name .
Приклад 13.2. Файл menu.html
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Навігація по сайту </title> </head> <body style="background: #f0f0f0"> <p> МЕНЮ </p> </body> </html>
В даному прикладі сірий фон на сторінці задається за допомогою стилів, про які йтиметься далі.
Приклад 13.3. Файл content.html
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Зміст сайту </title> </head> <body> <p> ЗМІСТ </p> </body> </html>
Розглянемо більш складний приклад вже з трьома фреймами (рис. 13.2).
В даному випадку знову використовується тег <frameset> , але два рази, причому один тег вкладається в інший. Горизонтальне розбиття створюється через атрибут rows, де для різноманітності застосовується Відсотковий запис (приклад 13.4).
Приклад 13.4. Три фрейми
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Фрейми </title> </head> <frameset rows="25%, 75%"> <frame src="top.html" name="TOP" scrolling="no" noresize> <frameset cols="100, *"> <frame src="menu.html" name="MENU"> <frame src="content.html" name="CONTENT"> </frameset> </frameset> </html>
Як видно з цього прикладу, контейнер <frameset> з атрибутом rows спочатку створює два горизонтальні фрейми, але замість другого фрейма підставляється ще один <frameset> , який повторює вже відому вам структуру з прикладу 13.1. Щоб не з'явилася вертикальна смуга прокрутки, і користувач не міг самостійно змінити розмір верхнього фрейма, додані атрибути scrolling="no" і noresize .