Лабораторна робот
Тема: Фреймова структура HTML-документу.
Мета: Навчитись створити сайт з застосуванням фреймів.
Теоретичні відомості
Фрейм у перекладі з англійської означає кадр, рамка, прямокутна об-ласть. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має від-повідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Наприклад, типовим є сайт, де вікно броузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна броузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій – вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лі-вий фрейм називають навігаційною панеллю. Навігаційну па-нель можна створити у верхній частині вікна броузера, справа чи де завгодно. Часто у верхній частині створюють третій вузь-кий фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь про-думати фреймову структуру, визначитися з кількістю фрей-мів, їхніми розмірами, розташуванням і стартовим виглядом.
Основний html-файл. Оскільки основний файл запус-кає сайт, то його прийнято називати index, html.
Приклад 1. Розглянемо типовий вигляд основного файла:
<HTML> <HEAD> <TITLE>Цe мій сайт з фреймами </TITLE> </HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="leftframe.html"
NAME= "left"
<!--або "лівий" або інша назва фрейму-->
SCROLLING=”no”
<!--або "yes" або "auto"-->
FRAMEBORDER="1"
<!--або "0" межа фреймів є чи ні-->
BORDER = "15" <!--товщина межі-->
MARGINHIGHT="10" <!--відступи від країв-->
MARGINWIDTH="10"
NORESIZE
<!--не можна пересовувати межу-->
BORDERCOLOR = "red" >
<FRAME SRC = "rightframe.html"
NAME=”right” <!--або "правий" тощо-->
</FRAMESET>
<NOFRAME> <!--Текст, що відображатиметься у броузері, який не підтримує фреймів, наприклад:-->
Вибачте, цей сайт містить фрейми. Скористайтесь іншим броузером для його перегляду.
</NOFRAME></HTML>
Пояснимо дію використаних тегів та їхніх параметрів. Для поділу вікна броузера на декілька частин використову-ють тег-контейнер
<FRAMESET параметри>... </FRAMESET>
Параметрів є два: COLS і ROWS. Параметр COLS приз-начений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсот-ках до всього вікна, фіксовані - у пікселах. Наприклад, COLS = "25%, 75%" означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.
Можна писати також COLS =”1*, 3*”, де 1* саме тут означає одну з чотирьох частин екрана, або COLS = “2*, З*”, де 2* означає дві з п'яти вертикальних частин екрана.
У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.
Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в один, на-приклад, так:
<FRAMESET COLS = "25%, 75% ">
<FRAME описуємо лівий фрейм>
<FRAMESET ROWS= "25%, 75% >
<FRAME описуємо верхній правий фрейм>
<FRAME описуємо нижній правий фрейм>
</FRAMESET>
</FRAMESET>
У тезі <FRAME параметри> користувач описує конкрет-ний фрейм. Обов'язковими тут є параметр SRC зі значенням адреси стартового html-файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам'ятовує її, оскільки вона використовуватиметься далі як значення па-раметра TARGET тега <А>.
Призначення деяких інших параметрів такі:
SCROLLING Задає наявність чи відсутність смуг прокручування у вікні фрейму
FRAMEBORDER Задає наявність меж між фреймами
BORDER Задає ширину межі у пікселях
MARGIN Задає величину відступів зверху і від бокових меж; фрейму
NORESIZE Забороняє змінювати розміри фрей-му у вікні броузера.
Допоміжні HTML-файли. Коли основний файл спроектовано, створюють файли для кожного фрейму. Нехай файл leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текстових чи графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму що була зазначена в параметрі NAME з основного файлу. Цей параметр дає змогу пояснити броузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголовків, списків чи одностовпчикової таблиці.
Приклад 2. Файл leftframe.html може мати такий вигляд:
<HTML> <HEAD>
<ТІТLЕ>Це мій лівий фрейм</ТІТLЕ> </HEAD>
<BODY задаємо параметри стартової сторінки>
<НЗ> Сайт Васі Квакіна</НЗ><ВК>
<Н4> <А HREF="filel.html" TARGET="right"> Моя біографія </А> <BR>
<А HREF=”file2.html” TARGET="right"> Мої захоплення </А> <BR>
<А HREF="file3.html" TARGET="right"> Мої університети </А> <BR>
<А HREF="file4.html" TARGET="right"> Моя адреса </А> <BR> </BODY> </HTML>
Другий допоміжний файл, нехай rightframe.html, визначає зміст правого фрейму у момент відкривання сайту. Цей файл може містити будь-який текст чи графіку. Тут варто подати красиво оформлений заголовок сайту, рекламну інфор-мацію тощо. Як такий файл можна, наприклад, використати filel.html. Тоді у правому фреймі у момент відкривання сайту буде відображатися перша сторінка проекту.
Приклад 3. Файл right.html може мати такий вигляд:
<HTML> <HEAD><TITLE> Це правий фрейм </ТІТLЕ>
<BODY задаємо параметри для правого сторінки>
<Н2>ЗАПРОШУЄМО НА САЙТ ВАСІ КВАКІНА </Н2> </BODY>
</HTML>
На цьому проектування сайту з фреймами закінчується. Залишилося створити файли filel.html, file2.html, file3.html, file4.html тощо з описами робочих сторінок сайту.
Хід роботи
Створіть сайт із фреймами на базі описаних у прикладах 1—3 файлів методом їх введення і відтворення у броузері.
Створіть сайт про себе з двома вертикальними фреймами.
Подібно до наведених вище зразків створіть такі файли: index.html, leftframe.html, rightframe.html, filel.html, file2. html, file3.html, file4.html тощо, наповнивши їх своїм змістом. Останні чотири файли мають містити інформа-цію про вас особисто, вашу сім'ю чи родину, друзів, місце навчання чи праці, ваші захоплення та хобі тощо.
Добийтеся вдалого розташування інформації у фреймах, відформатуйте тексти, задайте необхідні параметри в тегах <BODY>.
Задайте жовтий фон у лівому фреймі і зелений — у правому.
Заберіть межу між фреймами.
Задайте смуги