CSS - еще один шаг к web

Муниципальное общеобразовательное учреждение
«Средняя общеобразовательная школа с. Воскресенское Воскресенского
района Саратовской области»
Информатика и ИКТ
Программа элективного курса
«CSS - еще один шаг к web-мастерству»
для обучающихся 11 классов
(35 часов)
Составитель:
Матвеева Людмила
Владимировна,
учитель информатики
МОУ «СОШ с.
Воскресенское»
с. Воскресенское , 2011 г.
Пояснительная записка
Одно из условий образовательной компетентности обучающихся умение представлять информацию в виде, удобном для восприятия и
использования другими людьми. Веб-сайт - наиболее популярное и
доступное
старшеклассникам
средство
представления
текстовой,
графической и иной информации в сети Интернет.
Элективный курс «CSS - еще один шаг к web-мастерству» для
профильной
подготовки
обучающихся
11-х
классов
является
ориентационным, обеспечивает профессиональное самоопределение
обучающихся.
Элективный курс «CSS - еще один шаг к web-мастерству» рассчитан на
34 часа, изучается в 11 классе в течение учебного года по 1 часу в неделю.
Изучение курса позволяет учащимся более полно выявить свои способности
в изучаемой области знаний, создать предпосылки по применению
освоенных способов веб-строительства в других учебных курсах,
подготовить себя к осознанному выбору Интернет-профессий. Курс служит
средством
внутрипрофильной
специализации
в
области
новых
информационных технологий, что способствует созданию дополнительных
условий для построения индивидуальных образовательных траекторий
учащихся, дает возможность профессиональных проб в области
сайтостроения.
Концепция курса
Основа курса - личностная, практическая и продуктивная
направленность занятий. Одна из целей обучения информатике предоставить учащимся возможность личностного самоопределения и
самореализации по отношению к стремительно развивающимся
информационным технологиям и ресурсам. Для достижения данной цели
необходимо, чтобы при изучении общих для всех сетевых технологий
каждый учащийся мог создавать личностно значимую для него
образовательную продукцию.
Каждый учащийся создает личностно значимую для него
образовательную продукцию - сначала простейшие веб-страницы, затем их
отдельные элементы и целостные веб-сайты. Освоение знаний и способов
веб-конструирования осуществляется в ходе разработки учащимися сайтов
на темы, которые они определяют для себя самостоятельно.
Общепедагогическая направленность занятий - сопряжение социализации и
индивидуализации обучения по отношению к сетевым информационным
технологиям. Знания, умения и способы конструирования веб-сайтов
являются элементами информационной компетенции - одной из ключевых
компетенций старшеклассников.
Цель:
научить учащихся ориентироваться и продуктивно действовать в
информационном Интернет-пространстве, используя для достижения своих
целей создаваемые веб-ресурсы;
Задачи:





формировать
у
учащихся
целостное
представление
об
информационной картине мира средствами сети Интернет. Научить
способам представления информации в сети Интернет;
формировать элементы информационной и телекоммуникационной
компетенций по отношению к знаниям, умениям и опыту
конструирования веб-сайтов.
дать первичные навыки программирования на языке CSS;
создать и разместить в сети Интернет собственный веб-сайт по
выбранной тематике;
реализовать коммуникативные, технические и эвристические
способности учащихся в ходе проектирования и конструирования
сайтов.
Методы обучения
Основная методическая установка курса - обучение школьников
навыкам самостоятельной индивидуальной и групповой работы по
практическому конструированию сайтов.
Индивидуальное освоение ключевых способов деятельности происходит
на основе системы заданий и алгоритмических предписаний. Большинство
заданий выполняется с помощью персонального компьютера и необходимых
программных средств.
Кроме индивидуальной, применяется и групповая работа. В задачи
педагога входит создание условий для реализации ведущей подростковой
деятельности - авторского действия, выраженного в проектных формах
работы. На определенных этапах обучения учащиеся объединяются в
группы, т.е. используется проектный метод обучения. Выполнение проектов
завершается публичной защитой результатов и рефлексией. Отбор методов
обучения обусловлен необходимостью формирования информационной и
коммуникативной компетентностей старшеклассников.
При проведении занятий используются следующие формы работы:






лекционная, когда преподаватель объясняет новый материал,
сопровождая объяснение мультимедийной презентацией или записями
на доске;
демонстрационная, когда учащиеся слушают объяснения педагога и
наблюдают за демонстрационным экраном;
фронтальная, когда учащиеся синхронно работают под управлением
педагога;
самостоятельная, когда учащиеся выполняют индивидуальные задания
в течение части занятия или одного занятия;
групповая;
проектная.
Планируемые результаты курса
В рамках данного курса учащиеся овладевают следующими знаниями,
умениями и способами деятельности:











знают принципы и структуру устройства сети Интернет, формы
представления и управления информацией в сети Интернет;
умеют найти, сохранить и систематизировать необходимую
информацию из сети с помощью имеющихся технологий и
программного обеспечения; владеют браузерами Internet Explorer,
Netscape Navigator, Opera;
умеют спроектировать, изготовить и разместить в сети веб-сайт
объемом 5-10 страниц на заданную тему;
умеют программировать на языках HTML, CSS на уровне создания не
менее 3-5 соответствующих элементов сайта;
знают и умеют применять при создании веб-страницы основные
принципы веб-дизайна;
владеют необходимыми способами проектирования, создания,
размещения и обновления веб-сайта;
знают виды веб-сайтов, способны произвести анализ и сформулировать
собственную позицию по отношению к их структуре, содержанию,
дизайну и функциональности;
владеют приемами организации и самоорганизации работы по
изготовлению сайта;
имеют положительный опыт коллективного сотрудничества при
конструировании сложных веб-сайтов;
имеют опыт коллективной разработки и публичной защиты созданного
сайта;
способны осуществлять рефлексивную деятельность, оценивать свои
результаты,
корректировать
дальнейшую
деятельность
по
сайтостроительству.
Способы оценивания уровня достижений учащихся
Предметом контроля и оценки являются внешние образовательные
продукты учащихся - сайты. Качество сайтов оценивается следующими
способами:





по количеству творческих элементов в сайте;
по степени его оригинальности;
по относительной новизне сайта для учащегося;
по емкости и лаконичности созданного сайта, его интерактивности;
по практической пользе сайта и удобству его использования.
Итоговый контроль проводится в конце всего курса в виде защиты
творческих работ. Данный тип контроля позволяет провести комплексную
проверку образовательных результатов по всем заявленным целям и
направлениям курса.
Обучающимся могут быть предложены следующие темы творческих работ:
- Мир моих увлечений.
- Я и моя семья.
- Куда пойти учиться.
- История нашей школы.
- Системы счисления.
- История информатики.
- История ЭВМ.
- Природа нашего края.
- Человек и компьютер.
- Мои одноклассники.
Учебная программа курса
Введение. 2 часа
Что такое CSS? Синтаксис и принцип работы.
Работа с цветом и изображениями. Стилизация текста. 6 часов
Шестнадцатеричное значение цвета. Значение RGB. Названия цветов.
Цвет и фон документа. Цвет и фон элемента. Присоединение фонового
изображения. Управление заполнением фона. Размещение фонового
изображения.
Фиксация
или
прокрутка
фоновых
изображений.
Использование цвета фона для украшения таблиц. Создание прозрачного
цвета фона.
Выбор шрифтов. Применение семейств шрифтов к тексту. Изменение
размера шрифтов.
Жирность и стиль шрифта. Раскрашивание текста. Выравнивание текста.
Оформление текста. Установка отступа текста.
Эффекты ссылок, списки и навигация. 6 часов
Работа с состояниями ссылок. Модификация стилей ссылки. Стилизация
упорядоченных
списков.
Стилизация
неупорядоченных
списков.
Вертикальная панель навигации. Горизонтальная панель навигации. Типы
селекторов в CSS
Поля, границы и отступы. 4 часа
Исследование блочной модели. Использование полей. Стилизация
границ. Свойство-сокращение border. Использование отступов. Свойствосокращение padding.
Позиционирование, плавающее размещение и Z-индекс. 6 часов.
Введение в позиционирование. Блоки-контейнеры. Блоковая модель в
CSS.
Высота и ширина блоков Абсолютное и относительное
позиционирование. Фиксированное позиционирование. Плавающие блоки.
Слои в CSS. Z-индекс.
CSS-макеты. 4 часа.
Три столбца с обрамляющими меню фиксированной ширины. Три
столбца с шапкой и нижним колонтитулом. Вложенный плавающий блок.
Макеты с выравниванием по центру. Смешанные макеты.
Заключительный творческий проект. Защита проекта. – 7 часов
Тематическое планирование
Наименование
разделов и тем
Количество часов
Всего
Теория
Практика
Формы
контроля
1. Введение. Что такое CSS?
2
1
1
Практическая
Синтаксис и принцип
работа
работы
2. Работа с цветом и изображениями. Стилизация текста ( 6 часов)
2.1 Цвет и фон в CSS
2
1
1
Практическая
работа
2.2 Шрифты в CSS
2
1
1
Практическая
работа
2.3 Текст в CSS
2
1
1
Практическая
работа
3. Эффекты ссылок, списки и навигация. (6 часов)
3.1 Списки в CSS.
2
1
1
3.2 Ссылки в CSS
2
1
1
3.3 Типы селекторов в CSS
2
1
1
Практическая
работа
Практическая
работа
Практическая
работа
4. Поля, границы и отступы. (4 часа)
4.1 Рамки в CSS.
2
1
1
Практическая
работа
4.2 Поля и отступы
2
1
1
Практическая
работа
5. Позиционирование, плавающее размещение и Z-индекс. (6 часов.)
5.1 Блоковая модель в CSS.
Высота и ширина блоков
5.2 Позиционирование
блоков
5.3 Плавающие блоки
2
1
1
1
0,5
0,5
1
0,5
0,5
5.4 Слои в CSS
1
0,5
0,5
5.5 Практическая работа
1
1
Практическая
работа
Практическая
работа
Практическая
работа
Практическая
работа
Практическая
работа
6. CSS-макеты. (4 часа.)
6.1 Три столбца с
обрамляющими меню
фиксированной ширины
6.2 Три столбца с шапкой и
нижним колонтитулом.
6.3 Вложенный плавающий
блок. Макеты с
выравниванием по центру.
6.4 Смешанные макеты.
1
0,5
0,5
Практическая
работа
1
0,5
0,5
1
0,5
0,5
Практическая
работа
Практическая
работа
1
0,5
0,5
7. Заключительный
творческий проект.
Защита проекта.
7
ВСЕГО:
35
7
13,5
21,5
Практическая
работа
Индивидуальный
творческий
проект (Webсайт)
Список литературы и Интернет-ресурсов
1. Дуванов А. А. CSS – верстка для продолжающих. / Информатика.
Методическое приложение для учителей информатики. № 11-12, 2009.
2. Титоров Д.Ю. Профильный курс информатики «Интернеттехнологии»/Приложение к журналу «Информатика и образование». №
7- 2007. – М.:Образование и информатика, 2007.
3. Хольцшлаг М. (первод с английского Климович А.) Языки HTML и
CSS: для создания Web-сайтов. /М.: Триумф, 2007.
4. http://ab-w.net/HTML5/html5_link.php Самоучитель по сайтостроению
5. http://school.ciit.zp.ua/html-htm/dhtml/01.htm CSS в HTML -коде
6. http://www.css-school.ru/ Российская школа CSS
7. http://css-style.su/ Уроки основам CSS