Программа элективного курса по информатике "Сайтостроение" (8 класс)

Муниципальное бюджетное образовательное учреждение средняя общеобразовательная школа имени Усманова Гайсы Муртазовича села Ахуново муниципального района Учалинский район Республики Башкортостан

«Рассмотрено»

Руководитель МО

______ Фаттахова Ф. И.

Протокол № __ от

«____»__________2013 г.

«Согласовано»

Заместитель директора по УВР МОУ СОШ им. Усманова Г. М. с. Ахуново

_______ Гафурова А. Б.

«____»____________2013 г.

«Утверждаю»

Директор МОУ СОШ

им. Усманова Г. М. с. Ахуново

__________ Кучербаева Х. И.

Приказ № ___ от

«___» _____________ 2013 г.

ОБРАЗОВАТЕЛЬНАЯ ПРОГРАММА

КУРСА «САЙТОСТРОЕНИЕ»

Даутовой Гульсесек Вазировны,

учителя информатики

первой квалификационной категории

Пояснительная записка

Курс «Сайтостроение» включает в себя практическое освоение техники создания веб - страниц, тематических сайтов, информационно-справочных и иных сайтов.

Курс рассчитан на 108 учебных часов.

Занятия проводятся 1 раза в неделю.

Продолжительность занятий – 1 час.

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

Каждый учащийся создает личностно значимую для него образовательную продукцию — сначала простейшие веб - страницы, затем их отдельные элементы и целостные веб - сайты. Освоение знаний и способов веб-конструирования осуществляется в ходе разработки учениками сайтов на темы, которые они определяют для себя самостоятельно. Осознание и присвоение учащимися достигаемых результатов происходят с помощью рефлексивных заданий. Такой подход гарантирует повышенную мотивацию и результативность обучения.

Общепедагогическая направленность занятий — сопряжение социализации и индивидуализации обучения по отношению к сетевым информационным технологиям. Знания, умения и способы конструирования веб - сайтов являются элементами информационной компетенции — одной из ключевых компетенций старшей профильной школы. Умение находить, структурировать, преобразовывать и сохранять информацию в html-формате и других Интернет-совместимых форматах необходимое условие подготовки выпускников технологического профиля. Таким образом, освоенный инструментарий — способы веб - конструирования — выступает отдельным образовательным продуктом учеников наряду с разработанными ими сайтами. Осознание и присвоение учащимися данного типа продукции происходят с помощью рефлексивных заданий, включенных в содержание занятий.

Цели курса:

научить учащихся ориентироваться и продуктивно действовать в информационном Интернет - пространстве, используя для достижения своих целей создаваемые веб - ресурсы;

сформировать у них целостное представление об информационной картине мира средствами «Всемирной паутины». Научить способам представления информации в сети Интернета;

познакомить со способами научно-технического мышления и деятельности, направленными на самостоятельное творческое познание и исследование информационной части сетевого пространства;

реализовать коммуникативные, технические и эвристические способности учащихся в ходе проектирования и конструирования
сайтов;

сформировать элементы информационной и телекоммуникационной компетенций по отношению к знаниям, умениям и опыту конструирования веб - сайтов.

Задачи курса:

познакомить с видами веб - сайтов, их функциональными, структурными и технологическими особенностями;

сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения веб - сайта;

дать первичные навыки программирования на языках HTML, Dynamic HTML, CSS; познакомить с основами веб - дизайна;

научить основам работы с программами Dreamweaver и Flash (или аналогичными);

сформировать навыки работы в коллективе с комплексными веб - проектами;

создать и разместить в сети Интернета собственный веб-сайт по выбранной тематике.

ПЛАНИРУЕМЫЕ РЕЗУЛЬТАТЫ КУРСА

В рамках данного курса учащиеся овладевают следующими знаниями, умениями и способами деятельности: знают принципы и структуру устройства «Всемирной паутины», формы представления и управления информацией в сети Интернета;

умеют найти, сохранить и систематизировать необходимую информацию из сети с помощью имеющихся технологий и программного обеспечения; владеют браузерами;

умеют спроектировать, изготовить и разместить в сети веб - сайт объемом 5—10 страниц на заданную тему;

умеют программировать на языках HTML, Dynamic HTML, CSS на уровне создания не менее 3—5 соответствующих элементов сайта;

владеют способами работы с изученными программами (редакторы сайтов, Flash, FTP и др.);

умеют передавать информацию в сеть Интернета с помощью протокола FTP, специальных программ, веб - форм;

знают и умеют применять при создании веб - страницы основные принципы веб - дизайна;

владеют необходимыми способами проектирования, создания, размещения и обновления веб - сайта;

знают виды веб - сайтов, способны произвести анализ и сформулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;

владеют приемами организации и самоорганизации работы по изготовлению сайта;

имеют положительный опыт коллективного сотрудничества при конструировании сложных веб - сайтов;

имеют опыт коллективной разработки и публичной защиты созданного сайта;

способны осуществлять рефлексивную деятельность, оценивать свои результаты, корректировать дальнейшую деятельность по сайтостроительству.

Тематическое планирование

Курс «Сайтостроение»

№

Тема

Дата

Прим

1

Теги HTML. Структура веб - страницы. Заголовок документа. Тело документа.

04.09.13

2

Атрибуты тегов. Абзацы.

11.09.13

3

Творческая работа «Моя веб - страничка»

18.09.13

4

Форматы графических файлов

25.09.13

5

Способы организации гипертекстовых документов

02.10.13

6

Гипертекстовые ссылки

09.10.13

7

Виды сайтов, их назначение.

16.10.13

8

Таблицы

23.10.13

9

Вложенные таблицы Цвета фона.

30.10.13

10

Фреймы. Формы. Метатеги

06.11.13

11

Творческая работа.

13.11.13

12

Создание сайта

20.11.13

13

Использование таблиц

27.11.13

14

Использование фреймов

04.12.13

15

Панель навигации

11.12.13

16

Доступ к HTML-коду веб - страницы

18.12.13

17

Творческая работа.

25.12.13

18

Назначение CSS Каскадные таблицы стилей Основы CSS

15.01.14

19

Анимация движения Анимация формы. Кнопки Динамический HTML

22.01.14

20

Творческая работа.

29.01.14

21

Логотип. Фирменный стиль. Цветовая гамма. Макет дизайна.

05.02.14

22

Верстка и оптимизация веб - страниц

12.02.14

23

Информационное наполнение сайта

19.02.14

24

Выполнение и защита творческих работ на выбранные темы

26.02.14

25

Хостинг. Тестирование сайта.

05.03.14

26

Творческая работа.

12.03.14

27

Проектирование сайта

19.03.14

28

Концептуальное проектирование и физическое проектирование

02.04.14

29

Творческая работа

09.04.14

30

Выбор темы творческого проекта — сайта

16.04.14

31

Техническое задание

23.04.14

32

Проектирование, создание и размещение сайта в сети

07.05.14

33

Защита выполненных проектов

14.05.14

34

Олимпиада по веб - дизайну

21.05.14

Основные понятия: Гипертекст, HTML, тег, браузер, веб - страница, разметка, структура документа, заголовок, тело. Техническая часть Теги HTML.

Структура веб - страницы Заголовок документа Тело документа. Атрибуты тегов. Цвет фона. Изображение как фон. Цвет текста Цвета. Размер и форма шрифта. Теги форматирования текста. Взаимодействие тегов. Текстовые блоки. Заголовки. Абзацы. Перевод строки. Разделительная линия. Растровый формат, векторный формат, метафайлы, рамка изображения, выравнивание, обтекание.

Рисунки и фотографии в сети Интернета. Параметры графического файла Форматы графических файлов. Растровые форматы JPEG GIF PNG

Достоинства растрового формата. Недостатки Векторные форматы. Достоинства Недостатки. Метафайлы. Дополнительная информация. Графические редакторы. Как создать графический файл для веб — страницы. Связывание графического файла с HTML-документом. Изображения в HTML-документе. Дополнительная информация. Организация информации, гипертекстовые ссылки, внутренние ссылки, активные ссылки, посещенные ссылки, абсолютные адреса, относительные адреса. Способы организации гипертекстовых документов.

Разработка сценария гипертекстового документа, состоящего из файлов.

Гипертекстовые ссылки. Творческая работа. Тема «Выполнение и защита небольшого проекта (сайт «Мой класс», «Наш фэн - клуб» и т.п.)

Виды сайтов, критерии оценки, дизайн, навигация, эргономика, скорость загрузки, интерактивность, чат, форум, гостевая книга. Виды сайтов, их назначение. Способы управления вниманием посетителей. Способы организации информации. Полнота информации и ее обновление. Графический и технический дизайн. Навигация. Скорость загрузки страниц и определяющие факторы. Интерактивность сайта. Интернет — технологии. Исследование действующих сайтов. Критерии оценки сайтов. Обобщение. Творческая работа.

Самооценка. Рефлексия. Списки, таблицы, фреймы, формы, метатеги, интерактивность. Таблицы. Лишние ячейки. Пустые ячейки Объединение ячеек. Разделение ячейки. Вложенные таблицы Цвета фона. Фреймы. Формы. Метатеги . Обобщение. Творческая работа. Тема «Выполнение и защита небольшого проекта» Редактор веб - страниц, активные элементы, динамический язык, сценарий, баннер, сервер, администрирование. Создание нового сайта

Создание новых файлов и папок. Настройка характеристик веб – страницы. Фон. Текст. Изображения. Гиперссылки. Настройка предпочтений для редактирования сайта. Использование таблиц. Использование слоев. Использование фреймов. Панель навигации. Доступ к HTML-коду веб — страницы. Творческая работа. Тема «Выполнение и защита проекта»

Каскадные таблицы стилей, CSS, селектор, Flash, символ, клип, кнопка, анимация движения, анимация формы, Dynamic HTML, интерактивность, сценарии, статические и динамические страницы, активные элементы.

Назначение CSS Каскадные таблицы стилей Основы CSS. Цвет в CSS Размер в CSS Комментарии Создание таблицы стилей. Синтаксис. Каскадность стилей и приоритеты. ID-классы. Три способа задания стиля. Приоритеты Flash.

Основные понятия. Типы символов. Анимация движения. Анимация формы Кнопки. Динамический HTML. Работа со слоями Примеры использования DHTML Творческая работа. Тема «Технический проект». Дизайн, векторная и растровая графика, графический редактор, инструменты, фильтры, графические примитивы, палитра цветов, формат графического файла, заголовки, текст, разделы, ссылки, термины, эффективность рекламы. Логотип. Фирменный стиль Цветовая гамма Макет дизайна. Верстка и оптимизация веб - страниц. Информационное наполнение сайта. Заголовки. Текст. Простота. Краткость. Логичность изложения. Орфография. Расположение элементов на сайте. Графические элементы. Анимация. Баннеры. Навигация. Обобщение. Творческая работа. Выполнение и защита творческих работ на выбранные темы. (логотип, баннер, фирменный стиль, макет дизайна и др.). Интернет, IP-адрес, домен, провайдер, хостинг, трафик, доступ по коммутируемым каналам, выделенная линия, модем, скорость передачи информации, администрирование сайта, протоколы FTP, TCP/IP, HTTP, релевантность запросов, скорость загрузки, критичность размеров файлов изображений и веб-страниц, электронная почта, реклама, снам, статистика, посещаемость страниц сайта, счетчик, поисковые системы, поисковые роботы, рейтинг ресурса, баннер, метатеги, ключевые слова, содержание, заголовки страниц, эффекты дизайна, интерактивность, банерный обмен, обмен страницами. Хостинг. Размещение сайта у провайдера FTP — передача файлов Тестирование сайта. Удобство навигации. Целостность данных. Корректность ссылок. Орфография. Графика. Скорость загрузки. Другие возможности Регистрация сайта в поисковых системах Обмен ссылками. Банерная реклама

Принципы и технологии обновления сайта. Автоматические системы обновления сайта. Обобщение. Творческая работа. Самооценка. Рефлексия.

Концепция сайта, цели сайта, структура сайта, пользователи, навигация.

Концептуальное проектирование. Основные и второстепенные цели. Действия, которые необходимо предпринять для достижения поставленных целей Состав пользователей. Интересы групп пользователей Разделы сайта Критерии достижения цели. Логическое проектирование.Тип структуры сайта (линейная, иерархическая, контекстная, другая). Названия разделов.Что будет содержать в себе каждый раздел. Организация и связь разделов между собой. Какая информация будет размещена на определенных страницах сайта. Физическое проектирование. Технологии, которые будут применяться на сайте. Используемое программное обеспечение. Возможные проблемы и способы их устранения. Как будет обновляться информация. Тема и структура веб - сайта, проектирование, изготовление, размещение, тестирование сайта, экспертная оценка. Выбор темы творческого проекта — сайта. Техническое задание. Распределение работы между разными специалистами (заказчик, арт-директор, веб - мастер, кодер, программист, верстальщик, менеджер), их функции в общем проекте. Особенности коллективной (групповой) деятельности разработчиков сайта. Проектирование, создание и размещение сайта в сети. Логотип, фирменный стиль, баннер, макет, графика, дизайн.

Олимпиадные задания:

1. Разработайте макет своей «веб - визитки». Найдите необходимые слоганы и их графическое сопровождение.

1. Разработайте макет логотипа своей школы (класса) в формате jpg или gif. и представьте его в цветном и черно-белом вариантах.

2. Изготовьте два баннера размером 120x60 — анимированный и статичный. Цель баннеров — воздействовать на эмоциональную сферу потенциального зрителя.

3. Придумайте графическую иллюстрацию для раздела юмористического сайта. Иллюстрация необходима смешная, занимательная, оригинальная. Размер иллюстрации 130x190 пикселей. Формат файла jpg или gif.

4. Разработайте титульную веб - страницу на одну из тем: «Наш класс», «Наша школа», «Мы — фанаты!», «Интернет-газета», «Веб-клуб»