Лекція 8
.pdfЛекція №7
Використання фреймів у мові HTML
Є три основних способи створення сайтів: табличний, фреймовий і блоковий. В даній лекції розглянемо фреймову структуру створення сайтів, яка використовується для для розбиття вікна браузера на декілька областей, кожна з яких є окремим html-документом (фреймом, що в перекладі означає кадр).
HTML дозволяє поділити вікно браузера на окремі секції, які називаються
фреймами.
Фрейми використовуються для полегшення навігації по сайту, створення навігаційного меню, створення чатів, електронних посібників і т.д.
Це дуже зручно. Коли відвідувач сайту клацає по гіперпосиланню, оновлюється тільки вміст однієї " секції (комірки) сайту" (у якій відображається основний вміст). Такий підхід дає Web-дизайнеру дві головні переваги.
По-перше, сторінки завантажуються значно швидше, оскільки містять тільки корисну інформацію, без набору гіперпосилань, заголовка, відомостей про авторські права і іншу допоміжну інформацію.
По-друге, не потрібно всю цю додаткову інформацію дублювати на кожній сторінці сайту - досить створити спеціальні сторіночки, частини, що містять її, а потім завантажити їх у відповідні "секції". А якщо нам потрібно змінити, скажімо, адресу якого-небудь гіперпосилання, ми просто міняємо його на одній-єдиній сторінці замість того, щоб проглядати всі сторінки сайту, на яких ми помістили дане гіперпосилання.
Тепер назвемо речі своїми іменами. "
Секції, інакше кажучи, частини, на які ділиться вікно Web-оглядача, - це і є фрейми (від англ, frame – у перекладі з англійської означає кадр, рамка, прямокутна область). А набір таких частин назвемо набором фреймів (поанглійськи - frameset).
Спосіб же розробки Web-сайтов з використанням фреймів називається
фреймовим дизайном.
Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Важливо на етапі конструювання сайту заздалегідь продумати фреймову структуру, визначитися з кількістю фреймів, їхніми розмірами, розташуванням і стартовим виглядом.
Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати незалежно від решти фреймів. Браузер, який «розпізнає» фрейми, завантажує різні сторінки в різні секції свого вікна.
Подібну структуру має сторінка, вигляд якої подано на рисунку.
Створимо, наприклад, найпростіший фреймовий Web-документ із двома
фреймами. У лівий фрейм помістимо заголовки статей (зміст). Якщо клацнути лівою кнопкою миші на певному гіперпосиланні, то відповідна сторінка буде завантажуватися в правий фрейм. Це основний і найбільш розповсюджений спосіб використання фреймів.
Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні броузера. Тут описується структура фреймів, зазначаються адреси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній броузер не підтримує фреймів.
Для того, щоб створити веб-сторінку з фреймами, потрібно кілька HTMLдокументів. У одному з них виконують розмічення екрана, тобто визначають загальну схему веб-сторінки. Така сторінка з розміткою, як і звичайно, починається з тегу <HTML> і закінчується тегом </HTML>. Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </FRAMESET>.
Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — ROWS. Для поділу вікна на фрейми записують через кому числа, які визначають розміри фреймів. Розміри фреймів вимірюють у пікселях або відсотках до розміру екрану. Якщо потрібно зазначити, що фрейм займає все місце, яке залишилось, пишуть «*».
Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один із яких має висоту 150 пікселів, а другий займає те місце, що залишилось. Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один із яких займає 20% від ширини екрану, другий
— 55%, а третій – решту.
Після поділу екрана на вікна для кожного фрейму слід задати HTMLдокумент, який відображатиметься у ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:
SRC — задає ім’я файлу, що відображатиметься у фреймі; NAME — задає ім’я фрейму;
SCROLLING — визначає наявність (значення yes) або відсутність (значення no) смуг прокручування у вікні фрейму (за замовчуванням — yes);
BORDER — визначає ширину розділювальної смуги між фреймами в пікселях;
BORDERCOLOR — визначає колір розділювальної смуги між фреймами; MARGINHEIGHT — додає порожнє поле, висота якого визначена в пі-
кселях, між верхньою межею фрейму і початком тексту або графіки; MARGINWIDTH — додає порожнє поле, ширина якого визначена в пі-
кселях, між боковими межами фрейму і початком тексту або графіки.
Робота з фреймами і наборами фреймів. Задання фреймової структури.
Набори фреймів описуються за допомогою парного тега <FRAMESET>… <FRAMESET>, який повинен містити один з атрибутів: ROWS або COLS.
Названі атрибути задають список значень висоти (для ROWS) або ширини (для COLS) у всіх фреймів даного набору. Самі фрейми задаються одинарним тегом <FRAME>. І <FRAMESET>, і <FRAME> підтримують безліч атрибутів, задаючих різні властивості набору фреймів і самих фреймів; ці атрибути ми розглянемо пізніше.
Спочатку необхідно створити HTML-файл, в якому буде задаватись фреймова структура сторінки, — де і якого розміру будуть фрейми.
Нижче наведено код фреймової структури сторінки (firma.html) з двома вертикальними фреймами. Відмітимо, що файл з фреймовою структурою не містить тега <BОDY>. Вона містить тільки опис набору фреймів.
Приклад 1. Задання фреймової структури.
<html><!--це файл firma.html--> <head>
<title>Приклад фреймів</title> </head>
<frameset cols="25%, 75%"> <frame src="menu.html">
<frame src="main.html" name="main"> </frameset>
<noframes>
Ця частина коду відображується браузерами, які не підтримують фреймові cтруктури.
</noframes>
</html>
На екрані отримаємо вікно розділене на дві частини (25 і 75% відповідно):
Для створення фреймової структури використовується дескриптор <FRAMESET> разом з двома головними атрибутами: ROWS — задає кількість рядків, COLS — задає кількість колонок. Загальний формат запису цього
дескриптора:
<FRAMESET ROWS="value_list" COLS="value_list"> </FRAMESET>
В даному випадку «value_list» є списком значень, відокремлених між собою комами. Ці значення можуть виражатися у відсотках, пікселях, або пропорційних одиницях. Число рядків або стовпців встановлюється залежно від кількості значень у списку. У нашому прикладі (<FRAMESET CОLS="25%, 75%">) вікно браузера буде розділено на дві вертикальні секції. Ліва секція займає 25 відсотків, а права — 75 відсотків ширини вікна браузера.
Пропорційні значення присвоюються так:
<FRAMESET CОLS="*, 2*, 3*">
У даному випадку вікно ділиться на 3 частини. Перша частина займає 1/6 ширини вікна, друга— 2/6 (1/3) загальної ширини і остання — 3/6 (1/2).
Важливим також є атрибут BORDER, який використовується тільки з тегом <FRAMESET> і встановлює ширину всіх рамок для всіх кадрів контейнера <FRAMESET>. Ця виличина вказується в пікселях, наприклад, <frameset border="10"> (по замовчуванню BORDER має значение 5, атрибут BORDER=0 відключає відображення меж фреймів на Web-сторінці ).
Дескриптори <FRAME> визначають окремі фрейми. Вони повинні розміщуватись у контейнері <FRAMESET>. Вони визначають окремо взяті фрейми. Причому атрибут SRC приводить до того, що броузер відображає певну сторінку всередині даного фрейма.
Атрибути дескриптора <FRAME параметри> та їх короткий опис подано у
таблиці. |
|
АТРИБУТ |
ОПИС |
SRC="URL" |
Задає джерело фрейму. Вказує URL файлу, що |
|
повинен бути завантажений у даний фрейм. |
MARGINWIDTH="значення Задає ширину лівого та правого полів фрейму, |
|
" |
задає горизонтальну відстань між межами |
|
фрейма і його вмістом. |
MARGINHEIGHT |
Задає вертикальну відстані між межами |
|
="значення" |
фрейма і його вмістом |
|
|
||
MARGIN |
Задає величину відступів зверху і від бокових |
|
меж фрейму |
||
|
||
NAME="значення" |
Дозволяє присвоїти ім’я фрейму, яке можна |
|
|
використовувати для посилання на фрейм з |
|
|
інших фреймів тієї самої структури |
|
TARGET |
Дозволяє переприсвоїти ім’я фрейму, щоб усі |
|
|
наступні сторінки завантажувалися у |
|
|
відповідному вікні |
|
SCROLLING="YES або NO |
SCROLLING="YES" – у фреймі завжди |
|
або AUTO" |
будуть смуги прокрутки (незалежно від |
|
|
величини файлу, завантаженого в нього). |
|
|
SCROLLING="NO" – смуг прокрутки не буде, |
|
|
навіть якщо вони необхідні (надто великі |
|
|
документи просто обрізуються). |
|
|
SCROLLING="AUTO" – надається |
|
|
можливість браузеру самому вирішити, чи |
|
|
потрібні смуги прокрутки. |
|
|
Якщо цей атрибут відсутній, то це рівносильно |
|
|
заданню SCROLLING="AUTO". |
|
|
SCROLLING=" DEFAULT " - значення за |
|
|
умовчанням, залежне від Web-обозревателя (як |
|
|
правило, аналогічно Auto). |
|
NORESIZE |
Забороняється зміна розмірів фрейму за |
|
|
допомогою миші перетяганням їх меж. |
|
Задає наявність меж між фреймами, містить |
|
параметри "yes" або "no". У випадку, коли |
|
FRAMEBORDER="yes" рамка займає |
FRAMEBORDER |
тривимірну форму. Якщо |
|
FRAMEBORDER="no", то рамка стає |
|
невидимою, тобто вона має колір фону вікна |
|
броузера, встановленого по-замовчуванню. |
|
|
BORDER |
Задає ширину межі у пікселях |
|
|
|
|
FRAMEBORDER |
Задає наявність меж між фреймами |
У наведеному прикладі в лівий фрейм повинен завантажуватись файл Menu.html, а в правий, який названо "main", — Main.html. Оскільки в лівий фрейм не будемо завантажувати інших сторінок, крім Menu.html, залишаємо його без зміни.
Контейнер <NOFRAMES>…</NOFRAMES> забезпечує альтернативну інформацію для броузерів, які не підтримують роботи з фреймами.
Горизонтальні фрейми
Інколи є потреба розмістити фрейми горизонтально. Розглянемо програму написання сайту за допомогою горизнтальних фреймів.
Приклад 2. Задання горизонтальної фреймової структури.
<html>
<head>
<title>Приклад фреймів 1</title> </head>
<frameset rows="4*, 5*"> <frame src=" freim1.html "> <frame src=" freim2.html"> </frameset>
<noframes>
Ця частина коду відображується браузерами, які не підтримують фреймові cтруктури.
</noframes>
</html>
В цьому випадку на екрані отримаємо вікно розділене на дві частини (25 і 75% відповідно):
Вкладені фрейми.
Кажен фрейм можна розглядати як нове вікно, яке також можна розбити на фреймиы (помістити контейнер <FRAMESET> всередині іншого контейнера
<FRAMESET>).
Розглянемо приклад найбільш часто використовуваного набору фреймів (верхній інформаційний фрейм, ліва колонка для навігації, центральна колонка для вмісту сторінки). Дана конструкція повинна розташовуватися всередині головної сторінки (index.html), між тегами <HTML> і </HTML>. Відмітимо, і ще раз що документ з фреймами не містить тега <BODY>, він тегом створення фреймів - <FRAMESET>:
Приклад 3. Вкладені фрейми.
<html>
<head>
<title>Приклад фреймів 2</title> </head>
<frameset rows="15%, *"> <frame src="header.html"> <frameset cols="30%, *"> <frame src=" menu.html "> <frame src=" main.html "> </frameset>
</frameset>
</html>
На екрані отримаємо вікно розділене на три частини (спершу сайт поділено на два горизонтальні фрейми, перший з яких header.html займає 15% і в ньому розташовується заголовок самого сайту, а другий фрейм знову розділено на дві частини (фрейми) (стовпці по 30% - menu.html і 55% - main.html відповідно).