Раздел программы: Создание Web-сайтов с использованием языка разметки гипертекстовых документов HTML (11 класс).
Тема урока: Создание навигационной карты на Web-странице. Работа рассчитана на 2 урока.
Цели урока:
- Повторение основных принципов построения сайтов, структуры HTML-документа.
- Изучение нового материала по теме “Создание навигационной карты на 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 >
<BODY bgcolor="#ff00ff">
<Font Color="blue">
<H1 Align ="center"><i>Имена героев на карте Челябинска </i></H1>
</Font>
<HR>
</ BODY >
</ HTML >
Прекрасно! Следующий шаг – вставка рисунка. (Один ученик у доски записывает команду и объясняет возможные параметры.)
<Img SRC="Обухов.jpg" Align="right">
Теперь нас интересует оконная структура файла index.htm – организация фреймов на Web-странице. (Один ученик у доски прописывает команды и объясняет их значение, остальные работают в тетради.)
<html>
<Head>
<title> Челябинск </title>
</head>
<frameset cols="70%,*" frameborder="Yes">
<frame name="leftframe" scrolling="No" src="leftframe.htm" bordercolor="#CCFF99" notesize>
<frame name="mainframe" scrolling="yes" src="frame_0.htm" marginwidth="10" bordercolor="#99FF33">
</frameset>
<noframes>
<body bgcolor="#FFFFFF"text="#000000">
</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 >
<Body background="Msite.jpg">
<Map Name="Map1">
<AREA Href="frame_M.htm" target="mainframe" ALT="Металлургический район" SHAPE="circle" COORDS="230,145,20">
…
(В примере прописываем гиперссылку только для одного района, остальные по аналогии учащиеся составят сами непосредственно при выполнении работы на ПК.)
…
</Map>
<Img SRC="Карта.jpg" width=100% usemap="#Map1">
</Body>
</ HTML >
4. Реализация разработанного Web-сайта на компьютерах.
Теперь вы знаете все, что необходимо для создания данного сайта. На ваших рабочих компьютерах рисунки для данной работы сохранены в папке “Имена героев на карте Челябинска”, также в этой папке содержатся файл Frame_M.htm, который может служить шаблоном для создания файлов по районам города, и текстовый документ “Описания”, из которого вы можете копировать необходимую информацию в HTML документы.
(Приложение 2) Если есть какие-то вопросы, то мы их обсудим, если нет – можете приступать к работе.
5. Проверка задания, подведение итогов урока.
Итогом нашей сегодняшней работы стал сайт, в котором мы использовали следующие конструкции:
- Форматирование Web-страниц;
- Вставка рисунков;
- Создание фреймов;
- Создание навигационной карты.
(Необходимо отметить учеников, которые хорошо справились с заданием, и указать ошибки, которые делали учащиеся при выполнении работы.)
6. Домашнее задание.
Разработка Web-сайта на свободную тему. Вам необходимо продумать структуру документа, подобрать материал, который вы хотите разместить на сайте. На следующем уроке вы должны будете реализовать ваши проекты на компьютере.