Урок: "Розміщення й вирівнювання зображень на веб-сторінках"

Про матеріал

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

Перегляд файлу

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

Мета:

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

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

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

Пасічник О.В., Пасічник О.Г. Основи веб-дизайну. Навч.посібник. - К.: Вид.група BHV, 2009.

Мультимедійне обладнання; Презентація “Структура веб-сайтів, різновиди веб-сторінок”.

План

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

2. Правила ТБ при роботі в кабінеті Інформатики.

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

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

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

6. Застосування знань.

7. Підсумки уроку.

8. Домашнє завдання.

Хід уроку

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

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

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

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

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

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

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

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

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

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

Формати зображень, які використовують в Інтернеті

Найбільш розповсюдженими в Інтернеті є файли форматів GIF, JPG (JPEG) та PNG. Це найкомпактніші формати збереження графіки.

Формат GIF (.gif)

Формат GIF (Graphics Interchange Format — формат обміну графічними даними) почали використовувати з 1987 року для обміну малюнками через канали зв'язку глобальної мережі. Він зберігає зображення, що можуть містити не більш ніж 256 кольорів, і не залежить від апаратного забезпечення комп'ютера. Окрім цього, під час завантаження таких файлів на веб-сторінку може бути використаний режим interlaced (рядки малюнка відображаються через один). Ця технологія дає змогу побачити приблизний вміст картинки до її повного відтворення і в разі необхідності скасувати завантаження.

У GIF-файлах можна зробити один чи більше кольорів прозорими: вони будуть невидимими у вікні браузера та деяких інших програм. Також є можливість зберігати в одному файлі кілька картинок, задавши час показу кожної, тобто застосовувати анімацію. На сьогодні фахівцями розроблено чимало готових анімаційних GIF-файлів, які можна використовувати на своїх веб-сторінках.

Формат PNG (.png)

Формат PNG (Portable Network Graphic — переносні мережні графічні дані) є одним із перспективних форматів графіки для Інтер- нету, який створено з метою заміни GIF.

Формат PNG забезпечує високу якість графіки та прийнятні розміри файлів. Зображення може зберігатися як у реальних кольорах, так і в 256-колірній GIF-палітрі.

Формат JPEG (.jpg)

Формат JPEG (Joint Photographic Experts Group — об'єднана група експертів у галузі фотографії) був створений для того, щоб позбутись обмежень, властивих формату GIF.

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

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

Розміщення і вирівнювання зображень на веб-сторінках

Ілюстрації відіграють важливу роль в оформленні веб-сторінок: їх використовують як тло, виводять на екран як окремо від тексту, так і разом із ним. Малюнки зберігаються в окремих файлах поза HTML-документами, але відображаються браузером всередині веб-сторінки.

Створення тла веб-сторінки

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

Для формування тла у вигляді малюнка у тегу <BODY> використовують атрибут BACKGROUND, значенням якого є URL-адреса файлу зображення. Наприклад, тег <BODY BACKGROUND="1. jpg"> визначає, що для фонового заповнення веб-сторінки буде використано файл 1.jpg.

Далі наведено приклад HTML-коду сторінки, в якої тло оформлене у вигляді малюнка, що міститься у файлі mone.jpg.

<HTML>

<ТІТЬЕ>Моя фірма</ТІТХЕ> <BODY BACKGROUND="mone.jpg">

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

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

</BODY>

</HTML>

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

Як бачите, малюнок займає цілий екран. Розглянемо інший приклад, задавши в атрибуті BACKGROUND зображення невеликого розміру gorobci.jpg, яке у вигляді мозаїки заповнить екран. Код такої сторінки наведено нижче, а вигляд її у вікні браузера — на рис. 3.2.
<HTML>

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

</BODY>

</HTML>

У цьому прикладі на веб-сторінці немає тексту, однак на практиці так не буває. З огляду на це тло рідко роблять у вигляді фотографій, оскільки для них непросто підібрати відповідний колір тексту.

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

Можливість відповідної обробки зображень для перетворення їх на фонові забезпечують багато графічних редакторів, зокрема популярний Adobe PhotoShop. Відкривши у ньому потрібний файл (командою File • Open (Файл • Відкрити)), слід вибрати команду Image • Adjustments • Hue/Saturation (Зображення • Параметри • Тон/ Насиченість) і за допомогою шкали Lightness (Освітленість) освітлити малюнок тла. На рис. 3.3 показано малюнок gorobci.jpg, який оброблений у такий спосіб.

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

Вправа 3.1

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

1. Відкрийте вікно програми. Простежте, щоб палітри Tools (Інструменти) і Swatches (Зразки) відображалися на екрані. Якщо це не так, виберіть назви цих палітр у меню Window (Вікно).

2. Створіть новий файл за допомогою команди File • New (Файл • Новий). У діалоговому вікні, що відкриється, задайте такі параметри зображення: Width (Ширина) — 150 пікселів. Height (Висота) — 100 пікселів, IVIode (Режим) — RGB Color.

3. За допомогою інструмента Paint Bucket (Заливка) на палітрі кольорів Swatches (Зразки) виберіть бажаний колір і зафарбуйте зображення, клацнувши всередині нього.

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

4. Для корекції отриманого малюнка (надання йому блідого тону) можна скористатися командою Image • Adjustments > Hue/Saturation (Зображення • Параметри • Тон/Насиченість) і настроїти освітленість за допомогою шкали Lightness (Освітленість), як це описано раніше.

5. Збережіть цей малюнок у файлі з іменем 1.jpg, розмістивши його у папці з веб-сторінками. Закрийте програму Adobe PhotoShop.

6. Створіть HTML-документ, в якому за допомогою атрибута BACKGROUND=”1. jpg" тегу <BODY> оформіть тло сторінки.

<HTML>

<ТІТLЕ>Моя фірма</ТІТLЕ>

<Н1><А HREF = "Lhtml">Наша продукція</А></Н1>

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

</BODY>

</HTML>

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

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

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

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

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

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

<HTML>

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

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

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

</BODY >

</HTML>

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

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

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

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

● left — зображення розміщене в лівій частині сторінки, текст обтікає його з правого боку;

● right — зображення розміщене у правій частині сторінки, текст обтікає його з лівого боку;

● top — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за верхньою межею малюнка;

● bottom — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за нижньою межею малюнка;

● middle — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно по середній лінії малюнка.

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

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

<HTML>

<ТІТLЕ>МАЛЮНОК</ТІТLЕ>

<BОDУ БАСКОКОиШ="1.jрд">

<ІМG SRС="flamingo.jpg" ALIGN=left НSРАSЕ=10 VSРАSЕ=10>

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

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

</BОDУ>

</HTML>

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

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

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

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

<HTML>

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

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

</BODY>

</HTML>

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

Приклад 3.3. Створення фотогалереї

Створимо у HTML-документі таблицю, в комірки якої вставимо ілюстрації до веб-сайту навчального закладу.

<HTML>

<BODY>

<TABLE>

</TD>

<TR><TD><A HREF="foto/5.html"

TARGET="_blank"><IMG SRC="foto/5.jpg"

WIDTH = 180 HEIGHT = 150 ALT="Шкільний xop"></TD>

</TABLE>

</BODY>

</HTML>

Усі зображення розміщені в поточній папці в підкаталозі foto. Кожний малюнок, вставлений у комірку таблиці, є посиланням, що вказує на HTML-документ, тіло якого містить тег вставляння того самого малюнка-гіперпосилання. Наведемо приклад одного з таких документів — 3.html.

<HTML>

<TITLE>Нарівні з чемпіонами</TITLE>

<BODY>

</BODY>

</HTML>

Отже, малюнок у комірці таблиці та пов'язаному з ним HTML- документі однаковий, але в таблиці його розміри значно менші реальних — 180x150 пікселів. Кожний такий малюнок супроводжується альтернативним текстом.

На рис. 3.10 зображена веб-сторінка, фрагмент коду якої було наведено вище. На ній розташовано фотогалерею веб-сайту гімназії «Сихівська» м. Львова.

HTML-документи, пов'язані з гіперпосиланнями, відкриваються в окремому вікні: цього досягають наданням атрибуту TARGET значення blank. Зображення в них мають суттєво більші розміри, наприклад, ширина — 900 пікселів, а висота — 750. Розміри малюнка, що відкривається в окремому вікні, підбирають так, щоб він мав ширину та висоту, достатні для детальнішого ознайомлення з ним. При цьому слід пильнувати, щоб не відбулося спотворення картинки, тому часто розміри залишають реальними, не використовуючи атрибутів WIDTH та HEIGHT.