Создание Web-сайта "Имена героев на карте Челябинска"

Раздел программы: Создание Web-сайтов с использованием языка разметки гипертекстовых документов HTML (11 класс).

Тема урока: Создание навигационной карты на Web-странице. Работа рассчитана на 2 урока.

Цели урока:

Повторение основных принципов построения сайтов, структуры HTML-документа.
Изучение нового материала по теме “Создание навигационной карты на Web-странице”.
Стимулирование познавательного интереса учащихся к предмету “Информатика”.
Развитие умственной деятельности, памяти, умения логически мыслить.

Задачи урока:

Учебная – Повторение основных понятий раздела программы. Изучение нового материала по теме “Создание навигационной карты на Web-странице”.
Развивающая – развитие приемов умственной деятельности (обобщение, анализ, синтез, сравнение), памяти, творческой активности.
Воспитательная –стимулирование познавательного интереса учащихся, развитие уверенности в собственных силах.

Тип урока: комбинированный (изучение нового материала, практическая работа на ПК.)

План урока:

Орг. момент – 5 мин.
Разработка структуры нового Web-сайта – 15 мин.
Объяснение нового материала – 15 мин.
Реализация разработанного Web-сайта на ПК – 40 мин.
Проверка задания, подведение итогов урока – 10 мин.
Домашнее задание – 5 мин.

Ход урока

1. Организационный момент.

Здравствуйте! Мы продолжаем изучение темы создание Web-сайтов с использованием языка разметки гипертекстовых документов HTML. К сегодняшнему дню мы уже знаем, что такое сайт и чем он отличается от обычного текстового документа. Знаем, что Web-сайт можно создавать с помощью специальных программ и с помощью языка гипертекстовой разметки HTML. Вы знаете, что команды HTML задаются с помощью специальных элементов – тэгов, которые бывают парные и непарные. Знаете, что программы, написанные на языке HTML, имеют определенную стандартизированную структуру.

На предыдущих уроках мы изучали форматирование текста на Web-страницах, создание списков, размещение графики, создание таблиц, построение гипертекстовых связей, создание оконной структуры (фреймов).

Сегодня вы активизируете все эти знания для создания нового Web-сайта плюс узнаете, как создать на Web-странице навигационную карту.

2. Разработка структуры нового сайта. Повторение материала прошлых уроков.

Итак. Тема нашего сегодняшнего урока: Реализация навигационной карты на Web-странице на примере создания Web-сайта “Имена героев на карте Челябинска”.

Навигационные карты представляют собой гиперссылки, оформленные в виде активных областей на изображении.

Давайте посмотрим, что, собственно, является целью нашей работы на сегодня.

Теперь предлагаю вам самостоятельно составить схему данного сайта, определить его структуру. (Один ученик выходит к доске, остальные работают в тетради.)

Совместными усилиями мы получили следующую схему:

Теперь вспомним основную структуру HTML-документа на примере страницы “Главная” – файл Frame_0.htm. (Один ученик у доски прописывает команды и объясняет их значение, остальные работают в тетради.)

<HTML>

<HEAD>

<TITLE> Главная </Title>

</ HEAD >

<H1 Align ="center"><i>Имена героев на карте Челябинска </i></H1>

</Font>

<HR>

</ BODY >

</ HTML >

Прекрасно! Следующий шаг – вставка рисунка. (Один ученик у доски записывает команду и объясняет возможные параметры.)

Теперь нас интересует оконная структура файла index.htm – организация фреймов на Web-странице. (Один ученик у доски прописывает команды и объясняет их значение, остальные работают в тетради.)

<html>

<Head>

<title> Челябинск </title>

</head>

</frameset>

</noframes>

</body>

</html>

Это были известные вам конструкции, мы лишь записали их применительно к данной конкретной работе.

3. Объяснение нового материала.

А теперь новый материал – создание навигационной карты на Web-странице.

Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью параметра USEMAP элемента IMG.

MAP

Создает новую навигационную карту. Между начальным и конечным тэгами содержит один или несколько элементов AREA, определяющих навигационные области карты.

Параметры:

NAME - единственный и обязательный параметр. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью параметра USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.

AREA

Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тэгами элемента MAP. Не имеет конечного тэга.

Параметры:

SHAPE - определяет форму навигационной области. Возможные значения:

rect - прямоугольник;
circle - окружность;
poly - многоугольник.

В зависимости от выбранной формы меняется способ задания ее координат в параметре COORDS.

COORDS - определяет координаты навигационной области на карте. Способы задания координат для разных типов областей:

SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";
SHAPE="circle" COORDS="центр x, центр y, радиус";
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...";

HREF - определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов либо одно из зарезевированных имен

NOHREF - определяет область как неактивную (невосприимчивую к нажатию). Данный параметр противоположен параметру HREF и используется для отмены действия последнего.

ALT - определяет альтернативный текст-подсказку для данной области.

Используя полученные сведения, создаем страницу Карта – файл leftframe.htm

<HTML>

<HEAD>

<TITLE> Карта </Title>

</ HEAD >

…

(В примере прописываем гиперссылку только для одного района, остальные по аналогии учащиеся составят сами непосредственно при выполнении работы на ПК.)

…

</Map>

</Body>

</ HTML >

4. Реализация разработанного Web-сайта на компьютерах.

Теперь вы знаете все, что необходимо для создания данного сайта. На ваших рабочих компьютерах рисунки для данной работы сохранены в папке “Имена героев на карте Челябинска”, также в этой папке содержатся файл Frame_M.htm, который может служить шаблоном для создания файлов по районам города, и текстовый документ “Описания”, из которого вы можете копировать необходимую информацию в HTML документы.

(Приложение 2) Если есть какие-то вопросы, то мы их обсудим, если нет – можете приступать к работе.

5. Проверка задания, подведение итогов урока.

Итогом нашей сегодняшней работы стал сайт, в котором мы использовали следующие конструкции:

Форматирование Web-страниц;
Вставка рисунков;
Создание фреймов;
Создание навигационной карты.

(Необходимо отметить учеников, которые хорошо справились с заданием, и указать ошибки, которые делали учащиеся при выполнении работы.)

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

Разработка Web-сайта на свободную тему. Вам необходимо продумать структуру документа, подобрать материал, который вы хотите разместить на сайте. На следующем уроке вы должны будете реализовать ваши проекты на компьютере.