Використання динамічних ефектів

 

Динамічними називаються ефекти, коли графічні зображення на web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після натискання ЛКМ над ними, текст «біжить» уздовж екрана тощо.

Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT =”висота у пікселях” і тло BGCOLOR =”колір тла”. Ефект створюється за допомогою парного тега <MARQUEE>…</MARQUEE>, а саме:

<MARQUEE BGCOLOR =”green” HEIGHT=40>

Пусть всегда будет солнце! </MARQUEE>

Текст «Пусть всегда будет солнце!» буде рухатися у смузі справа наліво, заходитиме за край екрана і з’являтиметься праворуч:

Цей тег варто застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR =”alternate”, а зупинити рядок біля лівого краю екрану може значення цього параметра «slide».

Значення «right» параметра DIRECTION забезпечить ефект руху у протилежний бік.

Обмеження кількості проходів задається параметром LOOP= n, де n – кількість проходів.

Смугу можна відцентрувати за допомогою параметрів HSPACE I VSPACE.

Швидкість руху задає параметр SCROLLMOUNT= n, де n – конкретне значення, яке обирають з діапазону від 1 (повільно) до 10 (швидко).

Зауваження! Інші динамічні ефекти створюють за допомогою процедур із використання мов програмування Visual Basic Script або JavaScript. Не існує єдиного стандарту мови HTML. Деякі теги і параметри для різних браузерів називаються по-різному.

 

 

Практичне робота 7.2

Створіть сторінку із гіперпосиланнями і динамічними ефектами.

1. Відкрийте свою web-сторінку або створіть нову.

2. Запишіть свій голос (за допомогою програми Фонограф або мобільного телефону) у звуковий файл. Вставте звук в основну сторінку. Можете записати у файл розповідь про своє життя, навчання, проведення вільного часу тощо. Якщо у вас немає змоги записати свій голос у файл, то скористайтеся будь-яким звуковим файлом, що є на даному комп’ютері.

3. Вставте у свій файл гіперпосилання на об’єкти, описані у цьому розділі: графічні, звукові та відео файли, які доступні на даному комп’ютері, а також на деякий html-файл, наприклад, file4.htm.

4. Застосуйте гіперпосилання для переходу на початок та кінець сторінки.

5. Застосуйте тег MARQUEE до одного із заголовків та поекспериментуйте із його параметрами.

 

 

Фрейми

Поняття про фрейми

 

Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область. Фрейми поділяють вікно браузера на частини, в яких відображують зміст сторінок сайту. Кожній сторінці має відповідати власний html-файл. Кожна сторінка повинна мати логічний заголовок.

Наприклад, типовим є сайт, у якому вікно браузеру поділене на дві вертикальні області. У вужчій (до 25 % від ширини вікна браузера) – лівій області відображують зміст сайту, а в іншій – обрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. В такому випадку зміст або весь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна браузера, праворуч або де завгодно. Часто у верхній частині створюють третій вузький фрейм, у якому розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX, Flash тощо.

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

 

 

Файлова структура з фреймами

 

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

 

 

Основний html-файл

 

Оскільки основний файл запускає сайт, то його прийнято називати index.html.

Приклад 7.1. Розглянемо типовий вигляд основного файла:

<HTML>

<HEAD>

<TITLE> Це мій сайт із фреймами </TITLE>

</HEAD>

<FRAMESET COLS =”25%, 75%”>

<FRAME SRC=”leftframe.html”

NAM=”left”

<!—або “лівий” або інша назва фрейму -- >

SCROLLING=”no”

<!—або “yes” або “auto” -- >

FRAMEBORDER=”1”

<-- або “0” межа фреймів є чи ні -- >

BORDER = “15” <!—товщина межі -- >

MARGINHIGHT= “10”

<-- відступи від країв -- >

MARGINHIGHT= “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* саме тут означає одну з 4-х частин екрану, або COLS =”2*, 3*” де 2* означає дві з 5 вертикальних частин екрану.

У фіксованому заданні COLS =”100,* ”, число 100 означає 100 пікселів, а *- решту екрана.

Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У даному випадку теги FRAMESET вкладають один в одний, наприклад, наступним чином:

<FRAMESET COLS =”25%, 75%”>

<FRAME описуємо лівий фрейм >

<FRAMESET ROWS =”25%, 75%”>

<FRAME описуємо верхній правий фрейм >

<FRAME описуємо нижній правий фрейм >

</FRAMESET >

</FRAMESET >

У тезі <FRAME параметри> користувач описує конкретний фрейм. Обов’язковими тут є параметр SRC зі значенням адреси стартового html-файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам’ятовує її, оскільки вона має використовуватися далі як значення параметра TARGET тега <A>.

 

Призначення параметрів

SCROLLING	Задає наявність або відсутність смуг прокручування у вікні фрейму
FRAMEBORDER	Задає наявність меж між фреймами
BORDER	Задає ширину межі у пікселях
MARGIN	Задає ширину відступів зверху і від бокових меж фрейму
NORESIZE	Забороняє змінювати розміри фрейм у вікні броузера

Допоміжні html-файли

 

Коли основний файл спроектовано, створюють файли для кожного фрейму.

Нехай leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текстових або графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму, що була зазначена в параметрі NAME з основного файлу. Цей параметр дає змогу пояснити браузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися у правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголовків, списків чи одно стовпчикової таблиці.

Приклад 7.2. Файл leftframe.html може мати наступний вигляд:

<HTML>

<HEAD>

<TITLE> Це мій лівий фрейм </TITLE>

</HEAD>

<BODY задаємо параметри стартової сторінки>

<H3> сайт Світлани Незалежної </H3><BR>

<H4>

<A HREF =”file1.html” TARGET=”right” >

Моя біографія </A> <BR>

<A HREF =”file2.html” TARGET=”right” >

Мої захоплення </A> <BR>

<A HREF =”file3.html” TARGET=”right” >

Мої університети </A> <BR>

<A HREF =”file4.html” TARGET=”right” >

Моя адреса </A> <BR>

</BODY >

</HTML>

Другий допоміжний файл, нехай rightframe.html, визначає зміст правого фрейму у момент відкриття сайту. Цей файл може містити будь-який текст або графіку. Тут варто подати гарно оформлений заголовок сайту, рекламну інформацію тощо. Як такий файл можна, наприклад, використати file1.html. тоді у правому фреймі у момент відкриття сайту буде відображуватися 1-ша сторінка проекту.

Приклад 7.3. Файл leftright.html може мати наступний вигляд:

<HTML>

<HEAD><TITLE> Це правий фрейм </TITLE>

<BODY задаємо параметри для правого боку сторінки>

<H2> ЗАПРОШУЄМО НА САЙТ СВІТЛАНИ НЕЗАЛЕЖНОЇ </H2>

</BODY >

</HTML>

На цьому проектування сайту з фреймами закінчується. Залишилося створити файли file1.html, file2.html, file3.html, file4.html тощо з описаннями сторінок сайту подібно до того, як це робили на попередніх заняттях.

 

Практичне робота 7.3

Створіть сайт із фреймами.

1. Створіть сайт із фреймами на базі описаних у прикладах 1-3 файлів методом їх введення та відтворення у браузері.

2. Створіть сайт про себе з двома вертикальними фреймами. Подібно до наведених вище зразків створіть наступні файли: index.html, leftframe.html, rightframe.html, file1.html, file2.html, file3.html, file4.html тощо? Останні 4 файли мають містити інформацію про вас особисто, вашу родину, друзів, місце навчання чи праці, ваші захоплення та хобі тощо.

3. Добивайтеся вдалого розташування інформації у фреймах, від форматуйте тексти, задайте необхідні параметри в тегах <BODY>

4. Задайте жовтий фон у лівому фрейм та зелений – у правому.

5. Заберіть межу між фреймами.

6. Задайте смуги прокручування лише для правого фрейму.

7. Придумайте стартову сторінку-заставку з використанням графічних елементів, наприклад, помістіть тут свою фотографію тощо.

8. Поділіть правий фрейм на два фрейми.

9. У вузькому верхньому фреймі розташуйте особисту емблему з деякого графічного файлу тощо.

10. У нижньому фреймі організуйте перегляд сторінок.

11. Удоскональте сайт, щоб він виглядав якнайліпше.

12. Закінчіть роботу.

 

 

В начало документа

 

Література

1. Тарнавський Ю.А. Практикум з Internet-технологій: Метод. вказівки до викон. лаб. робіт. – К.: МАУП, 2004. – 136 с.: іл.

2. Глинський Я.М., Ряжська В.А. Інтернет Сервіси, HTML і web-дизайн: Навч. Посіб. – 3-є вид. – Львів: Деол, СПД Глинський, 2005. – 192 с.