Рабочая программа кружка по теме Основы Web — дизайна

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-дизайна: Задание к итоговому проекту.
















13PAGE 15


13PAGE 14115








Заголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6Заголовок 7Заголовок 8Заголовок 915