Тема. Карти посилань.
Хід уроку
ІІ. Актуалізація опорних знань
ІІІ. Мотивація навчальної діяльності
ІV. Вивчення нового матеріалу
Карта посилань. - це створення інтерактивних шарів геометричної форми з відповідними посиланнями. Якщо поділити рисунок на області, і кожну з них перетворити на гіперпосилання, то повне зображення перетвориться на карту посилань, а області будуть "гарячими", тобто вони будуть реагувати на наведення та клацання миші.
Для створення карти посилань необхідні дві речі: Зображення, на якому передбачаються інтерактивні області і карта яка призначена для розміщення областей.
<IMG SRC="графічний файл" usemap="#name">
usemap="#name" вказує на ім'я карти до якої буде прив'язане зображення. Замість name можна використовувати будь яке ім'я, але воно має точно збігатися з ім'ям карти. Регістр має значення.Для створення карти треба застосувати тег-контейнер <MAP name="name"> </MAP> Дуже важливий атрибут name="Ім'я карти". Присвоювання імені мапі дає можливість використати її на певному зображенні.
Час розглянути, що саме знаходиться всередині контейнера MAP і як створити області посилань. На зображення можно створити області прямокутної, круглої та багатокутної форм. Описати їх можна тегом <AREA >Прямокутна область:
<area href="document.html" shape="rect" coords="x1,y1,x2,y2">href="document.html" вказує на сторінку яка буде завантажена після натискання на цю область.
shape="rect" вказує на те, що область прямокутної форми.
coords="x1,y1,x2,y2" вказує на координати лівого верхнього та правого нижнього кутів.
Визначити координати необхідних точок можна за допомогою графічного редактора, наприклад Paint.
Для цього треба навести курсор на необхідну точку і записати координати, що висвітлюються в статус - рядочку.
Наприклад:
<Area href="document.html" shape="rect" coords="20,20,300,150">
Для круглої області необхідно вказати shape="circle", координати центра кола x,y та радіус кола R.
Для визначення радіусу R в редакторі Paint необхідно навести курсор на центр кола, зафіксувати координати х,у.
Потім підвести курсор на край кола. з однаковою
координатою Y.
Різниця між координатами х1 центру і х2 краю і буде значення радіусу. R=x1-x2 при y1=y2.
<area href="document.html" shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x1,y1">
Багатокутна область використовується для більш точного виділення складної області.
Кутів може бути скільки завгодно багато.
Дла багатокутної області треба вказати shape="poly" і координати x,y всіх кутів.
Останньою координатою має бути перша координата x,y.
coords="x1,y1,x2,y2" вказує на координати лівого верхнього та правого нижнього кутів.
Визначити координати необхідних точок можна за допомогою графічного редактора, наприклад Paint.
Для цього треба навести курсор на необхідну точку і записати координати, що висвітлюються в статус - рядочку.
Наприклад:
<Area href="document.html" shape="rect" coords="20,20,300,150">
Виділення круглої області
<area href="document.html" shape="circle" coords="x,y,R">Для круглої області необхідно вказати shape="circle", координати центра кола x,y та радіус кола R.
Для визначення радіусу R в редакторі Paint необхідно навести курсор на центр кола, зафіксувати координати х,у.
Потім підвести курсор на край кола. з однаковою
координатою Y.
Різниця між координатами х1 центру і х2 краю і буде значення радіусу. R=x1-x2 при y1=y2.
Виділення багатокутної області
<area href="document.html" shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x1,y1">
Багатокутна область використовується для більш точного виділення складної області.
Кутів може бути скільки завгодно багато.
Дла багатокутної області треба вказати shape="poly" і координати x,y всіх кутів.
Останньою координатою має бути перша координата x,y.
V. Засвоєння нових знань
VІ. Фізкультхвилинка
VІІ. Формування вмінь та навичок
Повторення правил роботи за комп’ютером
Робота за комп’ютером
Створіть папку «Моя країна»
В неї слід помістити файли з зображеннями карти України та обласних центрів: Києва, Дніпра, Запоріжжя, Харкова, Одеси, Львова.
Створіть HTML документ map.html, в якому розмістіть карту України.
<img src="mapa.png" usemap="#karta">
<map name="karta"> </map>
VІІІ. Підбиття підсумків уроку
ІХ. Домашнє завдання Опрацювати конспект
VІІ. Формування вмінь та навичок
Повторення правил роботи за комп’ютером
Робота за комп’ютером
Створіть папку «Моя країна»
В неї слід помістити файли з зображеннями карти України та обласних центрів: Києва, Дніпра, Запоріжжя, Харкова, Одеси, Львова.
Створіть HTML документ map.html, в якому розмістіть карту України.
<img src="mapa.png" usemap="#karta">
<map name="karta"> </map>
Для визначення координат міст відкрийте зображення карти в програмі Paint.
Для створення «гарячих» областей між тегами <map> та </map> створіть теги
<area href="київ.jpg" share="rect" coords="400,100,500,200"> та ін..
Шаблон HNML- кода
<body>
<center>
<h1>Карта України</h1>
<h2>Міста України</h2>
<img src="mapa.png" usemap="#karta">
<map name="karta">
<area href="дніпро2.jpg" share="rect" coords="600,250,650,300">
....додати інші області.........................
</map>
</body>
Як прозвітувати?
<area href="київ.jpg" share="rect" coords="400,100,500,200"> та ін..
Шаблон HNML- кода
<body>
<center>
<h1>Карта України</h1>
<h2>Міста України</h2>
<img src="mapa.png" usemap="#karta">
<map name="karta">
<area href="дніпро2.jpg" share="rect" coords="600,250,650,300">
....додати інші області.........................
</map>
</body>
Як прозвітувати?
1. Всі матеріали, які стосуються веб-сторінки, збережіть у папці "Карта посилань"
2. Зробіть архів папки "Карта посилань"
3. Розмістить архів на вашому Google-диску і відкрийте до нього доступ
4. Надішліть посилання на вашу роботу.
2. Зробіть архів папки "Карта посилань"
3. Розмістить архів на вашому Google-диску і відкрийте до нього доступ
4. Надішліть посилання на вашу роботу.
VІІІ. Підбиття підсумків уроку
ІХ. Домашнє завдання Опрацювати конспект
