Главная
страница 1


Разработка HTML-проектов

(на примере разработки персонального сайта

и тестирующих программ)

Программа предпрофильного элективного курса

( 9 класс , 17 часов )
Пояснительная записка.

Бурное развитие сети Интернет предъявляет все большие требования к знанию учащихся в области Интернет-технологий. Одной из составляющих данной области является Web-дизайн. Именно на Web-дизайнеров возложена обязанность создания удобного, простого и понятного способа навигации в сети Интернет.

Курс «Разработка HTML-проектов» предназначен для углубления знаний учащихся 9-х предпрофильных классов. Он включает в себя большое количество описаний, конструкций программ.

В курсе рассмотрены все базовые аспекты современного Web-дизайна, от разработки общей структуры Web-страницы, создания Web-страницы при помощи языка разметки гипертекста HTML до применения языка сценариев Java Script и подготовки Web-ресурсов с динамической компоновкой.

Курс “ «Разработка HTML-проектов» рассчитан на 17 часов, однако его программа может корректироваться. Последовательность и объем изучения различных тем могут меняться в зависимости от уровня подготовки учащихся, методических позиций учителя, его взглядов на структуру курса.

Кроме того, изучение курса «Разработка HTML-проектов» поможет учителю подготовить творческие работы учащихся для участия на республиканском конкурсе работ по информационным технологиям среди 9 классов”КРИТ”.

Научить программировать, пользоваться его инструментальными средствами — значит создать условия для реализации творческих возможностей школьников. Важно, чтобы ученики поняли: процесс, совершенствования компьютерной подготовки, создание Web-страниц, —это творческий процесс, опирающий не только на знания, но и на выдумку, фантазию и некоторый художественный вкус.

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

В процессе работы динамика интереса к элективному курсу будет фиксироваться с помощью анкетирования на первом и последнем занятии; собеседований в процессе работы после выполнения каждого вида упражнений.

Курс поддержан программным обеспечением :



  • Microsoft Windows XP ;

  • Текстовый редактор Блокнот;

  • Dreamweaver MX v6.0;

  • Cryctal button;

  • Adobe Photoshop 7.0;

  • Ulead Gif Animator 5.05.

  • Xara3D v5.0


Организация практических работ

При изучении курса предполагается проведение непродолжительных практических и лабораторных работ , направленных на отработку навыков составления HTML-кода и его визуализации, а также –творческого практикума, ориентированного на получение целостного содержательного результата.

Образовательным продуктом ученика является : HTML-коды, эскизы Web-страниц, HTML-объекты, в том числе персональные Web-странички, а также составленные опорные конспекты по темам. Перспективным является организация занятий в виде творческой, где учащиеся выбирают тему конкретной проектной работы и работают над ней. Работа над проектом может продолжаться во внеурочное время дома или школьном компьютерном классе. Темы работ могут быть различными, например, создание персональной Web-страницы, или выпуск электронной версии школьной газеты, индивидуальный гороскоп и т.д.

Цель курса ««Разработка HTML-проектов» » - обеспечить освоение учащимися знаний, относящихся к Web-конструированию, выработать у них навыки построения несложных интерактивных Web-объектов, а также создание ориентационной и мотивационной основы для осознанного выбора физико-математического профиля обучения.

Для реализации этой цели необходимо решение следующих задач:



1. Углубить теоретические знания учащихся в области программирования.

2. Научить учащихся оперировать понятиями Web-программирования и применять их при создании собственного Web- объекта.

3. Развить интеллектуальное творчество учащихся и привлечь их к проектной, творческой деятельности.

4. Способствовать формированию учащихся индивидуальных образовательных потребностей.

Требования к уровню подготовки школьников.
В результате изучения курса ««Разработка HTML-проектов» » ученик должен

знать:

  • основные технологии создания, редактирования, сохранения, визуализации HTML- файла, с помощью современных программных средств

  • назначение и виды HTML-редакторов.

уметь:

  • оперировать базовыми понятиями Web-конструирования.

  • оптимизировать архивы и рисунки для публикации в Интернет;

  • публиковать свой сайт на службах бесплатного хостинга;

  • искать необходимую информацию в глобальной сети Интернет с помощью поисковых систем Rambler и Яndex;

  • использовать готовые HTML-коды, Java Script программы различных сценариев, оценивать их соответствие своему Web-объекту.

  • иллюстрировать учебные работы с использованием современных инструментальных средств программирования.

использовать приобретенные знания и умения в практической деятельности и повседневной жизни для:

  • поиска и отбора в сети Интернет информации, связанной с личными познавательными интересами.

  • эффективной организации индивидуального информационного пространства.

  • создания личных коллекций информационных объектов.

3. Результативность содержания курса :

  • Выставка творческих работ.

  • Выполнение общественно-полезных работ и заказов по созданию программ контролирующих тестов для учителей-предметников.

  • Участие в конкурсах по созданию Web-ресурсов .

Содержание обучения
Введение в Web-дизайн. Основные понятия Web-дизайна. Инструментальные средства и программы для разработки Web-ресурсов. HTML–редакторы для создания Web-страниц. Программы для создания анимаций : Macromedia Flash , Xara 3D v5.0 , Ulead Gif Animator v 5.05.

Раздел1. Создание Web-страниц с помощью MS Word 2003. Создание главной страницы . Обозреватель Internet Explorer. Просмотр Web-страниц с помощью обозревателя Internet Explorer.

Практические и лабораторные работы :

  • Создание первого HTML-документа с заголовком и форматированным текстом при помощи текстового процессора MS Word , сохранение в виде HTML-файла и последуюшая его визуализация с помощью Internet Explorer;

  • Создание гиперссылки на внутренний документ Web-страницы;

  • Создание первой персональной Web-страницы с помощью MS Word;

Раздел 2. Язык разметки HTML 4.x.

Первые шаги в HTML — язык гипертекстовой разметки . Общая структура языка HTML. Требования языка HTML. Базовые теги HTML . Цветовые спецификации языка и атрибуты элементов в HTML .Визуализация ( отображение ) HTML –кода браузером Microsoft Internet Explorer . Редакторы HTML –файлов. Создание HTML-файлов с помощью текстового редактора Блокнот.

Вставка мультимедийных объектов . Создание HTML-документов с графикой. Типы графических файлов (GIF, JPEG-файлы) . Конвертирование BMP изображения в GIF с помощью Adobe Photo Shop. Параметры дескриптора <IMG>. Использование атрибутов <alt> , heigt и width. Озвучивание Web-страницы. Добавление аудиофайла в HTML-документ. Дескрипторы <EMBED>.

Ссылки . Гипертекстовая ссылка. Элемент-якорь <a> с атрибутом target. Оформление ссылок.

Фреймы. Создание фреймов при помощи редактора Macromedia Dream Weaver. Синтаксис записи директорий <Frameset>. Атрибута <Frame>. Организация Web-страницы с помощью фреймов .

Практические и лабораторные работы :


  • Создание с помощью дескриптора для Web-страницы фонового звука;

  • Внедрение аудиофайла на Web-страницу с помощью гипермедийной ссылки , дескриптора и параметра CONTROLS;

  • Проектирование web-страниц с использованием фреймов;

  • Загрузка отдельных фреймов HTML-документами.

Раздел 3. Динамический HTML.

Введение в Java Script . Добавления сценариев Java Script в HTML-документ. Компоновка Web-страницы . Заголовок, рекламный баннер, логотип, элементы навигации ( ссылки навигации ),



Практические и лабораторные работы :

  • Составление HTML-кода для создания эффекта печати на пишущей машинке и его визуализация на Internet Explorer;

  • Составление HTML-кода для получения мигающего текста;

  • Составление HTML-кода вывода сообщения в строку состояния браузера;

  • Составление HTML-кода для определения текущей времени и даты;

  • Составление скрипта динамического приветствия в зависимости от времени суток;

  • Составление HTML-кода бегущей строки ;

  • Составление HTML-кода текстового меню с подсветкой;

  • Создание и вставка GIF –анимации на Web-страницу;

Творческая мастерская

  • Проектирование эскиза Web-страницы на бумаге;

  • Оформление титульной ( стартовой ) страницы Web-сайта;

  • Создание баннера с графическим заголовком;

  • Организация удобной навигации на Web-странице;

  • Составление HTML-кода тестовой контрольной работы по школьному предмету и внедрение его на Web-страницу.


Литература для учителей и учащихся
1. И.Семакин , Е Хеннер Информатика. М: БИНОМ .2004г.

2. В.Холмогоров. Основы веб-мастерства. Санкт-Петербург:

Изд-во.Питер.2003г.

3. В.Дригалкин. HTML в примерах М: Изд-во Диалектика.2003г.

4. В.Дунаев . Самоучитель Java Script.Санкт-Петербург:

Изд- во.Питер.2003г.

5. Д.К.Тиге DHTML и CSS.М: Изд-во. Д.М.К. 2003г.
Учебно – тематический план курса




Тема занятия

Кол-во

часов


Формы про ведения

Образовательный

продукт


1

2

3

4

5

1

2-3





Введение в Web-конструирова ние. Основные понятия Web-сайта . Инструментальные средства и программы для разработки Web-ресурсов. HTML–редакторы для создания Web-страниц.

Программы для создания анимаций Macromedia Flash , Xara 3D v5.0 , Ulead Gif Animator v 5.05.
Создание Web-страниц с помощью MS Word. Обозреватель Internet Explorer. Просмотр Web-страниц.

1

2


Лекция


Демонстра-

ция

Практикум

фронтальный




Составление опор

ного конспекта по

теме

Созданные учащимися web-cтраницы


4

5


6-7
8

9

10




1


Первые шаги в HTML — язык гипертекстовой разметки Общая структура языка HTML. Требования языка HTML. Базовые теги HTML ..Визуализация ( отображение ) HTML –кода браузером Microsoft Internet Explorer . Создание HTML-файлов.

Создание первого HTML-документа с заголовком и форматированным текстом при помощи текстового HTML-редактора Блокнот , сохранение в виде HTML-файла и последующая его визуализация с помощью Internet Explorer;

Создание первой персональной Web-страницы.

Вставка мультимедийных объектов . Создание HTML-документов с графикой. Типы графических файлов (GIF, JPEG-файлы)

Ссылки . Гипертекстовая ссылка. Элемент-якорь с атрибутом target. Оформление ссылок.

Озвучивание Web-страницы.

Добавление аудиофайла в HTML-документ.Дескрипторы .
2


1

1

2


1

1



1

3


Лекция

Групповой

практикум

Творческая

мастерская
Лаборатор-

ная работа


Лаборатор-

ная работа


Лаборатор-

ная работа


4

Составление опор

ного конспекта по

теме
Составленные уча

щимися HTML-документы


Творческие работы учащихся
Созданные учащимися Web-страницы

5

11

12- 16


17


Динамический HTML.

Введение в Java Script . Добавление сценариев Java Script в HTML-документ.

Компоновка Web-страницы. Заголовок, рекламный баннер, логотип, элементы навигации ( ссылки навигации ).Проектирование эскиза Web-страницы на бумаге.

Оформление титульной стра-ницы Web-сайта. Создание баннера с графическим заголовком. Способы бесплатного хостинга.

Выгрузка сайта на web-сервер narod.ru. Публикация сайта в Интернете.



Практикум по созданию Web-страниц

1. Составление HTML-кода для создания эффекта печати на пишущей машинке и его визуализация на Internet Explorer;

2.Составление HTML-кода для создания мигающего текста



3. Составление HTML-кода вывода сообщения в строку состояния браузера;

4. Составление HTML-кода для определения текущей времени и даты;

5. Составление скрипта дина- мического приветствия в зависимости от времени суток;

6. Составление HTML-кода бегущей строки .
Итоговое занятие. Защита твор-

ческих работ учащихся



1


5

1

Лаборатор-

ная работа

Практикум

Творческая мастерская



Составленные уча

щимися HTML-коды
Составленные уча

щимися HTML-коды


Творческие работы учащихся






Смотрите также:
Программа предпрофильного элективного курса
127.15kb.
1 стр.
Пояснительная записка. Программа элективного курса «Энергия будущего»
302.6kb.
1 стр.
Пояснительная записка Программа элективного курса «Всемогущий и занимательный синтаксис»
749.63kb.
4 стр.
Программа предпрофильного курса
130.06kb.
1 стр.
Программа элективного курса по литературе «Анализ художественного произведения»
181.08kb.
1 стр.
Программа элективного курса 11 класс 70 часов «Интерактивный курс подготовки к егэ по русскому языку»
2031.32kb.
11 стр.
Программа элективного курса по обществознанию. Глобальный мир в XXI веке Программа элективного курса по обществознанию
245.43kb.
1 стр.
Программа элективного курса «Карликовые государства Евразии»
74.8kb.
1 стр.
Пояснительная записка. Программа элективного курса «Нормы Международного Гуманитарного Права»
60.17kb.
1 стр.
Программа элективного предмета в 11 классе. «Русская литература конца ХХ начала ХХI века.»
206.5kb.
1 стр.
Программа элективного курса «час здоровья»
91.09kb.
1 стр.
Программа элективного курса «Безопасность работы в Интернет»
37.17kb.
1 стр.