Автор конспекта:
Автор(ы): — Евтина М. Г.

Место работы, должность: — Учитель информатики и ИКТ ГБОУ гимназии №1554 г. Москвы

Регион: — Город Москва

Характеристики урока (занятия) Уровень образования: — основное общее образование
Уровень образования: — дополнительное образование детей

Целевая аудитория: — Учащийся (студент)

Класс(ы): — 8 класс
Класс(ы): — 9 класс

Предмет(ы): — Информатика и ИКТ

Цель урока: —

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

Учащихся в классе (аудитории): — 12

Используемые учебники и учебные пособия: —

  • Смирнова И.Е. Начала Web-дизайна. – СПб.: БХВ-Петербург, 2003.
  • Третьяк Т. М., Кубарева М. В. Практикум Web-дизайна – М.: СОЛОН-ПРЕСС, 2007 (Серия «Элективный курс * Профильное обучение»).
  • Лещев Д. Создание интерактивного web-сайта: учебный курс. – СПб: Питер, 2003.
  • Усенков Д. Ю. Уроки Web-мастера. 2-е изд., испр. и доп. – М.: БИНОМ. Лаборатория знаний, 2004.
  • Используемая методическая литература: —

  • Газета "Информатика" № 23/2005 А. А. Дуванов. "Основы web-дизайна и школьного “сайтостроительства”"
  • Газета "Информатика" № 24/2005 А. А. Дуванов. "Основы web-дизайна и школьного “сайтостроительства”"
  • Газета "Информатика" № 19/2005 А. А. Дуванов. "Основы web-дизайна и школьного “сайтостроительства”"
  • Используемое оборудование: —

    Компьютерный класс, проектор.

    Краткое описание: — ОБРАЗОВАТЕЛЬНАЯ ПРОГРАММА ПО ДОПОЛНИТЕЛЬНОМУ ОБРАЗОВАНИЮ Возраст детей: 15-16 Срок реализации: 1 год

    ОБРАЗОВАТЕЛЬНАЯ ПРОГРАММА ПО ДОПОЛНИТЕЛЬНОМУ ОБРАЗОВАНИЮ

    «Создание проекта в форме мультимедийного Web-сайта»

    Пояснительная записка
    Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию, тесты.
    Данная программа позволяет обучающимся подготовиться к изучению курса сайтостроения в высших и средне-специальных учебных заведениях, а также лучше освоить школьный курс информатики.
    Программа обучения способствует профессиональной ориентации подростков и их подготовке к получению специальности Web-дизайнера, даёт возможность оценить свои перспективы в этой области. Нельзя утверждать, что этот курс адресован только будущим Web дизайнерам. Представители других профессий (например, учителя или психологи) создают свои Web-странички, для того, чтобы с помощью сети ИНТЕРНЕТ делиться своим опытом с коллегами.
    Основной упор при обучении делается на овладение воспитанниками умением создавать и грамотно оформлять Web-сайты.
    Цель программы – освоение учениками начал Web-дизайна, создание собственного сайта мультимедиа. Для ее реализации необходима работа в различных средах, создание файлов самых разных типов, с последующей их сборкой в единое целое.
    Задачи программы
    • Научить подростков основам языка разметки гипертекста HTML.
    • Обучить воспитанников созданию сайтов различных структур.
    • Познакомить их с популярными программными средствами для создания Web-сайтов.
    • Научить гимназистов размещать свои сайты в сети ИНТЕРНЕТ.
    • Выявить и развить способности детей, включая творческие способности к разным видам деятельности.
    • Выработать у подростков навыки самостоятельной исследовательской деятельности, сочетающей познавательный аспект с эстетическим восприятием.
    • Содействовать развитию навыков самоорганизации воспитанников, их уверенности в себе.

    Данная программа рассчитана на 1 год. Она включает в себя восемь основных разделов:
    1. Основы web: сайты, навигаторы и навигация.
    2. Построение одностраничного документа.
    3. Построение многостраничного документа.
    4. Подготовка графики для Web-страниц.
    5. Таблицы как средство форматирования HTML-документа.
    6. Добавление в сайт элементов мульмедиа.
    7. Рецепт удобного сайта.
    8. Критерии оценки сайта.
    Программа ориентирована на учащихся 8-9 классов гимназии, желающих заниматься сайтостроением в будущем или же с целью подготовки к изучению этого предмета в высшем или средне-специальном учебном заведении.
    Основными принципами, заложенными в программу, являются следующие:
    1. Индивидуальное обучение.
    Одним из важнейших элементов дополнительного образования является возможность овладевать знаниями с индивидуальной скоростью и в индивидуальном объёме, что предполагает отдельную работу с каждым учащимся. Поэтому занятия делятся на лекционные (лекционно-практические), на которых тема изучается всей группой, и индивидуальные, на которых и осваивается основная часть тем.
    2. Обучение в активной деятельности.
    Все темы программы воспитанники изучают на практике.
    3. Преемственность.
    Программа обучения построена так, что каждая новая тема логически связана с предыдущей, то есть при изучении новой темы используются все знания и навыки, полученные на предыдущих этапах обучения. В результате, к концу учебного года подростки не только не забывают всё, что проходили в начале, но даже, наоборот, помнят и понимают программу первых занятий лучше, чем прежде. Такой принцип способствует не только успешному освоению программы, но и позволяет учащимся понять важность уже изученного материала, значимость каждого отдельного занятия.
    Результат обучения — создание каждым учащимся своего сайта, его демонстрация и защита, обсуждение.
    Ученик создаёт свой собственный дизайн сайта (проявление самостоятельности). Учитель лишь обозначает те или иные возможности, ученик самостоятельно осуществляет поиск или создание элементов JavaScript, видеоматериалов и других элементов для своей работы. Именно поэтому данный курс предполагает большой объем домашней работы.
    Прогнозируемые результаты
    Знания:
    • Поиск ресурсов в сети Интернет по заданной тематике.
    • Структура сайта.
    • Основы языка HTML
    • Рецепт «удобного» сайта.
    • Критерии оценки сайта.
    • Цветовая схема сайта.
    Умения:
    • Создать сайт самостоятельно.
    • Оптимизировать и редактировать графику для Web.
    • Размещать сайт в сети.
    Личностные качества:
    • Навыки самостоятельной работы.
    • Дисциплинированность, общая организованность.
    • Профессиональная подготовка к получению профессии Web-дизайнера.

    Содержание программы

    Условные обозначения:
    л. – лекция (педагог объясняет тему одновременно для всех учащихся);
    т. – теория (воспитанник индивидуально изучает теоретический материал по какой-либо теме, который предлагается педагогом в напечатанном виде, снабжённом примерами, адаптированном для понимания подростком данного возраста; материал по каждой теме должен помещаться на отдельном листе формата А4 с двух сторон);
    з. – задачи (учащийся получает индивидуальное задание, требующее составления текста с использованием тегов языка HTML);
    пр.р. – практическая работа (воспитанник индивидуально выполняет задание, связанное с работой на компьютере; предполагается помощь педагога при выполнении задания);
    д. з. – домашнее задание.
    Содержание занятий
    Тема 1. Основы web: сайты, навигаторы и навигация.
    Занятие 1. (л.) Классификация и описание услуг, предоставляемых компьютерными сетями. Протоколы передачи данных. Система адресации.
    Занятие 2. (л.) Эффективная работа с браузером. Информационно-поисковые системы. Поиск информации на заданную тему. Создание простых и сложных запросов. Образовательные порталы и форумы.
    Занятие 3. (т.) Дизайн Web-страниц и виды сайтов. Разработка контента и структуры сайта.
    Занятие 4. (пр. р.) Осуществить поиск информации в сети Интернет по сайтостроению и Web-дизайну, составить небольшой каталог.
    (д. з.) Разработать структуру предложенного сайта в виде схемы.
    Занятие 5. (л.) Графические гипертекстовые карты.
    Занятие 6. (л.) Инструментарий Web-мастера.
    Тема 2. Построение одностраничного документа.
    Занятие 7. (л., т.) Гипертекст. Язык разметки гипертекста. Структура HTML-документа. Основные теги HTML
    Занятие 8. (пр. р.) Создание и редактирование простейшей Web-страницы.
    Занятие 9. (л.) Заголовки, абзацы и списки.
    Занятие 10. (пр. р.) Web-документ, содержащий заголовки разных уровней, списки и текст, разбитый на абзацы, выровненные различными способами.
    Занятие 11. (л.) Теория цвета. Сочетание цветов на Web-странице.
    Занятие 12. (л.) Цветовые модели RGB, CMYK, HSB.
    Занятие 13. (л.) Понятие о цветовом круге. Основные и дополнительные цвета. Параметры тега .
    Занятие 14. (т.) Форматирование шрифта.
    Занятие 15. (пр. р.) Web-документ, содержащий фрагменты текста разного размера, цвета, начертания, гарнитуры. Изменение фона документа.
    Занятие 16. (т.) Специальные символы.
    Занятие 17. (пр. р.) Web-документ, содержащий специальные символы.
    Занятие 18 (л., т.) Каскадные таблицы стилей.
    Занятие 19 (т.) Определение стиля раздела. (д. з.) Подготовить контент, шаблон (разметку) и цветовую схему своей Web-странички.
    Занятия 20-21. (з.) Построение своего одностраничного документа с использованием всех полученных знаний.
    Тема 3. Построение многостраничного документа.
    Занятие 22. (т.) Кодирование гипертекстовых переходов.
    Занятие 23. (пр. р.) Создание гиперссылок. Изменение цвета гиперссылки (в т. ч. активной и просмотренной).
    Занятие 24. (пр. р.) Якоря. Гиперссылки на якоря.
    Занятие 25. (т.) Простейшие навигационные схемы (линейная и древовидная).
    Занятие 26. (з.) Построение многостраничного документа (структура цепочка).
    Тема 4. Подготовка графики для Web-страниц.
    Занятие 27. (т.) Форматы графических файлов, используемых на Web-страницах. Правила подготовки графики для Web-страниц. Сканирование текста и графики.
    Занятие 28. (т.) Тег и его параметры.
    Занятие 29. (пр. р.) Web-документ с различными параметрами одного изображения.
    Занятие 30. (т.) Оптимизация графических файлов для Web.
    Занятие 31 (пр.р.) Обработка графики в графическом редакторе Adobe Photoshop.
    Занятие 32 (т.) Гипертекстовая разметка картинки.
    Занятие 33 (з.) Создание гипертекстовой карты.
    Тема 5. Таблицы как средство форматирования HTML-документа.
    Занятие 34. (т.) Таблицы в Web-документе. Параметры, определяющие оформление таблиц: цвет и рисунок фона, рамка, размеры таблицы и ячейки.
    Занятие 35. (пр. р.) Создание страницы с простой таблицей, содержащей графику и текст.
    Занятие 36. (т.) Объединение ячеек (в столбцах).
    Занятие 37. (з.) Создание страницы с таблицей, где объединены несколько горизонтально расположенных ячеек.
    Занятие 38. (т.) Объединение ячеек (в строках).
    Занятие 39. (з.) Создание страницы с таблицей, где объединены несколько вертикально расположенных ячеек.
    Занятие 40. (т.) Объединение ячеек (в столбцах и строках).
    Занятие 41. (з.) Создание страницы с таблицей, где объединены несколько горизонтально и вертикально расположенных ячеек.
    Занятие 42. (т.) Таблицы как инструмент дизайнера.
    Занятие 43. (пр. р.) Создание страницы с таблицей, используемой для разметки страницы.
    Тема 6. Добавление в сайт элементов мультимедиа.
    Занятие 44. (т.) Добавление в сайт видеофрагментов и звука.
    Занятие 45. (пр. р.) Добавление в сайт видеофрагментов и звука.
    Занятие 46. (т.) Создание Gif-анимации в Adobe ImageReady.
    Занятие 47. (пр. р.) Создание Gif-анимации в Adobe ImageReady и добавление ее в сайт.
    Занятия 48-50. (т.) Элементы JavaScript.
    Занятия 51-52. (пр. р.) Сайт с элементами JavaScript.
    Тема 7. Рецепт удобного сайта.
    Занятие 53. (т.) Постоянные элементы. Главное меню. Заголовок страницы и заголовок окна.
    Занятие 54 (т.) Навигационные элементы глубоких иерархий. Навигация, основанная на метафоре. Вкладки. Внешние ссылки. Авторская подпись. Текст на сайте.
    Тема 8. Критерии оценки сайта.
    Занятие 55-57. (т.) Типичные ошибки сайтостроителей: дизайн, графика, кодирование, содержание, грамматика.
    Тема 9. Создание своего проекта в форме Web-сайта.
    Занятие 58. (пр. р.) Обсуждение тем, разработка макета стартовой страницы.
    Занятия 59-63. (пр. р.) Подготовка иллюстраций для сайта. Сканирование изображений, поиск графики, звука и видео в сети Интернет, оптимизация авторских фото.
    Занятия 64-65. (пр. р.) Создание стартовой страницы.
    Занятие 66. (пр. р.) Создание и добавление в сайт элемента JavaScript.
    Занятия 67-68. (пр. р.) Ввод текста.
    Занятие 69. (пр. р.) Создание гиперссылок.
    Занятие 70. (пр. р.) Отладка проекта.
    Занятие 71. (т.) Размещение сайта в сети Интернет. (д. з.) Разместить сайт в сети.
    Занятие 72. Демонстрация сайтов, обсуждение, рекомендации.

    Методическое обеспечение программы
    Методика проведения индивидуальных занятий.
    Индивидуальное обучение позволяет решать следующие задачи:
    • Улучшение освоения программы.
    • Сохранность контингента.
    • Возможность успешного освоения программы даже в случае вынужденного пропуска занятий.
    Методическое обеспечение занятий
    Основой программы являются индивидуальные занятия. Для их проведения требуется разделить всю программу обучения на отдельные небольшие темы в соответствии с указаниями в разделе «Содержание программы».
    Теоретический материал по каждой теме либо представлен в форме презентации, либо записывается на отдельный лист бумаги формата А4 по следующим принципам:
    • Теоретический материал изложен языком, понятным учащимся средней школы.
    • Объяснения по каждой теме помещаются на одном листе бумаги (с двух сторон), что психологически лучше воспринимается, так как подросток видит начало и окончание текста.
    • Теоретический материал снабжён примерами.
    Для материала, касающегося изучения тегов, предлагается следующая схема организации текста с объяснениями:
    • Общий вид тега.
    • Принцип работы тега.
    • Параметры тега.
    • Пример web-страницы с использованием тега.
    Кроме теоретического материала, в письменном (печатном) виде необходимо иметь и все решаемые в процессе обучения задачи по сайтостроению. Рекомендуется каждое задание выносить на отдельный лист бумаги (карточку), выдавая следующее задание лишь после правильного выполнения предыдущего.
    Принцип формирования набора задач, выдаваемых учащимся.
    При изучении каждой темы учащийся обязательно должен получить и выполнить задания, реализующие основные особенности и случаи использования изучаемого явления. Например, при изучении темы «Таблицы как средство форматирования HTML-документа», воспитанник должен решить задачи, включающие: создание страницы с простой таблицей, содержащей графику и текст, создание страницы с таблицей, где объединены несколько вертикально или горизонтально расположенных ячеек, а также создание страницы с таблицей, где объединены несколько горизонтально и вертикально расположенных ячеек.
    Таким образом, для успешного освоения темы «Таблицы как средство форматирования HTML-документа» каждый учащийся должен выполнить хотя бы одно задание на создание таблицы. Подростки, у которых темпы освоения программы выше среднего, могут выполнить одно упражнение, включающее все перечисленные элементы.
    Наличие нескольких сходных по смыслу задач позволит, во-первых, обеспечить индивидуальными задачами каждого воспитанника (снимается проблема списывания решений друг у друга) и, во-вторых, позволит педагогу, в случае возникновения у гимназиста проблем с решением задачи, оказать ему существенную помощь (вплоть до решения задачи вместе с ним), после чего выдать подростку аналогичное задание. Такой подход позволит преподавателю проверить понимание каждым обучающимся методики решения задачи рассматриваемого типа.
    Для удобства педагога рекомендуется нумеровать задачи двойным или тройным номером в соответствии с темой, реализуемой особенностью и порядковым номером в рамках реализуемой особенности данной темы.
    Методика проведения занятий
    Рассмотреть методику индивидуального обучения можно на примере работы по программе одного учащегося.
    Пусть подросток изучил A тем и решил по ним все необходимые задачи, то есть доказал педагогу, что разобрался во всех A темах. Теперь учащийся должен перейти к изучению темы A+1. Преподаватель выдаёт воспитаннику теоретический материал, организованный по указанному выше принципу. Учащийся записывает основные положения темы в тетрадь, проверяет их на компьютере и, возможно, экспериментирует с изучаемым явлением. После освоения содержания темы воспитанник обращается к педагогу. Если у ребенка нет вопросов (а методика формирования теоретического материала направлена на то, чтобы вопросов не возникало), и он чувствует себя готовым к решению задач по данной теме, педагог выдаёт текст задания. Если же вопросы возникают, преподаватель отвечает на них, дополнительно поясняя сложные моменты, вплоть до лекции по теме A+1, после чего выдаёт задачу. Важно отметить, что, если в процессе изучения темы A+1 выясняется, что воспитанник недопонял или забыл содержание тем, изученных ранее, следует снабдить подростка материалами по непонятой (или забытой) теме, а в дальнейшем уделять этой теме больше внимания, вынуждая учащегося использовать её при выполнении упражнений.

    Необходимо отметить, что для каждого подростка должно быть совершенно неважно, какие именно темы осваивают другие учащиеся его группы. Темы изучаются воспитанниками независимо друг от друга. Время, затрачиваемое на освоение темы, зависит лишь от темпа восприятия самого ребенка и определяется педагогом по результатам решения задач и выполнения итоговых работ.

    Методика проведения заключительного занятия (подведения итогов)
    Конкурс Web- сайтов

    С целью повышения образовательного эффекта рекомендуется дать возможность воспитаннику самостоятельно выбрать тему сайта. Педагог в этом случае должен вмешиваться в работу учащегося лишь при возникновении серьёзных осложнений в разработке проекта.
    Работа над собственным (не учебным) проектом позволяет подростку лучше разобраться в пройденном материале, почувствовать себя профессионалом.
    Участие в конкурсе позволяет учащемуся:
    • самостоятельно изучить новую тему (например, создание анимации) для того, чтобы сайт выглядел оригинально;
    • развить умение последовательно излагать свои мысли;
    • защищать свой проект, отвечая на вопросы.
    Методика составления задач, решаемых учащимися
    Каждая задача должна быть такой, чтобы подросток мог решить её за одно занятие.
    Очень важно, чтобы задачи включали в себя элементы, изученные ранее. Такой подход позволит педагогу контролировать понимание изученного материала, а учащемуся – вспомнить и лучше осознать пройденные темы, понять, что каждая изучаемая тема чрезвычайно важна для дальнейшего обучения.
    Техническое и программное обеспечение
    Для реализации данной программы подойдут компьютеры самых разных производителей (например, Apple). Желательно соответствие между числом учащихся и числом компьютеров как 1:1.
    На компьютерах должна быть установлена любая операционная система, т. к. язык разметки гипертекста универсален для различных платформ.
    Требуются следующие прикладные программы:
    • браузер (например, Internet Explorer) для просмотра сайта;
    • блокнот или другой простой текстовый редактор для ввода кода HTML;
    • графический редактор (например, Adobe Photoshop) для обработки и оптимизации изображений.

    Файлы: Форматирование текста.ppt
    Размер файла: 559616 байт.

    ( план – конспект урока 1 класс 5 класс. 6 класс 7 класс 8 класс 9 класс 10 класс Английский язык Литературное чтение Математика Музыка ОБЖ Окружающий мир Оренбургская область Физика ЦОР алгебра биология викторина внеклассное мероприятие география геометрия здоровье игра информатика история классный час конкурс конспект урока краеведение кроссворд литература начальная школа обществознание презентация программа проект рабочая программа русский язык тест технология урок химия экология