Урок 60                                                                        Інформатика 11(ІКТ)

“Навчання без міркування – даремне,

міркування без навчання – небезпечне”.

Конфуцій

 Карти посилань.

Мета.

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

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

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

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

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

• Пасічник О.В., Пасічник О.Г. Основи веб-дизайну. Навч.посібник. - К.: Вид.група BHV, 2009.
• Мультимедійне обладнання;
• Презентація “Структура веб-сайтів, різновиди веб-сторінок”.

План

1. Організація початку уроку
2. Правила ТБ при роботі в кабінеті Інформатики.
3. Мотивація навчальної діяльності.
4. Актуалізація опорних знань.
5. Вивчення нового матеріалу.
6. Застосування знань.
7. Підсумки уроку.
8. Домашнє завдання.

Хід уроку

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

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

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

Тестування на сайті дистосвіта

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

Карти посилань

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

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

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

Формування карти гіперпосилань

Графічну карту посилань створюють за допомогою кількох тегів. У тегу <IMG> визначають атрибут SRC, щоб задати зображення, і ат­рибут USEMAP, значенням якого є ім'я карти (має починатися символом #). Власне карту створюють за допомогою тегу <МАР> з атрибутом NAME, який містить ім'я карти (визначене в атрибуті USEMAP, але без символу #) та тегу </МАР>. Між ними записують теги <AREA>, які задають параметри гарячих областей. При цьому використовують такі атрибути:

• HREF — визначає гіперпосилання, пов'язане з областю;
• SHAPE — визначає форму області, його значеннями можуть бути:

• rect — прямокутник;
• polygone або poly — багатокутник;
• circle — коло;

• COORDS — містить координати області у вигляді взятого в лапки списку чисел, розділених комою. Для прямокутника задають чотири числа — координати верхнього лівого і правого ниж­нього кутів, для багатокутника — послідовні координати кож­ного кута, для кола — координати центра і радіус.

Приклад визначення карти посилань наведено нижче.

<IMG SRC="map.bmp" USEMAP="#karta">

<МАР NAME="karta">

<AREA HREF="1.html" SHAPE="rect" COORDS="70,250,160,270">

<AREA HREF="2.html " SHAPE="circle" COORDS="260,140,60">

</MAP>

Слід попрацювати над малюнком карти у графічному редакторі, щоб окреслити необхідні області, які пізніше стануть гіперпосиланнями, та визначити координати, що будуть записані як зна­чення атрибута COORDS.

Місце розташування будь-якої точки на малюнку визначають два числа — її горизонтальна та вертикальна координати. Верхня ліва точка має координати (0;0). Більшим горизонтальним координа­там відповідають правіші точки, більшим вертикальним — нижчі.

Наприклад, якщо малюнок має розмір 400x300 пікселів, і необхід­но визначити прямокутну область, що займає його верхню ліву частину та має вдвічі меншу ширину і висоту, запис тегу <AREA> буде таким:

<AREA SHAPE = ''rect'' COORDS = "0,0,200,150">

У цьому записі атрибут COORDS визначає прямокутник за допомо­гою двох точок: лівого верхнього кута з координатами (0;0) і пра­вого нижнього з координатами (200; 150) (центральна точка ма­люнка, що має розмір 400x300).

Якщо гаряча область є колом, то слід зазначити координати лише однієї точки — центра кола, а також задати його радіус, наприклад:

<AREA SHAPE = "circle" COORDS = "200,150,40">

Такий запис визначає круглу гарячу область, розміщену в цен­трі малюнка розміром 400x300. Координати центральної точки (200; 150), радіус кола — 40 пікселів.

Найскладніший випадок — багатокутна гаряча область, для якої потрібно послідовно зазначати координати всіх кутів. Припустимо, що на малюнку розміром 400x300 пікселів потрібно визначити гарячу область у формі рівнобедреного трикутника, основа якого проходить точно посередині малюнка, займаючи всю його шири­ну, а вершина міститься посередині верхньої межі. Цю область визначають так:

<AREA SHAPE="poly" COORDS = "0,150,400,150,200,0">

ШІСТЬ координат задають три точки — кути трикутника. У цьо­му випадку їх послідовність неважлива, і ви могли б написати, наприклад, 400; 150;0; 150;200;0, проте коли кількість кутів є біль­шою, важливим є порядок з'єднання точок. Наприклад, записи

<AREA SHAPE="poly" COORDS="0,0,200,0,200,150,100,75,0,150">

<AREA SHAPE="poly" COORDS="0,0,200,0,100,75,200,150,0,150">

дадуть різні результати. У першому випадку це прямокутник із вирізаним трикутником знизу, а в другому — з вирізаним три­кутником праворуч.

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

Пояснимо використання карти гіперпосилань на прикладі.

Вправа 3.2

Створимо сайт «Моя фірма». Його головна сторінка виконана у ви­гляді графічного зображення, певні частини якого є гарячими облас­тями. Вибравши їх, відвідувач може побачити інформацію про на­прями роботи фірми: «Замовники», «Продукція», «Майбутнє».

У папку веб-сайту слід помістити такі файли:

• графічний файл map.jpg (рис. 3.17);
• HTML-документи 1.html, 2.html, 3.html, що містять описи на­прямів роботи фірми;
• HTML-документ map.html, в якому для гарячих областей ма­люнка map.jpg визначені гіперпосилання на документи 1.html, 2.html, 3.html.

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

1. За допомогою програми Paint або Adobe PhotoShop створіть файл map.jpg.
2. У редакторі Блокнот створіть документи, де описано напрями роботи фірми, і збережіть їх як файли 1.html, 2.html, 3.html.

<HTML>

<TITLE>Замовники фірми "Калина"</TITLE>

<BODY BGCOLOR=cyan>

<H1>Наші замовники</Н1>

<Н2 >Фірма "Карпати"</Н2 >

<Н2 >Фірма "Золотий жук"</Н2 >

<Н2 >Фірма "Пролісок"</Н2 >

</BODY>

</HTML>

<HTML>

<TITLE>Вироби фірми "Калина"</TITLE>

<BODY BGCOLOR=cyan>

<Н1>Наша продукція</Н1>

<Н2 >Шафи для вітальні</Н2>

<Н2 >Кухонні стільці</Н2 >

<Н2>0фісні столи</Н2 >

</BODY>

</HTML>

<HTML>

<TITLE>Перспективи фірми "Калина"</TITLE>

<BODY BGCOLOR=cyan>

<Н1>Наша майбутня продукція</Н1>

<Н2 >Комп'ютерні столи</Н2 >

<Н2>Стилізовані акваріуми</Н2>

<Н2>Набір меблів для лоджії</Н2>

</BODY>

</HTML>

3. Створіть файл map .html, який містить такий код :

<HTML>

<TITLE>Напрями роботи фірми "Калина" </TITLE>

<BODY BGCOLOR=pink>

<IMG SRC="map.jpg" USEMAP="#kalyna" >

<MAP NAME="kalyna">

<AREA HREF="l.html" ALT="РО3ПОВІДЬ ПРО ЗАМОВНИКІВ"

SHAPE="rect" COORDS="70,250,160,270">

<AREA HREF="2.html" ALT="РОЗПОВІДЬ ПРО ПРОДУКЦІЮ"

SHAPE="rect" COORDS="260,140,345,160">

<AREA HREF="3.html" ALT="РОЗПОВІДЬ ПРО МАЙБУТНЄ"

SHAPE="rect" coords="2,4,98,36">

</MAP>

</BODY>

</HTML>

4. Відкрийте файл map.html у вікні браузера. На рис. 3.18 пока­зано карту посилань.

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

<НЗ>Виберіть на малюнку напрям роботи фірми</НЗ>

Якщо розмістити його між тегами <ІМG> та <МАР>, то на веб-сторінці під картою посилань відобразиться напис «Виберіть на малюнку напрям роботи фірми». Провівши мишею над малюн­ком, можна виявити, що над гарячими областями вказівник миші змінює свій вигляд, як над звичайними посиланнями. Якщо ж зупинити його над гарячою областю, побачите спливаючий на­пис — результат дії атрибута ALТ у тегу <AREA>.

Переваги та недоліки карт гіперпосилань

Карти-зображення доцільно використовувати в таких випадках.

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

Хоча карти-зображення є популярними, їх не вважають обов'яз­ковими атрибутами веб-сторінок, оскільки вони мають певні недоліки.

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

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

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

Вправи 3.1-3.2.

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

Тест до теми

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

1. Вивчити конспект.
2. Виконати завдання 3.2.