Лабораторна робота №10
Тема: ФРЕЙМИ
Мета: Опанувати технологію представлення інформації у документі з використанням фреймів.
Теоретичні відомості.
Фрейми (Frames - кадри) надають користувачеві можливість поділяти екран на дві або більше незалежних динамічних або статичних частини. Кожен фрейм може мати такі властивості:
- всі фрейми мають свій URL, що дозволяє завантажувати їх незалежно від інших фреймів;
- кожний фрейм має власне ім'я (атрибут NAME), яке дозволяє переходити до нього з іншого фрейма;
- розмір фрейма може бути змінений користувачем безпосередньо на екрані за допомогою мишки.
Ці властивості фреймів дозволяють:
- розміщувати статичну інформацію, яку автор вважає за необхідне постійно показувати користувачу, у одному статичному фреймі;
- розміщувати у статичному фреймі зміст всіх або частини документів, які містяться на сервері, що дозволяє користувачеві швидко знаходити інформацію, яка його цікавить;
- створювати вікна результатів запитів, коли в одному фреймі знаходиться власне запит, а в другому - результати запиту.
Фрейм-документ є специфічним видом HTML документа, оскільки не містить елемента BODY і, відповідно, будь-якого змістового навантаження. Він описує тільки фрейми, які будуть містити інформацію. Основний документ, який містить опис фреймів, виглядає так:
<HTML>
<HEAD>.....</HEAD>
<FRAMESET>.... </FRAMESET>
</HTML>
Атрибути тегу < FRAMESET >
| Атрибут | Призначення |
| ROWS=pixeIs|persentr | поділ екрану на декілька смуг |
| COLS=p«xe}s|persent|* | поділ екрану на декілька стовпчиків |
| FRAMEBORDER | описує сітку фреймової структури (за замовчуванням значення YES -тривимірна сітка, N0 - без сітки) |
| BORDERCOLOR | Колір сіткифреймової структури |
Значення (*) відповідає використанню всього простору екрану, який залишився. Для вміщення змісту у фрейми, які утворились в результаті поділу, використовується тег <FRAME>... </FRAME>. Важливим атрибутом цього тега є атрибут SRC, який сповіщає URL документа, котрий необхідно завантажити у фрейм.
Кожний елемент фреймової структури описується за допомогою тега <FRAME>, який має такі атрибути: -SRC- URL вмісту фрейма;
-NAME- ім'я фрейма (аналогія імені вікна
броузера) для здійснення доступу до фрейма і оновлення його змісту;
- MARGINHEIGHT- ширина верхнього і нижнього вільного поля фрейма у пікселях;
- MARGINWIDTH- ширина лівого і правого вільного поля фрейма у пікселях;
- SCROLLING - смуги гортання для перегляду вмісту фрейма (AUTO/YES/NO, за замовчуванням значення -AUTO);
- NORESIZE - наявністю даного атрибута користувачу забороняється змінювати розміри фрейма при перегляді документа (за замовчуванням це можливо за допомогою мишки);
-FRAMEBORDER- описує сітку фрейма (YES/NO);
-BORDERCOLOR - колір сітки фрейма.
Визначення фреймової структури Порядок створення сторінки з фреймами:
1. Створюється початкова сторінка, у якій задаються розміри і кількість фреймів, а також імена файлів, які відповідають фреймам і атрибути для кожного фрейма.
2. Створюються окремі сторінки для кожного фрейма. Необхідно уявити собі загальний вигляд сторінки - де і якого
розміру будуть фрейми. Наприклад, ліворуч має бути
фрейм змісту з переліком статей, праворуч - сторінка із власне статтями. Необхідно зробити так, щоб натискання мишкою на назві статті у лівій частині екрану, викликало появу змісту статті у правій частиш. Або фреймова структура має ділити екран на три проздовжні частини. Верхня частина займає 15% висоти вікна броузера, її змістом є документ header.htm. Середній фрейм займає 70% вікна, в нього вводиться зміст документа body.htm. Решту частини вікна броузера займає фрейм, у який виводиться зміст документа footer.htm.
<FRAMESET ROWS=«15%, 70%, 15%»>
<FRAME SRС=«header.htm» NORESIZE SCROLLING=NO>
<FRAME SRC=«body.htm»>
<FRAME SRC=«footer.htm» NQRESIZE SCROILING=NO>
</FRAMESET>
Верхній і нижній фрейми даної структури не містять смуг гортання вмісту і мають постійний розмір. Атрибут NORESIZE для середнього фрейма не задається, оскільки заборона зміни розмірів фреймів, які знаходяться поруч, не дозволяє зміни розміру середнього фрейма. Для створення «вкладеної» структури фреймів, наприклад, у середній області фрейма з попереднього прикладу, яка поділяє її на два рівних стовпці, можна навести такий приклад:
<FRAMESET ROWS=«15%, 70%, 15%>»
<FRAME SRC=«header.htm» NORESIZE SCROLLING=NO>
<FRAMESET COLS=«*, *>»
<FRAME SRC=«left.htm»>
<FRAME SRC=«rignt.htm»>
</FRAMESET>
<FRAME SRC=«footer.htm» NORESIZE SCROLLING=NO>
</FRAMESET>
Створення індексного (початкового) екрана з двохфреймів:
ПРИКЛАД
Файл у форматі HTML:
Наверняка у вас есть товары или услуги, продажа которых приносит вам максимальную прибыль. Для быстрого старта в сети вам необходимо создание посадочной страницы (одностраничного сайта), на которой будет размещена информация о маржинальных товарах/услугах интернет магазина. За 8 лет опыта разработки конверсионных страниц мы выработали оптимальную структуру, которая позволит привлекать через landing page больше продаж. На такую структуру «одевается» ваш контент — фирменный стиль, тексты, фотографии, уникальные торговые предложения, после чего страница выходит в свет. Разработка лендинга и запуск в сети — до 7 рабочих дней. Стоит отметить, что в разработку самой посадочной страницы входит и написание копирайтером продающих текстов для вашего бизнеса, чтобы каждый посетитель страницы захотел совершить покупку именно у вас. Результат: качественно разработаная продающая посадочная страница, которая готова приносить вам новых клиентов.