ПРОГРАММА КРУЖКА «ОСНОВЫ WEB-ДИЗАЙНА
методическая разработка на тему
Технологии Всемирной паутины открывают широкие возможности для использования их в Интернете. Однако, воплощение возможностей в действительность невозможно, как и любая другая работа, без удобных инструментов. Данный курс позволит учащимся изучить основные инструментальные средства для создания и разработки Web-страниц.
Процесс создания Web-сайта творческий и увлекательный, поэтому данный курс будет интереснее учащимся не только в получении новых знаний и умений, но и в выборе их будущей профессиональной деятельности. Представляемый курс направлен на формирование компьютерной грамотности создания Web-страниц, что соответствует образовательным целям самих учащихся и в целом общества.
Скачать:
| Вложение | Размер |
|---|---|
 programma_kruzhka.doc | 157.5 КБ |
Предварительный просмотр:
ПРОГРАММА КРУЖКА «ОСНОВЫ WEB-ДИЗАЙНА
Пояснительная записка
Развитие компьютерных технологий предъявляет современному специалисту новые функциональные требования. От него требуется как хорошо развитые специализированные функции, так и умения проектировать, принимать самостоятельные решения и выполнять творческую работу. Эти умения должны формироваться с самого начала профессиональной подготовки.
Создание компьютерных сетей предоставило человечеству абсолютно новый способ общения. Новейшие достижения в технологии передачи информации открывают неограниченные возможности по обработке и передаче массива данных практически в любую точку земного шара.
Направленность программы
Данная образовательная программа имеет научно-техническую направленность.
Актуальность и новизна
Технологии Всемирной паутины открывают широкие возможности для использования их в Интернете. Однако, воплощение возможностей в действительность невозможно, как и любая другая работа, без удобных инструментов. Данный курс позволит учащимся изучить основные инструментальные средства для создания и разработки Web-страниц.
Процесс создания Web-сайта творческий и увлекательный, поэтому данный курс будет интереснее учащимся не только в получении новых знаний и умений, но и в выборе их будущей профессиональной деятельности. Представляемый курс направлен на формирование компьютерной грамотности создания Web-страниц, что соответствует образовательным целям самих учащихся и в целом общества.
Цель программы
- обучение учащихся применять основные инструментальные средства для создания Web-сайта с использованием языка гипертекста и интегрированной среды Macromedia Flash – для создания интерактивной векторной анимации, а также показать возможности применения Web-страниц в различных областях профессиональной деятельности.
Задачи программы
Обучающие: обучить основным приёмам работы с основными инструментальными программами для создания Web-страниц, дать общие представления и понятия среды Интернет и Web-страниц.
Воспитательные: формировать компьютерной грамотности создания Web-страниц и Web-сайтов с помощью языка гипертекстовой разметки документов (HTML).
Развивающие: научить изменять дизайн сайта с помощью инструментальных средств.
Отличительная особенность программы
Отличительная особенность программы в том, что знания и навыки, полученные учащимися, окажутся полезными в дальнейшем изучении предметов не только информационно-технологического профиля, но всех других и будут способствовать осознанному выбору профиля для дальнейшего обучения. По окончании курса учащиеся научаются эффективно использовать инструментальные программные средства (блокнот) с использованием языка HTML для создания Web-страниц и Web-сайтов.
Возраст детей и сроки реализации программы
Программа рассчитана для учащихся в возрасте 13-16 лет и реализуется сроком в один год по 144 часа.
Формы и режим занятий
Занятия построены по модульному принципу и предполагают практическое выполнение индивидуальных и групповых заданий, а так же выполнение проектной работы в области Интернет-технологий. Проводятся занятия 2 раза в неделю по 2 часа.
Ожидаемые результаты и способы их проверки
По окончании курса учащиеся должны знать:
- основы компьютерных Интернет-технологий;
- основные тэги и их характеристики;
- определять дизайн Web-сайта и его структурных компонентов.
По окончании курса учащиеся должны уметь:
- владеть основами работы с прикладными программными средствами в частности интегрированной средой Macromedia Flash – для создания интерактивной векторной анимации и применять их на практике для создания Web-сайта;
- применять различные цвета для оформления Web-странички;
- использовать таблицы, определять структуру Web-документа, используя при этом различные анимационные графические элементы, фотографии, рисунки и т.д.;
- создавать гиперссылки дополнительных Web-страниц;
- использовать дополнительные источники информации (литература, программы) для создания Web-страниц.
Формы подведения итогов
Для оценки результативности программы в конце изучения курса учащиеся выполняют проектную работу – создание сайта.
Техническое обеспечение
- персональные компьютеры (по численности группы);
- мультимедийный проектор;
- Internet.
Программное обеспечение
- операционная система Windows XP;
- браузеры Internet Explorer, Opera;
- текстовый процессор Блокнот;
- Программа ButtonStudio;
- программа Macromedia Flash MX;
Учебно-тематический план
№ п/п | Наименование тем и разделов | Количество часов | ||
Всего | Теория | Практика | ||
1. | Введение в курс. | 2 | 2 | - |
Язык гипертекстовой разметки HTML. (54 часа) | ||||
2. | Основные понятия HTML. Структура HTML-документа. | 2 | 1 | 1 |
3. | Форматирование текста. Разделители текста. | 4 | 2 | 2 |
4. | Списки. Нумерованный и маркированный. Списки определений. | 4 | 2 | 2 |
5. | Размещение графики. | 4 | 1 | 3 |
6. | Создание и фоновое оформление главной Web-страницы. | 4 | 1 | 3 |
7. | Использование таблиц. | 4 | 1 | 3 |
8. | Анимация. Бегущая строка. | 4 | 1 | 3 |
9. | Работа с гиперссылками. Создание страниц сайта. | 4 | 2 | 2 |
10. | Оформление гиперссылок. | 2 | - | 2 |
11. | Фреймы. | 2 | 1 | 1 |
12. | Создание сайта с помощью языка HTML. | 20 | - | 20 |
Программа Button Studio (4 часа) | ||||
13. | Создание кнопок с помощью программы Button Studio. | 2 | 1 | 1 |
14. | Импорт и вставка кнопки на Web-страницу. | 2 | 1 | 1 |
Macromedia Flash MX (84 часа | ||||
15. | Окно программы Macromedia Flash MX. Панель инструментов и её структура. Упражнение 1: Рисование полумесяца. | 4 | 2 | 2 |
16. | Инструменты Чёрная стрелка и Модификатор. Упражнение 2: Преобразование овала в букет цветов. | 2 | 1 | 1 |
17. | Копирование фрагментов изображения с одновременным искажением копии. Упражнение 3: Создание кружевного узора. | 2 | 1 | 1 |
18. | Объединение изображений в группы. Упражнение 4: Рисование автомобиля. | 4 | 2 | 2 |
19. | Инструменты и панели для рисования, изменения и удаления линий. Упражнение 5: Рисование многоугольника инструментом Линия. | 2 | 1 | 1 |
20. | Инструмент Перо. Техника рисования и редактирования кривых Безье. Упражнение 6: Рисование синусоиды инструментом Перо. | 2 | 1 | 1 |
21. | Цвет. Некоторые свойства и закономерности. Инструмент Ведро с краской. Упражнение 7: Лампа. | 2 | 1 | 1 |
22. | Текст и его роль в создании анимации. Гиперссылки. Упражнение 8: Создание ссылки на Web-странички. | 2 | 1 | 1 |
23. | Упражнение 9: Создание «рисованного текста» с градиентной заливкой. | 2 | - | 2 |
24. | Создание пошаговой анимации. Упражнение 10: Создание анимации «Переливающийся цветной шар». | 2 | 1 | 1 |
25. | Перемещение, копирование и уничтожение кадров. Изменение очерёдности их следования. Упражнение 11: Создание анимации «Двигающийся по кругу цветной шар». | 2 | 1 | 1 |
26. | Упражнение 12: Создание анимации «Бегущий человек». | 2 | - | 2 |
27. | Структура анимационного фильма. Пример многослойного фильма с пошаговой анимацией. Упражнение 13: Создание анимации «Движущийся автомобиль». | 2 | 1 | 1 |
28. | Анимация движения. Упражнение 14: Пример создания анимации движения. | 2 | 1 | 1 |
29. | Упражнение 15: Создание анимации с участием букв текста. | 2 | 1 | 1 |
30. | Упражнение 16: Создание анимации движения букв текста. | 2 | - | 2 |
31. | Анимация формы. Метки формы. Упражнение 17: Пример использования метки формы. | 2 | 1 | 1 |
32. | Архитектура образцов типа Button (кнопка). Упражнение 18: Создание кнопки. | 2 | 1 | 1 |
33. | Направляющий слой и слой траектории. Упражнение 19: Создание анимации «Полёт бабочки над цветком по заданной траектории». | 2 | 1 | 1 |
34. | Маскируемый слой и слой-маска. Упражнение 20: Создание эффекта постепенного появления текста. | 2 | 1 | 1 |
35. | Упражнение 21: Создание анимации: Отверстие в виде текста в непрозрачном экране». | 2 | - | 2 |
36. | Упражнение 22: Создание образца анимированного образца клипа, в котором имеет место эффект маскирования. | 2 | - | 2 |
37. | Публикация фильма и экспорт его в графические форматы. | 2 | 1 | 1 |
38. | Сохранение и просмотр опубликованных файлов. | 2 | 1 | 1 |
39. | Создание анимированных клипов для своей Web-странички. | 32 | - | 32 |
ИТОГО: | 144 | 37 | 107 |
Методическое обеспечение образовательной программы
№ п/п | Наименование тем и разделов | Форма занятий | Методы | Дидактический материал и ТСО | Формы подведения итогов |
1. | Введение в курс. | Лекция | Словесный, наглядный | ПК, мультиме-дийный проектор, экран, приложение PowerPoint | Электронное анкетирование |
2. | Основные понятия HTML. Структура HTML-документа. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint | Проектирование сайта |
3. | Форматирование текста. Разделители текста. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, интернет | Создание титульной страницы сайта. Поиск рисунков для сайта. Создание логотипа сайта. |
4. | Списки. Нумерованный и маркированный. Списки определений. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint | Создание списков и вставка их в сайт |
5. | Размещение графики. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, интернет | Создание странички с графическими изображениями |
6. | Создание и фоновое оформление главной Web-страницы. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, интернет | Создание главной Web-страницы |
7. | Использование таблиц. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint | Создание таблиц в документе |
8. | Анимация. Бегущая строка. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, интернет | Добавление на Web-страницу анимированных рисунков и бегущей строки |
9. | Работа с гиперссылками. Создание страниц сайта. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, интернет | Добавление гиперссылок на страницу |
10. | Оформление гиперссылок. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, интернет | Размещение панели навигации на титульной странице сайта |
11. | Фреймы. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, интернет | Заполнение и оформление фреймов |
12. | Создание сайта с помощью языка HTML. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, интернет | Проект сайта. Дизайн сайта. Оформление и заполнение страниц сайта. |
13. | Создание кнопок с помощью программы Button Studio. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа ButtonStudion | Создание кнопок для своей страницы |
14. | Импорт и вставка кнопки на Web-страницу. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа ButtonStudion | Добавление кнопок на Web-страницу |
15. | Окно программы Macromedia Flash MX. Панель инструментов и её структура. Упражнение 1. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Рисование закрашенного овала. Рисование полумесяца. |
16. | Инструменты Чёрная стрелка и Модификатор. Упражнение 2. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Преобразование овала в букет |
17. | Копирование фрагментов изображения с одновременным искажением копии. Упражнение 3. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Создание кружевного узора. |
18. | Объединение изображений в группы. Упражнение 4. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Рисование автомобиля. |
19. | Инструменты и панели для рисования, изменения и удаления линий. Упражнение 5. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Рисование многоугольни-ка |
20. | Инструмент Перо. Техника рисования и редактирования кривых Безье. Упражнение 6. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Рисование синусоиды |
21. | Цвет. Некоторые свойства и закономерности. Инструмент Ведро с краской. Упражнение 7. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Лампа. |
22. | Текст и его роль в создании анимации. Гиперссылки. Упражнение 8. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Создание ссылки на Web-странички. |
23. | Упражнение 9. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание «рисованного текста» с градиентной заливкой |
24. | Создание пошаговой анимации. Упражнение 10. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Создание анимации «Переливающийся цветной шар». |
25. | Перемещение, копирование и уничтожение кадров. Изменение очерёдности их следования. Упражнение 11. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимации «Двигающийся по кругу цветной шар». |
26. | Упражнение 12. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимации «Бегущий человек». |
27. | Структура анимационного фильма. Пример многослойного фильма с пошаговой анимацией. Упражнение 13. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, приложение PowerPoint, программа Macromedia Flash | Создание анимации «Движущийся автомобиль». |
28. | Анимация движения. Упражнение 14. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Пример создания анимации движения |
29. | Упражнение 15. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимации с участием букв текста |
30. | Упражнение 16. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимации движения букв текста |
31. | Анимация формы. Метки формы. Упражнение 17 | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Пример использования метки формы. |
32. | Архитектура образцов типа Button (кнопка). Упражнение 18. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание кнопки |
33. | Направляющий слой и слой траектории. Упражнение 19. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимации «Полёт бабочки над цветком по заданной траектории». |
34. | Маскируемый слой и слой-маска. Упражнение 20. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание эффекта постепенного появления текста. |
35. | Упражнение 21. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимации: Отверстие в виде текста в непрозрачном экране». |
36. | Упражнение 22. Создание образца анимированного образца клипа, в котором имеет место эффект маскирования | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимирован-ного клипа. |
37. | Публикация фильма и экспорт его в графические форматы. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Публикация созданного фильма |
38. | Сохранение и просмотр опубликованных файлов. | Семинар Практикум | Словесный, наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Сохранение созданных файлов. |
39. | Создание анимированных клипов для своей Web-странички. | Практикум | Наглядный, практический | ПК, мультиме-дийный проектор, экран, программа Macromedia Flash | Создание анимированных клипов для своей страницы. |
Список литературы:
1. Курова И.А. «Руководство по HTML» .- М.: БИНОМ, 2001.
2. Леонтьев В.П. «Новейшая энциклопедия персонального компьютера 2002».- М.: ОЛМА-ПРЕСС, 2002.
3. Леонтьев В.П. «Новейшая энциклопедия персонального компьютера».- М.: ОЛМА-ПРЕСС, 2004.
4. Переверзев С.И. «Анимация в Macromedia Flash MX».
5. Сагман С. «Microsoft Office 2000».- М.: ДМК Пресс, 2002.
6. Симонович С.В. и др. «Общая информатика». Учебное пособие для средней школы.- М.: АСТ-ПРЕСС, 1998.
7. Угринович Н.Д. «Информатика и информационные технологии».- М.: Лаборатория Базовых Знаний, 2002.
По теме: методические разработки, презентации и конспекты
Программа кружка "Основы Web-дизайна"
Цель курса - научить создавать и поддерживать конкурентоспособные сайты. Программа 1 года обучения - 34 ч....
Программа кружка «Основы компьютерной грамотности»
Программа кружка «Основы компьютерной грамотности» базируется на программе по информатике для средней общеобразовательной школы и предполагает повышение уровня образования за счет: значител...
Программа кружка "Основы логики"
Программа по логике подготовлена с учетом особенностей преподавания курса «Логика» учащимся 5-9 классов основной общеобразовательной школы. Здесь излагаются основы логики, изучаются типичные при...
Программа курса "Основы Web-дизайна"
Программа рассчитана на учащихся 7-10 классов.Обучение осуществляется в течение одного года.ЦЕЛЬ ПРОГРАММЫПрофориентированная подготовка обучающихся по специальности web-дизайнер, путем формирования у...
ПРОГРАММА КРУЖКА «ОСНОВЫ ИЗБИРАТЕЛЬНОГО ПРАВА»
Объединение по интересам "Круб будующего избирателя" 1 год обучения 10-11 класс...
Программа кружка «Основы экологической исследовательской работы»
программа расчитана на школьников 12-15 лет, срок реализации 1 год....
Рабочая программа кружка "Основы философии"
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА Рабочая программа кружка «Основы философии» для 10, 11 классов составлена на основе Примерной программы по обществознанию: Федеральный компон...