Файл: Лекція 7. Фреймова структура веб-сторінки.doc

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 14.06.2024

Просмотров: 15

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Лекція 7

1. Фрейми, їхні теги та атрибути

2. Використання посилань у фреймах

3 Вкладені набори фреймів

Лекція 7

Тема: Фреймова структура web-сторінки

Мета: вивчити теги для створення веб-сторінки з фреймами, визначити їх атрибути, розглянути приклади сторінок з фреймовою структурою, навчитися будувати код веб-сторінки з фремовою структурою та навігаційною панеллю.

План

  1. Фрейми, їхні теги та атрибути.

  2. Використання посилань у фреймах.

  3. Вкладені набори фреймів.

HTML-документи, які містять фрейми

Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним ме­ню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.

Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощуе навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню веб-сайту.

1. Фрейми, їхні теги та атрибути

Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися веб-сторінки, на які вказують його пункти.

Для того щоб створити веб-сторінку з фреймами, потрібно кілька HTML-документів. В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.

Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом < / H T M L > . Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </ FRAMESET> . Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY> .

Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMEZЕТ>. Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.

Елемент 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> один в один.

Розглянемо деякі варіанти поділу простору на частини:

  1. Екран розділяється горизонтально на дві частини (тобто створюються верхня і нижня частини).

<FRAMESET| rows=| «50%, 50%»>

.продовження визначення.

</FRAMESET>

  1. Створюється три стовпці: другою має фіксовану ширину 250 пікселів (це корисно, наприклад, для представлення зображення відомої ширини). Перший фрейм отримує 25% простору, що залишився, а третій – 75%.

<FRAMESET| cols=| «1*|, 250,3*|»>

.продовження визначення.

</FRAMESET>

  1. У наступному прикладі створюється сітка 2x3.

<FRAMESET| rows=| «30%, 70%» cols=| «33%, 34%, 33%»>

.продовження визначення.

</FRAMESET>

  1. Для наступного прикладу припустимо, що вікно браузера| має висоту строгі 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: Агент користувача не повинен відображати роздільник. Звернете увагу, що роздільники можуть все одно відображатися, якщо вони задані в інших фреймах.

Смотрите также файлы