Поняття про динамічні ефекти

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

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

<MARQUEE BGCOLOR="aqua" HEIGHT = 40> Особиста сторінка Ваше прізвище та ім’я</ MARQUEE>.

Зауваження. За допомогою цього тега можна заставити рухатись і графічний об’єкт. Перевірте це самостійно.

Текст "Особиста сторінка Ваше прізвище та ім’я" буде пробігати у смузі справа наліво, заходитиме за край екрана і з'являтимуться знову справа. Даний тег рекомендують застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік.

Обмеження кількості проходів задається параметром LOOP=число, де цифра - кількість проходів. Смугу можна центрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT=число, де число – величина швидкості руху, де конкретне значення вибирають з діапазону від 1 (повільно) до 10 (швидко).

Вправа 8. У тексті коду веб-сторінки у файлі file1.htm вставте рухомий рядок, наприклад, такого змісту:

1) <MARQUEE BGCOLOR="aqua" HEIGHT = 40 LOOP=5> Приватна сторінка Ваше прізвище та ім’я</ MARQUEE>.

2) Далі змініть цей рядок на такий:

<MARQUEE BGCOLOR="aqua" HEIGHT = 50 LOOP=4 DIRECTION =”rihgt” SCROLLAMOUNT=5> <FONT FACE = "Courier" SIZE = +4 COLOR = "red"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE>

перегляньте веб-сторінку.

3) Ще раз внесіть зміни (рис.17.3):

<MARQUEE BGCOLOR="aqua" HEIGHT = 50 LOOP=4 BEHAVIOR = "alternate" SCROLLAMOUNT=3> <FONT FACE = "Courier,Monotype Corsiva" SIZE = +3 COLOR = "magenta"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE>

і перегляньте веб-сторінку.

4) І нарешті внесіть такі зміни:

<MARQUEE BGCOLOR="aqua" HEIGHT = 40 LOOP=5 BEHAVIOR = "slide" SCROLLAMOUNT=5> <FONT FACE = "Monotype Corsiva,Courier" SIZE = +5 COLOR = "red"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE>

перегляньте веб-сторінку і зробіть висновки.

На рис.17.4 наведено вигляд веб-сторінки, код якої міститься у файлі file1.htm після виконання восьми вправ цього завдання.

Рис.17.3. Створення коду рухомого рядка у файлі file1.htm.

Рис.17.4. Вигляд веб-сторінки, код якої міститься у файлі file1.htm після виконання восьми вправ цього завдання.

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

МЕТОДИЧНІ РЕКОМЕНДАЦІЇ

Використання фреймів

Фрейм – це частина вікна браузера, може бути оформлена рамкою, в якій можна переглядати окремо від інших частин певні веб-сторінки. Поділ вікна браузера на фрейми виконується за допомогою спеціальних тегів. Парний тег <FRAMESET параметри > …</FRAMESET> задає кількість вертикальних чи горизонтальних фреймів та їх розмір. Одинарний тег <FRAME параметри> визначає, що буде відображатись у даному фреймі і яке ім’я матиме фрейм (хоча ім’я можна в деяких випадках не задавати). Створення фреймової структури вікна браузера зазвичай виконується в окремому файлі і код дещо відрізняється від раніше розглянутих кодів веб-сторінок. Приклади:

1) Створюються три вертикальні фрейми: 1 - 25% від горизонтального розміру вікна браузера з ім’ям "left”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="А.HTMl"; 2 - 25% від горизонтального розміру вікна браузера з ім’ям "center”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="В.HTM"; 3 - решта 50 % від горизонтального розміру вікна браузера з ім’ям "right”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="С.HTMl". Код створення такої структури має вигляд:

<frameset cols="25%, 25%,*" >

<frame src="a.htm" name="left”> <frame src="b.htm" name="center">

<frame src="с.htm" name="right"> </frameset> 2) Створюються один горизонтальний фрейм і два вертикальні фрейми: 1 - 10% від вертикального розміру вікна браузера з ім’ям "center”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="А.HTM"; 2 - 25% від горизонтального розміру вікна браузера з ім’ям "left”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="В.HTM"; 3 - решта 75 % від горизонтального розміру вікна браузера з ім’ям "right”, в ньому буде відображатись веб-сторінка, код якої міститься у файлі з ім’ям ="С.HTM". Код створення такої структури має вигляд:

<frameset rows="10%, *" >

<frame src="a.htm" name="center”> <frameset cols="25%, *" >

<frame src="b.htm" name="left">

<frame src="с.htm" name="right"> </frameset></frameset>

Вправа 9. Створіть фреймову структуру вікна браузера у файлі з ім’ям Index.htm у відповідності до наведеного на рис.17.5 коду. Цей файл буде головним, завантажувальним файлом. Він визначає два вертикальні фрейми з іменами „left” та „right”. У лівому фреймі буде відображатись файл з ім’ям Menu.htm (його ще потрібно створити), а у правому фреймі буде відображатись вже існуючий файл file1.htm.

Вправа 10. Спроектуйте файл Menu.htm як такий, що містить гіперпосилання на вже існуючі файли file1.htm. file2.htm, file3.htm та MyFoto.gif. Причому, при клацанні на гіперпосиланні потрібна веб-сторінка має відображатись у правому фреймі (рис.17.6). Для цього використовується параметр target="ім’я фреймуt" тегу гіперпосилання <A> .. </A>. Таким чином, веб-сайт буде складатись з кодів шести файлів папки Практ_17 (рис.17.7).

Рис.17.5. Створення вертикальних фреймів. Код файла Index.htm

Рис.17.6. Код файла Menu.htm

Рис.17.7. Файли папки Практ_17.

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

Рис.17.8.Вигляд веб-сторінки, код якої зберігається у файлі Index.htm.

Завдання 2. Захистіть виконану роботу.

Перелік питань до захисту практичної роботи

1. Яке призначення мають браузери?

2. Яке розширення повинно мати ім’я текстового файлу, що браузер міг розпізнавати код веб-сторінки?

3. Які теги створюють заголовки: вікна, документа?

4. Яке призначення має тег <BODY параметри>...</ВОDY> і чи завжди він присутній у коді веб-сторінки?

5. Яґкі параметри має тег <BODY параметри>...</ВОDY>

6. Як створити гіперпосилання: на файл, закладку?

7. Як створити „якір” на веб-сторінці?

8. Як зробити гіперпосиланням графічний об’ект?

9. Як створити ефект руху для тексту, для графічного об’єкта?

10. Які засоби дизайну тексту існують у мові HTML?

11. Як створити фрейми: вертикальний і два горизонтальні?

12. Як дати фрейму ім’я?

13. Як вказати у якому фреймі буде відображатись гіперпосилання на веб-сторінку, якщо вона має відображатись у іншому по відношенню до розташування гіперпосилання фреймі?

14. Які ви знаєте параметри тега <FONT параметри> … </FONT >?

15. Як створити на веб-сторінці таблицю?

16. Як створити на веб-сторінці списки: нумеровані та марковані?