close

Вход

Забыли?

вход по аккаунту

код для вставкиСкачать
Муниципальное бюджетное образовательное учреждение
дополнительного образования детей
«Дом детского творчества»
Рецензировано
Методсоветом
рецензия
от 15.10.2014 г.
Утверждено:____________
Директор: Новоселова Н.А
15.10.2014 г.
Общеобразовательная программа
«Web-дизайн»
кружок «Web-дизайн»
Срок реализации: 1 год
Возраст обучающихся: 14-17 лет
Федоров Дмитрий Владимирович
педагог дополнительного образования
Гремячинск, 2014
Содержание программы:
Программа содержит следующие разделы:
1.
2.
3.
4.
5.
6.
7.
8.
9.
Пояснительная записка
Цель
Задачи
Содержание программы
Условия реализации программы
Методики и технологии обучения и воспитания
Предполагаемые результаты
Критерии оценки результатов
Литература
I. Пояснительная записка
1.1 Актуальность программы
Глобальное информационное пространство – новый
ускоритель
развития общества. Информация становится универсальным и наиболее
совершенным фактором развития социальных процессов. Глобальная
компьютерная сеть на сегодняшний день содержит миллионы сайтов, на
которых размещена всевозможная информация. Люди получают доступ к
этой информации посредством использования технологии Internet. Для
навигации в WWW используются специальные программы – Web-браузеры,
которые существенно облегчают путешествие по бескрайним просторам
интернет. Вся информация в Web-браузере отображается в виде Webстраниц, которые являются основным элементом сайтов WWW.
Пользователю приятно посещать те Web-страницы, которые имеют стильное
оформление, не отягощены чрезмерно графикой и анимацией, быстро
загружаются и правильно отображаются в окне Web-браузера.
Создать Web-страницу непросто, но наверно каждый хотел бы попробовать
себя в роли дизайнера.
Кружок по технологии создания Web-сайтов предоставляет возможность не
только узнать что-то новое в области компьютерной графики и дизайна, но и
получить знания, которые являются востребованными современным рынком
труда.
Данный курс призван обеспечить формирование практических навыков по
работе с новыми информационными сервисами, развитие умений и качеств
человека, жизненно необходимых в современном обществе.
К таким обобщенным умениям и качествам относятся:
-коммуникативные умения – понимание другого, умение общаться и
создание различных эффективных форм
устного, письменного,
мультимедийного и сетевого общения;
- любознательность – развитие, применение и обмен новыми идеями с
другими;
-критическое
и
системное
мышление
–
развитие
мышления,
обусловливающего совершение обоснованного выбора;
-умения работать с информацией и медиасредствами – умение находить,
оценивать и создавать информацию в разных формах и на различных типах
медиаоборудования;
-межличностное взаимодействие и сотрудничество – умение работать в
команде, быть лидером, выполнять разные роли, распределять обязанности;
-продуктивная работа в коллективе;
-умение ставить и решать проблемы;
-направленность на саморазвитие;
-поиск и размещение соответствующих ресурсов;
-перенос информации и надпредметных умений из одной области знаний в
другую;
-социальную ответственность – умение действовать в интересах большого
сообщества;
-этично себя вести в личном, рабочем и общественном контекстах.
Организационно-педагогические основы обучения:
1. Форма организации объединения: кружок
2. Вид кружка – постоянный
3. Количество часов в неделю – 4 часа
4.Количество часов за учебный год – 144 часа
5. Место занятий: ОПИ, учебный кабинет № 1
6. Количество обучающихся: 15
7. Возраст обучающихся: 14-17 лет
Срок реализации программы - 1 год.
Цель программы:
Развитие творческих способностей и формирование основные навыков:
проектирования, конструирования и отладки создаваемых Web-сайтов с
использованием компьютерных технологий и прикладного программного
обеспечения, как инструмента для достижения своей цели.
Задачи:
Обучающие задачи:
 сформировать единую систему понятий, связанных с созданием,
получением, обработкой, интерпретацией и хранением информации;
 закрепить и углубить знания и умения по информационным технологиям;
 показать основные приемы эффективного использования информационных
ресурсов Интернет;
 изучить язык разметки гипертекста HTML и правила дизайна webстраниц;
 познакомить с различными способами создания графической информации
(сканирование,
цифровой
фотоаппарат,
графический
редактор),
особенностями использования графических элементов при построении Webсайтов;
Развивающие задачи:
 познакомить обучающихся с традиционными программами создания и
просмотра Web - страниц, их возможностями и особенностями; рассмотреть
основы построения Web - страниц и Web –сайтов
 Научить создавать свои коммуникационные ресурсы: электронную почту,
сайт и др.
 научить выстраивать при создании сайтов логические связи с предметами,
входящими в курс среднего образования.
Воспитательные задачи:

Сформировать потребность в саморазвитии

Способствовать развитию активной жизненной позиции, эстетическому
навыку чувства прекрасного

Привить навыки культуры общения, деловых качеств, таких как
ответственность, самостоятельность, активность, аккуратность.
4. Содержание программы
Вводное занятие.
Цели и задачи программы. Вводный инструктаж по охране труда. Техника
безопасности при работе с компьютером. Правила поведения в учреждении.
Правила пожарной безопасности. Антитеррористическая безопасность.
Организация рабочего места.
Раздел 1. Осваиваем Интернет
1.1. Структура сети Интернет. Виды доступа к Интернет
История Интернет. Принципы построения сети. Протоколы связи. Структура
сети. World Wide Web. Принцип работы сервиса WWW. Аппаратные
компоненты сети. Способы подключения компьютера к сети Интернет.
Коммутируемый доступ. Доступ по выделенным линиям. Доступ по
широкополосной сети (DSL). Доступ к Интернет по локальной сети.
Спутниковый доступ в Интернет. Доступ к Интернет с использованием
каналов кабельной телевизионной сети. Беспроводные технологии.
1.2. Принципы функционирования сети
Адресация в сети. Метод связи имен и IP. Виды IP-адресов. Доменная
система имен. Universal Resource Locator (URL).
Раздел 2. Язык гипертекстовой разметки HTML
2.1. Введение в HTML. Инструментарий
Предназначения языка HTML. Спецификация языка HTML. Версии языка.
Текстовый редактор. Браузер. Валидатор. Графический редактор.
Справочник по тегам HTML.
Практические работы
- Создание HTML-документа с помощью блокнота Windows.
- Сохранение HTML-документа на компьютере.
- Просмотр сохраненного HTML-документа с помощью браузера.
2.2. Теги и атрибуты
Теги. Парные теги или контейнеры. Правила применения тегов. Атрибуты
тегов. Синтаксис написания тегов и их атрибутов.
Практические работы
- Открытие HTML-документа для редактирования.
- Применение атрибутов к тегам.
2.3. Структура HTML-документа
Структура HTML-документа. Элемент <!DOCTYPE>. Тег <html>. Тег
<meta>. Тело документа <body>.
Практические работы
- Создание структуры HTML-документа.
- Сохранение созданного HTML-документа в качестве шаблона для
последующего создания HTML-страниц.
2.4. Типы тегов
Теги верхнего уровня. Теги заголовка документа. Блочные элементы.
Строчные элементы. Универсальные элементы. Списки. Таблицы. Фреймы.
Практические работы
- Создание заголовков на странице. Работа с блочными и строчными
элементами.
2.5. Значения атрибутов тегов
Цвет. Размер. Адрес.
Практические работы
- Изменение цвета фона и текста. Изменение размера шрифта.
2.6. Текст
Особенности текста в HTML. Абзацы. Заголовки. Выравнивание текста.
Начертание. Верхний и нижний индексы. Спецсимволы.
Практические работы
- Форматирование текста на странице. Применение спецсимволов.
2.7. Списки
Маркированный список. Нумерованный список. Список определений.
Практические работы
- Создание списка. Форматирование списка.
2.8. Изображения
Добавление изображений на страницу. Путь к файлу. Атрибуты тега <img>.
Выравнивание и размеры рисунка.
Практические работы
-Добавление изображений на страницу. Установка положения и размеров
изображения.Настройка обтекания изображения текстом.
2.9. Ссылки, якоря, навигационные карты
Текстовые ссылки. Рисунок ссылка. Ссылка на e-mail. Закладки.
Навигационные карты. Прямоугольная область. Полигон (многоугольник).
Окружность. Пересечение областей.
Практические работы
- Добавление ссылок к тексту. Добавление ссылок к изображению. Создание
всплывающей подсказки.
2.10. Таблицы. Табличная верстка сайта
Атрибуты тега <table>.
Атрибуты тега <td>. Особенности таблиц.
Выравнивание таблиц. Объединение ячеек. Вложенные таблицы. Заголовок
таблицы.
Практические работы
- Создание таблицы. Выравнивание и размеры таблицы. Объединение ячеек
таблицы. Вложение одной таблицы в другую. Создание шаблона сайта на
основе таблицы.
2.11. Фреймы
Фреймы. Ссылки во фреймах. Изменение размеров фреймов. Границы между
фреймами. Плавающие фреймы. Полосы прокрутки. Достоинства и
недостатки фреймов.
Практические работы
- Создание шаблона сайта на основе фреймов. Установка положения и
размеров фреймов.
Раздел 3. Создание сайта и размещение его в сети Интернет
3.1 Виды сайтов. Функции сайтов. Структура сайтов.
Статический сайт. Динамический сайт. Сайт-визитка. Корпоративный сайт.
Интернет-магазин. Портал. Линейная, древовидная и решетчатая структуры
сайтов.
3.2 Работа над индивидуальным проектом.
Разработка внешнего вид сайта. Создание стартовой страницы. Прочие
страницы сайта: дизайн и навигация.
3.3 Выбор хостинга и размещение сайта
Хостинг. Хостинг-провайдер. Регистрация домена. Панель управления
сайтом. Протокол передачи данных (FTP). FTP-клиент.
Практические работы
- Регистрация на хостинге. Поиск и регистрация свободного домена.
Размещение сайта на хостинге. Проверка работоспособности сайта.
3.4 Сервисы Интернета для веб-мастера.
Индексация сайта в поисковыми системами. Статистика посещаемости сайта.
Практические работы
- Регистрация сайта в поисковых системах Яндекс и Гугл. Регистрация на
сервисе Яндекс. Метрика. Получение и анализ статистики сайта.
Раздел 4. Каскадные таблицы стилей (CSS)
4.1. Введение в CSS. Внедрение CSS в HTML документ. Типы носителей
Что такое CSS. Преимущества стилей. Способы добавления стилей на
страницу. Связанные стили. Глобальные стили. Внутренние стили. Импорт
CSS. Типы носителей.
Практические работы
- Создание каскадной таблицы стилей. Сохранение файла CSS. Подключение
внешней таблицы стилей к документу HTML.
4.2. Базовый синтаксис CSS
Правила применения стилей. Компактная и расширенная формы записи.
Селекторы. Теги. Классы. Идентификаторы. Приоритеты. Комментарии.
Практические работы
- Открытие созданного файла CSS для редактирования. Запись стилевых
правил и комментариев к ним.
4.3. Значения стилевых свойств
Типы значений стилевых свойств. Строка. Число. Проценты. Размер. Цвет.
Адрес. Ключевое слово.
Практические работы
- Создание стилей для сайта. Оптимизация кода.
4.4. Селекторы тегов. Классы. Идентификаторы
Правила использования селекторов тегов. Контекстные селекторы. Дочерние
селекторы. Соседние селекторы. Универсальные селекторы. Правила
применения классов. Одновременное использование разных классов.
Правила применения идентификаторов.
Практические работы:
- Применение классов для определения стиля индивидуального элемента вебстраницы. Одновременное использование разных классов. Использование
идентификатора.
4.5. Псевдоклассы. Псевдоэлементы
Псевдоклассы. Динамическое состояние элементов. Синтаксис применения
псевдоклассов. Синтаксис использования псевдоэлементов.
Практические работы:
Использование псевдоклассов и псевдоэлементов.
4.6. Группирование. Наследование. Каскадирование
Группирование селекторов. Перенос правил форматирования для элементов.
Дочерние и родительские элементы. Каскадирование. Приоритеты браузеров.
Значение специфичности селектора.
Практические работы: Группирование селекторов.
Раздел 5. Создание и применение каскадных таблиц стилей
5.1 Работа над индивидуальным проектом. Применение стилей к дизайну
сайта.
5.2 Работа над индивидуальным проектом. Применение стилей к контенту
сайта.
II. Учебно-тематический план
Наименование разделов и тем
Техника безопасности и организация
рабочего места
Раздел 1. Осваиваем Интернет
1.1. Структура сети Интернет. Виды доступа к
Интернет
1.2. Принципы функционирования сети
Раздел 2. Язык гипертекстовой разметки
HTML
2.1. Введение в HTML. Инструментарий
2.2. Теги и атрибуты тегов
2.3. Структура html-документа
2.4. Типы тегов
2.5. Значения атрибутов тегов
2.6. Текст
2.7. Списки
2.8. Изображения
2.9. Ссылки, якоря, навигационные карты
2.10. Таблицы. Табличная верстка сайта
2.11. Фреймы
Раздел 3. Создание сайта и размещение его
в сети Интернет
3.1 Виды сайтов. Функции сайтов. Структура
сайтов
3.2 Работа над индивидуальным проектом.
Разработка внешнего вид сайта. Создание
стартовой страницы. Прочие страницы сайта:
дизайн и навигация.
3.3 Выбор хостинга и размещение сайта
3.4 Сервисы Интернета для веб-мастера.
Раздел 4. Каскадные таблицы стилей CSS
4.1. Введение в CSS. Внедрение CSS в HTML
документ. Типы носителей
4.2. Базовый синтаксис CSS.
4.3. Значения стилевых свойств
4.4. Селекторы тегов. Классы.
Идентификаторы
4.5 Псевдоклассы. Псевдоэлементы
4.6 Группирование. Наследование.
Каскадирование
Раздел 5. Создание и применение
каскадных таблиц стилей
Количество часов
Практические
Всего
занятия
1
0
4
0
2
0
2
0
36
36
2
2
2
2
2
4
2
4
4
8
4
2
2
2
2
2
4
2
4
4
8
4
27
24
3
16
16
4
4
30
4
4
28
4
2
4
4
4
4
8
8
4
4
6
6
36
32
5.1 Работа над индивидуальным проектом.
Применение стилей к дизайну сайта.
5.2 Работа над индивидуальным проектом.
Применение стилей к контенту сайта.
5.3 Защита проекта
Резерв времени
ВСЕГО
16
16
16
16
4
7
134
0
120
5. Условия реализации программы
Для обеспечения образовательного процесса и для реализации программы
имеется:
- Для занятий с обучающимися есть отдельный учебный кабинет.
-ПК педагога;
- Компьютерные рабочие места для обучающихся;
- Программное обеспечение: Текстовый редактор, набор интернет-браузеров,
Справочник HTML;
- Интернет-трафик;
- Мультимедийное оборудование: экран, проектор;
- Мультимедийные электронные средства: видеоуроки и видеоролики, слайдпрезентации, используемые в данном учебном процессе.
- Дидактические средства: программа по данному курсу; учебники и
учебные пособия, справочники;
6. Методики и технологии обучения и воспитания
Образовательный процесс имеет развивающий характер, т. е. направлен на
развитие природных задатков детей, на реализацию их интересов и
способностей. Каждое занятие обеспечивает развитие личности ребенка.
Широко применяются личностно-ориентированные технологии обучения, в
центре внимания которых неповторимая личность, стремящаяся к реализации
своих возможностей.
Основными формами проведения занятий являются: лекции, беседы.
Большая часть времени отводится практическим занятиям.
7. Предполагаемые результаты обучения
Ученики должны получить теоретические знания и практические навыки,
которые необходимы для успешного применения в своей деятельности,
включая знания и навыки в следующих областях:
По окончании обучающего курса «Web-дизайн» обучающиеся будут:
знать структуру и принципы устройства Всемирной паутины, формы
представления и управления информацией в сети Интернет;
знать как найти, сохранить и систематизировать необходимую
информацию из Сети с помощью имеющихся технологий и программного
обеспечения;
знать как спроектировать, изготовить и разместить в сети web-сайт
объёмом 5-10 страниц на заданную тему;
владеть способами работы с изученными программами;
знають и уметь применять при создании web-страницы основные
принципы web-дизайна;
владеть необходимыми способами проектирования, создания,
размещения и обновления web-сайта;
знать виды web-сайтов, способны произвести анализ и сформулировать
собственную позицию по отношению к их структуре, содержанию, дизайну и
функциональности;
владеть
приёмами организации и самоорганизации работы по
изготовлению сайта;
иметь
положительный опыт коллективного сотрудничества при
конструировании сложных web-сайтов;
иметь опыт коллективной разработки и публичной защиты созданного
сайта;
владеть процедурой самооценки знаний и деятельности и
корректировать дальнейшую деятельность по сайтостроительству.
8. Критерии оценки результатов.
Способы оценивания уровня достижений учащихся
Предметом диагностики и контроля в курсе «Технологии создания сайтов и
основы web-дизайна» являются внешние образовательные продукты
обучающихся (созданные web-сайты), а также их внутренние личностные
качества (освоенные способы деятельности, знания, умения), которые
относятся к целям и задачам курса.
Педагог отмечает факт решения практической задачи (созданную webстраницу), обучающийся должен стремиться к мысленному представлению
использования принципов web-дизайна. При диагностике используется
практический результат в качестве показателя сформированности
определённого способа деятельности (выполнение учебной задачи) и на этой
основе оценивается полученный продукт.
В условиях гуманизации образования обучающийся
является
полноправным субъектом оценивания, предполагается обучать школьников
навыкам самооценки. С этой целью педагог выделяет и поясняет критерии
оценки, учит обучающихся формулировать эти критерии в зависимости от
поставленных целей и особенностей образовательного продукта. При этом
учитываются оценки как внешней образовательной продукции (созданный
web-сайт), так и оценка
внутреннего образовательного
продукта
(освоенные способы действий).
Качество внешней образовательной продукции (созданный web-сайт)
оценивается по следующим параметрам:

по количеству творческих элементов в сайте;

по степени его оригинальности;



по относительной новизне сайта для ученика или его одноклассников;
по ёмкости и лаконичности созданного сайта, его интерактивности;
по практической пользе сайта и удобству его использования.
Созданный творческий продукт обучающиеся могут внести в собственное
портфолио.
Оценка освоенных способов действий связана с направленностью сознания
обучающегося на собственную деятельность, на абстракцию и обобщение
осуществляемых действий, иными словами: здесь имеет место рефлексивная
саморегуляция.
Проверка результатов освоения программы производится в следующих
формах:

текущий рефлексивный самоанализ, контроль и самооценка
обучающимися выполняемых заданий;

текущая диагностика и оценка педагогом деятельности обучающихся
в виде заданий по следующим темам: «Язык гипертекстовой разметки
HTML. Каскадные таблицы стилей CSS»; «Язык сценариев JavaScript».

итоги обучения подводятся в конце курса, в форме защиты творческого
продукта - созданного собственного web-сайта.
9. ЛИТЕРАТУРА
Ситникова, О. В., Татарникова, Л. А., Вьюгов, Д. С. Технологии создания
сайтов и основы web-дизайна: Учебное пособие.
2. Уроки сайтостроения: Электронный практикум.
3. Технологии создания сайтов и основы web-дизайна: Учебная программа.
4. Татарникова, Л. А. Технологии создания сайтов и основы web-дизайна:
Методические рекомендации.
5. Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задания
для проведения контрольной работы № 1 «Язык гипертекстовой разметки
HTML. Каскадные таблицы стилей CSS».
6. Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задания
для проведения контрольной работы № 2 «Язык сценариев JavaScript».
7. Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задание
к итоговому проекту.
1.
1/--страниц
Пожаловаться на содержимое документа