ДОПОЛНИТЕЛЬНАЯ ОБЩЕРАЗВИВАЮЩАЯ ПРОГРАММА «Веб-дизайн и разработка сайтов»

Предпросмотр материала:

ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ ГОРОДА МОСКВЫ

Государственное бюджетное ПРОФЕССИОНАЛЬНОЕ образовательное учреждение города Москвы

«КОЛЛЕДЖ АВТОМОБИЛЬНОГО ТРАНСПОРТА №9»

ДОПОЛНИТЕЛЬНАЯ ОБЩЕРАЗВИВАЮЩАЯ ПРОГРАММА

«Веб-дизайн и разработка сайтов»

Направленность: техническая

Уровень программы: базовый

Возраст учащихся: 15-17

Срок реализации: 1 год (72 часа)

Автор-составитель:

Морковская О.В.

педагог дополнительного образования

Москва 2018

1. ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

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

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

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

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

При отборе содержания и структурирования программы использованы обще дидактические принципы:

- доступности,

- преемственности,

- перспективности,

- развивающей направленности,

- учёта индивидуальных способностей,

- органического сочетания обучения и воспитания, практической направленности и посильности.

Цели программы:

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

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

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

Обучающая:

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

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

Развивающая:

· формирование представления о создании сайтов в современном мире;

· развитие знаний о жизненном цикле сайта, его дальнейшей поддержке и продвижении в сети Интернете;

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

· развитие эстетического вкуса для разработки дизайна сайта;

· формирование умений грамотно формулировать цели и задачи сайта, планировать основные этапы создания сайта и правильно организовывать работу, кодировать несложные странички с использованием HTML.

Воспитывающая:

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

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

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

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

Задачи программы:

Обучающая:

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

Развивающая:

· формирование умений грамотно формулировать цели и задачи сайта, планировать основные этапы создания сайта и правильно организовывать работу, кодировать несложные странички с использованием HTML.

Сроки реализации:

Программа рассчитана на 72 часа и предполагает поэтапное изучение следующих разделов:

Раздел 1. Основные понятия HTML.

Раздел 2. Гипертекстовая разметка HTML.

Раздел 3. Фреймы.

Раздел 4. Навигационные карты.

Раздел 5. Каскадные таблицы стилей (CSS).

Раздел 6. Язык разработки сценариев JavaScript.

Занятия проводятся в групповой форме один раз в неделю.

РАЗДЕЛ 2. СОДЕРЖАНИЕ ПРОГРАММЫ:

2.1. УЧЕБНО-ТЕМАТИЧЕСКИЙ ПЛАН

Название разделов, тем	Количество часов
Название разделов, тем	Всего часов	Теория	Практика
Раздел 1. Основные понятия HTML.	7	-	7
Раздел 2. Гипертекстовая разметка HTML.	32	-	32
Раздел 3. Фреймы.	4	-	4
Раздел 4. Навигационные карты.	8	-	8
Раздел 5. Каскадные таблицы стилей (CSS).	8	-	8
Раздел 6. Язык разработки сценариев JavaScript.	13	1	12

2.2. СОДЕРЖАНИЕ УЧЕБНОГО ПЛАНА

Наименование разделов и тем	Содержание учебного материала	Объем часов
1	2
Раздел 1.	Основные понятия HTML	7
Тема 1.1. Основной инструментарий.	Основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.	1
Тема 1.2. Язык гипертекстовой разметки HTML	Основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.	2
Тема 1.3. Обязательные тэги HTML	HTML-элементы: пустые элементы, элементы с неформатированным текстом, элементы, выводящие неформатированный текст, элементы из другого пространства имён, обычные элементы.	2
Тема 1.4. Создание HTML- документа. Требования к форматированию	Создание HTML- документа. Требования к форматированию.	2
Раздел 2.	Гипертекстовая разметка HTML	32
Тема 2.1. Задание цвета текста и фона	Теги <colour>, <bgcolour>: описание, синтаксис, значение.	2
Тема 2.2. Параграф. Выравнивание текста	Способы выравнивания текста.	2
Тема 2.3. Заголовок. Размер и типы начертания шрифта.	Текст: параметры, шрифты, размеры, свойства.	2
Тема 2.4. Разметка страниц	Создание структуры таблицы (верстка).	2
Тема 2.5. Вставка изображений, картинок	Тег <img>, адрес изображения, размеры изображения, форматы графических файлов, тег <map>, тег <area>, пример создания карты-изображения.	2
Тема 2.6. Свойства картинок	Тег <img>: описание, синтаксис, атрибуты.	2
Тема 2.7. Линии	Тег <hr>: описание, синтаксис, атрибуты.	2
Тема 2.8. Специальные символы	Использование спецсимволов.	2
Тема 2.9. Ссылки	Структура ссылки, абсолютный и относительный путь, якорь; как сделать изображение-ссылку; как сделать ссылку на телефонный номер, скайп или адрес электронной почты; атрибуты ссылок.	2
Тема 2.10. Типы ссылок	Ссылки: абсолютный и относительный путь.	2
Тема 2.11. Таблицы	Создание таблиц: строки (ряды), ячейки заголовка таблицы, ячейки тела таблицы, подпись (заголовок) таблицы.	2
Тема 2.12. Вертикальное выравнивание	Создание таблиц: строки (ряды), ячейки заголовка таблицы, ячейки тела таблицы, подпись (заголовок) таблицы, атрибуты таблицы, выравнивание.	2
Тема 2.13. Объединение по горизонтали и по вертикали ячеек таблицы	Создание таблиц: строки (ряды), ячейки заголовка таблицы, ячейки тела таблицы, подпись (заголовок) таблицы.	2
Тема 2.14. Задание границ ячеек таблицы	Создание таблиц: строки (ряды), ячейки заголовка таблицы, ячейки тела таблицы, подпись (заголовок) таблицы.	2
Тема 2.15. Вложенные таблицы	Создание таблиц: строки (ряды), ячейки заголовка таблицы, ячейки тела таблицы, подпись (заголовок) таблицы.	2
Тема 2.16. Задание рамок таблицы	Создание таблиц: строки (ряды), ячейки заголовка таблицы, ячейки тела таблицы, подпись (заголовок) таблицы, атрибуты таблицы, выравнивание; задание рамок таблицы.	2
Раздел 3	Фреймы	4
Тема 3.1. Фреймы	Описание, синтаксис, атрибуты.	1
Тема 3.2. Горизонтальное и вертикальное разделение страницы на фреймы	Расположение фреймов: горизонтальное и вертикальное разделение страницы на фреймы.	1
Тема 3.3. Свойства фреймов	Фреймы – структуры, фреймы – роли, фреймы – сценарии, фреймы – ситуации.	1
Тема 3.4. Ссылки на страницы между фреймами	Открытие документа во фрейме, файл index.html, файл menu3.html.	1
Раздел 4	Навигационные карты	8
Тема 4.1. Навигационные карты	Понятие навигационная карта и ее виды.	2
Тема 4.2. Типы ссылок в навигационных картах	Типы ссылок в навигационных картах.	2
Тема 4.3.Задание областей навигации	Прямоугольная область, полигон, окружность.	2
Тема 4.4. Разработка сайта-визитки с использованием HTML	Разработка конкретного сайта-визитки с использованием HTML.	2
Раздел 5	Каскадные таблицы стилей (CSS)	8
Тема 5.1. Глобальное определение стилей	Виды таблиц стилей, виды селекторов, комбинация селекторов, группировка селекторов, наследование и каскад.	2
Тема 5.2. Особенности использования CSS	Особенности использования CSS.	2
Тема 5.3. Блоковая модель CSS	Боксовая модель (box model).	2
Тема 5.4. Ссылки, расположения, рамки в CSS	Свойство outline.	2
Раздел 6	Язык разработки сценариев JavaScript	16
Тема 6.1. Скриптовое программирование	Виды таблиц стилей, виды селекторов, комбинация селекторов, группировка селекторов, наследование и каскад.	1
Тема 6.2. Особенности языка JavaScript	Структуры кода, переменные и типы, строгий режим, особенности операторов.	2
Тема 6.3. Изучение синтаксиса языка JavaScript на примерах	Правила применения стилей, комментарии.	2
Тема 6.4. Использование JavaScript для разработки сценариев по требованиям	Элемент Script, разработка сценариев.	2
Тема 6.5. Парольные проверки на JavaScript	Проверка совпадения паролей при наборе текста.	2
Тема 6.6. Разработка сайта с применением JavaScript	Разработка конкретного сайта с применением JavaScript.	2
Тема 6.7. Итоговый зачет	Итоговый контроль	1

РАЗДЕЛ 3. ФОРМЫ АТТЕСТАЦИИ И ОЦЕНОЧНЫЕ МАТЕРИАЛЫ

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

Результаты обучения

(освоенные умения, усвоенные знания)

Формы и методы контроля и оценки результатов обучения

Должен уметь:

решать прикладные задачи в области профессиональной деятельности.

Должен знать:

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

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

Индивидуальный:

контроль выполнения практических работ,

контроль выполнения индивидуальных самостоятельных заданий.

Комбинированный: индивидуальный и фронтальный опрос в ходе аудиторных занятий,

контроль выполнения индивидуальных и групповых заданий.

Итоговый контроль:

защита проектных работ

Ожидаемые результаты.

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

Формы контроля.

№	Контроль	Форма контроля
1.	Решение задач	Практические работы
3.	Создание проектных работ	Защита

РРРАЗДЕЛ 4. ОРГАНИЗАЦИОННО – ПЕДАГОГИЧЕСКИЕ УСЛОВИЯ РЕАЛИЗАЦИИ ПРОГРАММЫ

4.1. Требования к минимальному материально-техническому обеспечению

Реализация программы дисциплины требует наличия кабинета «Информатики».

Оборудование кабинета «Информатики»:

- посадочные места по количеству обучающихся;

- рабочее место преподавателя;

- наглядные пособия;

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

- мультимедийная система (экспозиционный экран, мультимедийный проектор, принтер, компьютер с лицензионным программным обеспечением общего и профессионального назначения);

- комплект презентаций, ДВД дисков, мультимедийных проектов по материаловедению.

4.2. СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ И ИНТЕРНЕТ-РЕСУРСЫ

Основные источники:

1. Курова И.А. Руководство по HTML. – М.: БИНОМ, 2011.

2. Монахова М.Ю. Создаем школьный сайт в интернете, учебное пособие. – М. БИНОМ. Лаборатория знаний, 2010.

3. Угринович Н.Д. Информатика и информационные технологии. – М.: Лаборатория Базовых Знаний, 2015.

Дополнительные источники:

1. Кузнецова Л.В Лекции по современным веб-технологиям. Издательство: Интернет-Университет Информационных Технологий, 2010 г. - 232 с.

2. Сергеенко С. В.Разработка Web-приложений в Oracle Forms ИнтернетУниверситет Информационных Технологий 2009 г. 198 с

Интернет-ресурсы

1. http://htmlbook.ru/

ДОПОЛНИТЕЛЬНАЯ ОБЩЕРАЗВИВАЮЩАЯ ПРОГРАММА «Веб-дизайн и разработка сайтов»

Информатика

Рабочие программы

DOCX

01.10.2020

1778

Информатика

Рабочие программы

Файл будет скачан в формате:

DOCX

Автор материала

Морковская Олеся Валерьевна

преподаватель информатики

На сайте: 9 лет и 5 месяцев
Всего просмотров: 43064
Подписчики: 0
Всего материалов: 12

43064
просмотров
12
материалов
0
подписчиков

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