Элективный курс «Технология создания Web-страниц

Ярцевская муниципальная общеобразовательная средняя (полная) школа №10
г.Ярцево
Смоленская область
Элективный курс по информатике
для предпрофильной подготовки
Создаем и размещаем в Интернете
Web-сайт о городе Ярцево.
Вид элективного курса: предметно-ориентированный
Сергеева Диана Лазаревна
учитель информатики
средней школы №10
г. Ярцево
2007 г.
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Содержание:
1. Пояснительная записка
2
2. Содержание курса
7
3. Учебно-тематический план курса
10
4. Наименование образовательного продукта
12
5. Список литературы для учителя и учащихся
13
6. Учебный модуль «Создание Web-страницы»
15
7. Учебный модуль «Графические изображения и
49
таблицы на Web-странице».
8. Учебный модуль «Планирование и размещение
Web-сайта в Интернете».
75
9. Учебный модуль «Творческий проект»
91
1
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Элективный курс «Создаем и размещаем в Интернете Web-сайт о
городе Ярцево».
Пояснительная записка.
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе
Ярцево» является предметом по выбору для учащихся 9 классов средней
школы и рассчитан на 17 часов.
Курс включает в себя практическое освоение техники создания Webстраниц и Web-сайтов. Web-сайт – это наиболее популярное и доступное
средство представления информации в Интернете. Освоив технологию
создания
Web-сайтов,
учащиеся
смогут
пополнить
информационное
пространство Интернета.
Обучение построению Web-сайтов в курсе происходит на основе
материала о своей малой родине – городе Ярцево. Такое построение курса
призвано развить у учащихся познавательный интерес к истории своего
края.
В ходе курса активизируется деятельность учащихся по поиску
информации о г.Ярцево. Это способствует формированию любви сначала
к малой родине, а потом – к Отечеству.
С 90-х гг. ХХ в. проблеме патриотического воспитания учащихся уделяется
недостаточное внимание. В условиях идеологического вакуума привлечь
молодёжь пытаются различного рода экстремистские и националистические
организации.
Именно
они, используя
внешне
привлекательную
для
школьников атрибутику и громкую фразеологию, активно работают сейчас в
подростковой среде.
Построение курса на основе материала о своей малой родине способствует
повышению эффективности процесса патриотического воспитания учащихся.
Курс предполагает межпредметные связи с историей Смоленщины.
При обучении созданию сайтов затрагиваются вопросы оформления Webдизайна. Работа над созданием Web-дизайна – это ярко выраженное
творчество. Именно в сфере Web-дизайна учащиеся смогут проявить свои
творческие способности.
2
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Цели курса:
 Научить способу представления информации в WWW;
 Развивать познавательные интересы, коммуникативные, технические и
творческие
способности
учащихся
в
ходе
проектирования
и
конструирования сайтов;
 Помочь
определится
в
выборе
профессии
по
компьютерной
специальности «Создание HTML-документов. Основы Web-дизайна»;
 Способствовать формированию патриотических чувств учащихся.
Задачи курса:
 Сформировать
навыки
элементарного
проектирования,
конструирования и размещения Web-сайта;
 Научить использовать возможности языка HTML для создания Webсайтов
 Познакомить с основами Web-дизайна;
 Создать и разместить в Интернете Web-сайт на основе материала о
своей малой родине – городе Ярцево
В результате изучения курса учащиеся
могут узнать:
 Назначение Web-страниц и Web-сайтов;
 Основные возможности языка HTML для создания Web-страниц;
 Правила проектирования Web-сайта;
 Виды Web-хостинга;
 Правила оформления Web-дизайна.
могут научиться:
 Создавать Web-страницы;
 Создавать гипертекстовый документ, состоящий из нескольких
файлов;
3
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 Размещать графические изображения на Web-странице;
 Производить разметку Web-страницы с использованием таблицы;
 Размещать Web-сайт в службе WWW.
При изучении базовой программы по учебнику
«Информатика – 9»
предполагается краткое
Угриновича
Н.Д.
знакомство учащихся с
технологией создания Web-страниц. Но при этом остаются нераскрытыми
вопросы проектирования, оформления дизайна сайта и размещения его в
Интернете.
Курс позволяет учащимся получить знания по этим вопросам и раскрыть
свои способности в этой области.
К принципиально новому для учащихся материалу курса относится:
 Вставка таблицы в Web-документ
 Использование таблицы для разметки Web-страницы
 Правила оформления дизайна сайта
 Проектирование сайта
 Размещение сайта в Интернете
Обучение в курсе основано на проектно-модульной методике. Метод
проектов развивает способности к систематизации и структурированию
информации. Также данный метод позволяет развивать способность
самостоятельно получать знания. Такой подход к обучению актуален
в
современном мире, где информационный поток стремительно увеличивается.
Для реализации методики проектно-модульного обучения курс разбивается
на отдельные учебные модули. Каждый модуль охватывает изучение
отдельной информационной технологии или ее части. Изучение каждого
модуля начинается с постановки задачи – характеристики проекта, который
предстоит создать ученикам. С этой целью учитель проводит лекции,
мультимедийные презентации, Web-экскурсии. Далее проводится первичное
закрепление знаний в форме лабораторной работы на компьютере.
4
При
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
выполнении лабораторной
работы ученик опирается на
указания к ее
выполнению, разработанные учителем.
В ходе обучения учащимся предлагаются короткие (5-7 мин) тестовые
работы, направленные на проверку полученных знаний.
Изучение учебного модуля завершается созданием и защитой проектов,
разработанных учениками индивидуально или в группах (2-3 человека).
Проектно-модульная методика обучения обладает рядом преимуществ:
 позволяет учитывать индивидуальные особенности
и систему
интересов учащихся через реализацию предполагаемых проектов
 формирует учебные навыки (поиск информации, анализ, практическое
применение информационных технологий)
 воспитывает
у
учащихся
самостоятельность
выбора,
учит
целеполаганию, самоорганизации, самоконтролю и самооценке
Итоговый контроль реализуется в форме защиты творческих проектов,
отражающих полученные знания за весь курс обучения. Итоговый
творческий проект должен быть представлен в форме Web-сайта
с
информацией о г.Ярцево.
В начале курса каждому учащемуся предлагается самостоятельно в течение
всего времени изучения курса собрать материал для разработки проекта в
форме Web-сайта по интересующей его теме о г.Ярцево.
В конце курса отводятся занятия для реализации проекта на компьютере и
его защиты. Для оценки ученических проектов используется балльная
система. Качество ученических проектов оценивается по следующим
параметрам:
 практическая польза сайта
 удобство просмотра сайта
 творческие элементы при оформлении дизайна сайта
 емкость и лаконичность сайта
 качество доклада
5
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Для изучения данного курса необходимы персональные компьютеры с
установленным текстовым редактором
Блокнот
и браузером
Microsoft
Internet Explorer. Для отдельных занятий необходим доступ в Интернет. Для
демонстрации
проектов
и
для
объяснения
материала
желательно
использовать мультимедийный проектор.
Курс сопровождается методическими пособиями как для учителя
(методические разработки занятий), так и для учащихся (конспекты по
темам).
Курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево»
является результатом продолжения работы над
курсом «Создание Web-
страниц», разработанным мною годом раньше. Курс «Создание Webстраниц» был апробирован на базе средней школы № 10 г. Ярцево
Смоленской области в 2006/2007 учебном году. Курс
«Создание Web-
страниц» пользовался большой популярностью среди учащихся 9-х классов.
Многие из них впоследствии выбрали формой итоговой аттестации
творческие проекты. Ученики оформляли экзаменационные творческие
проекты в форме Web-сайта.
Два ученика представили свои работы на областной конкурс Web-дизайна в
2007 г и были отмечены дипломами за участие.
Это были работы
«Героическая оборона Смоленска в 1609-1611 г.» и «История Ярцева до XX
века». По окончании
областного конкурса Web-дизайна ребята решили
продолжить работу над созданием сайта с рассказом о истории г.Ярцева.
Ученики дополнили проект информацией о истории г.Ярцево в XX веке,
изменили дизайн сайта. В результате был создан Web-сайт «История
г.Ярцево», который ребята собираются представлять в декабре 2007 г. на
ярцевский конкурс информационных технологии.
В ходе работы над конкурсными
проектами у меня зародилась идея
создания элективного курса «Создаем и размещаем в Интернете Web-сайт о
городе Ярцево».
6
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
На основании потребностей учащихся и в связи с подключением школьной
компьютерной сети к
сети Интернет, я дополнила курс материалом по
размещению сайта в Интернете.
Содержание курса
Глава I. Создание Web-страницы (5 ч)
В этой главе вы узнаете, что такое Web-страница. Вы научитесь размещать
на Web-странице текстовую информацию. Также вы узнаете, как разработать
гипертекстовый документ, состоящий из нескольких файлов. Создадите свою
первую Web-страницу.
Основные понятия: гипертекст, HTML, тег, браузер, Web-страница,
заголовок документа, тело документа, теги форматирования шрифта, теги
форматирования абзаца, гипертекстовые ссылки, абсолютные адреса,
относительные адреса.
Содержание главы:
Что такое Web-страница и Web-сайт
Для чего нужен браузер и HTML
Теги HTML
Структура Web-страницы
Заголовок документа
Тело документа
Лабораторная работа «Создаем первую Web-страницу»
Текстовые блоки: заголовки, абзацы, перевод строки,
Разделительная линия
Лабораторная работа «Форматирование текстовых блоков на Web-странице.
Современное Ярцево»
Цвет текста
Размер шрифта
Лабораторная работа «Работа со шрифтами на Web-странице. Современное
Ярцево»
Гипертекстовые ссылки
7
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Разработка сценария гипертекстового документа, состоящего из нескольких
файлов
Лабораторная работа «Гиперссылки на Web-страницах. Знаменитые
ярцевчане.»
Творческий проект по теме «Знаменитые ярцевчане».
Глава II. Изображения и таблицы на Web-странице (4 ч)
В этой главе вы узнаете, как вставлять изображения и таблицы на Webстраницы. Научитесь управлять их видимыми размерами и расположением
на странице. Также вы узнаете, как использовать таблицы для оформления
Web-страницы. Дополните свою Web-страницу изображением и таблицей.
Основные понятия: формат графического файла, вставка изображения в
Web-документ, выравнивание изображения, размер изображения, таблица,
столбец таблицы, ячейка таблицы, форматирование таблицы
Содержание главы:
Рисунки и фотографии в Интернете
Параметры изображения
Теги ширины и высоты изображения
Теги расположения изображения
Лабораторная работа «Вставляем изображение на Web-страницу. Памятники
Ярцева»
Создание таблицы.
Форматирование таблицы.
Таблица как инструмент Web-дизайна.
Лабораторная работа «Используем таблицы на Web-странице. Герб Ярцева»
Лабораторная работа «Табличная разметка Web-страницы».
Творческая работа «Мои знаменитые земляки», «Ярцевчане, именами
которых названы улицы нашего города», «Знаменательные события на
ярцевской земле», «Ярцево во время Великой Отечественной войны»
8
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Глава IV. Планирование и размещение Web-сайта в Интернете (4 ч)
В этой главе вы узнаете о правилах конструирования Web-сайта и
размещении его в Интернете. Вы узнаете, как правильно оформить свой сайт,
чтобы он удовлетворял общепринятым критериям.
Основные понятия: структура сайта, веб-хостинг, регистрация, загрузка
файла, управление файлами, тестирование сайта.
Содержание главы:
Разработка структуры сайта
Сборка файлов Web-сайта
Удобство навигации
Особенности Web-дизайна
Корректность ссылок
Графика
Скорость загрузки
Бесплатный хостинг
Платный хостинг
Лабораторная работа «Оценка дизайна Web-сайта».
Выбор Web-сервера для размещения сайта
Размещение Web-сайта в Интернете
Лабораторная работа « Размещаем Web-страницу в Интернете»
Глава III. Творческий проект (4 ч).
В конце обучения вы должны будете выполнить итоговый проект. Вы уже
имеете опыт создания сайтов. Теперь все ваши знания и умения и
предыдущие разработки необходимо применить для создания комплексного
проекта – Web-страницы на выбранную тему. Web-страница разрабатывается
в группе или индивидуально. В любом случае от вас потребуется
спроектировать и изготовить свой Web-документ. Выполненную работу вам
необходимо будет защитить перед одноклассниками и учителем.
Основные понятия: тема и структура Web-страницы, проектирование,
изготовление, тестирование Web-страницы.
9
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Содержание главы:
Выбор темы творческого проекта
Поиск и сбор информации по выбранной теме
Распределение работы между разными учениками
(содержательная и техническая части)
Защита выполненных проектов.
Самооценка и оценка.
Учебно-тематический план курса.
№
Тема
Компьютерный практикум.
Создание Web-страницы (5 ч)
1
Принципы создания Web-страниц и
Лабораторная работа
Web-сайтов
«Знакомство с ключевыми
тегами языка HTML»
2
Форматирование текстовых блоков на
Лабораторная работа
Web-странице.
«Форматирование текстовых
блоков на Web-странице.
Современное Ярцево»
3
Работа со шрифтами
Лабораторная работа «Работа со
шрифтами на Web-странице.
Современное Ярцево»
4
Гипертекстовые ссылки
Лабораторная работа
«Гиперссылки на Webстраницах. Знаменитые
ярцевчане»
5
Контрольный творческий проект
Практическая работа
«Знаменитые ярцевчане».
«Знаменитые ярцевчане».
Изображения и таблицы на Web-странице (4 ч)
6
Вставка изображения на Web-
Лабораторная работа «Вставка
страницу. Управление размерами и
изображения на Web-страницу.
10
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
положением изображения на Web-
Памятники Ярцева»
странице.
7
Создание таблицы на Web-странице.
Лабораторная работа
«Используем таблицы на Webстранице. Герб Ярцева»
8
Таблица как инструмент Web-
Лабораторная работа
дизайна. Цвет и фон таблицы.
«Табличная разметка Webстраницы».
9
Контрольный творческий проект
Практическая работа
«Изображения и таблицы на Web-
«Изображения и таблицы на
странице»
Web-странице».
Планирование и размещение Web-сайта в Интернете (3 ч)
10
Основные этапы создания Web-сайта
11
Особенности Web-дизайна.
Лабораторная работа
«Оценка дизайна Web-сайта».
12
Размещение сайта в Интернете. Веб-
Лабораторная работа
хостинг.
«Размещаем Web-сайт в
Интернете»
Творческий проект(5 ч)
13
Формулировка темы. Поиск и сбор
Практическая работа
информации по выбранной теме.
«Используем поисковые
Использования для поиска
службы Интернет для поиска
информации поисковых служб
информации».
Интернет.
14
Работа над проектом
Практическая работа «Создание
итогового творческого
проекта».
15
Работа над проектом
Практическая работа «Создание
итогового творческого
11
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
проекта».
16
Работа над проектом.
Практическая работа
«Размещение Web-сайта в
Интернете».
17
Защита проекта
Наименование образовательного продукта.
Название проекта
Описание проекта
Web-сайт должен рассказывать о
Знаменательные события на ярцевской
знаменательных исторических
земле.
событиях на ярцевской земле.
Мои знаменитые земляки.
|Web-сайт должен повествовать о
ярцевчанах, оставивших
неизгладимый след в истории нашей
страны.
Ярцево в пламени Великой
Web-сайт должен рассказывать о
Отечественной Войны.
положении Ярцева и ярцевчан во
время Великой Отечественной войны.
Ярцевчане – Герои Советского Союза.
Web-сайт должен рассказывать о
наших земляках, заслуживших звание
Героя Советского Союза во время
Великой Отечественной войны или
войны в Афганистане.
Ярцево – развивающийся
Web-сайт должен рассказывать о
промышленный город.
работе современных промышленных
предприятий г.Ярцево и о
перспективах развития нашего
города.
12
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Web-сайт должен содержать
Ярцево в наши дни.
информацию о жизни современных
ярцевчан – культурной, спортивной,
общественной.
Свободная тема
Тема Web-сайта предлагается
учеником. Web-сайт должен
рассказывать о г.Ярцеве или о
ярцевчанах. Тема проекта должна
быть заранее согласована с учителем.
Список литературы для учителя.
1. Хуторский А.В., Орешко А.П. Технология создания сайтов. Профильная
школа №3, 2005
2. Гаевский А.Ю., Романовский В.А. – М.: Технолоджи – 3000, 2005
100% самоучитель по созданию Web-страниц и Web-сайтов.
3. Дунаев В.В. Основы Web-дизайна. Самоучитель.- СПб.: БХВ – Петербург,
2006.
4. Юркова Т.А., Ушаков Д.М. Путеводитель по компьютеру для школьника. –
СПБ.:Издательский дом Нева,2004.- 480с.
5.
Молодцов
В.А.,
Рыжикова
Н.Б.
Современные
открытые
уроки
информатики. 8-11-е классы. Изд. 2-е, дополненное и переработанное.Ростов н/Д: изд-во «Феникс», 2003.
6. Шелепаева А.Х. Поурочные разработки по информатике: 8-9 классы.- 2-е
изд., перераб. и доп. – М.:ВАКО, 2006.
7. Шелепаева А.Х. Поурочные разработки по информатике: базовый уровень
10-11 классы. – М.:ВАКО, 2006.
8. Ефименков И., Потапенков Н. Город на Вопи., Ярцево: Вести Привопья,
1996г.
13
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Список литературы для учащихся.
В помощь учащимся подготовлены методические пособия, в которых
содержится необходимый теоретический материал.
1. Методическое пособие для учащихся «Создание Web-страницы»
2. Методическое пособие для учащихся «Изображения и таблицы на Webстранице».
3. Методическое пособие для учащихся «Планирование и размещение Webсайта в Интернете».
14
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Учебный модуль «Создание Web-страницы».
Общеобразовательные цели:
 освоить технологию создания простейших Web-страниц с помощью
языка HTML;
 освоить технологию проектирования;
 закрепить навыки систематизации и структуризации информации.
Развивающие цели:
 формировать и развивать приемы умственного труда;
 развивать логико-алгоритмического мышление.
Воспитательные:
 формировать восприятие компьютера как инструмента обработки
информации;
 формировать познавательный интерес путем описания окружающего
мира автоматическими средствами представления данных;
 формировать патриотические чувства
Оборудование:
компьютерный
класс,
лицензированное
программное
обеспечение, мультимедийный проектор, экран.
Занятие 1. Принципы создания Web-страниц и Web-сайтов.
Цели занятия:
познакомить с назначением Web-страницы, Web-сайта, браузера и языка
разметки HTML; отразить структуру Web-страницы; показать ключевые
теги языка HTML.
План занятия.
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Учитель приветствует
Ученики готовятся к
учащихся, проверяет их
занятию, приветствуют
готовность к занятию.
учителя.
15
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Изучение
Урок начинается
Ученики слушают
нового
вступительным словом учителя,
объяснения учителя.
материала.
в котором отмечается, что
Самостоятельно
учащиеся приступают к
записывают конспект в
изучению нового курса и
тетради, опираясь на
сообщается, какие цели и задачи
вопросы учителя.
будут стоять перед школьниками
в процессе обучения и каких
результатов хотелось бы
достичь.
Учитель предлагает учащимся
вопросы для самостоятельного
составления конспекта в ходе
прослушивания лекции.
Проводит лекцию для
знакомства учащихся с новым
материалом
Закрепление
Учитель знакомит с целями и
Ученики выполняют
материала.
планом проведения
лабораторную работу за
лабораторной работы.
компьютером. При
Наблюдает за выполнением
необходимости
лабораторной работы.
обращаются за
Консультирует учащихся.
консультацией к учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
Ход занятия.
1 Орг.момент.
16
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
II. Изучение нового материала.
Ребята, сегодня на занятии вы познакомитесь с принципами создания Webстраниц и Web-сайтов. В заключительной части нашего занятия вы
выполните лабораторную работу по созданию своей первой Web-страницы.
Учащимся предлагается список вопросов, на которые они должны будут
самостоятельно записать ответы в тетради в ходе прослушивания лекции.
Вопросы учащимся:
 В каком виде представлена информация в службе WWW?
 Что представляет собой Web-сайт?
 Какой язык используют для создания Web-сайта?
 В чем преимущества HTML-документа?
 Как называют программы для просмотра Web-сайта?
При изучении темы нашего занятия мы будем обращаться
«История Ярцева до XX века». Этот сайт был
к Web-сайту
создан в прошлом году
учениками нашей школы по окончании элективного курса. Вам тоже по
окончании курса предстоит создать Web-сайт с рассказом о городе Ярцево.
Далее следует демонстрация сайта «История Ярцева до XX века».
Демонстрация сопровождается поясняющим рассказом.
Принципы создания Web-страниц и Web-сайтов.
Информация во всемирной паутине WWW хранится в виде Web-сайтов.
Web-сайт по своей структуре напоминает журнал, который содержит
информацию, посвященную какой-либо теме или проблеме. Как журнал
состоит из печатных страниц, так и Web-сайт состоит их компьютерных
Web-страниц.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на
которой имеются гиперссылки на его основные разделы (Web-страницы).
В нашем случае на титульной странице располагаются гиперссылки на
основные разделы сайта «История Ярцева до XX века»:
17
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 Первое упоминание о Ярцеве
 Ярцево – одна из деревень Духовщинского уезда
 Ярцево – фабричное село
 Источники
Гиперссылки дают возможность пользователю перемещаться с одного
документа на другие связанные с ним документы. Гиперссылкой может быть
слово или рисунок. При наведении на гиперссылку мыши её форма
изменяется на указательную. При щелчке мышью по ссылке происходит
переход на соответствующий документ. На сайте «История Ярцева до XX
века»
в качестве гиперссылок использованы как
рисунки, так и
словосочетания. ( Учитель демонстрирует различные формы представления
гиперссылок).
Гиперссылки также имеются на других Web-страницах сайта, что
обеспечивает возможность пользователю свободно перемещаться по сайту.
Например, после просмотра какого-либо раздела сайта «История Ярцева до
XX века» можно легко переместиться в любой другой основной раздел сайта.
Создание Web-страниц реализуется с использованием языка разметки
гипертекстовых
документов
HTML
(Hyper
Text
Markup
Language).
Технология HTML состоит в том, что в обычный текстовой документ
вставляются управляющие символы (теги). Учитель демонстрирует HTMLкод одной из Web-страницы сайта «История Ярцева до XX века».
Для прочтения Web-страницы используются специальные программы браузеры. Браузер, установленный на клиентском компьютере, имеет всю
информацию о последнем – конфигурация, настройки, разрешение экрана и
количество цветов, текущий размер окна, в котором выводится Webстраница. Опираясь на все эти данные и, следуя приказам тегов, браузер
преобразует
HTML-документ в красочную Web-страницу. Из отдельных
файлов добавляются картинки, подключается звук, видео и т.д.
Примеры браузеров: Microsoft Internet Explorer, Opera, Netscape Navigator.
Основными достоинствами HTML-документов являются:
18
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 Малый информационный объем
 Возможность
просмотра
на
персональных
компьютерах,
оснащенных различными операционными системами
Для создания Web-страниц используются простейшие текстовые редакторы.
В качестве такого редактора можно использовать приложение Windows –
Блокнот.
Перед созданием сайта необходимо разработать его проект. Для этого нужно
определить, сколько Web-страниц будет входить в сайт, какова будет их
тематика и как они будут связаны между собой.
Созданную Web-страницу необходимо сохранить в виде файла. Принято
сохранять титульный файл сайта, то есть тот, который первый
загружается в
браузер, под именем index.html. Рекомендуется создать для размещения сайта
специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Ключевые теги языка HTML
Любая
Web-страница
представляет
собой
набор
элементов
(абзацев,
заголовков, гиперссылок, рисунков и проч.).
Элемент – это конструкция языка HTML. Элемент состоит из трех компонент:
начального тега, содержимого и конечного тега. В некоторых элементах
конечный тег может быть опущен (в случае одиночных тегов).
Тег (tag-указатель,метка)- это код элемента HTML.
Теги определяют границы действия элементов и отделяют элементы друг от
друга. В тексте Web-страницы теги всегда заключаются в угловые скобки (<>).
Теги могут быть одиночными или парными. Для парных тегов обязательно
наличие открывающих <Имя тега> и закрывающих </Имя тега> скобок. Такая
пара тегов называется контейнером.
Например, HTML-код страницы помещается внутрь контейнера
< HTML>
…
</ HTML>.
По этим тэгам браузер распознает Web-документ.
19
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок заключается в контейнер <Head> … </Head> и содержит справочную
информацию о документе и название документа.
Основное содержание страницы помещается в контейнер < Body>…
</Body> и может включать текст, таблицы, графические изображения, ссылки
на другие страницы.
Приведем пример простейшего HTML-документа. (HTML-код страницы
записать на классной доске перед занятием).
<html>
<head>
<title> Название документа </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Здесь располагается содержимое Web-страницы.
</body>
</html>
Приведем назначение использованных в примере тегов языка HTML.
Учитель знакомит учеников с назначением ключевых тегов по таблице.
Таблица проецируется на экран с помощью мультимедийного проектора.
Ученики записывают назначение ключевых тегов в тетради.
Ключевые теги языка HTML.
Тег
Назначение тега
Этот тег указывает на начало
<HTML>
HTML-документа
Этот тег указывает на начало
<HEAD>
20
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
области заголовка Webстраницы. Служит для
формирования структуры
документа.
Элемент для размещения
заголовка Web-страницы.
<TITLE> Web-страницы </TITLE>
Строка отображается в
заголовке окна браузера.
Этот тег несет служебную
информацию и не
отображается в экране
браузера. В данном случае
идет речь о кодировке Webстранички. Вам достаточно
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
лишь каждый раз вставлять
этот тег в таком виде на свою
страничку. Тогда ваша
страничка будет использовать
кодировку Windows-1251,
наиболее распространенную
на сегодняшний день.
Конец области заголовка Web-
</HEAD>
страницы.
Начало содержания Webстраницы. Содержание Web-
<BODY>
страницы отразится в окне
браузера.
21
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Конец содержания Web-
</BODY>
страницы
Конец HTML-документа.
</HTML>
III. Закрепление материала.
Лабораторная работа «Знакомство с ключевыми тегами HTML»
Цель работы:
научиться создавать простейшую Web-страницу с применением
ключевых тегов HTML.
1
Запустить текстовый редактор Блокнот (Пуск – Программы –
Стандартные -Блокнот)
2
Набрать содержимое страницы.
<html>
<head>
<title> Первое знакомство с тегами HTML </title>
</head>
<body>
Работу выполнил ученик 9 А класса Иванов Петр
</body>
</html>
3
Выполнить команду меню (Файл - Сохранить). Файлу дать имя
index.htm или index.html
4
Запустить браузер и. задав команду (Файл – Открыть), найти и
запустить созданный файл.
Результат В заголовке окна браузера высвечивается Первое знакомство с
тегами HTML , в основной части окна браузера – Работу
выполнил …
22
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Итог занятия.
IV.
 Как представлена информация во всемирной паутине WWW?
 Какой язык мы начали изучать для создания Web-страниц?
 Как называются служебные слова языка HTML?
 Из каких частей состоит структура Web-страницы?
Занятие 2. Форматирование текстовых блоков на Web-странице.
Цели занятия:
 познакомить с тегами форматирования текстовых блоков на Webстранице
 познакомить с назначением атрибутов
 познакомить с атрибутом ALIGN и его возможными значениями
 познакомить с тегом HR и его атрибутами
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
Ученики
проверяет их готовность к
подготавливаются к
занятию.
занятию, приветствуют
учителя.
Актуализация Учитель задает вопросы
Ученики отвечают на
опорных
учащимся для повторения
вопросы учителя.
знаний.
основных знаний, полученных
на прошлом занятии.
Изучение
Учитель проводит лекцию для
Ученики слушают
нового
знакомства учащихся с новым
объяснения учителя,
материала.
материалом.
заполняют таблицу
Консультирует учеников при
«Основные теги
заполнении таблицы «Основные
форматирования
23
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
теги форматирования текстовых
текстовых блоков».
блоков».
Закрепление
Учитель знакомит с целями и
Ученики выполняют
материала.
планом выполнения
лабораторную работу за
лабораторной работы.
компьютером. При
Наблюдает за выполнением
необходимости
лабораторной работы.
обращаются за
Консультирует учащихся.
консультацией к учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
Ход занятия.
I. Орг.момент.
II. Актуализация опорных знаний.
Вопросы для повторения:
 В каком виде располагается информация в WWW?
 Что представляет собой Web-сайт?
 Что называют Web-страницей?
 Из каких частей состоит структура Web-страницы?
III. Изучение нового материала.
Учащимся сообщается, что в ходе прослушивания лекции они должны
заполнить таблицу «Основные теги форматирования текстовых блоков».
Основные теги форматирования текстовых блоков.
Элемент
Тег
Атрибуты
24
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
На предыдущем занятии мы научились создавать Web-страницу и
размещать на ней текст. Но текст пока еще черно-белый, выровнен по левому
краю. Сегодня мы познакомимся с тегами форматирования текстовых блоков
на Web-странице. Эти теги позволят нам выводить текстовые блоки в любой
части окна браузера: по левому краю, по правому краю, по центру, по
ширине.
Тег разбиения текста на абзацы (<P>…</p>).
Основные области Web-страниц заняты, как правило, текстом.
Текстовые блоки состоят из отдельных строк, объединенных в абзацы.
Абзацы начинаются с новой строки.
Для создания абзаца в языке HTML используются теги <P> и </P>, между
которыми помещается текст абзаца. Этот тег приводит к вставке одной
пустой строки. Таким образом, каждый новый абзац отделяется от
предыдущего пустой строкой.
Тег раздела (<DIV>).
Для структуризации текста, помимо абзацев, используются разделы. Они
задаются тегами <DIV>…</DIV>.
Разделы <DIV> удобны тем, что они позволяют выровнять любой фрагмент
текста, задать его размеры и расположить в нужном месте страницы. Раздел
<DIV>
может
содержать
различные
элементы
(текст,
графические
изображения, ссылки и т.п.).
Тег заголовка (Hx).
Зайдя на Web-страницу, посетитель прежде всего обращает внимание на
заголовки. Заголовки позволяют разделить Web-страницу на логически
законченные блоки и помогают посетителю сориентироваться в содержимом
документа. Именно по заголовкам посетитель получает представление о
содержании
основного
текста.
Поэтому
максимальную смысловую нагрузку.
25
заголовки
должны
нести
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Заголовки задаются парными тегами <Hx>…</Hx), где x=1,2,…,6. В HTML
определено шесть уровней заголовков от самого крупного H1 до самого
мелкого H6.
Тег разрыва строки (<br>).
Для разрыва строки используется одиночный тег <BR>. Этот тег заставляет
браузер перенести текст на новую строку и в отличие от тега <p> не
вставляет дополнительной пустой строки.
Атрибуты тегов.
Атрибуты – это компоненты тега, содержащие указание о том, как браузер
должен воспринять и обработать тег.
Атрибуты вписываются внутрь открывающегося тега. В теге может быть
несколько атрибутов. Тогда атрибуты отделяются друг от друга пробелами.
<Тег атрибут1= “значение” атрибут2= “значение”> текст </тег>.
Атрибут выравнивания текста (ALIGN).
Выравнивание текста по горизонтали задает атрибут ALIGN. Его
возможные значения:
Left по левому краю
Center по центру
Right по правому краю
Jastify по двум сторонам окна браузера (по ширине)
Атрибуты выравнивания можно добавлять к тегам, задающим заголовки,
абзацы, разделы. Например, <p align=right>
Горизонтальные линии на Web-странице (тег HR).
Различные части большого документа можно визуально отделить одну от
другой с помощью горизонтальных линий. Для создания таких линий в
HTML предусмотрен одиночный тег <HR>. По умолчанию стандартная
линия занимает всю ширину окна браузера, а её толщина составляет 2
пикселя.
Для
создания
горизонтальных
26
линий,
отличающихся
от
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
стандартной, применяются атрибуты тега <HR>. Этими атрибутами
изменяют свойства стандартной линии.
Выравнивание линии задается атрибутом align (как и в случае выравнивания
текстовых блоков).
Ширина линии формируется атрибутом width, который указывает значение
ширины в пикселях или в процентах. Например, тег <HR width=25>
определяет горизонтальную линию шириной 25 пикселей. Если
ширина
линии задается в процентах (ставится знак %), то ширина линии вычисляется
относительно ширины окна. Например, запись <HR width=25%> приводит к
отображению горизонтальной линии шириной в одну четвертую окна
браузера.
Задание длины линии в относительных единицах (процентах) более
предпочтительно, поскольку в этом случае линии будут одинаково
отображаться на пользовательских мониторах разного размера.
Толщина линии задается атрибутом size. Значение этого атрибута назначается
в пикселях в диапазоне от 1 до 175. Присвоение больших значений атрибуту
size не приводит к увеличению фактической толщины линии. Если значение
атрибута size не задано, по умолчанию отображается линия толщиной 2
пикселя.
Пример, <HR size=3>
По окончании изучения нового материала в тетрадях учащихся должна
быть записана таблица.
Основные теги форматирования текстовых блоков.
Элемент
Абзац
Тег
Атрибуты
<P>… </p>
<P align="left"> </p> выравнивание текста по левому
краю экрана.
<P align=“center”> </p> выравнивание текста по центру
27
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
экрана.
<P align="right"> </p> выравнивание текста по
правому краю экрана.
<P align="justify"> </p> выравнивание текста по
ширине.
<DIV>…</div>
Раздел
Принудительный
переход на новую
строку
<br>
Заголовки
<H#>
</h#>, где
#=1,2,3,4,5,6уровни заголовка
в порядке
убывания
размера.
Горизонтальная линия <HR>
<DIV align="left"> </div>
<DIV align=“center”> </div>
<DIV align="right"> </div>
<DIV align="justify"> </div>
<H1 align="left"> </h1>
<H1 align=“center”> </h1>
<H1 align="right"> </h1>
<H1 align="justify"> </h1>
<HR width=“25”> - ширина
линии
<HR size=“5”> - толщина
линии
IV. Закрепление материала.
Ребята, сейчас вы должны выполнить практическую работу для закрепления
полученных знаний. Практическую работу вы будете выполнять с помощью
специальных указаний для ее выполнения.
Лабораторная работа «Форматирование текстовых блоков на Webстранице. Современное Ярцево.»
Цель работы: научиться форматировать текстовые блоки на Web-странице.
1
Запустить текстовый редактор Блокнот (Пуск – Программы –
Стандартные -Блокнот)
28
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
2
Набрать содержимое страницы.
<html>
<head>
<title> Современное Ярцево </title>
</head>
<body>
<H1 align=center> Современное Ярцево. </h1>
<HR width=50% size=5> <div align=justify>
<p > Современное Ярцево расположено на территории
Смоленской области. Ярцево находится на реке Вопь(приток
Днепра) и простирается с запада на восток на 18 км. Река Вопь,
сады и скверы, лесопарк придают городу особый уют. Город
окружен богатыми лесными угодьями, что способствует
хорошему экологическому фону.</p>
<p> По данным Районного управления статистики за 2004 год, в
г.Ярцево проживает 52300 жителей. </p>
<p>Ярцево – город развивающийся. В городе действуют
крупные предприятия: хлопчатобумажный комбинат, чьи изделия
известны во многих странах мира; Ярцевская технологическая
компания, которая производит запасные части к автомобилям и
тракторам;
объединение «Аркада», которое занимается производством
технологической оснастки и металлоконструкций. В настоящее
время ускоренными темпами развивается литейно-прокатный
завод, созданный на базе бывшего завода «Двигатель». В городе
работают предприятия деревообработки, хлебозаводы и много
малых предприятий с различными видами деятельности.</p>
<p> В Ярцеве развитая торговая сеть: два крупных рынка,
торговые центры, универсамы, торговые оптовые базы.</p>
29
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
<p> По образовательному уровню город считается одним из
лучших в области: 10 средних школ, 4 колледжа, филиалы
института и университета, профессиональное училище, 16
детских садов.</p>
<p>Вот уже 15 лет ярцевчане пользуются услугами
телестудии «Пионер-ТВ», которая поставила перед собой задачу
развития телевидения в Ярцеве и успешно занимается
трансляцией как собственных программ, так и программ других
телекомпаний.</p>
<p> Ярцево связано автобусным сообщением и электричками со
Смоленском, до которого всего час езды.</p>
<p> Среди городов Смоленской области Ярцево всегда
выделялось своим зеленым нарядом и особым уютом.</p>
</div>
</body>
</html>
3
Выполнить команду меню (Файл - Сохранить). Файлу дать имя
index.htm или index.html
4
Запустить браузер и, задав команду (Файл – Открыть), найти и
запустить созданный файл.
Результат В заголовке окна браузера высвечивается Современное Ярцево, в
основной части окна браузера – текст, рассказывающий о
современном Ярцеве. Заголовок текста выровнен по центру и
отделен от основного текста горизонтальной чертой. Основной
текст выровнен по ширине.
V.
Итог занятия.
- Перечислите теги для работы с текстовыми блоками.
- Для чего предназначаются атрибуты тега?
30
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
- Для чего предназначен атрибут ALIGN, какие он может принимать
значения?
Занятие 3. Работа со шрифтами на Web-странице.
Цели занятия:
 познакомить с тегами форматирования шрифта на Web-странице
 познакомить с атрибутами тега <FONT> и их возможными
значениями
 познакомить с цветовой моделью RGB и форматами описания цвета
шрифта
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
Ученики
проверяет их готовность к
подготавливаются к
занятию.
занятию, приветствуют
учителя.
Актуализация Учитель проводит тестовый
Ученики отвечают на
опорных
опрос. Руководит проверкой
вопросы теста.
знаний.
тестовых работ учащимися.
Самостоятельно
проверяют свои работы
под руководством
учителя.
Изучение
Учитель раздает ученикам
Ученики самостоятельно
нового
литературу для
изучают теоретический
материала.
самостоятельного изучения
материал и заполняют
теоретического материала.
таблицу «Основные теги
Консультирует учащихся в ходе
форматирования шрифта».
изучения нового материала,
В случае необходимости
31
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
оказывает помощь в заполнении
обращаются за
таблицы «Основные теги
консультацией к учителю.
форматирования шрифта».
Закрепление
Учитель знакомит с целями и
Ученики выполняют
материала.
планом выполнения
лабораторную работу за
лабораторной работы.
компьютером. При
Наблюдает за выполнением
необходимости
лабораторной работы.
обращаются за
Консультирует учащихся.
консультацией к учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
Ход занятия.
I. Орг.момент.
II. Актуализация опорных знаний.
Ребята, мы с вами уже можем создавать Web-страницу и размещать на ней
текстовые блоки. Сейчас мы проведем небольшой тестовый опрос. Вам будут
розданы тестовые задания. Вы должны будете ответить на вопросы. Затем мы
вместе проверим правильность ваших ответов. Чем больше у вас наберется
правильных ответов, тем лучше вы усвоили материал. Если же на какие-то
вопросы вы дадите неверные ответы, то у вас будет возможность
проработать их еще раз в ходе лабораторной работы на сегодняшнем
занятии.
Вопросы к тестовому опросу:
1. Как называют программы, позволяющие просматривать Web-страницы?
А) Адаптеры
Б) операционные системы
В) браузеры
32
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
2. Что такое тег?
А. программа для соединения и дозвона
Б. управляющая последовательность символов для написания
Web-
документов на языке разметки гипертекста
В. протокол сети
3. Основное содержимое Web-страницы размещается в контейнере:
А. <HEAD>…</HEAD>
Б. <DIV>…</DIV>
В. <BODY>…</BODY>
4. Какой из следующих HTML-кодов разместит буквы по центру строки?
А. <P ALIGN= “left”> ABCD </p>
Б. <P ALIGN= “center”> ABCD </p>
В. <P ALIGN= “right”> ABCD </p>
5. Какой из следующих HTML-кодов выведет на экран заголовок самого
крупного размера?
А. <H1>Заголовок</h1>
Б. <H2>Заголовок</h2>
В. <H6>Заголовок</h6>
6. Тег <BR> предназначен для:
А. вывода горизонтальной линии в окне браузера
Б. переноса текста на новую строку
В. вставки пустой строки
III. Изучение нового материала.
В ходе самостоятельного изучения теоретического материал учащиеся
должны заполнить таблицу «Основные теги форматирования шрифта».
33
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Основные теги форматирования шрифта.
Элемент
Тег
Атрибуты
По умолчанию текстовое содержимое документа отображается основным
шрифтом, заданным в начальных установках браузера.
Для правильного отображения HTML-документа имеет значение
выбор
шрифтов. Шрифты различаются своей гарнитурой, то есть особенностями
своего оформления. В одной и той же гарнитуре обычно существует
несколько
начертаний
шрифта:
обычный,
полужирный,
курсив
и
полужирный курсив. Еще одним важным параметром шрифта является его
размер.
Элемент Font и его атрибуты.
Свойства шрифта можно определить с помощью тега Font и его атрибутов:
1. Size – размер шрифта
Значение атрибута size для самого мелкого шрифта равно 1, для самого
крупного – 7. Основному шрифту, используемому по умолчанию,
присваивается размер 3.
Пример, <font size=6> Шрифт размером 6 </font>
2. Face – гарнитура шрифта или список допустимых шрифтов.
Существует
множество
допустимых
гарнитур
шрифтов,
однако
отображаться будут лишь те шрифты, которых установлены на компьютере
пользователя. Если же разработчик сомневается в наличии какого-либо
шрифта у пользователей, он указывает в атрибуте face несколько шрифтов.
Например, <font face= “Helvetica,Arial”>Текст, отображаемый шрифтом
Helvetica. Если этот шрифт отсутствует, получим вывод шрифтом
Arial</font>
34
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
3. Color – цвет шрифта
Значения атрибута color можно записать в символьном или числовом
формате.
Задание значения атрибута color в символьном формате.
В HTML цвет можно задать, применяя символьный код, согласно которому
каждому цвету присваивается имя: red – красный, blue – голубой, black –
черный, white – белый green –зеленый, yellow-желтый, и т.п.
Например, <font color= red> Красный шрифт </font>
Задание значения атрибута color в цифровом формате цветовой модели
RGB.
Значение атрибута color можно задать в числовом формате цветовой модели
RGB. Цвет в модели RGB представляется как сумма трех базовых цветов:
Red (красный), Green (зеленый), Blue (синий).
В этой модели базовый цвет может иметь различную степень яркости,
Поэтому, можно смешивать цвета в различных пропорциях, варьируя яркость
каждой составляющей.
В
RGB-модели
цвет
можно
кодировать
с
помощью
трех
пар
шестнадцатеричных чисел. Каждая пара определяет «количество» основного
цвета в интервале от 00 до FF. Первое число определяет «долю» красного
цвета, второе число – зеленого цвета, а последнее задает синюю компоненту.
Например, шрифт темно-зеленого цвета можно задать следующим способом
35
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
<Font color=#008000>. Значение цвета начинается символом #, а запись
шестнадцатеричных чисел не зависит от регистра символов.
Таблица цветов.
Цвет
Имя цвета
Шестнадцатеричный
код
Черный
black
000000
Темно-синий
Navy
000080
Светло-серый
Silver
С0с0с0
Синий
Blue
0000ff
Малиновый
Maroon
800000
Сиреневый
Purple
800080
Красный
Red
Ff0000
Розовый
Fuchsia
Ff00ff
Темно-зеленый
Green
008000
Голубой
Teal
008080
Зеленый
Lime
00ff00
Бирюзовый
Aqua
00ffff
Оливковый
Olive
808000
Темно-серый
Gray
808080
Желтый
Yellow
Ffff00
Белый
White
Ffffff
Все перечисленные выше атрибуты могут быть перечислены совместно
внутри тега Font. Например, <FONT size=“4” color=“blue” face=“arial”> Это
шрифт arial размером 4, цвет синий.</font>
Задание начертания шрифта (элементы B,I).
Для задания различных начертаний шрифта используются следующие теги:
<B> …</B> полужирный текст
36
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
<I> …</I>
курсивный текст
<U> …</U> подчеркнутый текст
По окончании изучения нового материала в тетрадях учащихся должна
быть записана таблица.
Основные теги форматирования шрифта.
Элемент
Тег
Атрибуты
Определение типа,
<FONT>
размера и цвета шрифта. </font>
Выделение текста
полужирным шрифтом
<B> </b>
Выделение текста
курсивом
<I> </i>
Выделение текста
подчеркнутым
шрифтом.
<U> </u>
<FONT size=3> </font> абсолютный размер шрифта
(возможные значения от 1
до 7 в порядке возрастания).
<FONT face="arial"> </font>
- определение
определенного шрифта.
<FONT color="blue">
</font> - цвет шрифта
<FONT size=3 color="blue"
face="arial"> </font> - все
атрибуты могут быть
использованы совместно
внутри данного тега.
III. Закрепление материала.
Ребята, сейчас вы будете выполнять лабораторную работу, в ходе которой
нужно отформатировать шрифт на Web-странице. На прошлом занятии вы
создали Web-страницу, рассказывающую о современном Ярцеве. Webстраница включает в себя несколько абзацев. Сегодня нужно будет
отформатировать текст каждого абзаца определенным образом по вашему
37
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
усмотрению. Для форматирования текста нужно будет применять тег <Font>
и его атрибуты. Значения атрибутов тега <Font> для разных абзацев должны
быть различны.
Лабораторная работа «Работа со шрифтами на Web-странице».
Цель работы:
 научиться форматировать шрифт на Web-странице;
 научиться вносить изменения в HTML-код Web-страницы
Открыть HTML-документ index.htm, созданный на прошлом
1
занятии.
Выполнить
2
команду меню
Вид-Просмотр HTML-кода для
перехода в Блокнот.
Внести в HTML-код документа необходимые изменения для
3
форматирования шрифта (применить тег <Font> и его
различные атрибуты по вашему усмотрению).
Сохранить новый вариант страницы, выполнив команду Файл-
4
Сохранить.
Закрыть окно программы Блокнот командой
5
меню Файл-
Выход.
В браузере нажать кнопку Обновить и просмотреть заново
6
содержимое страницы.
Результат В окне браузера высветилось содержимое обновленной
страницы.
VI.
Итог занятия.
 Какой элемент HTML используют для форматирования шрифта?
 Какими атрибутами может обладать элемент <Font>?
 Каким способом можно задать цвет шрифта на Web-странице?
38
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Занятие 4. Гипертекстовые ссылки на Web-странице.
Цели занятия:
 научить создавать гиперссылки на Web-странице
 научить разрабатывать сценарий гипертекстового документа,
состоящего из нескольких файлов
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
Ученики
проверяет их готовность к
подготавливаются к
занятию.
занятию, приветствуют
учителя.
Изучение
Учитель предлагает учащимся
Ученики слушают
нового
вопросы, на которые они
объяснения учителя,
материала.
должны будут записать ответы в
записывают в тетради
тетради в ходе прослушивания
ответы на вопросы.
лекции. Проводит лекцию для
знакомства учащихся с новым
материалом.
Закрепление
Учитель знакомит с целью и
Ученики выполняют
материала.
планом проведения
лабораторную работу за
лабораторной работы.
компьютером. При
Наблюдает за ходом
необходимости
лабораторной работы.
обращаются за
Консультирует учащихся.
консультацией к учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
39
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Домашнее
задание.
Ход занятия.
I. Орг.момент.
II. Изучение нового материала.
В начале занятия учитель сообщает ученикам, что в ходе лекции им
предстоит записать конспект в тетради, опираясь на вопросы.
Вопросы для учащихся:
 Для чего предназначены гиперссылки на Web-странице?
 Что определяет начальная закладка? В какой форме она может быть
представлена?
 Что определяет конечная закладка?
 Какой тег используют для создания гиперссылки?
Гиперссылки. Ссылки и закладки.
Наиболее простой способ путешествия по Всемирной паутине – это
переходы по гиперссылкам. Гиперссылки, размещенные на Web-странице,
позволяют загружать в браузер другие Web-страницы, хранящиеся на
локальном компьютере или в Интернете.
Ссылка
характеризуется
двумя
точками,
называемыми
закладками.
Различают начальную закладку и конечную закладку.
Начальная закладка устанавливается на конкретном HTML-элементе и
определяет точку, из которой задается ссылка. Начальные закладки можно
размещать в тексте, в таблицах, изображениях и т.п. Обычно начальная
закладка выделяется относительно других элементов документа (цветом,
подчеркиванием и т.д.).
Конечная закладка
определяет точку назначения ссылки. В отличие от
начальной закладки, эта закладка может относиться не только к конкретному
40
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
HTML-элементу (тексту, изображению, аудио- или видеоклипу), но и к
программе или документу в целом.
Принципы создания ссылок.
Элемент привязки <A>. Атрибут href.
Для создания гиперссылки применяется универсальный тег <A> и его
атрибут HREF, указывающий в каком файле хранится загружаемая Webстраница. Тег <A> называют элементом привязки, или якорным элементом.
Название элемента <A> происходит от первой буквы слова ancor-якорь.
Элемент привязки <A> отображает содержимое ссылки на экране и
указывает браузеру, к какому ресурсу необходимо перейти при щелчке по
ссылке. Для этого внутри тега <A> ставится обязательный атрибут href , с
помощью которого определятся целевой ресурс (конечная закладка), а
внутри контейнера <A> размещается содержимое ссылки – текстовые
символы или графические элементы. Место расположения ссылки в
документе
(начальная закладка) определяется непосредственно местом
вставки элемента <A>.
Пример ссылки
<A href= “адрес_перехода”> текст ссылки </A>.
Содержимое ссылки в данном случае – это выделенный «текст ссылки»,
щелчок по которому инициируется переход.
Текст ссылки должен быть кратким и содержательным, чтобы пользователь
представлял, какую информацию он получит, перейдя по данной ссылке.
Адрес перехода URL может быть абсолютным и относительным.
Абсолютные адреса содержат все компоненты, необходимые для того, чтобы
браузер смог найти Web-страницу в необъятной паутине WWW. Для этого
абсолютный адрес должен содержать протокол, узел, папку и файл.
Абсолютный адрес имеет следующую структуру:
протокол://адрес_ сервера/адрес файла
Адрес файла может быть составным, т.е. кроме имени файла содержать путь
к нему; элементы пути разделяются прямым слэшем (/).
41
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Абсолютный адрес используется, если загружаемая в браузер Web-страница
размещена в Интернете.
Пример ссылки с абсолютным адресом
href= “http://www.yartsevo.ru/narod/narod1.htm”> Население Ярцево
<A
</A>.
Если загружаемая
в браузер Web-страница размещена на локальном
компьютере в той же папке, то вместо адреса указывается просто имя файла,
например <A
href=“narod.htm”> Население Ярцево </A>. Это пример
относительного адреса.
III. Закрепление материала.
Лабораторная работа «Гиперссылки на Web-странице. Знаменитые
ярцевчане».
Описание работы. Ребята, сегодня мы начинаем работу над созданием
гипертекстового документа, рассказывающего о знаменитых ярцевчанах.
На сегодняшнем занятии вы должны будете выполнить лабораторную
работу по созданию документа с рассказом о знаменитом математике А.Г.
Куроше.
На следующем занятии вы самостоятельно дополните гипертекст
рассказом о ярцевчанах, заслуживших звание Герой Советского Союза.
Материал для работы вы должны будете найти заранее. Завершенный
проект «Знаменитые ярцевчане» одновременно будет являться вашим
контрольным
проектом по изученному модулю
«Создание Web-
страницы».
Лабораторная работа «Гиперссылки на Web-страницах. Знаменитые
ярцевчане.»
Цель работы: научиться создавать гипертекстовый документ, состоящий
из нескольких файлов.
1
Создать папку «Знаменитые ярцевчане»
42
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
2
В папке «Знаменитые ярцевчане» создать файлы под именами
index.htm, curosh.htm, geroi.htm
3
Открыть HTML-документ index.htm
4
Выполнить команду меню Вид-Просмотр HTML-кода для перехода
в Блокнот.
5
Набрать содержимое страницы.
<html>
<head>
<title> Знаменитые ярцевчане </title>
</head>
<body>
<div align=“center”>
<H1 > <font color=“red”>Знаменитые ярцевчане </font></h1>
<HR width=60% size=5>
<br> <A href= “curosh.htm”>Крупнейший математик </A>
<br><A href= “geroi.htm”> Ярцевчане-Герои Советского Cоюза </a>
</div>
</body>
</html>
6
Выполнить команду меню (Файл – Сохранить).
7
Вернуться в папку «Знаменитые ярцевчане»
8
Открыть HTML-документ curosh.htm
9
Выполнить команду меню Вид-Просмотр HTML-кода для перехода
в Блокнот.
10
Набрать содержимое страницы.
<html>
<head>
<title> крупнейший математик </title>
</head>
43
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
<body>
<H2 align="center"> <font color=“green”>Курош А.Г. </font></h1>
<font face="Arial" size=4>
<p>
Один из крупнейших математиков-алгебраистов нашего времени
Александр Геннадьевич Курош родился 19 января 1908 года в городе
Ярцеве. Его отец работал конторщиком на хлопчатобумажной
фабрике, а мать в школе.
</p>
<p> С 1916 по 1923 годы А.Курош учился в Ярцевской советской
единой трудовой школе, совмещая учебу с работой.
</p>
<p> В 1924 году он поступил на физико-техническое отделение
педагогического факультета Смоленского университета, который
окончил в 1928 году. С 1930 года А.Г.Курош работает в Московском
университете и сразу оказывается у истоков формирования новой
Московской теорико-групповой школы, ставшей позже школой
общей алгебры.
Педагогическая работа А.Куроша совпадает с началом его бурной
творческой работы в области современной алгебры. Напечатанная в
1934 году статья по теории групп приносит ему мировую
известность.
</p>
<p>С 1937 года А.Г.Курош – доктор физико-математичеих наук,
профессор университета. Он достиг существенных успехов во
многих разделах современной алгебры, являясь автором наиболее
исчерпывающий в мировой литературе монографии по теории групп,
переведенной на ряд иностранных языков. Его учебник «Курс
высшей алгебры», вышедший в свет первым изданием в 1946 году,
44
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
стал основным учебником по алгебре для университетов.
</p>
<p> Педагогическая работа Александра Геннадьевича, начавшаяся в
1930 году, не прерывалась ни на один год и шла до самого конца
жизни.
</p>
<p>А. Г. Курош — лауреат премии им. П. Л. Чебышева и
Государственной премии СССР, присужденной ему за учебники для
вузов (посмертно). Был почетным членом Уральского и Московского
математических обществ, почетным доктором Лионского
университета. Награжден орденами Трудового Красного Знамени,
«Знак Почета» и медалями.
</p>
<p> Умер А.Г.Курош 18 мая 1971 года.</font></p>
<p align=center>
<br> <A href="index.htm">На главную </A>
<br><A href="geroi.htm"> Ярцевчане-Герои Советского Cоюза </a>
</p>
</body>
</html>
11
Выполнить команду меню (Файл – Сохранить).
12
Вернуться в папку «Знаменитые ярцевчане»
13
Запустить файл index.htm
14
Щелкнуть по ссылке Крупнейший математик
Рез Титульная страница содержит две ссылки:
уль
 Крупнейший математик
тат
 Ярцевчане - Герои Советского Союза
45
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
При переходе по ссылке Крупнейший математик открывается
документ, рассказывающий о А.Г.Куроше
VII. Итог занятия.
- Ребята, сегодня мы научились создавать гипертекстовые документы,
состоящие из нескольких файлов.
 Как осуществляется переход между файлами HTML-документа?
 Какой HTML-элемент используется для создания ссылки? Каковы
атрибуты этого элемента?
V.
Домашнее задание.
Найти материл о ярцевчанах, заслуживших звание Герой Советского Союза.
Материал будет использован на следующем занятии для создания
контрольного творческого проекта по модулю «Создание Web-страницы».
Занятие 5. Контрольный творческий проект
«Знаменитые ярцевчане».
Цели занятия:
 Закрепить умение создавать простейшие Web-страницы
 Проверить знания учащихся, полученные в ходе изучения модуля
«Создание Web-страницы»
План занятия
Этапы занятия
Орг.момент
Деятельность учителя
Деятельность учащихся
Учитель приветствует
Ученики готовятся к
учащихся, проверяет их
занятию, приветствуют
готовность к занятию.
учителя.
Вступительное
Учитель знакомит учащихся
Учащиеся слушают
слово учителя.
с целями создания проекта.
разъяснения учителя.
Формирует группы по
Объединяются в группы
выполнению проекта.
для создания проекта.
46
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Разрабатывают структуру
Web-страницы.
Выполнение
Учитель наблюдает за
Ученики самостоятельно
творческого
работой учащихся по
работают над контрольным
проекта.
созданию проекта.
творческим проектом по
выбранной теме.
Защита
Учитель просматривает
Ученики демонстрируют
творческого
творческие проекты
свои проекты,
проекта.
учащихся. Оценивает
сопровождая
творческие проекты по
демонстрацию рассказом.
критериям.
Просматривают проекты
других учащихся.
Учатся оценивать проекты
по критериям.
Итог занятия
Учитель выделяет лучшие
Ученики выделяют
проекты.
лучшие, на их взгляд,
проекты.
Ход занятия.
I. Орг.момент.
II. Вступительное слово учителя.
Ребята, мы закончили изучать модуль «Создание Web-страницы». Сегодня
вы должны показать, чему научились на этом этапе. Для этого нужно
закончить начатую на прошлом занятии работу по созданию проекта
«Знаменитые ярцевчане».
На прошлом занятии вы создали три файла: index.htm, curosh.htm, geroi.htm.
Работа над файлами index.htm, curosh.htm уже закончена. Сегодня нужно в
файле geroi.htm разместить информацию о ярцевчанине, заслужившем звание
Героя Советского Союза. Вы сами определили, о ком будете рассказывать и
47
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
подготовили
материал.
Созданная
вами
страница
должна
обладать
гиперссылками для перехода на титульную страницу и страницу с рассказом
о А.Г.Куроше.
Теперь примемся за реализацию проекта «Знаменитые ярцевчане».
III. Выполнение творческого проекта.
Ученики самостоятельно заканчивают работу над проектом «Знаменитые
ярцевчане».
IV. Защита творческого проекта.
Ученики
демонстрируют
свои
творческие
проекты.
Демонстрация
сопровождается рассказом о ярцевчанах, заслуживших звание Героя
Советского Союза.
Учитель
оценивает
продемонстрированный
проект
по
следующим
критериям.
Критерии для оценки творческого проекта.
 Содержание Web-страницы соответствует заявленной теме
 Наличие заголовка на странице
 Информация структурирована в отдельные логические блоки
 Цветовая палитра не утомляет сочетанием цветов
 Единый стиль оформления страниц
 Гармоничное расположение элементов на странице
 Правильная работа системы навигации.
V. Итог занятия.
Ребята, подведем итоги нашей работы. Мы просмотрели разные проекты.
Среди них хочется особо отметить работу…
Назовите лучшую, на ваш взгляд, работу.
48
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Учебный модуль «Изображения и таблицы на
Web-странице».
Общеобразовательные цели:
 освоить технологию вставки изображения на Web-страницу;
 освоить технологию создания таблицы на Web-странице;
 освоить технологию проектирования;
 закрепить навыки систематизации и структуризации информации.
Развивающие цели:
 развивать логико-алгоритмическое мышление;
 развивать творческую активность.
Воспитательные:
 формировать восприятие компьютера как инструмента обработки
информации;
 формировать коммуникативные качества личности;
 формировать патриотические чувства.
Оборудование: компьютерный класс, лицензированное программное
обеспечение, мультимедийный проектор, экран.
Занятие 6. Вставка изображения на Web-страницу. Управление
размерами и положением изображения на Web-странице.
Цели занятия:
 познакомить с форматами графических файлов для WWW;
 научить вставлять изображение на Web-страницу с помощью тега
<IMG>;
 научить управлять размерами и положением изображения на Webстранице с помощью атрибутов тега <IMG>.
49
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
Ученики готовятся к
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Изучение
Учитель предлагает учащимся
Ученики слушают
нового
задание, которое они должны
объяснения учителя,
материала.
будут выполнить в ходе
письменно выполняют
прослушивания лекции.
задание. Самостоятельно
Проводит лекцию. Оказывает
заполняют таблицу
помощь при заполнении
«Атрибуты изображения».
таблицы «Атрибуты
изображения».
Закрепление
Учитель знакомит с целями и
Ученики выполняют
материала.
планом выполнения
лабораторную работу за
лабораторной работы.
компьютером. В случае
Наблюдает за выполнением
необходимости
лабораторной работы.
обращаются к учителю за
Консультирует учащихся.
консультацией.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
Ход занятия.
I. Орг.момент.
II. Изучение нового материала.
Учащимся сообщается, что в ходе лекции они должны будут письменно
выполнить задание.
50
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Задание для учащихся.
 Перечислите форматы изображений, которые можно использовать на
Web-странице.
 Запишите пример тега вставки изображения.
 Заполните таблицу «Атрибуты изображения».
Атрибут
Описание
Пример
изображения
Ребята, мы закончили изучать модуль «Создание Web-страницы».
Теперь мы можем создавать простейшие Web-страницы, не содержащие
графических изображений. Однако, использование изображений на Webстраницах, безусловно, улучшает восприятие документов.
Форматы графических файлов для WWW.
Данные об изображениях хранятся в файлах графических форматов.
Существует достаточно много форматов, обеспечивающих организацию
графических данных (BMP,GIF,TIFF, JPEG и т.п.). Но посетитель вашей
страницы увидит графическое изображение лишь в том случае, если его
браузер поддерживает данный графический формат. Поэтому изображения
создаются в форматах, поддерживаемых большинством браузеров. К таким
форматам относятся:
 GIF, имеющий расширение .gif
 JPEG, имеющий расширение .jpg или .jpeg
 PNG, имеющий расширение .png
Вставка изображения (элемент IMG).
Вставка изображения на Web-страницу из файла графического формата
выполняется
одиночным
тегом
51
<IMG>
(от
английского
image-
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
изображение)
с
указанием
адреса
файла
в
качестве
значения
обязательного атрибута SRC (от слова source – источник):
<img src= “адрес графического файла”>
Адрес графического файла – это либо URL-адрес, либо имя файла,
возможно с указанием пути. Путь может быть абсолютным или
относительным. Если в качестве адреса файла указано только имя файла,
то браузер будет искать его в той же папке, в которой расположен
вызывающий его HTML-документ.
Например,
<img src = “http://www.yartsevo.ru/narod/picture.gif”>
<img src = “С:/narod/picture.gif”>
<img src = “picture.gif”>
Размеры изображения на экране (атрибуты width и height).
Для указания размеров изображения на экране предназначены атрибуты
width (ширина) и height (высота).
Значения размеров изображения задаются обычно в пикселях.
Например, <img src = “picture.gif” width=50 height=30>
Можно также задать ширину и высоту в процентах относительно
размеров внешнего элемента.
Например, <img src = “picture.gif” width= “40%” height= “20%”>
Если
не
указаны
размеры
изображения,
то
браузер
использует
действительные размеры изображений, хранящихся в графических
файлах.
Выравнивание изображения (атрибут align).
Положение
(выравнивание)
изображения
относительно
других
элементов документа можно определить с помощью атрибута align.
Для выравнивания по вертикали предусмотрены следующие значения
атрибута align:
 Bottom – нижняя граница рисунка выравнивается по нижнему краю
строки (это значение устанавливается по умолчанию);
52
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 Middle – середина рисунка выравнивается по нижнему краю
текстовой строки;
 Top – верхняя граница изображения выравнивается по верхнему
краю текста.
Для выравнивания изображения по горизонтали применяются следующие
значения атрибута align:
 Left – выравнивание изображения по левому краю страницы; текст
и другие элементы обтекают изображение справа;
 Right – выравнивание изображения по правому краю страницы и
обтекание слева.
Поля и рамки вокруг изображений.
По умолчанию изображение встраивается почти вплотную с текстом или
другими элементами документа, что может быть некрасиво. Чтобы этого
избежать, можно задать пустые поля вокруг иллюстрации. Поля создаются
с помощью атрибутов vspace для верхнего и нижнего полей, hspace для
левого и правого полей в теге <img>. Значения этих атрибутов
указываются в виде целых чисел, определяющих размеры полей в
пикселях.
Например, <img src = “picture.jpg” align=left hspace=20 vspace=10>
Для задания черной рамки вокруг изображения служит атрибут border,
числовое значение которого определяет толщину рамки в пикселях. Если
этот атрибут не указан, то рамка не отображается.
Альтернативный текст.
Часто для ускорения загрузки Web-страницы пользователи в настройках
своего
браузер
отключают
отображение
рисунков.
На
месте
отсутствующего рисунка можно разместить текст, который будет
пояснять смысл рисунка (альтернативный текст).
Для реализации этой возможности нужно в тег <IMG> ввести атрибут alt.
В качестве значения этого атрибута подставляется альтернативный текст,
который заключается в кавычки.
53
Обычно альтернативный текст
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
указывает краткое название изображения и/или размеры графического
файла.
Например, <img src = “picture.jpg” align=left alt= “Фотография города
Ярцево 12 Kb”>
Таблица «Атрибуты изображения».
Атрибут
Описание
Пример
избражения
width
Задает горизонтальный размер
<img src = “picture.gif”
изображения внутри окна
width=50>
браузера.
height
Задает вертикальный размер
<img src = “picture.gif”
изображения внутри окна
height=30>
браузера.
align
Задает выравнивание
изображения относительно
<img src = “picture.jpg”
align=top>
текста: относительно текста
выровнена верхняя часть
изображения – top, нижняя –
bottom, средняя –middle, левая –
left, правая - right
vspace
hspace
border
Задает добавление верхнего и
<img src = “picture.jpg”
нижнего пустых полей.
vspace=10>
Задает добавление левого и
<img src = “picture.jpg”
правого пустых полей.
hspace=20>
Задает толщину рамки вокруг
<img src = “picture.jpg”
изображения. Измеряется в
border=3>
пикселях.
alt
Задает текст, заменяющий
54
<img src = “picture.jpg”
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
изображение в том случае, если
alt=“картинка”>
браузер не воспринимает это
изображение.
III. Закрепление материала.
Лабораторная работа «Вставляем изображение на Web-страницу.
Памятники Ярцева».
Цель работы:
 научиться вставлять графическое изображение на Web-страницу;
 научиться управлять размерами и положением графического
изображения на Web-странице.
1
Создать папку Памятники Ярцева
2
Скопировать файлы picture1.jpg и picture2.jpg c Рабочего стола в
папку Памятники Ярцева.
3
В папке Памятники Ярцева создать HTML-документ под именем
index.htm
4
Набрать содержимое HTML-документа под именем index.htm.
<html>
<head>
<title> Памятники Ярцева </title>
</head>
<body>
<p align=center>
<font size=4> Большинство ярцевских памятников связано с Великой
Отечественной войной.
</p>
<H3 align="center"> <font color=“#0033FF”>Памятник защитникам
Ярцева в 1941 г. </font></h3>
55
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
<img src=picture1.jpg align=right hspace=20 vspace=10 border=2
alt="Памятник защитникам Ярцева в 1941 г.">
<p align=justify>На правом берегу реки Вопь – мемориал защитникам
города. Еще в 1967 году там был установлен памятный знак. В 1980
году памятник был реконструирован и дополнен. Ныне этот
мемориал состоит из стелы, увенчанной изображением ордена
Отечественной войны, фигуры бойца, увлекающего боевых друзей в
атаку. На облицованной гранитной плите надпись: «Здесь, на берегах
реки Вопь, с16 июля по 5 октября 1941 года советские воины и
ярцевчане вели жестокие бои с немецко-фашистскими захватчиками.
Массовый героизм и мужество советских людей в Смоленском
сражении сорвали планы гитлеровцев. Вечная слава героям
Смоленского сражения.» Авторы мемориального комплекса –
А.И.Чибисов и П.В.Куликов.
</p>
<H3 align=center> <font color=“#0033FF”>Памятник советскому
солдату на мемориале в Яковлево, у вечного огня </font></h3>
<img src=picture2.jpg align=left hspace=20 vspace=10 border=2
alt="Памятник советскому солдату на мемориале в Яковлево">
<p align=justify> 25 сентября 1982 года был открыт мемориальный
комплекс в поселке Яковлево. В центре мемориала – бронзовая
фигура воина, склонившего знамя. За спиной солдата – огромное
полукольцо, на котором начертано: «Здесь похоронили 3720 воинов
Советской армии, погибших в боях с немецко-фашистскими
захватчиками при обороне и освобождении города и района в 19411943 гг.». На мемориальных табличках написаны фамилии
захороненных. У подножия монумента горит Вечный огонь, как
символ вечной памяти о героях. Мемориал создан по проекту
главного архитектора города П.В.Куликова.
56
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
</p>
</font>
</body>
</html>
5
Выполнить команду меню (Файл – Сохранить).
6
Вернуться в папку «Памятники Ярцева»
7
Запустить файл index.htm
Рез Web-страница содержит рассказ о памятниках Ярцева,
уль сопровождаемый соответствующими иллюстрациями.
тат
Дополнительное задание.
Задание. На созданную ранее Web-страницу с рассказом о А.Г.Куроше
вставить фотографию с его изображением. Ширина изображения - 230,
высота изображения -300, выравнивание изображения по правому краю.
Примечание для учителя. Предварительно разместить в отдельной папке
фотографию А.Г.Куроша и Web-страницу с рассказом о нем, путь к
которой указать ученикам.
IV. Итог занятия.
- На Web-страницу можно вставить графическое изображение.
- Графическое изображение можно выровнять относительно текста на
странице.
- Размерами графического изображения на Web-странице можно управлять.
- Вокруг графического изображения можно оставить пустые поля.
Занятие 7. Создание таблицы на Web-странице.
Цели занятия:
 научить создавать таблицы на Web-странице с помощью тега
<TABLE> и его дочерних элементов;
57
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 научить задавать общие параметры таблицы (ширину,
выравнивание).
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
Ученики готовятся к
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Изучение
Учитель проводит лекцию для
Ученики слушают
нового
знакомства учащихся с новым
объяснения учителя,
материала.
материалом, задает задания.
выполняют упражнения.
Оказывает помощь учащимся
Записывают в табличном
при записи тегов для вставки
виде теги для вставки
таблицы на Web-страницу.
таблицы на Web-страницу
Закрепление
Учитель знакомит с целями и
Ученики выполняют
материала.
планом выполнения
лабораторную работу за
лабораторной работы.
компьютером. При
Наблюдает за выполнением
необходимости
лабораторной работы.
обращаются за
Консультирует учащихся.
консультацией к учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
Ход занятия.
I. Орг.момент.
II. Изучение нового материала.
В начале занятия учащимся сообщается о том, что в ходе лекции они
должны будут выполнить ряд заданий.
58
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Задания для учащихся.
Записать в табличном виде:
 теги вставки таблицы на Web-страницу
 тег задания ширины таблицы
 тег выравнивания таблицы относительно окна браузера
 тег выравнивания содержимого ячейки таблицы
 теги объединения ячеек.
Тег
Назначение тега
Таблицы на Web-странице.
В таблицах на Web-страницах могут размещаться текстовые и числовые
данные, изображения и гиперссылки. С помощью таблиц можно компоновать
Web-страницы. Для этого все пространство страницы разбивается на
прямоугольные ячейки таблицы, в которых размещаются другие элементы
(текст, графика, ссылки и т.п.).
Теги таблицы.
Таблица организуется в виде прямоугольной сетки из вертикальных
колонок (столбцов) и горизонтальных рядов (строк). Таблица состоит из
четырех основных частей: названия таблицы, заголовков столбцов, ячеек с
данными и нижней части. Таблица заполняется слева направо, ячейка за
ячейкой и строка за строкой, начиная с левого верхнего угла и заканчивая
правым нижним углом. Впрочем, таблица может и не иметь названия,
заголовков столбцов и нижней части.
Таблицы HTML строятся по принципу вложения элементов, то есть задается
родительский элемент TABLE, определяющий таблицу в целом, и в него
вкладываются дочерние элементы.
<TABLE>
<здесь размещается описание таблицы>
</ table>
59
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Состав таблицы по строкам и ячейкам задается с помощью следующих
элементов:
 <TR> - элемент, формирующий отдельную строку;
 <TD> - элемент, определяющий содержимое ячейки данных;
 <TH> - элемент, задающий ячейку заголовка;
 <CAPTION> - элемент названия таблицы
Для формирования таблицы тег <TABLE> является обязательным.
Остальные теги используются по желанию разработчика. В большинстве
случаев можно обойтись тегами <TR> для строк и <TD> для ячеек. По
умолчанию таблица отображается в окне браузера без рамки. Чтобы
отобразить рамку, в теге <TABLE> нужно использовать атрибут border.
Для задания толщины рамки в пикселях можно указать целочисленное
значение для этого атрибута.
Пример HTML-кода для создания простой таблицы.
<table border=1>
<CAPTION> Пример простой таблицы </caption>
<TR> <TD> Ячейка 1 </TD> <TD>Ячейка 2 </TD> </TR>
<TR> <TD> Ячейка 3 </TD> <TD> Ячейка 4 </TD> <TD>
<TR> <TD> Ячейка 5 </TD> <TD> Ячейка 6 </TD> <TD>
</table>
Внешний вид таблицы, создаваемый этим кодом представлен ниже.
Пример простой таблицы.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Задание общих параметров таблицы.
Для
управления структурой
и
внешним
видом
таблицы, а
также
выравниванием данных в ней используются атрибуты и специальные теги.
60
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Ширина таблицы (атрибут width).
Ширина таблицы – это параметр, общий для всех ее строк, и поэтому
задается он в теге <TABLE> атрибутом width. Значение ширины может быть
установлено как в пикселях, так и в процентах (от полной ширины окна
браузера).
Например, <TABLE width=300>
<TABLE width=50%>
Задание ширины в процентах имеет то преимущество, что строки таблицы
будут, как правило, полностью отображаться в окне браузера (без
прокрутки).
Выравнивание таблицы в документе (атрибут align).
Для выравнивания таблицы относительно боковых границ окна браузера
применяется атрибут align тега <table>. Это атрибут может принимать одно
из трех значений:
 Left – размещение таблицы вдоль левого края в документе
 Center – размещение таблицы в центре документа
 Right – размещение таблицы по правому краю документа
Например, тег <TABLE align=“center”>
разместит таблицу в центре
страницы.
Выравнивание содержимого.
По умолчанию содержимое всех ячеек выравнивается по левому краю
каждой ячейки (за исключением заголовков, для которых установлено
выравнивание по центру). Для задания иного вида выравнивания в теги
<TR> или <TD> вводятся атрибуты align, принимающие, как обычно,
значения left, right, center, justify.
Пример, <TR align=“center”> определяет выравнивание содержимого всех
ячеек строки по центру.
Можно задавать выравнивание содержимого по вертикали с
помощью атрибута valign.
Этот атрибут может принимать одно из
следующих значений:
61
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 Top – выравнивание содержимого по верхнему краю ячеек
 Bottom – выравнивание содержимого по нижнему краю ячеек
 Middle – центрирование содержимого по вертикали
 Baseline – выравнивание всех элементов строки по общей базовой
линии
Например,
тег
<TH
valign=“top”>
устанавливает
смещение
содержимого ячейки к верхнему краю.
Объединение ячеек таблицы.
Иногда приходится создавать таблицы, в которых смежные ячейки
должны быть объединены. Такое объединение можно достичь,
используя в начальных тегах <TH> или <TD> следующие атрибуты:
 Rowspan – предназначен для объединения ячеек смежных строк.
Значение атрибута задает количество объединяемых ячеек.
Например, начальный тег ячейки заголовка <TH rowspan=4>
задает объединение четырех ячеек;
 Colspan – задает объединение ячеек смежных столбцов. Значение
этого
атрибута
задает
количество
объединяемых
ячеек.
Например, тег <TH colspan=3> формирует одну ячейку данных
из трех смежных.
Упражнение для учащихся. Записать HTML-код для вставки таблицы
следующего вида.
Физика
Механика
Электричество
Оптика
Ответ.
<table border=1>
<TR> <TD rowspan=3>Физика</TD> <TD>Механика </TD> </TR>
<TR> <TD>Электричество </TD>
<TR> <TD>Оптика </TD>
62
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
</table>
В ходе лекции в тетрадях учащихся должна быть записана таблица.
Таблица на Web-странице.
Тег
Назначение тега
<TABLE>
Начало таблицы
<CAPTION>
Название таблицы
<TR>
Начало строки
<TH></th>
Ячейка заголовка
<TD> </td>
Ячейка таблицы
</tr>
Конец строки
</table>
Конец таблицы
<TABLE width=500>
Ширина таблицы относительно окна
<TABLE width=90%>
браузера
<TABLE align=“right”>
Выравнивание таблицы по правому
краю окна браузера
<TR align=“center”>
Содержимое всех ячеек строки
выровнено по центру
<TH align=“right”>
Содержимое ячейки выровнено по
центру.
<TH rowspan=4>
Задает объединение четырех ячеек в
смежных строках.
<TH colspan=3>
Задает объединение трех ячеек из
смежных столбцов.
63
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
III. Закрепление материала.
Лабораторная работа «Таблицы на Web-страницах. Герб Ярцева».
Цель работы:
 научиться создавать таблицы на Web-странице;
 научиться задавать общие параметры таблицы.
1
Создать папку Герб Ярцева
2
Скопировать файл gerb.gif c Рабочего стола в папку Герб Ярцева.
3
В папке Герб Ярцева создать HTML-документ под именем table.htm
4
Набрать содержимое HTML-документа под именем table.htm.
<html>
<head>
<title> Герб Ярцева </title>
</head>
<body>
<table align="center" width="80%" border=2>
<Caption> <h1>Герб Ярцева</h1> </caption>
<TR> <TD> <img src=gerb.gif></TD> <TD> Описание герба:
"Щит скошен слева и полускошен справа. В верхнем зелёном поле
золотой кадуцей Меркурия.
В среднем голубом поле золотые наковальня и молот. В нижнем
красном поле серебряная бобина с пряжей. В вольной части герб
Смоленска. Щит увенчан серебряной башенной короной о трёх
зубцах и окружен справа дубовой ветвью с желудями,
слева - колосьями пшеницы и стеблем льна, перевитыми гвардейской
лентой, на которой золотыми литерами сделана надпись - "ЯРЦЕВО"
Автор городской символики - Г.В. Ражнев.
Кадуцей символизирует, что становление города связано с
64
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
деятельностью купца А.И. Хлудова. Наковальня, молот и бобина
указывают на характерные отрасли промышленности, развитые в
Ярцево. Георгиевская лента напоминает о том, что во время Великой
Отечественной войны одна из дивизий стала Гвардейской на
ярцевской земле.
</TD> </TR>
</table>
</body>
</html>
5
Сохранить изменения в файле table.htm
6
Просмотреть созданную Web-страницу.
Рез Web-страница содержит в табличном виде информацию о гербе
уль г.Ярцево. В заголовке таблицы содержится ее название – «Герб
тат
г.Ярцево». Слева в таблице изображение герба г.Ярцево, справаописание герба.
IV. Итог занятия.
 На Web-странице можно использовать таблицы для представления
данных и для компоновки страницы.
 Для таблицы можно задать следующие параметры:
1. размер относительно окна браузера
2. выравнивание таблицы в документе
3. выравнивание содержимого
Занятие 8. Таблица как инструмент Web-дизайна. Цвет и фон
таблицы.
Цели занятия:
 научить применять таблицы для разметки Web-страниц;
 научить устанавливать цвет и фон таблицы;
65
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 научить устанавливать цвет внешней рамки таблицы.
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
Ученики готовятся к
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Актуализация Учитель проводит тестовый
Ученики отвечают на
опорных
опрос. Руководит проверкой
вопросы теста.
знаний.
тестовых работ учащимися.
Самостоятельно
проверяют свои работы
под руководством
учителя.
Изучение
Учитель проводит лекцию для
Ученики слушают
нового
знакомства учащихся с новым
объяснения учителя.
материала.
материалом. Помогает учащимся
Составляют конспект,
при составлении конспекта.
используя опорные
вопросы.
Закрепление
Учитель знакомит с целями и
Ученики выполняют
материала.
планом выполнения
лабораторную работу за
лабораторной работы. Наблюдает компьютером. В случае
за выполнением лабораторной
необходимости
работы, консультирует учащихся. обращаются за
консультацией к
учителю.
Итог занятия
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
полученных на занятии.
66
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Ход занятия.
I. Орг.момент.
II. Актуализация опорных знаний.
Ребята, на прошлом занятии мы научились создавать таблицы
на Web-
странице. Сейчас мы проверим ваши знания по пройденной теме. Вам будут
розданы вопросы теста с вариантами ответов. После того, как вы ответите на
вопросы, мы вместе проверим правильность ответов.
Тестовый опрос.
1. Для создания таблицы на Web-странице можно использовать:
А. Контейнер <Table>…</table>
Б. тег <IMG>
В. тег <Table border>
2. Для формирования отдельной строки таблицы используется:
А. контейнер <TH>…</th>
Б. контейнер <TD>…</td>
В. контейнер <TR>…</tr>
3. Тег <TABLE width=70%> позволяет установить:
А. высоту таблицы, составляющую 70 % высоты окна браузера
Б. высоту таблицы, равную 70 пикселям
В. ширину таблицы, составляющую 70 % ширины окна браузера
4. Какой из следующих HTML-кодов разместит таблицу по правому
краю Web-страницы:
А. <TABLE width=50% align=right>
Б. < TABLE align=top>
В. < TABLE align=left>
5.Содержимое ячейки таблицы можно центрировать по вертикали с
помощью тега:
А. <TD valign=“top”>
Б. <TH valign=“top”>
В. <TD valign=“middle”>
67
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
III. Изучение нового материала.
Учащимся сообщается о том, что в ходе лекции они должны записать в
тетради ответы на вопросы.
Вопросы для учащихся.
 Для каких целей на Web-странице можно использовать таблицу?
 Какой атрибут позволяет задать цвет фона таблицы, строки или ячейки
таблицы?
 Какой атрибут позволяет заполнить графическим изображением фон
таблицы или отдельной ячейки?
 В каких тегах можно записать атрибуты bgcolor и background?
 Какие атрибуты позволяют отображать таблицу в рамке определенного
цвета?
Ребята,
на прошлом занятии мы научились применять таблицы для
представления данных с естественной табличной организацией (например,
список сотрудников, список услуг).
Кроме этого, таблицы часто применяются как наиболее популярный и
простой способ компоновки Web-страниц. Все пространство страницы
разбивается на прямоугольные ячейки таблицы, в которых размещаются
другие элементы (тексты, графика, ссылки и т.п.). При этом границы ячеек
могут быть как видимыми, так и невидимыми.
Для табличной разметки страницы особое внимание следует обратить на
задание размеров таблицы – абсолютных или относительных. Так, задание
ширины и высоты таблицы равными 100% растягивает её на всю клиентскую
область браузера, что часто и требуется. Следует учитывать, что в случае
задания абсолютных размеров таблицы браузер будет использовать их лишь
как рекомендуемые, а окончательный результат определится с учетом
размеров содержимого ячеек. Поэтому размеры таблицы приходиться
подбирать экспериментально, в зависимости от конкретного содержимого.
68
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
В одной из ячеек можно поместить ссылки на другие страницы сайта. Это
будет навигационная панель или оглавление сайта.
Цвет и фон таблицы.
Цвет фона всей таблицы или отдельных ячеек устанавливается с помощью
атрибута bgcolor.
Значение этого атрибута задается шестнадцатеричным
числом в соответствии с моделью RGB или именем цвета.
В зависимости от того, какой из тегов (<TABLE>, <TR>, <TH> или <TD>)
вы дополните атрибутом bgcolor, получится четыре варианта задания цвета:
фона всей таблицы, фона строки, фона ячейки заголовка или фона данных.
Например, тег <TABLE bgcolor=red> назначает красный фон всей таблицы, а
зеленый фон ячейки задает тег <TD bgcolor=#00ff00>.
Примечание.
С помощью атрибута bgcolor можно установить цвет фона
всего документа. Для этого атрибут bgcolor вставляют в тег <body>.
Например, <body bgcolor=#33AA66>.
Фон всей таблицы или отдельных ячеек можно заполнить графическим
изображением
с помощью
атрибута background. Атрибут background
принимает в качестве значения адрес графического файла и записывается в
тегах
<TABLE>,
<TH>
или
<TD>.
Например,
<TABLE
background=“picture.gif”>
Если в тегах таблицы не указаны атрибуты bgcolor или background, то фон
таблицы считается прозрачным. В этом случае фон таблицы определяется
фоном документа, заданным одноименными атрибутами в теге <BODY>.
Если в одном и том же табличном теге используются одновременно два
атрибута, bgcolor и background, то происходит заполнение фона графическим
изображением.
Изображение, используемое в качестве фона, не масштабируется в
соответствии с размерами элемента (таблицы или ячейки), а размеры
элемента автоматически не подстраивается под размеры изображения. Если
изображение больше элемента, то будет видна лишь некоторая его часть, а
69
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
если меньше, то элемент заполняет заполняет несколько экземпляров
изображения.
Примечание.
Графическое изображение можно использовать в качестве
фона всей страницы. Для этого достаточно тег <BODY> дополнить
атрибутом background. Например, <BODY background=“picture.gif”>.
Цвет внешней рамки.
Чтобы выделить цветом внешнюю рамку таблицы, нужно в тег <TABLE>
ввести атрибуты bordercolor и border. Значение атрибута bordercolor
выбирается
из
именованных
цветов
или
задается
в
числовом
шестнадцатеричном формате.
Например тег
<TABLE bordercolor=blue border=5 >…</table> отобразит
таблицу в синей рамке толщиной 5 пикселей.
IV. Закрепление материала.
Лабораторная работа «Табличная разметка Web-страницы».
Цель работы. Создать таблицу, которая часто используется на практике
для разметки Web-страницы. Таблица состоит из трех ячеек – одной
верхней и двух нижних. Верхняя ячейка предназначена для размещения
названия страницы. В одной из нижних ячеек помещается навигационная
панель, во второй – основное информационное содержимое страницы.
1
Создать HTML-документ под именем index.htm
2
Набрать содержимое HTML-документа под именем index.htm.
<html>
<head>
<title> Табличная разметка страницы </title>
</head>
<body>
<table border=2 width="100%" height=100% bordercolor="blue"
bgcolor="#AACCFF">
70
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
<TR> <TD height=50 align="center" colspan=2> Название
страницы</TD> </tr>
<TR> <TD width=100 align="left"> Навигационная панель </td>
<TD align="center">Информационное содержимое страницы </td>
</tr>
</table>
</body>
</html>
3
Сохранить изменения в файле index.htm
4
Просмотреть созданную Web-страницу.
Рез Web-страница разбита на три области. В верхней области документа
уль содержится название страницы, слева расположена навигационная
тат
панель, справа-основное информационное содержимое страницы.
Фон Web-страницы голубой, рамка – синяя.
Дополнительное задание.
Практическая работа.
Цель работы:

1
научиться вносить изменения в оформление Web-страницы.
Открыть
HTML-документ
index.htm,
созданный
на
сегодняшнем занятии.
2
Выполнить
команду меню
Вид-Просмотр HTML-кода для
перехода в Блокнот.
3
Внести в HTML-код документа необходимые изменения для
обновления Web-дизайна страницы (изменить размеры, цвет
фона и рамки таблицы по вашему усмотрению).
4
Сохранить новый вариант страницы, выполнив команду Файл71
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Сохранить.
Закрыть окно программы Блокнот командой
5
меню Файл-
Выход.
В браузере нажать кнопку Обновить и просмотреть заново
6
содержимое страницы.
Результат В окне браузера высветилось содержимое обновленной
страницы.
V. Итог занятия.
 Для каких целей используют таблицы на Web-страницах?

Каким образом можно задать цвет и фон всей таблицы или
отдельных ячеек?

VI.
Каким образом можно задать цвет и толщину рамки таблицы?
Домашнее задание.
Ребята, на следующем занятии вы
будете создавать контрольный
творческий проект по учебному модулю «Изображения и таблицы на Webстранице». Творческий проект нужно будет создать по одной из тем: «Мои
знаменитые земляки», «Ярцевчане, именами которых названы улицы
нашего города», «Знаменательные события на ярцевской земле», «Ярцево
во время Великой Отечественной войны». Поэтому, к следующему занятию
подготовьте материал по выбранной теме.
Занятие 9. Контрольный творческий проект «Изображения и таблицы
на Web-странице»
Цели занятия:
 Отработать навык использования графических изображений и таблиц
на Web-странице.
72
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
План занятия
Этап занятия
Деятельность учителя
Деятельность
учащихся
Орг.момент.
Приветствует учащихся,
Ученики готовятся к
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Вступительное
Учитель знакомит учащихся с
Учащиеся слушают
слово учителя.
требованиями к создаваемому
разъяснения учителя.
проекту. Формирует группы для
Разрабатывают
работы над проектом.
структуру проекта.
Выполнение
Учитель наблюдает за работой
Ученики
творческого
учащихся по созданию проекта.
самостоятельно
проекта.
работают над
контрольным
творческим проектом
по выбранной теме.
Домашнее
задание.
Ход занятия.
I. Орг.момент.
II. Вступительное слово учителя.
Ребята, мы закончили изучать модуль «Графические изображения и таблицы
на Web-странице». Теперь вы можете дополнять текстовое содержимое
страницы графическими изображениями и таблицами. Также вы научились
применять таблицу для оформления страницы. Сегодня на занятии
вы
должны будете создать творческий проект по выбранной вами теме. Защита
создаваемого проекта будет происходить в начале следующего занятия.
73
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Требования к создаваемому проекту:
 Проект должен содержать информацию о г.Ярцево
 В проекте должно быть показано умение применять изображения и
таблицы на Web-странице
 Проект должен содержать не менее двух страниц, связанных ссылками.
III. Выполнение творческого проекта.
IV. Домашнее задание.
Закончить работу над созданием творческого проекта по учебному модулю
«Изображения и таблицы на Web-странице».
74
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Учебный модуль «Планирование и размещение
Web-сайта в Интернете».
Общеобразовательные цели:
 освоить технологию проектирования и размещения Web-сайта в
Интернете;
 закрепить навыки систематизации и структуризации информации.
Развивающие цели:
 формирование и развитие логических приемов: анализа, синтеза,
абстрагирования, обобщения;
 развитие творческой активности.
Воспитательные:
 формировать ответственное отношение к своей работе;
 формировать познавательный интерес;
 формировать эстетическое восприятие.
Оборудование: компьютерный класс, оснащенный сетью с выходом в
Интернет, лицензированное программное обеспечение, мультимедийный
проектор, экран.
Занятие 10. Основные этапы создания Web-сайта.
Цели занятия:
 проверить знания учащихся по модулю «Изображения и таблицы на
Web-странице»;
 познакомить с основными этапами работы над созданием Web-сайта.
План занятия
Этапы
Деятельность учителя
Деятельность учащихся
занятия
Орг.момент
Приветствует учащихся,
75
Ученики готовятся к
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Защита
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Учитель оценивает творческие
Ученики демонстрируют
контрольного проекты учащихся по критериям. свои проекты,
творческого
Отмечает лучшие проекты.
проекта.
сопровождая
демонстрацию рассказом.
Просматривают проекты
других учащихся. Учатся
оценивать проекты.
Отмечают лучшие, на их
взгляд, проекты.
Изучение
Учитель раздает ученикам
Ученики самостоятельно
нового
теоретический материал для
изучают теоретический
материала.
самостоятельного изучения.
материал. В случае
Консультирует учащихся в ходе
необходимости
изучения нового материала.
обращаются к учителю за
разъяснением.
Закрепление
Учитель задает вопросы для
Ученики отвечают на
нового
проверки усвоения новых знаний. вопросы учителя.
материала.
Корректирует ответы учащихся.
Ход занятия.
1 Орг.момент.
II Защита контрольного творческого проекта.
Учащиеся демонстрируют контрольные творческие проекты по модулю
«Изображения и таблицы на Web-странице». Демонстрация проектов
сопровождается поясняющим рассказом.
76
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Учитель
оценивает
продемонстрированный
проект
по
следующим
критериям.
Критерии для оценки творческого проекта.
 Содержание Web-страницы соответствует заявленной теме
 Наличие заголовка на странице
 Информация структурирована в отдельные логические блоки
 Цветовая палитра не утомляет сочетанием цветов
 Единый стиль оформления страниц
 Гармоничное расположение элементов на странице
 Правильная работа системы навигации.
III.
Изучение нового материала.
Этапы работы над сайтом:
 проектирование сайта
 написание HTML-кода
 тестирование
 публикация на Web-сервере
 поддержка (дополнение и изменение содержания)
Проектирование структуры сайта.
Приступая к разработке сайта, нужно четко определить его назначение и
круг его потенциальных посетителей.
Следующим этапом будет подбор материала. Не нужно публиковать в
Интернете весь имеющийся у вас материал по теме сайта. Необходимо
оценить качество материала и его пользу для посетителей. Отобранный
материал следует разделить по темам – эти темы определят разделы
будущего сайта.
Для проектирования структуры сайта рекомендуется сначала нарисовать
эскиз структуры сайта от руки. Прежде всего, нужно определить:
 Сколько страниц будет включать в себя сайт.
 Какая связь будет между страницами
77
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Чаще
всего
для
Web-сайтов
выбирается
древовидная
структура
организации информации. На верхнем уровне находиться начальная
страница сайта, с которой посетитель с помощью ссылок может переходить
на страницы следующего уровня. Древовидная структура может состоять из
нескольких уровней подчинения.
Если дерево окажется слишком широким, то посетителю будет трудно
удерживать в памяти множество вариантов выбора.
Начальная
страница
Если же уровней будет слишком много, то посетителю придется долго
«докапываться» до интересующей его информации. Для этого придется
сделать множество щелчков мышью и дождаться загрузки промежуточных
страниц.
Начальная
страница
Чтобы облегчить путешествие вглубь сайта, на страницах верхнего уровня
помещают ссылки, которые могут перевести посетителя сразу же к
страницам нижнего уровня. На глубоких страницах также нужно разместить
ссылки для обратного перехода вверх по уровням сайта.
78
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Древовидная структура в чистом виде практически не применяется. Обычно
внутри неё существуют переходы, образующие петли, которые нарушают
древовидность.
Особое внимание следует уделить разработке первой страницы сайта.
Именно эта страница представляет сайт в целом, является его визитной
карточкой. Кроме прочего, на ней будут размещены ссылки на другие
страницы сайта.
При создании сайта необходимо продумать удобную навигацию по нему.
Создавая сайт, придерживайтесь правила двух щелчков, то есть посетитель
должен иметь возможность с помощью двух кликов перейти с любой
страницы вашего сайта на любую другую.
Сборка файлов сайта.
Когда вы подготовили материалы и представили в виде схемы структуру
будущего сайта, можете приступать к разработке, то есть к составлению
HTML-кода. В результате составления кода и подготовки графических
материалов у вас должны быть на диске файлы Web-страниц, а также файлы
изображений. Скопируйте все эти файлы в отдельную папку. В этой папке
должен быть файл index.html, который будет представлять начальную
страницу сайта. В папке сайта желательно предусмотреть папку, в которой
будут храниться изображения.
Если в процессе формирования папки сайта вы вносили изменения в имена
фалов, проследите, чтобы соответствующие изменения были внесены и в
HTML- код страницы.
Тестирование сайта.
После создания Web-сайт нужно протестировать. Для этого загрузите
начальную страницу сайта в браузер и убедитесь, что все переходы на другие
страницы сайта работают, страницы отображаются должным образом,
рисунки выводятся на страницы.
79
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
IV. Закрепление нового материала.
Вопросы для закрепления материла.
 Из каких этапов состоит работа по созданию сайта?
 Что происходит на этапе:
1. проектирования сайта
2. написания HTML-кода
3. тестирования сайта
4. публикации сайта на Web-сервере
5. поддержки сайта?
Занятие 11. Особенности Web-дизайна.
Цели занятия:
 познакомить с основными требованиями к оформлению
Web-
сайта;
 научить качественно оценивать Web-сайты.
Материалы: мультимедийная презентация
«Правила оформления Web-
дизайна».
План занятия
Этап занятия
Деятельность учителя
Деятельность
учащихся
Орг.момент.
Приветствует учащихся,
Ученики готовятся к
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Актуализация
Учитель задает вопросы для
Ученики отвечают на
опорных
повторения знаний, усвоенный на вопросы учителя.
знаний.
прошлом занятии.
Изучение
Учитель проводит лекцию,
Ученики слушают
нового
сопровождая ее мультимедийной
лекцию, просматривают
материала.
презентацией.
мультимедийную
80
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
презентацию.
Высказывают свое
мнение по поводу
возможного
оформления дизайна
сайта.
Закрепление
Учитель знакомит учащихся с
Ученики выполняют
материала.
целями и планом проведения
лабораторную работу.
лабораторной работы.
В случае необходимости
Консультирует учащихся при
обращаются за
выполнении лабораторной
консультацией к
работы.
учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
Итог занятия
полученных на занятии.
Ход занятия.
I. Орг.момент.
II. Актуализация опорных знаний.
Из каких этапов состоит работа над созданием сайта?
 Что происходит на этапе проектирования сайта?
 Каким образом нужно хранить файлы, составляющие Web-сайт?
 Что происходит на этапе тестирования сайта?
III. Изучение нового материала.
Дизайн – это то, что стоит впереди или на поверхности многоэтажных
разработок сайта. Поэтому он либо продвигает проект в информационном
поле, принося славу и успех, либо оставляет горечь разочарований.
Примечание.
Рассказ
учителя
сопровождается
презентации «Правила оформления Web-дизайна».
81
демонстрацией
мультимедийной
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Особенности Web-дизайна.
Под дизайном сайта понимают его внешний вид, а также средства доступа
к ресурсам сайта. Одна и та же структура сайта может быть воплощена
различным образом. При разработке сайта важно помнить, что он создается
для посетителей. Поэтому сайт должен быть содержательным, удобным и
эстетичным. Графика и визуальные эффекты должны привлекать внимание и
способствовать правильному восприятию информации, а не раздражать
пестротой и долгой загрузкой в браузер.
При создании сайта для изображений фотографического характера с
множеством цветов рекомендуется использовать формат JPEG, который
обеспечивает меньший размер подобных изображений. В случае применения
монотонных рисунков и рисунков, содержащих текст, используйте формат
GIF.
Многие пользователи в целях экономии времени и трафика отключают
загрузку графики. Поэтому подумайте о том, как будут выглядеть ваши
документы в случае, если графика в них не загружается.
Ответственно отнеситесь к выбору цветовой схемы и шрифтов при создании
сайта. Все страницы сайта должны быть выполнены в одной цветовой схеме,
в противном случае сайт будет смотреться несвязно.
При выборе цветовой схемы необходимо обеспечить хорошую читаемость
текста. Выбирая фоновое изображение, обратите внимание на цвет и узор:
светлые тона и «легкие узоры» облегчают восприятие информации, и,
наоборот, темный цвет и крупный узор быстро утомляют.
Не используйте на одной Web-странице более трех различных шрифтов,
включая шрифты, применяемые при создании графических элементов.
Используйте только корректные цветовые схемы и не применяйте при
оформлении документов более трех различных цветов. Исключение здесь
можно сделать для полутонов одного и того же цвета.
С точки зрения человеческой психологии сочетание цветов может в
значительной степени влиять на восприятие зрителем представленной на
82
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
картинке информации. Именно поэтому при подборе цветового сочетания,
например текста с фоном, рекомендуется исходить из соображений
собственного здравого смысла: текст должен без труда читаться, при этом
читатель не должен напрягать зрение, его глаза не должны уставать.
Далее приведен перечень цветовых сочетаний рисованного объекта или
текста с фоном в порядке ухудшения зрительного восприятия:
синее на белом;
черное на желтом;
зеленое на белом;
черное на белом;
зеленое на красном;
красное на желтом;
красное на белом;
оранжевое на черном;
черное на пурпурном;
оранжевое на белом;
красное на зеленом.
Информация должна быть представлена так, чтобы ее удобно было долго
читать. Это значит: небольшая ширина колонки (чтобы не бегать глазами по
горизонтали), текст с засечками (более пригоден для долгого чтения),
темным по светлому (не утомляются глаза).
IV. Закрепление материала.
В качестве основных критериев оценки сайта выступают:
 оформление сайта;
 удобство навигации;
 время, необходимое для загрузки Web-страницы.
Сейчас мы выполним лабораторную работу для определения сайтов,
которые удовлетворяют этим условиям.
83
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Лабораторная работа «Оценка дизайна Web-сайта».
Цель работы.
Просмотреть сайты студий, занимающихся Web-дизайном.
Оценить сайты Web-студий по следующим параметрам:
 Общее время загрузки первой страницы;
 Качество дизайна;
 Возможность оценки содержательного наполнения всего сайта по
первой странице;
 Удобство навигации
1
Установить соединение с сетью Интернет.
2
Запустить программу Microsoft Internet Explorer
3
Запуститиь домашнюю страницу сайта студии
demis group. Для
этого в строку адреса ввести http://www.demis.ru
4
Произвести оценку сайта.
5
Загрузить домашнюю страницу Web-студии «Звезда» (адрес
http://www.studiostar.ru).
6
Произвести оценку сайта.
7
Загрузить страницу под адресом http://www.i-market.ru (компания
«И-Маркет»).
8
Произвести оценку сайта.
9
Загрузить домашнюю страницу компании ЛИТ-Телеком
(http://www.create-it.ru)
10
Произвести оценку сайта.
11
Загрузить страницу под адресом http://www.artburo.ru (студия
Artburo).
12
Произвести оценку сайта.
V. Итог занятия.
Перечислим параметры, по которым мы будем оценивать школьные сайты:
84
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
 основное назначение сайта;
 целостность представления о сайте на домашней странице;
 легкость восприятия;
 удобство навигации;
 соответствие внешнего оформления информационному содержанию;
Занятие 12. Размещение сайта в Интернете. Веб-хостинг.
Цели занятия:
 назначение хостинга;
 виды хостинга;
 преимущества и недостатки различных видов хостинга.
План занятия
Этап занятия
Деятельность учителя
Деятельность
учащихся
Орг.момент.
Приветствует учащихся,
Ученики готовятся к
проверяет их готовность к
занятию, приветствуют
занятию.
учителя.
Изучение
Учитель раздает ученикам
Ученики
нового
теоретический материал для
самостоятельно изучают
материала.
самостоятельного изучения.
теоретический
Предлагает вопросы для
материал. В случае
составления конспекта.
необходимости
Консультирует учащихся в ходе
обращаются к учителю
изучения нового материала.
за разъяснением.
Проверяет конспекты учащихся.
Записывают конспект,
отвечая на вопросы.
Закрепление
Учитель знакомит учащихся с
Ученики выполняют
материала.
целями и планом проведения
лабораторную работу.
лабораторной работы.
При необходимости
85
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Итог занятия
Консультирует учащихся при
обращаются за
выполнении лабораторной
консультацией к
работы.
учителю.
Учитель задает вопросы для
Ученики отвечают на
повторения основных знаний,
вопросы учителя.
полученных на занятии.
Ход занятия.
I. Орг.момент.
II. Изучение нового материала.
Учащимся сообщается, что при изучении нового материала они должны
будут составить конспект.
Вопросы для составления конспекта.
 Для чего предназначен Web-хостинг?
 Преимущества и недостатки бесплатного хостинга.
 В каких случаях целесообразно воспользоваться платным хостингом?
Для размещения сайта в Интернете необходимо выбрать Web-сервер, на
котором этот сайт будет размещен. Web-сервер занимается хранением,
поиском и обменом файлами в WWW. Например, когда клиент Web
запрашивает файл из WWW, программа браузера отправляет этот запрос на
Web-сервер, на котором находится данный файл. Сервер отыскивает файл на
своих дисках и отправляет его компьютеру-клиенту, от которого был
получен запрос.
Хостинг (от английского слова – совместное
размещение) – это
размещение Web-сайта на оборудовании компании. Ресурсы сервера и линии
связи используются совместно множеством клиентов. После размещения
файлов на сервере хостинг-провайдера и получения доменного имени любой
86
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
пользователь сети Интернет получает возможность доступа к страницам
вашего сайта.
Виды хостинга.
Бесплатный хостинг.
Сейчас
появляется
все
больше
Web-серверов,
осуществляющих
бесплатный хостинг. Например, русскоязычные серверы www.narod.ru,
www.boom.ru. Такие серверы не требуют оплаты за поддержку Web-сайтов
от клиентов. Компании, которые осуществляют бесплатный хостинг
зарабатывают на рекламе и существуют за счет рекламодателей.
Зарегистрированному клиенту предоставляется ограниченное, но достаточно
свободное пространство на диске сервера – от 5 до 50 Мбайт. Этого объема
достаточно для размещения как небольшого, так и весьма солидного сайта.
Отрицательные стороны бесплатного хостинга.
Одним из недостатков бесплатного хостинга является наличие рекламы.
При размещении сайта на бесплатном хостинге, клиент принимает на себя
обязательство – размещение на своем сайте баннеров, предназначенных для
рекламы. Чужие баннеры могут существенно испортить вид сайта.
Сайты, размещенные на бесплатных серверах, как правило, не должны
иметь
коммерческой
направленности
и
не
могут
использовать
вычислительные ресурсы сети. То есть, сервер будет лишь хранить и
передавать клиенту запрашиваемые им файлы, не подвергая их содержимое
обработке.
Бесплатный хостинг подходит для размещения сайта, содержащего
обычные файлы HTML. Однако, бесплатный хостинг категорически
противопоказан для размещения сайтов крупных фирм, занимающихся
электронной коммерцией. Также бесплатный хостинг не подходит тем, кому
нужна бесперебойная работа сайта.
Платный хостинг.
Для предоставления платного хостинга необходимо заключить договор с
провайдером о предоставлении соответствующих услуг. Платный хостинг
87
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
необходим тем, кто разрабатывает сайты для серьезных фирм. Особенно,
если для этого требуются вычислительные ресурсы сервера.
Размещение сайта на www.narod.ru
Наиболее популярным порталом является www.narod.ru. Для того, чтобы
разместить сайт на сервере необходимо зарегистрироваться. Выбранное при
регистрации имя и задает адрес сайта. Например, клиент при регистрации
задал имя сайта – shool10. Тогда адрес сайта будет иметь вид:
www. school10.narod.ru.
Есть две возможности при работе со своим сайтом. Пользователь может
полностью использовать графические и иные возможности портала,
наполняя их только своим содержанием непосредственно в сети. Также
можно создать сайт на своем компьютере, а затем перекачать файлы на
сервер портала.
III. Закрепление материала.
Лабораторная работа «Размещение Web-сайта в Интернете».
Цель работы:
Разместить Web-сайт в Интернете на бесплатном сервере www.narod.ru.
1
Установить соединение с сетью Интернет.
2
Запустить программу Microsoft Internet Explorer
3
В строку адреса ввести http://www.narod.ru
4
Выберите название своего сайта и введите его в свободное поле,
предназначенное для ввода имени сайта. Например, gorod12 (адрес
сайта тогда будет иметь вид: www. gorod12.narod. ru).
Нажмите
кнопку Занять. Введенные данные будут отправлены на сервер.
5
Следующий этап Регистрация.
Для регистрации на сервере заполните требуемую форму. Если
выбранное имя сайта уже занято кем-нибудь на сервере, вам будет
предложено выбрать имя сайта еще раз. Затем нужно указать свою
фамилию и имя.
88
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Нажмите кнопку Дальше.
6
Второй этап регистрации. Заполните необходимую форму.
Наберите пароль и подтвердите его в нижнем поле. Введите
контрольный вопрос и ответ на него в соответствующие поля. Если
вы забудете пароль, то сможете получить доступ, ответив на вопрос.
В поле E-mail ввести свой электронный почтовый адрес. На этот
адрес вы получите почтовое письмо с подтверждением регистрации.
В нижней части страницы имеется шестизначный номер. Введите
приведенный номер – он служит для защиты от автоматических
регистраций.
Нажмите кнопку ОК.
7
После окончания регистрации появиться страница с приветствием и с
информацией о ваших данных на сервере. Запомните эту
информацию.
8
Щелкните по ссылке Начать пользоваться сервисом.
9
Выберите ссылку Загрузка файлов на сервер.
10
Выберите файлы Web-сайта и загрузите их на сервер.
11
Выберите ссылку Управление файлами.
12
Создайте требуемые папки и переместите в них необходимые файлы.
13
Запустите файл index.htm
14
Протестируйте работу сайта в Интернете. При необходимости
скорректируйте сайт в разделе Управление файлами.
15
Закройте все приложения.
16
Запустите Internet Explorer.
17
В строку адреса введите адрес своего сайта.
Рез Загрузилась главная страница вашего сайта.
уль
тат.
89
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
IV. Итог занятия.
 Существуют бесплатный и платный хостинг для размещения сайта в
Интернете.
 Бесплатный хостинг существует за счет рекламы.
 Бесплатный хостинг не позволяет использовать вычислительные
ресурсы Web-сервера.
 Бесплатный хостинг не подходит для рамещения сайта серьёзной
фирмы.
90
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Учебный модуль «Творческий проект».
Общеобразовательные цели:
 систематизация и обобщение знаний по теме «Технология создания
Web-сайта»;
 закрепление навыков систематизации и структуризации информации.
Развивающие цели:
 формирование и развитие логических приемов: анализа, синтеза,
абстрагирования, обобщения;
 развитие творческой активности.
Воспитательные:
 формировать бережное отношение к результатам информационной
деятельности человека;
 формировать целостное восприятие окружающего мира;
 формировать познавательный интерес;
 формировать патриотические чувства.
Оборудование: компьютерный класс, оснащенный сетью с выходом в
Интернет, лицензированное программное обеспечение, мультимедийный
проектор, экран.
План проведения проекта.
1. Формулирование темы проекта.
Деятельность учителя
Деятельность учащихся
Учитель знакомит учащихся
Учащиеся обсуждают и
с возможными темами
принимают решение по
проекта.
выбору темы.
Время проведения.
1-ый урок. 10 мин.
Наименования проектов.
Название проекта
Описание проекта
91
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Web-сайт должен рассказывать о
Знаменательные события на ярцевской
знаменательных исторических
земле.
событиях на ярцевской земле.
Мои знаменитые земляки.
|Web-сайт должен повествовать о
ярцевчанах, оставивших
неизгладимый след в истории нашей
страны.
Ярцево в пламени Великой
Web-сайт должен рассказывать о
Отечественной Войны.
положении Ярцева и ярцевчан во
время Великой Отечественной войны.
Ярцевчане – Герои Советского Союза.
Web-сайт должен рассказывать о
наших земляках, заслуживших звание
Героя Советского Союза во время
Великой Отечественной войны или
войны в Афганистане.
Ярцево – развивающийся
Web-сайт должен рассказывать о
промышленный город.
работе современных промышленных
предприятий г.Ярцево и о
перспективах развития нашего
города.
Web-сайт должен содержать
Ярцево в наши дни.
информацию о жизни современных
ярцевчан – культурной, спортивной,
общественной.
Свободная тема
Тема Web-сайта предлагается
учеником. Web-сайт должен
рассказывать о г.Ярцеве или о
ярцевчанах. Тема проекта должна
быть заранее согласована с учителем.
92
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
2. Формирование групп для работы над проектом.
Деятельность учителя
Деятельность учащихся
Время
проведения.
Учитель
проводит Учащиеся уже выбрали
организационную работу по темы проектов и
1-ый урок. 10 мин.
объединению школьников в группируются в
группы.
соответствии с ними в
малые группы (2-3
человека).
3. Обсуждение плана работы над проектом.
Деятельность учителя
Деятельность учащихся
Время
проведения.
Учитель наблюдает за
Ученики разрабатывают
работой учащихся. В
план информационного
случае необходимости
наполнения Web-сайта;
консультирует учащихся.
1 урок. 20 мин.
вопросы для поиска
информации; производят
поиск нужной информации
в WWW.
4. Разработка проекта.
Деятельность учителя
Деятельность учащихся
Время
проведения.
Учитель консультирует
Ученики разрабатывают
учащихся, стимулирует их
Web-сайт в соответствии с
2-ои, 3-ий, 4-ый
деятельность.
принятыми правилами.
уроки.
5 Защита проекта.
93
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
Деятельность учителя
Деятельность учащихся
Время
проведения.
Учитель организует
Демонстрируют
экспертизу. Знакомит
учеников с критериями
оценки сайта.
разработанные Web-сайты.
5 урок.
Оценивают проекты
других учащихся.
Защита проекта.
Во время защиты учебного проекта необходимо ответить на следующие
вопросы:
 назначение Web-сайта;
 средства (аппаратные, программные, источники информации),
использованные при разработке Web-сайта;
 возможности использования представляемого Web-ресурса;
 проблемы, возникшие при разработке проекта;
 положительные моменты при работе над проектом.
Оценочный лист для учащихся.
Критерии оценки проекта.
Параметр.
Балл
(0-3)
1
практическая польза сайта
2
необходимая и достаточная глубина проникновения в
проблему
3
удобство просмотра сайта
4
целесообразность дизайна
5
творческие элементы при оформлении дизайна сайта
6
емкость и лаконичность сайта
94
Элективный курс «Создаем и размещаем в Интернете Web-сайт о городе Ярцево».
7
качество доклада
Сумма баллов
0- Web-сайт не соответствует данному требованию;
1- Web-сайт частично соответствует данному требованию;
2- Web-сайт в основном соответствует данному требованию;
3- Web-сайт полностью соответствует данному требованию.
6. Рефлексия.
Деятельность учителя
Деятельность учащихся
Учитель оценивает деятельность
Ученики осуществляют рефлексию
учащихся в ходе изучения курса.
процесса, себя в нем с учетом оценки
других.
95