Методические и дидактические рекомендации к уроку "Карта гиперссылок на веб-страницах"

Материал из ЗапоВики

(Различия между версиями)
Перейти к: навигация, поиск
Строка 41: Строка 41:
Презентация к уроку [https://docs.google.com/open?id=0B__ytXd4xGKAd202bTN6UUM4Vms ''Карта гиперссылок в веб-документах'']  
Презентация к уроку [https://docs.google.com/open?id=0B__ytXd4xGKAd202bTN6UUM4Vms ''Карта гиперссылок в веб-документах'']  
-
 
-
'''План урока'''
 
-
 
-
1. Организационный этап
 
-
 
-
2. Актуализация опорных знаний
 
-
 
-
3. Изучение нового материала (мини-лекция) с примерами веб-страниц. Гиперссылки областей, их атрибуты.
 
-
 
-
4. Усвоение новых знаний и формирование навыка создания гипертекстовых документов. Практическое задание «Интерактивная карта Украины»
 
-
 
-
5. Итоги урока
 
-
 
-
6. Рефлексия
 
-
 
-
7. Домашнее задание
 
<br>  
<br>  

Версия 06:29, 3 мая 2013

Sertifikat26 ZapoWikiOvsannik.jpg

Автор:

учитель інформатики

Запорожский многопрофильный лицей № 99

Овсяник Светлана Георгиевна


ПРОГРАММА

СПЕЦКУРС: «Основи веб-дизайну» (І.О. Завадський, Н.С. Прокопенко), Інформатика. Збірник “Програми для профільного навчання та допрофільної підготовки”.

Рекомендовано МОН України Лист №1/11-4927 від 10.08.06 . (Київ, Видавнича група BHV, 2009)


Тема курса: Основи мови HTML (6 год)

Тема №3: Карта гиперссылок в веб-документах


Тип урока: комбинированный

Цели:
познакомить с тегами для создания гиперссылок области;
сформировать навык использования графических объектов в качестве гиперссылок в веб-документах; 
познакомить с понятием карты гиперссылок;
познакомить с атрибутами графической карты гиперссылок;
сформировать умение, навык создания карты гиперссылок,

формировать представление о принципах навигации при построении сайтов;


ученик объясняет

  • Понятие тега и атрибутов тега для графики на странице;
  • Понятие тега и атрибутов тега для карты гиперссылок на странице;
  • Правила корректной записи тегов
  • Алгоритм описания координат различных областей: многоугольника, прямоугольника, круга;

описывает

  • Синтаксис и назначение тегов для графики на странице;
  • Синтаксис и назначение тегов для различных областей: многоугольника, прямоугольника, круга;
  • Область действия атрибутов тегов для задания параметров гиперссылок для гипертекстового документа;

Презентация к уроку Карта гиперссылок в веб-документах


Содержание

Организационный этап

Приветствие учащихся, перекличка

Сообщение темы, целей, задач урока

Мотивация к учебной деятельности: вы не раз заходили на тематические сайты в Интернете. Обращали вы внимание на графические объекты, при наведении на различные области которого, курсор менял вид, становился указателем гиперссылки?  

Актуализация опорных знаний.

Составляем опорный конспект

файл: план-конспект к уроку Карта гиперссылок в веб-документах

опорная схема Карта гиперссылок в веб-документах

Назовите виды гиперссылок и теги, которые их задают Карта гиперссылок Овсяник16122012.jpg

Алгоритм приема: на доске пишем в схеме, учащиеся по очереди подходят к доске и записывают в фигурах виды гиперссылок.


Изучение нового материала (мини-лекция) с примерами веб-страниц

презентация к уроку Карта гиперссылок в веб-документах

Гиперссылки областей; теги, атрибуты гиперссылок Примеры использования ссылок файлы: mapa.html

Текст HTML Овсяник16122012.jpg


скачать архив пример карты гиперссылок

посмотреть видеоролик

"Демонстрация работы карты гиперссылок в браузере"

Demo mapa gipersilka ovsianik2012.gif 


Алгоритм работы с картой гиперссылок:

  • подключаем основную картинку как карту гиперссылок
  • открываем картинку в окне графического редактора (PAINT).
  • Записываем координаты областей

- для круга координаты центра и радиус;

- для прямоугольника координаты диагонали;

- для многоугольника – точки в
последовательности «обхода часовой стрелки»)


  • подключем картинку для перехода и описываем фигуру





Усвоение новых знаний и формирование новых навыков в создании гипертекстовых документов

Мотивация: Где вы любите отдыхать летом? Куда бы в Украине вы поехали с классом? попробуем создать интерактивную карту путешествий...


КРИТЕРИИ К ПРАКТИЧЕСКОЙ РАБОТЕ «Создание фотоальбома на веб-странице»
Начальный:
1) Заголовок на странице - 1 балл
2) Подключена карта-фон – 1 балл
3) Страница сохранена в формате HTML – 1 балл
Средний и достаточный:
4) Фон-карта описана как карта гиперссылок - 1 балл
5) При наведении на позицию города выполняется переход к фото этого города (таких городов 4-5) – 4 балла
6) Все фото корректно отображены – 1 балл
Высокий:
7) Переход по гиперссылке выполняется на новую страницу, где предусмотрена кнопка или ссылка возврата – 3 балла



Практическое задание Схема карты гиперссылок Овсяник16122012.jpg

  • Открыть папку Практическая работа 2_карта
  • Файл ukraine.jpg использовать как основной рисунок.
  • Фото городов использовать как вспомогательные рисунки
  • Создать интерактивную карту Украины, при наведении на выбранный город по щелчку отрывается фото города

архив к практической части урока Карта гиперссылок в веб-документах


Итоги урока

Сегодня на уроке, мы познакомились с картой гиперссылок на веб-странице. Встречались ли вы раньше с картами гиперссылок?

Где, по вашему мнению, можно использовать этот прием? В чем его достоинства? Есть ли недостатки?

Выставление оценок за практическую работу.

Рефлексия

Что нового вы узнали сегодня на уроке? Какие моменты у вас вызвали затруднение?

Домашнее задание

стр.113-118 читать

"Основи веб-дизайну" Пасечник О.Г, Пасечник О.В, Стеценко И.В., изд.BHV, 2009


Дополнительно

Ресурсы:

Фото городов Украины

фото городов Украины еще


Ресурсы в помощь учащемуся:

GF Studio.su

Учебник HTML

Стандартные ссылки

Личные инструменты
правила на Заповики
Сайт кафедры ИИТО
переход на сайт центра
 
Наша награда.