Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Рабочие программы / Рабочая программа кружка по теме "Основы Web - дизайна"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Рабочая программа кружка по теме "Основы 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».

Итоговый контроль проводится в конце курса. Он организуется в форме дифференцированного зачёта — защита итогового проекта.

Программное обеспечение:

  1. Операционная система: Windows XP (или выше).

  2. Любой текстовый редактор.

  3. Браузер 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-страницы. Текстовые блоки и графические вставки.

Учебно-методические материалы

  1. . Ситникова, О. В., Татарникова, Л. А., Вьюгов, Д. С. Технологии создания сайтов и основы web-дизайна: Учебное пособие.

  2. Уроки сайтостроения: Электронный практикум.

  3. Технологии создания сайтов и основы web-дизайна: Учебная программа.

  4. Татарникова, Л. А. Технологии создания сайтов и основы web-дизайна: Методические рекомендации.

  5. Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задания для проведения контрольной работы № 1 «Язык гипертекстовой разметки HTML. Каскадные таблицы стилей CSS».

  6. Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задания для проведения контрольной работы № 2 «Язык сценариев JavaScript».

  7. Кузнецов, В. В. Технологии создания сайтов и основы web-дизайна: Задание к итоговому проекту.

10



Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 10.03.2016
Раздел Информатика
Подраздел Рабочие программы
Просмотров568
Номер материала ДВ-514078
Получить свидетельство о публикации
Похожие материалы

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