OsnovyWebDis

у центральній частині вікна розміщена область відображення. Програма демонструє у ній відеозапис із Інтернету або локального файлу, виводить візуальний супровід відтворюваного аудіозапису або рекламне оголошення.

Для керування процесом відтворення використовують елементи панелі керування. Покажчик смуги пошуку пов'язаний із поточ­ ним місцем у записі: пересуваючи його, можна відтворювати будьякий потрібний фрагмент (але це не стосується потокових даних). Нижче розташовані елементи керування звуком і відтворюваними об'єктами, а також рядок стану з допоміжною інформацією.

Використання мультимедіа на веб-сторінках

Internet Explorer може завантажувати та відтворювати фоновий звук, для прослуховування якого не потрібно виконувати жодних дій. Звук зберігається у файлі. Для вставлення фонового звуку використовують тег такого формату:

<BGSOUND SRC="URL звукового файлу" LOOP=кількість відтворень>

Атрибут LOOP може набувати значень:

• t r u e — повторення звуку доти, доки сторінка відображаєть­ ся на екрані;

• f a l s e — відтворення звукового файлу один раз;

• число — кількість відтворень.

Наприклад: <BGSOUND SRC="fonzvuk.au" LOOP=3>.

У HTML-документах можна також використовувати посилання на звукові та відеофайли, які відтворюватимуться лише у разі вибору цих посилань. Окрім цього, є спеціальний тег для розміщення па­ нелі програвача на сторінці відразу після її завантаження у брау­ зер. Однак слід пам'ятати, що мультимедійні файли можуть бути великими за обсягом, потребувати багато часу для завантаження, тому бажано повідомляти відвідувачів про розміри аудіота відеозаписів, щоб вони вирішили, чи варто витрачати свій час.

Розглянемо, як розміщують посилання на аудіота відеофайли. Якщо, наприклад, у поточній папці є файл кліпу school.avi, то посилання на нього можна задати так:

<А HREF="school.avi">Biдeoклiп про школу (600 К)</А>

Розміщення та відтворення на веб-сторінках мультимедійних даних 123

Після клацання мишею гіперпосилання та надання дозволу на відкривання файлу з'явиться вікно програвана для відтворення цього відеокліпу.

Атрибут DYNSRC тегу <IMG> дає змогу вбудовувати відео у такий спосіб: на веб-сторінці міститься картинка, після наведення на яку вказівника миші починається відтворення відеокліпу. Ось зразок такого тегу:

<IMG S R C = " l . j p g " DYNSRC="video . avi" START=MOUSEOVER L00P=7>

Розглянемо приклад розміпдення звукового файлу audio.wav за допомогою тегу <EMBED>, який дає змогу розмістити на веб-сто­ рінці спеціальну панель програвача мультимедійних файлів. Для цього використовують теги <EMBED SRC=. . .></EMBED>, наприк­ лад, так:

<EMBED SRC="audio.wav"></EMBED>

Файл audio.wav у цьому прикладі має бути збережений у поточній папці (тій самій, що й HTML-документ).

Тег <EMBED> може мати такі атрибути:

•SRC (значення — URL-адреса) — адреса кліпу;

•ALIGN (набуває значень left, right, top, middle, bottom) — вирівнювання панелі програвача щодо тексту;

•WIDTH (у пікселах) — ширина програвача;

•HEIGHT (у пікселах) — висота програвача;

•AUTOSTART (набуває значень true або false) — настроювання автоматичного запуску після завантаження;

•REPEAT (значення true або false) — настроювання повторно­ го програвання;

•PLAY_LOOP — кількість повторень;

•HIDDEN (значення true або false) — показати або приховати панель.

Приклад використання тегу <EMBED>:

<EMBED SRC="filename.avi" WIDTH="300" HEIGHT="160" AUTOSTART="true" REPEAT="false" ALIGN="left"></EMBED>

Ha рис. 3.20 показано веб-сторінку, яка містить вбудовану в та­ кий спосіб панель програвача.

Рис. 3.20. Веб-сторінка із вбудованим програвачем

Інший спосіб розміщення мультимедійного об'єкта на сторін­ ці — це застосування більш універсального тегу <OBJECT>. Наприклад:

<OBJECT DATA="pryklad.rap3" TYPE="audio/wav"></OBJECT>

Атрибут DATA задає URL-адресу відтворюваного файлу, атрибут TYPE визначає його формат. Для тегу <OBJECT> можна використо­ вувати ще такі атрибути:

•ALIGN — вирівнювання відносно тексту;

•WIDTH — ширина;

•HEIGHT — висота;

•HSPACE — відступ по горизонталі;

•VSPACE — відступ по вертикалі.

Як і в попередньому прикладі, об'єкт можна бачити на екрані за­ звичай у вигляді вбудованого програвача з елементами керування.

Можна також вкладати кілька елементів <OBJECT> один в один. Це приведе до такого результату: якщо у браузері є засіб для пе­ регляду зовнішнього об'єкта, то саме він і буде відображатися, а якщо ні — браузер спробує відобразити внутрішній об'єкт і т. д. Наприклад, можна написати так:

<OBJECT DATA="l.mpg" TYPE="video/x-mpeg"> <OBJECT DATA="2.aiff" TYPE="audio/x-aiff">

Розміщення та відтворення на веб-сторінках мультимедійних даних 125

<OBJECT DATA="3.tiff" TYPE="image/tiff">

<OBJECT DATA="4.gif" TYPE="image/gif">Кліп</OBJECT> </OBJECT>

</OBJECT>

</OBJECT>

Уцьому прикладі браузер спочатку спробує відтворити відеокліп (файл у форматі MPEG). Якщо ця спроба буде вдалою, то все, що міститься всередині зовнішнього тегу <OBJECT>, браузер зігно­ рує, а якщо ні — спробує відтворити файл у форматі AIFF. Якщо відсутній модуль відтворення і для цього файлу, буде спроба від­ творити малюнок у форматі TIFF, а в разі невдачі — зображення формату GIF. Зрештою залишиться просто текст: «Кліп».

Утегу <OBJECT> можна задати атрибут STANDBY, значення якого (текстовий рядок) відображатиметься на екрані доти, доки не за­ вантажиться весь об'єкт. Наприклад, доцільно написати так:

<OBJECT DATA="l.wav" TYPE="audio/wav" STANDBY="Ifle завантаження. Зачекайте.">

Якщо файл 1.wav має великий розмір, відвідувач побачить пові­ домлення про те, що відбувається завантаження.

Практична робота № 6

Розміщення графічних об'єктів на веб-сторінці

Мета роботи: навчитися оформляти тло веб-сторінки у вигляді ма­ люнка, розміщувати на веб-сторінці графічні об'єкти і настроюва­ ти їх атрибути, використовувати зображення як посилання.

Створіть веб-сайт, на якому .мають міститися графічні зображен­ ня як посилання. Головна сторінка сайту повинна складатися з двох частин: у лівій розташовані малюнки-посилання, у пра­ вій — місце, де відкриватимуться сторінки відповідно до вибра­ них гіперпосилань.

Візьміть за зразок сайт «Домашні улюбленці». Для роботи вико­ ристайте текстове і графічне наповнення веб-сайту, що міститься за адресою http://protvaryn.narod.ru/.

Порядок роботи

Рис. 3.21. Зображення для веб-сторінок сайту

2. Збережіть у папці site_home_pets зображення, показані на рис. 3.22, які будуть використані як гіперпосилання навіга­ ційної панелі.

Рис. 3.22. Зображення для навігаційної панелі

3. Відкрийте програму Adobe PhotoShop і створіть п'ять зображень тла — для сторінки навігаційної панелі та кожної сторінки

розділу (рис. 3.23). Збережіть їх у файлах із відповідними іменами.

Рис. 3.23. Зображення для тла сторінок

4.За допомогою програми Adobe PhotoShop на основі малюнка 4.jpg створіть зображення 41.jpg та 42.jpg, подібні до наведених на рис. 3.24. Вони будуть використовуватися для анімації.

Рис. 3.24. Зображення для створення GIF-анімації

На цих малюнках рибка знаходиться в різних місцях акваріу­ ма, завдяки чому можна імітувати її рух, якщо ці зображення змінюватимуть одне одне.

Використовуючи наведені у прикладі 3.4 пояснення, за допо­ могою програми Adobe PhotoShop створіть GIF-анімацію на ос­ нові малюнків 4.jpg, 41.jpg, 42.jpg. Збережіть її у файлі 4.gif.

Створіть HTML-документи для сторінок про папужку (richi. html), кролика (bonya.html), амадінів (amadiny.html) та рибку (frosya.html).

Файл richi.html:

<HTML>

<TITLE>Папужка</TITLE> <BODY BACKGROUND="11.gif">

<IMG SRC="richi.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10> <FONT SIZE=5><B>

Мій папужка — дуже хороша пташка, він так і говорить, коли його добре попросити про це. Його звати Річі, і своє ім'я він також іноді називає. Річінька

любить танцювати та співати. Він дуже дружелюбна пташка

і має друзів серед інших пташок.</B></FONT> </BODY>

</HTML>

Фа йл bonya.html:

<HTML>

<TITLE>Кролик</TITLE> <BODY BACKGR0UND="t2.gif">

<IMG SRC="bonya.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10> <FONT SIZE=5><B>

Наш кролик Боня дуже ніжний. У нього гарна біло-полева шубка. Вуха не дуже довгі, тому що Боня — декоративний кролик. Він любить гуляти по хаті, заглядати у всі закутки, наводити там свій порядок. Єдине місце, яке він завжди оминає, — це кухня. Боня любить лежати на дивані.

</B></FONT>

</BODY>

</HTML>

Файл amadiny.html:

<HTML>

<TITLE>Амадіни</TITLE> <BODY BACKGR0UND="t3.gif">

<IMG SRC="amadiny.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10><FONT SIZE=5><B>

Це двоє братиків — Чіп та Дейл. Вони дружать із Річенькою та іншими тваринками нашого дому. Чіп — старший братик, він допомагає Дейлу чиститись навіть тоді, коли сам Дейл цього робити не хоче. Вони дуже люблять купатись і чомусь люблять «читати» газети.

</B></FONT>

</BODY>

</HTML>

Файл frosya.html:

<HTML>

<TITLE>Рибка</TITLE> <BODY BACKGR0UND="t4.gif">

<IMG SRC="frosya.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10><FONT SIZE=5><B>

У цьому куточку природи/акваріумі дуже часто змінюються мешканці. Але зараз у ньому живе 4 рибки, найголовніша серед них — рибка Фрося.

<Р>Подивіться, як вона плаває:<BR>

<IMG SRC="4.gif"> </B></FONT> </BODY>

</HTML>

Для кожної веб-сторінки у тегу <BODY> за допомогою атрибу­ та BACKGROUND задано своє зображення тла. На сторінці про рибку Фросю розміщена GIF-анімація.

7.Створіть файл np.html для навігаційної панелі, в якій малюн­ ки будуть гіперпосиланнями.

<HTML>

<TITLE>Звірята</TITLE> <BODY BACKGR0UND="t5.GIF">

<А HREF="richi.html" TARGET="framel"><IMG SRC="l.jpg"> </A><BR>

<A HREF="bonya.html" TARGET="framel"><IMG SRC="2.jpg"> </A><BR>

<A HREF="amadiny.html" TARGET="framel"><IMG SRC="3.jpg"> </A><BR>

<A HREF="frosya.html" TARGET="framel"><IMG SRC="4.jpg"> </A>

</BODY>

</HTML>

У тегу <A> використаний атрибут TARGET, значенням якого

є ім'я фрейму, в якому відображатимуться сторінки сайту.

8.Створіть головну сторінку index.html, поділену на два фрейми. Після першого завантаження цієї сторінки відвідувач поба­ чить зображення-гіперпосилання у лівому фреймі, а правий буде порожнім доти, доки він не вибере певне посилання.

<HTML>

<TITLE>Домашні улюбленці</TITLE> <FRAMESET COLS="30%,*">

<FRAME SRC="np.html">

<FRAME NAME="framel"> </FRAMESET>

</HTML>

3a бажанням для першого завантаження у правий фрейм можна помістити спеціально створену для цього веб-сторінку.

9.Відкрийте у вікні браузера файл index.html і перевірте, як ді­ ють гіперпосилання. На рис. 3.25 показано головну сторінку