- Преподавателю
- Информатика
- Рабочая программа кружка по теме Основы Web - дизайна
Рабочая программа кружка по теме Основы Web - дизайна
Раздел | Информатика |
Класс | - |
Тип | Рабочие программы |
Автор | Махов О.В. |
Дата | 29.01.2016 |
Формат | doc |
Изображения | Нет |
Web-дизайн
Программа кружка
Пояснительная записка
Одна из задач обучения информатике состоит в содействии прогрессивному изменению личностных качеств и свойств нового поколения в направлении, соответствующем стилю жизнедеятельности в условиях информационного общества. Поэтому основной задачей учебных курсов информационно-технологической направленности является обогащение индивидуальности учащихся и высвобождение их творческого потенциала в процессе освоения средств информационных технологий. В этом смысле умение целесообразно использовать информацию, выявлять в ней факты и проблемы, структурировать и преобразовывать информацию в текстовую и мультимедийную формы, применять её для решения возникающих задач является адекватным ответом на поставленную задачу.
Умение представлять преобразованную информацию, учитывая особенности восприятия других людей, - важное условие образовательной компетентности учащихся, выбравших кружок «Web-дизайн». Web-сайт является хорошо известным и доступным ученикам средством представления текстовой, графической и иной информации в сети Интернет.
На кружок отводится 3 часа в неделю (105 часов в год). Очень важно то, что активизация познавательного процесса позволяет учащимся более полно выражать свой творческий потенциал и реализовывать собственные идеи в изучаемой области знаний, создаёт предпосылки по применению освоенных способов сайтостроения в других учебных курсах, а также способствует возникновению дальнейшей мотивации, направленной на освоение интернет-профессий, предусматривающих web-мастеринг.
Программа кружка включает в себя практическое освоение техники создания web-страниц, тематических сайтов, а также информационно-справочных и других сайтов.
Тесная связь стиля деятельности, сформированного интернет-технологиями, со всеми сферами современного общества (гуманитарной, естественнонаучной, социальной, экономической и др.) позволяет использовать знания, выработанные при освоении программы кружка «Web-дизайн», практически во всех образовательных областях старшей школы.
Освоение знаний и способов web-конструирования осуществляется в процессе разработки сайтов на близкие учащимся темы, которые они определяют для себя самостоятельно. Такой подход гарантирует дальнюю мотивацию и высокую результативность обучения.
Общепедагогическая направленность занятий - гармонизация индивидуальных и социальных аспектов обучения по отношению к сетевым информационным технологиям. Знания, умения и способы конструирования web-сайтов являются элементами информационной компетенции - одной из ключевых компетенций современной школы. Умение находить, структурировать, преобразовывать и сохранять информацию в html-формате и других интернет-совместимых форматах - необходимое условие подготовки современных школьников. Особая роль отводится широко представленной в курсе системе рефлексивных заданий. Освоение рефлексии направлено на осознание учащимися того важного обстоятельства, что наряду с разрабатываемыми ими продуктами в виде html-страниц рождается основополагающий образовательный продукт: освоенный инструментарий. Именно этот образовательный продукт станет базой для творческого самовыражения учащихся в форме сайтов, которые можно размещать в Интернете или в локальной школьной сети.
Цели кружка
Основными целями кружка являются:
-
научить учащихся ориентироваться и продуктивно действовать в информационном интернет-пространстве, используя для достижения своих целей создаваемые web-ресурсы;
-
сформировать у школьников целостное представление об информационной картине мира средствами Всемирной паутины, научить их способам представления информации в сети Интернет;
-
познакомить учащихся со способами научно-технического мышления и деятельности, направленными на самостоятельное творческое познание и исследование информационной части сетевого пространства;
-
реализовать способности учеников в ходе проектирования и конструирования сайтов;
-
сформировать элементы информационной и телекоммуникационной компетенций по отношению к знаниям, умениям и опыту конструирования.
Задачи кружка
Основными задачами кружка являются:
-
познакомить с видами web-сайтов, их функциональными, структурными и технологическими особенностями;
-
сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения web-сайта;
-
создать представление о языке HTML и научить использовать его для создания web-страниц;
-
сформировать навыки коллективной работы с комплексными web-проектами;
-
создать и разместить в сети Интернет собственный web-сайт в соответствии с выбранной темой.
Планируемые результаты курса
В рамках кружка «Web-дизайн» учащиеся овладевают следующими знаниями, умениями и способами деятельности:
-
знают принципы и структуру устройства Всемирной паутины, формы представления и управления информацией в сети Интернет;
-
умеют найти, сохранить и систематизировать необходимую информацию из Сети с помощью имеющихся технологий и программного обеспечения;
-
умеют спроектировать, изготовить и разместить в сети web-сайт объёмом 5-10 страниц на заданную тему;
-
владеют способами работы с изученными программами;
-
знают и умеют применять при создании web-страницы основные принципы web-дизайна;
-
владеют необходимыми способами проектирования, создания, размещения и обновления web-сайта;
-
знают виды web-сайтов, способны произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;
-
владеют приёмами организации и самоорганизации работы по изготовлению сайта;
-
имеют положительный опыт коллективного сотрудничества при конструировании сложных web-сайтов;
-
имеют опыт коллективной разработки и публичной защиты созданного сайта;
-
овладевают процедурой самооценки знаний и деятельности и корректируют дальнейшую деятельность по сайтостроительству.
Способы оценивания уровня достижений учащихся
Предметом диагностики и контроля в курсе «Технологии создания сайтов и основы web-дизайна» являются внешние образовательные продукты учащихся (созданные web-сайты), а также их внутренние личностные качества (освоенные способы деятельности, знания, умения), которые относятся к целям и задачам курса.
Одним из показателей действенности и результативности диагностики и контроля является их своевременность. Разрыв во времени между выполнением задания и диагностикой образовательного продукта снижает эффективность процесса обучения.
Педагогическая ценность контроля заключается в том, что при правильном подходе к его организации не только учитель будет получать всестороннюю информацию о внешних образовательных продуктах и об изменении внутренних личностных качеств и свойств учащихся (активизация способности к анализу или синтезу, усиление логической обоснованности и др.), но и учащиеся смогут самостоятельно оценивать эффективность собственного учебного труда.
Диагностика и контроль - необходимые части учебного процесса, но увеличение их доли неизбежно приводит к сокращению времени на изучение материала. Поэтому столь важно извлечение максимума информации об учащихся за минимальное время.
Контроль и диагностика должны быть действенными. Даже когда учитель отмечает факт решения практической задачи (созданную web-страницу), он должен стремиться к мысленному представлению использования учеником принципов web-дизайна, т. е. использовать практический результат в качестве показателя сформированности определённого способа деятельности (выполнение учебной задачи) и на этой основе оценивать полученный продукт.
Поскольку в условиях гуманизации образования ученик является полноправным субъектом оценивания, то учитель должен обучать школьников навыкам самооценки. С этой целью педагог выделяет и поясняет критерии оценки, учит школьников формулировать эти критерии в зависимости от поставленных целей и особенностей образовательного продукта. При этом важно учитывать, что одно дело - давать оценку внешней образовательной продукции (созданному web-сайту) и другое - внутреннему образовательному продукту (освоенным способам действий).
Качество внешней образовательной продукции желательно оценивать по следующим параметрам:
-
по количеству творческих элементов в сайте;
-
по степени его оригинальности;
-
по относительной новизне сайта для ученика или его одноклассников;
-
по ёмкости и лаконичности созданного сайта, его интерактивности;
-
по практической пользе сайта и удобству его использования.
Созданными внешними образовательными продуктами учащиеся могут пополнять собственные портфолио.
Оценка внутреннего образовательного продукта связана с направленностью сознания школьника на собственную деятельность, на абстракцию и обобщение осуществляемых действий, иными словами: здесь должна иметь место рефлексивная саморегуляция.
Проверка достигаемых школьниками результатов производится в следующих формах:
-
текущий рефлексивный самоанализ, контроль и самооценка учащимися выполняемых заданий;
-
текущая диагностика и оценка учителем деятельности школьников в виде двух контрольных работ по следующим темам: «Язык гипертекстовой разметки HTML. Каскадные таблицы стилей CSS»; «Язык сценариев JavaScript».
Итоговый контроль проводится в конце курса. Он организуется в форме дифференцированного зачёта - защита итогового проекта.
Программное обеспечение:
-
Операционная система: Windows XP (или выше).
-
Любой текстовый редактор.
-
Браузер Internet Explorer версии 5 или выше.
Тематический план курса
Наименование разделов и тем
Количество часов
Всего
Прак. занятия
Техника безопасности и организация рабочего места
1
0
Раздел 1. Осваиваем Интернет
4
1
1.1. Структура сети Интернет. Виды доступа к Интернет
1
1.2. Принципы функционирования сети
1
1.3. Сервисы Интернета. Браузеры
2
1
Раздел 2. Язык гипертекстовой разметки HTML
16
16
2.1. Структура html-документа
1
1
2.2. Теги и атрибуты
2
2
2.3. Вставка изображения на страницу
2
2
2.4. Управление рисунком
2
2
2.5. Простые таблицы
2
2
2.6. Формирование сложных таблиц
3
3
2.7. Гиперссылки
2
2
2.8. Оформление гиперссылок
2
2
Раздел 3. Каскадные таблицы стилей CSS
25
15
3.1. Каскадные таблицы стилей
3
2
3.2. Позиционирование
3
2
3.3. Фреймы
3
2
3.4. Настройка фреймов
2
1
Раздел 4. Язык сценариев JavaScript
7
4
4.1. JavaScript
4
2
4.2. Таймер и формы
3
2
Раздел 5. Теоретические основы дизайна
8
4
5.1. Основы визуального дизайна
1
5.2. Web-графика
5
4
5.3. Дизайн web-сайтов
2
Раздел 6. Создание собственного сайта
37
30
6.1. Виды сайтов. Функции сайтов
2
1
6.2. Возможности публикации сайта на web-ресурсе
2
2
6.3. Проект внешнего вид сайта. Создание стартовой страницы. Прочие страницы сайта: дизайн и навигация. Примеры разработки эскиза веб-страницы.
3
2
6.4. Карта сайта. Виды карт сайтов. Файловая структура сайта.
3
2
6.5. Работа над индивидуальным проектом
23
23
6.5. Защита проекта
4
Резерв времени
7
0
ВСЕГО
105
70
Содержание кружка
Введение
Основы web-дизайна, технологии создания привлекательных и удобных сайтов. Язык HTML - основной инструмент создания web-страниц.
Язык JavaScript - скриптовый язык, с помощью которого можно добавить на страницу динамические и интерактивные эффекты (реагирование на кнопки, обработка форм, произвольные надписи, зависящие от действий пользователей, и т. д.).
Раздел 1. Язык гипертекстовой разметки HTML
Тема 1.1. Структура html-документа
Учащиеся должны знать / понимать:
-
принципы работы с html-тегами;
-
принципы работы браузера при отображении страницы;
-
структуру кода web-страницы;
-
теги заголовков, с помощью которых формируется страница;
-
теги форматирования текста.
Учащиеся должны уметь:
-
создать web-страницу с помощью html-кода;
-
придать web-странице требуемое форматирование.
Браузер. Структура html-документа. Тег. Форматирование html-документа.
Практическая работа: «Структура html-документа».
Тема 1.2. Теги и атрибуты
Учащиеся должны знать / понимать:
-
назначение основных параметров для тегов форматирования.
Учащиеся должны уметь:
-
управлять параметрами текста с помощью тега ;
-
управлять параметром выравнивания для тега
;
-
задавать заголовок документа.
Атрибуты тегов. Базовый шрифт. Заголовок html-документа.
Практическая работа: «Теги и атрибуты».
Тема 1.3. Вставка изображения на страницу
Учащиеся должны знать / понимать:
-
как вставить изображение на web-страницу;
-
как отключать отображение изображений на web-странице.
Учащиеся должны уметь:
-
вставлять необходимое изображение в нужное место web-страницы;
-
задавать альтернативный текст для вставляемого изображения.
Вставка изображения на web-страницу. Альтернативный текст.
Практическая работа: «Вставка изображения на страницу».
Тема 1.4. Управление рисунком
Учащиеся должны знать / понимать:
-
как узнать значения высоты и ширины графического файла.
Учащиеся должны уметь:
-
задавать произвольный размер вставляемому изображению;
-
выравнивать и центрировать рисунок на web-странице.
Выравнивание рисунка. Свойства графического изображения.
Практическая работа: «Управление рисунком».
Тема 1.5. Простые таблицы
Учащиеся должны знать / понимать:
-
основы работы с таблицами и применение их для разметки структуры web-документа;
-
назначение основных атрибутов таблицы.
Учащиеся должны уметь:
-
формировать таблицу;
-
настраивать ширину и высоту ячеек таблицы;
-
осуществлять разметку страницы с помощью таблиц;
-
создавать сложную структуру с помощью вложенных таблиц.
Создание и разметка таблицы. Вложенные таблицы.
Практическая работа: «Простые таблицы».
Тема 1.6. Формирование сложных таблиц
Учащиеся должны знать / понимать:
-
способы модификации таблицы путём объединения ячеек и применение границ и заливок.
Учащиеся должны уметь:
-
объединять ячейки таблицы;
-
оформлять таблицу с помощью границ и заливки ячеек.
Объединение ячеек таблиц. Границы и заливка таблицы.
Практическая работа: «Формирование сложных таблиц».
Тема 1.7. Гиперссылки
Учащиеся должны знать / понимать:
-
назначение гиперссылок и принцип их создания.
Учащиеся должны уметь:
-
осуществлять связь страничек с помощью гиперссылок.
Гиперссылки.
Практическая работа: «Гиперссылки».
Тема 1.8. Оформление гиперссылок
Учащиеся должны знать / понимать:
-
как оптимальным образом и в каком виде поместить гиперссылку на web-страницу.
Учащиеся должны уметь:
-
изменять стандартные цвета гиперссылок;
-
создавать картинки-гиперссылки;
-
ссылаться на внешние ресурсы Интернета.
Картинка-гиперссылка. Цвета гиперссылки. Внешний ресурс.
Практическая работа: «Оформление гиперссылок».
Раздел 2. Каскадные таблицы стилей CSS
Тема 2.1. Каскадные таблицы стилей
Учащиеся должны знать / понимать:
-
назначение каскадной таблицы стилей;
-
принципы создания стилей и их применение на web-страницах.
Учащиеся должны уметь:
-
создавать внешнюю таблицу стилей, подключать её к web-странице и применять стили к тегам;
-
создавать стилевые правила для отдельных тегов, создавать классы и псевдоклассы.
Каскадные таблицы стилей (CSS). Селектор. Внешняя таблица стилей. Стилевой класс и псевдокласс.
Практическая работа: «Каскадные таблицы стилей».
Тема 2.2. Позиционирование
Учащиеся должны знать / понимать:
-
возможности стилей по позиционированию тегов;
-
возможности внутренних и Inline-стилей.
Учащиеся должны уметь:
-
создавать и использовать контекстный селектор;
-
использовать внутреннюю таблицу стилей и Inline-стиль;
-
задать позицию для тега с помощью стилей.
Контекстный селектор. Внутренняя таблица стилей. Inline-стиль. Позиционирование.
Практическая работа: «Позиционирование».
Тема 2.3. Фреймы
Учащиеся должны знать / понимать:
-
назначение фреймов и основы работы с ними.
Учащиеся должны уметь:
-
формировать фреймовую структуру страницы;
-
осуществлять загрузку web-страницы в заданный фрейм.
Фрейм. Фреймовая структура страницы. Гиперссылки между фреймами.
Практическая работа: «Фреймы».
Тема 2.4. Настройка фреймов
Учащиеся должны знать / понимать:
-
основные атрибуты тегов фреймовой структуры.
Учащиеся должны уметь:
-
оформлять фреймы;
-
создавать «историю» посещения страничек.
Форматирование фреймов. «История» посещения страничек.
Практическая работа: «Настройка фреймов».
Раздел 3. Язык сценариев JavaScript
Тема 3.1. JavaScript
Учащиеся должны знать / понимать:
-
принципы работы скриптового языка;
-
способы применения скриптового языка на web-странице;
-
как нужно задавать переменные, и их основные функции;
-
основные объекты, методы, свойства и события.
Учащиеся должны уметь:
-
создавать скрипты (функции, обрабатывающие некоторые события) и включать их в web-страницу;
-
подключать к страничке внешний файл со скриптами;
-
динамически изменять содержимое блока;
-
искать и исправлять ошибки в скриптах;
-
применять необходимые методы, свойства и события к тегу.
Базовые понятия программирования на JavaScript. События, свойства и методы основных объектов JavaScript. Функция.
Практическая работа: «JavaScript».
Тема 3.2. Таймер и формы
Учащиеся должны знать / понимать:
-
принцип работы таймера;
-
назначение форм и работу с ними.
Учащиеся должны уметь:
-
использовать таймер;
-
получать и обрабатывать данные от посетителя с помощью элементов форм.
Таймер. Форма. Элементы формы.
Практическая работа: «Таймер и формы».
Раздел 4. Теоретические основы дизайна
Тема 4.1. Основы визуального дизайна
Учащиеся должны знать / понимать:
-
инструменты web-дизайна;
-
принципы дизайна;
-
характерные свойства абстрактных материалов, с которыми работает дизайнер, - размер, форма, цвет и шрифт как визуальные аспекты любого объекта;
-
фундаментальные принципы дизайна.
Учащиеся должны уметь:
-
подобрать гармоничные цвета композиции;
-
выбрать удачное шрифтовое решение композиции.
Пространственные отношения. Форма и размер. Цвет и размер. Пропорции. Размещение элементов в композиции web-страницы. Плотность размещения материала. Форма. Цвет. Текст и фон. Шрифт и текст. Подбор шрифтов. Принципы дизайна.
Тема 4.2. Web-графика
Учащиеся должны знать / понимать:
-
особенности подготовки web-графики (диффузия, антиалиасинг);
-
«безопасную» палитру цветов;
-
об оптимизации графики для Интернета;
-
функции web-графики;
-
форматы файлов для хранения компьютерной графики;
-
основные принципы формирования и обработки компьютерной графики.
Учащиеся должны уметь:
-
оптимизировать графику;
-
убирать эффект ореола.
Виды компьютерной графики. Графические форматы. Особенности подготовки графики для web-страниц. Функции web-графики.
Практическая работа: создать логотип фирмы, используя собственные инициалы.
Дополнительно: как создать и разместить на web-странице ролик, созданный в программе Macromedia Flash.
Тема 4.3. Дизайн web-сайтов
Учащиеся должны знать / понимать:
-
ограничения, налагаемые на дизайн web-сайтов;
-
типы сайтов;
-
зависимость дизайна от тематики сайта;
-
элементы, из которых состоит web-страница;
-
классификацию сайтов;
-
устройство сайтов.
Учащиеся должны уметь:
-
различать типы сайтов и их назначение;
-
комбинировать на web-странице графическую и текстовую информации.
Типы сайтов. Устройство сайтов. Топологическая структура сайта. Размерные отношения и ограничения формата web-страницы. Текстовые блоки и графические вставки.
Учебно-методические материалы
-
. Ситникова, О. В., Татарникова, Л. А., Вьюгов, Д. С. Технологии создания сайтов и основы web-дизайна: Учебное пособие.
-
Уроки сайтостроения: Электронный практикум.
-
Технологии создания сайтов и основы web-дизайна: Учебная программа.
-
Татарникова, Л. А. Технологии создания сайтов и основы web-дизайна: Методические рекомендации.
-
Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задания для проведения контрольной работы № 1 «Язык гипертекстовой разметки HTML. Каскадные таблицы стилей CSS».
-
Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задания для проведения контрольной работы № 2 «Язык сценариев JavaScript».
-
Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задание к итоговому проекту.
10