Теорія та презентація теми

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

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

Тип уроку: засвоєння нових знань; формування вмінь і навичок; застосування знань, умінь і навичок; повторення, систематизації й узагальнення вивченого; перевірки та оцінювання знань, умінь і навичок.

Обладнання та наочність: комп’ютери, підручники, презентація, проектор.

Програмне забезпечення: Google Chrome, Adobe Photoshop, Notepad++.

Хід уроку

І. Організаційний етап

·        Привітання з класом

Доброго дня, діти.

·        Повідомлення теми і мети уроку

Сьогодні на уроці ми з вами навчимось створювати карти посилань.

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

Мова HTML передбачає можливість вказати місце на зображенні котре буде відповідати за гіперпосилання.

Не забувайте про правила поведінки на уроці. (Слайд2).

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

·        Повторення раніше вивченого матеріалу (Слайд3)

Перевірка учнівських анімацій.

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

Слайд4-6. Використовуючи зображення з картою України намалюємо на ній позначки (зрозумілі для користувачами) областей взаємодії. Для цього оберемо область виділення «Круг», зобразимо область, створимо новий шар та зафарбуємо потрібним кольором.

Слайд7-8. За допомогою інструменту довільного вибору зобразимо підказку, що це за місто.

Слайд9-10. Існує декілька способів визначення області гіперпосилання: круг, прямокутник та довільна фігура. Розберемо кожен з випадків окремо.

Слайд11-12. Для визначення області гіперпосилання потрібно визначитись її координати. В середовищі Adobe Photoshop натиснемо клавішу F8 та оберемо спосіб відображення – пікселі.

Слайд13-14. Для кругового виділення області потрібно визначити координати центру області та її радіус.

Слайд15-16. Додамо до нашого веб-документу зображення <img src="images/map-ukraine.png" usemap="#map"> та за допомогою параметру usemap вкажемо ім’я карти до якої ми будемо звертатись використовуючи гіперпосилання.

Слайд17. За допомогою тегу <map> та вказання параметру звернення до зображення name="map" розпочнемо опис посилань.

 Слайд18-19. Тегом area розпочнемо звернення та за допомогою  параметра shape вкажемо спосіб виділення. Параметр coords дозволяє вказати необхідні (раніше визначені нами) координати зображення, а href допоможе вказати гіперпосилання.

Слайд20-21. Щоб описати гіперпосилання за допомогою прямокутника потрібно визначити координати верхньої правої точки та нижньої лівої.

Слайд22-23. Від попереднього опису є відмінність лише у вказанні  параметру shape  та збільшення числових даних координат. <area shape="rect" coords="282,147, 311,162" href="http://zt-rada.gov.ua">

Слайд24-29. При описі довільної фігури потрібно вказати координати кожної з точок. <area shape="poly" coords="426,208, 446,199, 446,217, 425,216" href="http://chmr.gov.ua/ua/">

V. Усвідомлення набутих знань й формування вмінь та навичок

·        Практичне завдання (Слайд30-31)

Завдання

1.     Створити на робочому столі папку та назвати її власним прізвищем та ім’ям.

2.     Відповідно опрацьованого на уроці матеріалу опишіть карту знань за продемонстрованим зразком:

          3.  Відкривши середовище Adobe Photoshop зобразіть 2 круглі, 2 прямокутні 

               та 2 довільні мітки на карті для обраних за власних вибором міст.

          4.   Опишіть мітки гіперпосиланнями на громадські сайти відповідних міст.

Збережіть матеріали у власній папці.

·        Релаксація

Вправа для профілактики короткозорості та порушення зору

Очима швидко обертаймо,

Та головою не хитаймо.

Ліворуч – раз, два, три, чотири.

Праворуч – стільки ж повторили.

По колу очі обертаймо,

І все навколо розглядаймо.

Раз коло, два і три, чотири.

Щільніше очі ми закрили.

На п’ять і шість їх потримали

По колу знов пообертали.

VI. Підведення підсумків уроку

·        Бесіда за питаннями (Слайд32)

1.     Що таке карта посилань?

2. З якими новими тегами та їх параметрами ви сьогодні познайомились?

3.     Опишіть алгоритм опису посилання довільною фігурою.

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

Опрацювати вивчений матеріал. На основі GoogleMap створіть карту посилань своєї місцевості з визначними місцями. Визначні місця описати на власних сторінках.