- •2.1. Загальний огляд технологій створення інтерактивних
- •5.1. Особливості методичної системи вивчення основ
- •1 Розділ
- •1.1. Основні принципи побудови та функціонування мережі Internet
- •1.2. Форматування тексту мовою html
- •1.3. Використання гіперпосилань
- •1.5. Списки і таблиці у html-документах
- •1.6. Використання фреймів
- •1.7. Каскадні таблиці стилів (css)
- •1.8. Введення даних за допомогою форм
- •1.9. Розробка Web-сайтів
- •2 Розділ
- •2.1. Загальний огляд технологій створення інтерактивних Web-документів
- •2.2. Використання скриптів JavaScript
- •2.3. Використання рнр і MySql
- •Додатки Створення шкільної Intranet
1.6. Використання фреймів
HTML дозволяє поділити вікно броузера на окремі секції, які називаються фреймами. Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати незалежно від решти фреймів. Броузер, який «розпізнає» фрейми, завантажує різні сторінки в різні секції свого вікна. Наприклад, можна побудувати сторінку так, що фірмовий знак буде зафіксовано у верхній частині вікна, збоку буде розміщено панель навігації (меню) сторінками серевера, а в решту вікна будуть завантажуватися різні сторінки, які користувач зможе переглядати звичайним чином. Коли користувач клацає кнопкою миші на гіперпосиланні — змінюється лише частина вікна, а система навігації і фірмовий знак залишаються нерухомими.
Подібну структуру має сторінка, вигляд якої подано на рис. 1.23.
Рис. 1.23
Створимо, наприклад, найпростіший фреймовий Web-документ із двома фреймами. У лівий фрейм помістимо заголовки статей (зміст). Якщо клацнути лівою кнопкою миші на певному гіперпосиланні, то відповідна сторінка буде завантажуватися в правий фрейм. Це основний і найбільш розповсюджений спосіб використання фреймів.
Задания фреймової структури. Спочатку необхідно створити HTML-файл, в якому буде задаватись фреймова структура сторінки, — де і якого розміру будуть фрейми. Нижче наведено код фреймової структури сторінки firma.html з двома вертикальними фреймами. Відмітимо, що файл з фреймовою структурою не містить дескриптора <BODY>.
Лістинг 1.22
<НТМL>
<HEAD>
<TITLЕ>Приклад фреймів</ТІТLЕ>
</HEAD>
<FRAMESET C0LS="25%, 75%">
<FRAME SRC="Menu.html">
<FRAME SRC="Main.html" NAME="main">
</FRAMESET>
<NOFRAMES>
Ця частина коду відображується броузерами, які не підтримуютьL фреймові документи.
</NОFRAMES>
</HTML>
Для задания фреймової структури використовується дескриптор <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).
Дескриптори <FRAME> визначають окремі фрейми. Вони повинні розміщуватись у контейнері <FRAMESET>. Атрибути дескриптора <FRAME> та їх короткий опис подано у таблиці 1.6.
У наведеному прикладі в лівий фрейм повинен завантажуватись файл Menu, html, а в правий, який названо «main», — Main.html. Оскільки в лівий фрейм не будемо завантажувати інших сторінок, крім Menu, html, залишаємо його без назви.
Контейнер <NОFRAMES></NОFRAMES> забезпечує альтернативну інформацію для броузерів, які не підтримують роботи з фреймами.
Таблиця 1.6. Атрибути дескриптора <FRAME>
АТРИБУТ |
ОПИС |
SRC="URL" |
Задає джерело фрейма. Вказує URL файла, що повинен бути завантажений у даний фрейм. |
MARGINWIDTH="значення" |
Задає ширину лівого та правого полів фрейма. |
MARGINWIDTH="значення" |
Задає ширину верхнього і нижнього полів фрейма. |
NАМЕ="значення" |
Дозволяє присвоїти ім'я фрейму, яке можна використовувати для посилання на фрейм з інших фреймів тієї самої структури. |
SCROLLING="YES|NO|AUTO" |
SCR0LL1NG=YES — у фреймі завжди будуть смуги прокрутки (незалежно від величини файла, завантаженого в нього). SCROLLING=NO — смуг прокрутки не буде, навіть якщо вони необхідні (надто великі документи просто обрізаються). SCROLLING=AUTO — надається можливість броузеру самому вирішити, чи потрібні смуги прокрутки. Якщо цей атрибут відсутній, то це рівносильно заданию SCROLLING= =AUTO. |
NORESIZE |
Забороняється зміна розмірів фрейма за допомогою миші. |
Створення вмісту фреймів. Створимо сторінку Menu, html, яка буде завантажуватись у лівий фрейм і відображати список гіперпосилань (зміст). Цей фрейм вузький і високий, це необхідно враховувати під час проектування цієї сторінки. Щоб при натисканні на гіперпосиланні сторінки завантажувались у правий фрейм, додамомо до дескрипторів <А HREF.... > атрибут TARGET="main". У цьому випадку, якщо клацнути кнопкою миші на гіперпосиланні, сторінка, що викликається, завантажиться у фрейм «main». Без визначення цього атрибута сторінка з'явиться у тому фреймі, з якого вона викликається.
Нижче наведено код для лівого фрейма Menu.html.
Лістинг 1.23
<HTML>
<HEAD>
<TITLE> Меню</ТІТLЕ>
</HEAD>
<BODY>
<H3 ALIGN=CENTER>Компанія</H3>
<HR>
<UL> <FONT CОLОR="#400040" SIZE="4">
<LI> <a href="Main.HTM" ТАRGЕТ="main">Головна </а>
<LI> <a href="NEWS.HTM" TARGET="main">Hoвини</a>
<LI> <a href="PRODUCTS.HTM" TARGET="main">Toвари</a>
<LI> <a href="SERVIS.HTM" TARGET="main">Послуги</a>
<LI> <a href="CONTACT.HTM" TARGET="main">Koнтакти</a>
<LI> <a href="SEARCH.HTML" TARGET="main">Пошук</a>
</FONT>
</UL>
</BODY>
</HTML>
Зазначимо, що файл Menu.html є звичайним HTML-документом і не містить дескрипторів опису фреймів.
Створення вмісту фрейма main. Правий фрейм міститиме сторінки, які викликаються за допомогою меню, розміщеного у лівому фреймі. Після завантаження документа у правий фрейм автоматично завантажується файл Main.html.
Код файла Main.html може бути, наприклад, таким:
Лістинг 1.24
<HTML>
<HEAD>
<TITLE> Головна сторінка </TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Kомпанія</H2>
<HR>
<H4 ALIGN=LEFT>< І >Biдкрите акціонерне товариство
"Компанія" засноване у 1996 році</І></Н4>
<HR>
<Н4>Головними напрямами діяльності Компанії є:
<ОL>
<LІ>Розробка складних розподілених програмних комплексів
управління виробництвом;
<LI>Створення віртуальних представництв фірм. </Н4>
</ОL>
<HR>
<H4> <U> <FONT CОLОR=RED> Компанія шукає висококваліфікованих
Web-дизайнерів і програмістів</FONT> </U>
</Н4>
<Н5 ALIGN=CENTER>Kонтактна інформація </Н5>
<UL>
<LІ>Телефон (123) 123-34-56
<LI>Факс (123) 123-34-57
<LІ>Поштова адреса 123456 м. Велике, вул. Лісова, 106
<UL ТУРЕ=СІRСLЕ>Електронна пошта<BR>
<LI>Загальна інформація: abc@abc.ua
<LI>Реалізація: abc@abc.abc.ua
</UL>
</UL>
<BR><BLINK>Copyright</BLINK> © 1997 Компанія
</BODY>
</HTML>
Вигляд фреймового документа firma. htm, завантаженого в броузер, подано на рис. 1.24.
Рис. 1.24
Дозволені імена фреймів. Імена фреймів не повинні починатися зі знака підкреслювання ( _ ). У HTML зарезервовано чотири неявних імені фреймів (подані в таблиці 1.7), які починаються зі знака підкреслення. Решта імен, які починаються із знака підкреслення, ігноруються.
Таблиця 1.7. Зарезервовані імена фреймів
ІМ'Я ФРЕЙМУ |
ОПИС |
_blank |
Завантажує документ у нове вікно, яке немає імені. Це ім'я використовується для запуску нового вікна броузера. |
_self |
Завантажує документ у поточне вікно. |
_parent |
Завантажує документ у вікно батьківської фреймової структури. |
_top |
Завантажує документ у вікно фреймової структури верхнього рівня стосовно до даного фрейму. Якщо фрейм є верхнім, то це ім'я еквівалентне імені _self. |
Зарезервовані імена використовуються таким чином. Якщо у фреймі міститься посилання
<А HREF="stuff.htm" TARGET="_blank"> ,
то при клацанні на ньому лівою кнопкою миші запускається нове вікно броузера, в яке завантажується документ stuff, htm. Це може бути простий HTML-документ або нова фреймова структура. При клацанні на гіперпосиланні
<А HREF="stuff.htm" TARGET="_self">
стирається фрейм, в якому воно знаходиться, і його вміст замінюється на документ stuff, htm.
Якщо у фреймі міститься посилання
<А HREF="stuff.htm" TARGET="_parent">,
то при клацанні на ньому фреймова структура, в якій міститься фрейм з гіпер-посиланням, замінюється документом stuff, htm.
Якщо у фреймі міститься гіперпосилання
<А HREF="stuff.htm" TARGET="_top"> ,
то при клацанні на ньому все вікно броузера замінюється документом stuff, htm.
Контрольні запитання
1. Для чого можуть використовуватися фрейми?
2. Як задати фреймову структуру?
3. Призначення дескриптора <FRAMESET> та його параметрів.
4. Назвіть атрибути дескриптора <FRAME>.
5. Коли доцільно використовувати фреймову структуру?
6. Як під час використання фреймової структури відобразити інформацію у броузерах, що не підтримують роботу з фреймами?
7. Як сховати рамку між фреймами?
8. Якими способами можна задати ширину та висоту фрейму?
9. Як змінити товщину рамки, що поділяє фрейми?
10. Для чого використовується атрибут TARGET?
11. Назвіть зарезервовані імена фреймів?
Практичні завдання
Створіть документ, утворений трьома фреймами. У верхньому відображується інформація про сайт. У лівому реалізовано навігаційну панель за допомогою механізму гіперпосилань. Якщо користувач вибирає певне посилання, то відповідна йому сторінка повинна завантажуватись у правий фрейм.
|
|
|
|
2. На одній із сторінок, які завантажуються у правий фрейм, створіть плаваючий фрейм.
3. Створіть таку фреймову структуру:
|
|
|
|
|