Published using Google Docs
Урок 16 Інформатика 9 клас"
Updated automatically every 5 minutes

Урок 16                                                                        Інформатика 9 клас

Розміщення й вирівнювання зображень на веб-сторінках. Створення й розміщення на сайтах gif-анімації.

Мета.

Навчальна. Ознайомити учнів з форматами зображень, що використовуються в Інтернеті, їхні особливості; розміщення й вирівнювання зображень на веб-сторінках; карти посилань; створення й розміщення на сайтах gif-анімації.

Розвиваюча. Розвивати логічне мислення, самостійність, вміння застосовувати набуті знання до практичних завдань.

Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.

Тип уроку. Засвоєння нових знань і навичок.

Матеріали для роботи з учнями:

План

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Актуалізація опорних знань.

Тестування

4. Мотивація навчальної діяльності.

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

5. Вивчення нового матеріалу.

Найчастіше підбирають рисунок, який нагадує шпалери, адже текст на тлі має виділятись і легко читатись, тобто привертати ува­гу відвідувача сайту.

Вправа 3.1

У програмі Adobe PhotoShop (онлайн) створимо і відредагуємо малюнок, призначений для заповнення тла веб-сторінки.

Виконайте команду меню Filter > Texture > Texturizer (Фільтр • Текстура • Текстуризатор). У діалоговому вікні, що відкриєть­ся, виберіть зі списку Texture (Текстура) значення Canvas (По­лотно) і настройте параметри Scaling (Шкала), Relief (Рельєф) та Light Direction (Напрям освітлення). Зображення набуде та­кого вигляду, як на рис. 3.4.

<HTML>

 <TITLE>Моя фірма</TITLE>

<BODY BACKGROUND="1.jpg">

<H1><A HREF = "l.html">Наша продукція</А></Н 1 >

<H1><A HREF = "2.html">Наші замовники</А></Н 1 >

</BODY>

</HTML>

Ha рис. 3.5 показано цю веб-сторінку.

Вставлення зображень на веб-сторінку

Для розміщення малюнків у HTML-документі використовують оди­нарний тег <IMG>. Він має обов'язковий атрибут SRC, значенням якого є URL-адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточного катало­гу; при цьому «батьківський» каталог позначають за допомогою двох крапок і слешу (. . /)). Під час відкривання документа брау­зер завантажує малюнок і відображає його в тому місці докумен­та, де розташований тег <IMG>.

Графічний об'єкт буде показаний на веб-сторінці у своїх реальних розмірах. Якщо є потреба у їх зміні (масштабуванні об'єкта), нові розміри можна задати за допомогою атрибутів WIDTH та HEIGHT, значення яких визначають відповідно ширину та висоту зображен­ня в пікселах. При цьому необхідно зберегти пропорції малюнка, інакше він матиме вигляд розтягнутого або сплюснутого.

Слід також пам'ятати, що іноді користувачі відключають відобра­ження графіки у вікні браузера, щоб прискорити завантаження документів. Тому, на випадок, коли малюнка на сторінці не буде, бажано повідомити, що на ньому зображено. Для цього викори­стовують альтернативний текст — більш-менш докладний опис зображення, який задають у тегу <IMG> як значення спеціально­го атрибута ALT. Якщо браузер не може показати малюнок, він замість нього виводить цей текст.

Розглянемо HTML-документ, в якому використаємо малюнок fla­mingo .jpg, де зображено фламінго. У тегу <IMG> задамо атрибути WIDTH,HEIGHT та ALT.

<HTML>

<TITLE>Малюнок</TITLE>

<ВОDY BACKGROUND=”flamingo.jpg”>

< IMG SRC=”2.jpg” WIDTH=300 HEIGHT = 200 АLТ=”Фламінго">

</BODY >

</HTML>

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

У режимі відключення графіки буде показано лише порожню рам­ку зображення з альтернативним текстом.

Розміщення зображень у тексті

Зображення можна розмістити у тексті, але при цьому слід ви­значити, в який спосіб текст обтікатиме його. Для взаємного роз­міщення тексту і зображень призначений атрибут ALIGN у тегу <IMG>, який може набувати, зокрема, таких значень:

За умовчанням атрибут ALIGN має значення left.

Для того щоб картинка не була розташована впритул до тексту, можна задати відступи. Це роблять за допомогою атрибута HSPASE для бокових полів та атрибута VSРАSЕ для верхнього і нижнього полів. Значення аргументів задають у вигляді чисел, що визнача­ють розміри відступів у пікселах. У прикладі, наведеному нижче, задано такі значення атрибутів, що малюнок розміщується ліворуч від тексту, який обтікатиме його. Поля навколо малюнка матимуть розмір 10 пікселів.

<HTМL>

<TITLE>Малюнок</TITLE>

<body BАCKGROUND = "1.jpg">

<іmg SRC=”flamingo.jpg"ALING = LЕFT HSPASE=10 WIDTH=300 HEIGHT=200 ALT="Фламінго">

Блакитні води океану та коралові рифи, ласкаве сонце і білосніжний прибережний пісок, фантастичний підводний світ і казкові птахи, буяння барв сходів і заходів, непрохідні ліси і п’янкий запах орхідей...

Сприятливий клімат Острова Свободи дає можливість туристам відвідувати його цілий рік. Тут немає зайвої вологості, а спека не така страшна завдяки постійним подувам бризів із океану. Середньорічна температура повітря й води становить + 26—28‘С.

</BОDУ>

</HTML>

На рис. 3.7 показано, який вигляд має ця веб-сторінка у вікні браузера.

Графічні гіперпосилання

Зображення, як і текст, можна використовувати як посилання. Для цього тег <IMG> необхідно помістити між тегами <А> і </А>. Зображення-посилання має синю рамку, а після наведення на нього вказівника миші той набуває такої самої форми, що й у ви­падку текстового посилання.

Приклад 3.1. Використання зображень як посилань Розглянемо приклад веб-сторінки, що містить малюнки, які є гіперпосиланнями.

<HTML>

<TITLE>Птахи</TITLE>

<BODY BACKGROUND="1.jpg">

<А HREF = ”gorobci.html”><IMG SRC = "gorobci.jpg”></A>

<A HREF = ”flamingo.html”><IMG SRC = ”flamingo.jpg”></A>

</BODY>

</HTML>

Малюнок gorobci.jpg пов'язаний із файлом gorobci.html, а малюнок flamingo.jpg — із файлом flamingo.html. На рис. 3.8 показано, який вигляд має ця веб-сторінка у вікні браузера.

Ще одним способом використання малюнків як гіперпосилань є створення графічних кнопок переходу.

6. Застосування отриманих знань

Вправи 3.4.

7.  ПІДБИТТЯ ПІДСУМКІВ УРОКУ

Тест до теми

8. ДОМАШНЄ ЗАВДАННЯ