Федеральное агентство по образованию
Государственное образовательное учреждение высшего профессионального образования «Барнаульский государственный педагогический университет»
Краевое государственное общеобразовательное учреждение
Бийский лицей Алтайского края
HTML-конструирование
методический блок для педагогов профильного курса
Автор:
учитель информатики
Бийск - 2006
АННОТАЦИЯ
Цели курса:
- научить школьников представлять результаты проектной деятельности в виде полезных компьютерных приложений для просмотра на локальном компьютере или сайтов, используя средства языка HTML;
- развитие сотрудничества с учителями-предметниками, которые могли бы оказать школьникам направляющую помощь при сборе информации по выбранной проектной теме, и затем использовать их результаты в преподавании своего предмета.
Задачи курса:
- освоить средства языка HTML;
- формировать навыки работы в редакторе HomeSite;
- формировать навыки сканирования и обработки изображений для WEB средствами редактора PhotoShop;
- воспитывать в детях культуру программирования (построение удобочитаемого программного кода);
- способствовать воспитанию этических норм и эстетического вкуса;
- способствовать развитию познавательного интереса и расширению кругозора.
Ожидаемые результаты освоения курса
В результате изучения курса учащийся должен
ЗНАТЬ
- понятия сайта и гипертекстового приложения, их назначение и отличительные особенности;
- принципы работы с браузером и гипертекстом;
- структуру HTML-документа и основные конструкции языка HTML;
- назначение растровой графики, принципы формирования и обработки растровых изображений;
- основные правила построения Web-документов;
УМЕТЬ
- создавать HTML-страницы, форматировать текст, использовать списки;
- программировать гиперссылки на различные ресурсы, доступные в сети;
- обрабатывать изображения средствами графического редактора PhotoShop и включать их в содержимое HTML-документов;
- применять табличную разметку для размещения материалов на Web-странице;
- планировать и создавать собственные тематические сайты;
- использовать средства редактора HomeSite для ускорения и упрощения процесса Web-конструирования;
ИМЕТЬ ПРЕДСТАВЛЕНИЕ
- таблицах стилей и способах описания стилевых характеристик в HTML-коде;
- правилах написания удобочитаемого программного кода;
- видах компьютерной графики и различных форматах графических файлов;
- способах получения растровых изображений.
Тематический план
№ п/п | Тема | Часы |
1 | Основы Web: сайты, браузер, навигация. Просмотр Web-страниц. | 2 |
2 | Первое знакомство. Структура HTML-документа. Редактирование текста программы на языке HTML средствами редактора HomeSite 5.0. Цвет фона и цвет шрифта. Форматирование текста. Заголовки. Абзац. Принудительный разрыв строки. Выравнивание абзацев и фрагментов. Выделение и усиление текста. Изменение цвета и размера шрифта. | 4 |
3 | Программирование списков. Маркированный список. Нумерованный список. Вложенные списки. Горизонтальная линия. Авторское редактирование. Правила программирования. Структура, стиль и внешний вид программы. | 2 |
4 | Гипертекст. Гипертексты и браузеры. Переход внутри одного документа. Переход к другому документу. Переход к метке. Имена файлов и ссылки на них. | 2 |
5 | Как программировать картинки. Картинка в тексте. Картинка как ссылка. | 2 |
6 | Компьютерная графика в Интернете. Основы растровой графики. Графические форматы. | 2 |
7 | Обработка растровой графики в редакторе PhotoShop. Сканирование. Коррекция изображения. Размер. Поворот. Контраст. Выделение фрагментов. Применение фильтров. | 2 |
8 | Конструирование таблиц. Атрибуты команды TABLE. Атрибуты команды TR. Атрибуты команды TD (TH). Таблицы как средство для размещения информационных блоков, реализации графических коллажей. | 2 |
9 | Конструктор документов. Стиль оформления страниц. Структура сайта. Организация навигационных элементов. Анализ проектов учащихся прошлых лет. Требования к оформлению сайта. | 2 |
10 | Изображения-карты. Назначение. Технология создания в редакторе HomeSite. | 2 |
11 | Введение в технологию CSS. | 2 |
12 | Работа над проектом. | 6 |
13 | Завершение и защита индивидуальных работ | 4 |
Итого по теме | 34 |
МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ПРАКТИЧЕСКИМ ЗАНЯТИЯМ
Практические задания в рамках модуля «Изучение и освоение инструментария» носят закрепительный характер и направлены на выработку навыков использования изученных инструментальных средств Web-конструирования.
Практические задания в рамках модуля «Проектная работа учащихся» имеют индивидуальную направленность в зависимости от темы проекта каждого ученика.
Технические и программные средства
Для проведения практических занятий необходимо наличие рабочего места, оснащенного компьютером с установленным на нем браузером (предпочтительнее Microsoft Internet Explorer).
Для написания и редактирования программ предполагается использование редактора HomeSite5.0. Если же такая программа отсутствует, возможно использование какого-нибудь текстового редактора, поддерживающего кодировку Windows. Например, редактор Блокнот или встроенный редактор Far-менеджера.
Практическая работа к уроку 01 (Основы Web)
При выполнении практического задания первого урока (Основы Web) необходимо наличие интернетовской on-line связи для просмотра сетевых Web-ресурсов.
При выполнении 3-го пункта задания (Просмотр страниц при отключенной опции отображения картинок) нужно рассмотреть случаи, когда не указаны alt-надписи и размеры картинок.
Практические работы к урокам 02-06 и уроку 09 (изучение язака HTML)
Работа выполняется учащимися частично самостоятельно под руководством учителя или полностью самостоятельно по предложенному предписанию.
Справочно-информационные материалы
При выполнении практических заданий учащиеся активно используют Справочник по тегам и атрибутам (uroki\tegi.doc). Эти таблицы желательно раздать ученикам в печатном виде на первом занятии.
Раздаточный материал
Предписание к практической работе (в печатном или электронном виде). Это текстовый документ, который содержит описание последовательности действий по созданию документа или преобразованию исходного согласно образцу, сам образец и примечания, уточняющие ход выполнения работы.
Дидактическое обеспечение практических работ (в папке metod\praktika)
Тема практической работы | Файлы с текстом задания для ученика | Файлы с исходными данными | Файлы с результатом для учителя |
Форматирование текста. Абзацы и заголовки | zadanie02\zadanie02.doc | zadanie02\zadanie. htm | zadanie02\zadanie02.htmc |
Форматирование текста | zadanie03\zadanie03.doc | zadanie03\format. htm | zadanie03\index. htm |
Списки | zadanie04\zadanie04.doc | zadanie04\fon. gif | zadanie04\index. htm |
Гиперссылки | zadanie05\zadanie05.doc | zadanie05\zagadki1.htm | zadanie05\zagadki. htm zadanie05\otgadki. htm |
Вставка графических объектов | zadanie06\zadanie06.doc | zadanie06\06_sm1.gif zadanie06\06_sm2.gif zadanie06\06_sm3.gif zadanie06\06_sm4.gif zadanie06\06_sm5.gif zadanie06\06_sm6.gif zadanie06\fon. jpg | zadanie06\ streetball. htm |
Конструирование таблиц | zadanie09\zadanie09.doc | Картинки для работы, оригиналы и их миниатюры: zadanie09\pic\11.jpg zadanie09\pic\12.jpg zadanie09\pic\21.jpg zadanie09\pic\22.JPG zadanie09\pic\31.jpg zadanie09\pic\32.JPG zadanie09\pic\41.jpg zadanie09\pic\42.JPG zadanie09\pic\51.jpg zadanie09\pic\52.JPG zadanie09\pic\61.jpg zadanie09\pic\62.jpg | zadanie09\aisberg. htm zadanie09\galereya. htm (главная страница) zadanie09\ozero. htm zadanie09\ozero1.htm zadanie09\plag. htm zadanie09\poberege. htm zadanie09\snegn. htm zadanie09\zakat. htm |
Практические задания к урокам 07-08 (Графика)
Здание 7-го и 8-го уроков полностью зависит от наличия технических средств и навыков пользования ими. Это могут быть Web-камера, цифровой фотоаппарат, сканер и т. д. При отсутствии таковых иллюстрации можно подобрать из различных коллекций в соответствии с тематикой проекта.
Практические задания к урокам 11-12 (Стилевые определения, Изображения карты)
Данные задания являются частью проектной деятельности учащихся и также носят индивидуальный характер.
МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО ОРГАНИЗАЦИИ САМОСТОЯТЕЛЬНОЙ РАБОТЫ УЧАЩИХСЯ НАД ПРОЕКТОМ
При использовании метода проектов учитель ответственен не только за формирование у школьников необходимой базы знаний, но и правильную организацию применения полученных знаний, а также, за установку на новые знания, получаемые в процессе проектной деятельности.
Творческий процесс требует дополнительного машинного времени для учащихся в домашних условиях или в школьном компьютерном классе.
Чтобы организовать самостоятельную работу учащихся наиболее эффективным образом, учащимся предлагается:
Поэтапный план работы
План представлен в виде таблицы (Таблица 3 Карта самоконтроля по теме “Разработка проекта” - uroki\samokontrol. doc). В таблице указаны:
- этапы выполнения работы;
- требования к знаниям и умениям, необходимым на данном этапе;
- список рекомендуемых действий;
- контрольное задание, по которому ставится зачет за данный этап;
- сроки представления контрольных заданий (нужно заменить на конкретные даты);
- список источников справочной информации.
Источники справочной информации
- Требования к оформлению сайта - uroki\treb. doc;
- Справочник по тегам и атрибутам - uroki\tegi. doc;
- лекционные материалы данного курса;
- дополнительная литература;
- работы учащихся Бийского лицея (Works\start.htm). Эти работы могут стать источником идей и примеров не только удачной реализации конструкций языка HTML, но и типичных ошибок.
Консультационные занятия
Назначение консультационных занятий - периодический контроль деятельности зачетного характера, помощь в правильной интерпретации знаний, решение возникающих вопросов.
ПЕРЕЧЕНЬ УЧЕБНОЙ ЛИТЕРАТУРЫ
Основная литература
Дуванов А. А., HTML-конструирование // Информатика, 2000, №№ 21, 22.
Дуванов А. А., Назаметки Сидорова // Информатика, 2001, №№ 6,7,8,9,10,11.
Дуванов А. А., Кухня Сидорова // Информатика, 2000, № 48.
Дополнительная литература
Дуванов А. А., DHTML-конструирование // Информатика, 2002, №№ 27,28.
Создание Web-страниц: самоучитель// Санкт-Петербург: Питер, 1999.
Симонович С. В., Евсеев Г. А., Алексеев А. Г., Специальная информатика: Учебное пособие // М.:АСТ-ПРЕСС, 2002.
Мак-Клелланд Дик, PhotoShop 6 для Windows:Библия пользователя // М.: Диалектика, 2001.
