1. Фрейми, їхні теги та атрибути
Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися веб-сторінки, на які вказують його пункти.
Для того щоб створити веб-сторінку з фреймами, потрібно кілька HTML-документів. В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.
Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом < / H T M L > . Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </ FRAMESET> . Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY> .
Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу с т Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.
Елемент FRAMESET|
Визначення атрибутів
rows| = multi-length-list|
Цей атрибут визначає розташування горизонтальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один рядок.
cols| = multi-length-list|
Цей атрибут визначає розташування вертикальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один стовпець.
Елемент FRAMESET| визначає макет основного вікна користувача у вигляді прямокутних просторів.
Установка атрибуту rows| визначає число горизонтальних відрізань простору в наборі фреймів. Установка атрибуту cols| визначає число вертикальних відрізань. Для створення сітки можна встановити обидва атрибути одночасно.
Якщо атрибут rows| не встановлений, кожен стовпець займає всю довжину сторінки. Якщо атрибут cols| не встановлений, кожен рядок займає всю ширину сторінки. Якщо не встановлений жоден з цих атрибутів, фрейм займає всю сторінку.
Фрейми створюються в напрямі зліва направо для стовпців і зверху вниз для рядків. Якщо вказано обидва атрибути, розділи вікон створюються зліва направо у верхньому рядку, зліва направо в другому рядку і так далі.
Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів?a другий займає те місце, що залишилося.
Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.
Розглянемо деякі варіанти поділу простору на частини:
-
Екран розділяється горизонтально на дві частини (тобто створюються верхня і нижня частини).
<FRAMESET| rows=| «50%, 50%»>
.продовження визначення.
</FRAMESET>
-
Створюється три стовпці: другою має фіксовану ширину 250 пікселів (це корисно, наприклад, для представлення зображення відомої ширини). Перший фрейм отримує 25% простору, що залишився, а третій – 75%.
<FRAMESET| cols=| «1*|, 250,3*|»>
.продовження визначення.
</FRAMESET>
-
У наступному прикладі створюється сітка 2x3.
<FRAMESET| rows=| «30%, 70%» cols=| «33%, 34%, 33%»>
.продовження визначення.
</FRAMESET>
-
Для наступного прикладу припустимо, що вікно браузера| має висоту строгі 1000 пікселів. Перший розділ отримує 30% загальної висоти (300 пікселів). Другою має висоту рівно 400 пікселів. Залишається 300 пікселів на два інші фрейма. Для четвертого фрейма задана висота «2*|», так що він повинен бути удвічі вище третього, для якого задані висота «*»| (еквівалентно 1*|). Таким чином, третій фрейм матиме висоту 100 пікселів, а четвертий – 200.
<FRAMESET| rows=| «30%, 400,*|, 2*|»>
.продолжение визначення.
</FRAMESET>
Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:
-
SRC — задає ім'я файлу, що відображатиметься у фреймі;
-
NAME — задає ім'я фрейму;
-
MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;
-
MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.
-
SCROLLING — визначає наявність (значення yes ) або відсутність (значення no) смуг прокручування у вікні фрейму (за умовчанням — yes);
-
NORESIZE — забороняє користувачу змінювати розміри фрейму;
-
BORDER — визначає ширину розділювальної смуги між фреймами в пікселах;
-
BORDERCOLOR — визначає колір розділювальної смуги між фреймами;
Приведемо запис тега| <FRAME|> зі всіма параметрами:
<FRAME| SRC="url|" NAME="window_name|" SCROLLING=YES|NO|AUTO| MARGINWIDTH="value|" MARGINHEIGHT="value|" NORESIZE|>
На практиці в тегу <FRAME|> рідко використовуються одночасно всі параметри.
Найбільш важливий параметр — SRC| (скорочення від слова source|). Досить часто в тегу <FRAME|> задається єдиний параметр SRC|.
Наприклад:
<FRAME| SRC="url|">.
-
Значення параметра SRC| визначає URL-адрес| документа, який буде завантажений спочатку в даний фрейм. Зазвичай така адреса записується як ім'я HTML-файла|, розташованого в тому ж самому каталозі, що і основний документ. Тоді рядок визначення фрейма виглядатиме, наприклад, так:
<FRAME| SRC="sample|.htm">.
Зверніть увагу, що будь-який HTML-файл|, заданий в описі фрейма, повинен бути повним HTML-документом|, а не фрагментом. Це означає, що документ повинен мати теги| HTML|, HEAD|, BODY| і так далі.
Звичайно, як значення SRC| може бути задана будь-яка допустима URL-адрес|. Якщо, наприклад, фрейм використовується для відображення зображення у форматі GIF|, яке розташовується на сервері видавництва книги, то слід записати:
<FRAME| SRC="http://www.bhv.ru/example.gif">.
Звичайний текст, заголовки, графічні зображення і інші елементи не можуть прямо використовуватися в документі, який описує структуру фреймів. Весь зміст фреймів повинен бути визначене в окремих HTML-файлах|, імена яких задаються параметром SRC| тега| <FRAME|>.
-
Параметр NAME| визначає ім'я фрейма, яке може використовуватися для посилання до даного фрейма. Зазвичай посилання задається з іншого фрейма, розташованого на тій же самій сторінці. Наприклад:
<FRAME| SRC="sample|.htm" NAME="Frame_1|">.
Такий запис створює фрейм з ім'ям "Frame_1|", на який може бути виконана посилання. Наприклад:
<A HREF="other|.htm" TARGET="Frame_1">Натисніть| тут для завантаження документа other|.htm у фрейм з ім'ям Frame_1</A>.
Звернемо увагу на параметр TARGET|, який посилається на ім’я фрейма. Якщо для фрейма не задано ім'я, то буде створений фрейм без імені, і не буде можливості використовувати посилання на нього з іншого фрейма. Імена фреймів повинні починатися з алфавітно-цифрового символу.
-
Параметри MARGINWIDTH| і MARGINHEIGHT| дають можливість встановлювати ширину полів фрейма. Записується це таким чином:
MARGINWIDTH="value|"
де "value|" — абсолютне значення в пікселах.
Наприклад:
<FRAME| MARGINHEIGHT=| "5"| MARGINWIDTH=| "7"|>.
Даний фрейм має поля зверху і знизу по 5 пікселів, а зліва і справа — по 7 пікселів. Не забудьте, що тут йде мова про поля, а не про рамки. Параметри MARGINWIDTH| і MARGINHEIGHT| визначають простір усередині фрейма, в межах якого не розташовуватиметься ніяка інформація. Мінімальне допустиме значення цих параметрів рівне 1.
-
Для фреймів автоматично створюватимуться і відображатимуться смуги прокрутки, якщо вміст фрейма не поміщається повністю у відведеному просторі. Іноді це порушує дизайн сторінки, тому було б зручно мати можливість управляти відображенням смуг прокрутки. Для цих цілей використовується параметр SCROLLING|. Формат запису:
<FRAME| SCROLLING="YES|NO|AUTO|">.
Параметр SCROLLING| може приймати три значення: YES|, NO| або AUTO|. Значення AUTO| діє так само, як і у разі відсутності параметра SCROLLING|. Значення YES| викликає поява смуг прокрутки незалежно від необхідності цього, а NO| — забороняє їх появу.
Наприклад:
<FRAME| SCROLLING=YES|>.
-
Зазвичай користувач може змінювати розмір фреймів при прогляданні сторінки. Якщо встановити курсор миші на рамці фрейма, то курсор прийме форму, вказуючу на можливість зміни розмірів, і дозволить виконати переміщення рамки в потрібне місце. Це іноді порушує структуру красиво спроектованих фреймів. Для запобігання можливості зміни користувачем розміру фреймів слід скористатися параметром NORESIZE|:
<FRAME| NORESIZE|>.
Цей параметр не вимагає ніяких значень. Природно, коли заданий параметр NORESIZE| для одного з фреймів, то розмір будь-якого з суміжних фреймів також не може бути змінений. Іноді, залежно від розташування фреймів, використання параметра NORESIZE| в одному з фреймів буде досить, щоб запобігти можливості зміни розмірів будь-якого з них на екрані
-
Атрибут frameborder| = 1|0
Цей атрибут надає агентові користувача інформацію про межу фрейма. Можливі значення:
-
1: Агент користувача повинен зобразити роздільник цим фреймам і всіма прилеглими фреймами. Це значення використовується за умовчанням.
-
0: Агент користувача не повинен відображати роздільник. Звернете увагу, що роздільники можуть все одно відображатися, якщо вони задані в інших фреймах.
Тег <NOFRAMES|>
Можливість роботи з фреймами не передбачалася ні в стандарті HTML| 3.0, ні в HTML| 3.2. Тут до останнього часу складалася достатньо типова ситуація, коли реально використовувані можливості активно застосовуються на багатьох WWW-сторінках|, проте не є частиною стандарту. Це означало, що браузери| цілком законно могли ігнорувати фрейми. З появою стандарту HTML| 4.0 ситуація змінилася — тепер підтримка фреймових структур закріплена стандартом. Відмітимо, що більшість сучасних браузерів| розпізнавали фрейми і до появи HTML| 4.0. Проте, необхідно надавати інформацію користувачам, що застосовують браузери| без підтримки фреймів. Для таких браузерів| можна передбачити альтернативну інформацію, яка записується між парою тегів| <NOFRAMES|> і </NOFRAMES>. Це виглядає таким чином:
<NOFRAMES|>
весь HTML-документ|
</NOFRAMES>
Все, що розміщене між тегами <NOFRAMES|> і </NOFRAMES>, відображатиметься браузерами|, що не мають можливостей підтримки фреймів. Браузери з підтримкою фреймів проігнорують всю інформацію між цими тегами.
Відмітимо, що в реальному житті розробники HTML-сторінок| часто не використовують можливості тега| <NOFRAMES|> для створення сторінок без фреймових структур, а просто створюють дві версії своїх HTML-документів|. Для такого варіанту на стартовій сторінці зазвичай пропонується вибір завантаження документа з фреймовою структурою або без неї. Далі залежно від вибору користувача завантажується тільки один варіант документа.
Оскільки фрейми підтримують не всі браузери, необхідно помістити тег <NOFRAME> перед тегом <BODY> , а між <BODY> І < /BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після < /BODY> має йти </NOFRAME> .
Приклад 1
Створимо файл головної сторінки, на якій розташовано три попередньо створені документи (Рис. 1).
<HTML>
<TITLE>Навчальні заклади</TITLE>
<FRAMESET ROWS="60%, 40%">
<FRAMESET COLS="50%,50%">
<FRAME SRC="2.html">
<FRAME SRC="3.html">
</FRAMESET>
<FRAME SRC="l.html">
</FRAMESET>
</HTML>
Рис.1.1 Приклад сторінки з фреймовою структурою
Всі файли відображені у вікні браузера одночасно, а оскільки документи не вмістилися у визначені для них області, то кадри мають смуги прокручування.