Фрейм (HTML)
Фрейм (англ. frame) — окремий HTML-документ, який сам чи разом з іншими документами відображений у вікні веб-переглядача.
HTML |
---|
|
Поняття фрейма
Якщо матеріали web-сайту структуризовані логічно за темами і мають базуватися на декількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область. Фрейми поділяють вікно браузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Наприклад, типовим є сайт, де вікно браузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна браузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій — вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна браузера, справа чи де завгодно. Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь продумати фреймову структуру, визначитися з кількістю фреймів, їхніми розмірами, розташуванням і стартовим виглядом.
Файлова структура сайту з фреймами
Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший — правого.
Основний файл призначений для опису розташування фреймів у вікні браузера. Тут описується структура фреймів, зазначаються адреси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній Браузер не підтримує фреймів.
Приклад використання тегу <FRAME>
HTML
<frameset rows="80,*" cols="*"> <frame src="top.html" name="topFrame" scrolling="no" noresize> <frameset cols="80,*"> <frame src="left.html" name="leftFrame" scrolling="no" noresize> <frame src="main.html" name="mainFrame"> </frameset> </frameset>