Основы Web-дизайна

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

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

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

Программа предполагает наличие у обучающихся определенного уровня подготовки:

- базовые знания по информатике;

- владение основными приемами работы в операционной среде Microsoft Windows XP, владение пакетом "Microsoft Office".

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

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

Программа разработана в соответствии с законом Российской Федерации «Об образовании в Российской Федерации» от 29.12.2012 г. № 273-ФЗ, приказом Министерства Образования Российской Федерации от 29.08.2013 г. № 1008, письмом Департамента молодежной политики, воспитания и социальной защиты детей Минобрнауки РФ от 11.12.2006 г. № 06-1844

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

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

Осозна­ние и усвоение обучающимися достигаемых результатов происходят с помощью практических заданий.

Логическимзавершением курса является – творческая работа.В курсе реализован прежде всего деятельный подход, который является неотъем­лемой частью дополнительного образования.

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

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

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

Задачи:

Образовательные:

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

- ознакомить с интегрированной средой MacromediaFlash;

- научить изменять дизайн сайта с помощью инструментальных средств;

- сформировать навыки по созданию творческих проектов.

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

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

- развить представления о воз­можностях информационных технологий;

- развить логическое, абстрактное и образное мышления;

- развить творческие способности.

Воспитательные:

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

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

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

- привить доброжелательное отношение к окружающим;

- способствовать воспитанию хороших манер и вежливого поведения.

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

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

Срок реализации программы – 1 год, рассчитана на 216 часов, разработана для обучающихся 13 – 17 лет. Количественный состав группы – 15 человек.

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

Недельная нагрузка – 6 часов, занятия проводятся 2 раза в неделю, их продолжительность составляет 3 академических часа. Длительность занятий составляет 45 минут, установленное время перерыва между занятиями 10 минут.

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

В процессе изучения курса обучающиеся должны знать:

- набор необходимых инструментов для создания Web-страницы;

- основные принципы использования языка HTML;

- основные тэги и их характеристики;

- приёмы работы в среде MacromediaFlash;

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

-этапы проектирования и создания Web-сайта.

Уметь:

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

- применять различные цвета для оформления Web-страниц;

- создавать гиперссылки, дополнительных Web-страниц;

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

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

- использовать дополнительные источники информации (литература, программы) для создания Web-страниц.

Способы определения результативности обучения

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

Результатом работы должно статьпроектирование и создание реальных продуктов – свои собственные странички, сайты и сайт групп по интересам.

Динамику интереса можно будет отслеживать путем собеседования в процессе работы.

Результат может отразиться и в участии различных конкурсах города, Республики и конкурсах, организованных в Интернете: по графике, презентациям, Web – сайтам, Web – дизайну.

Учебно-тематический план (216 часов)

Содержание изучаемого курса

1. Введение в курс. (1 час) - Знакомство с понятием Web-сайт и Web-страница, сеть Интернет, Web-технологии, программы браузеры, интерактивное средство представления информации.

2. Основные понятия HTML. Структура HTML-документа. (2 часа) - Язык гипертекстовой разметки документов, теги, HTML-код. Рекомендации по разработке проекта сайта.

Практикум: “Проектирование сайта”.

3. Форматирование текста. Разделители текста. (6 часов) -Абзац, заголовки текста, управление шрифтом, разделительные полосы, Практикум: “Создание титульной страницы сайта. Поиск в сети Интернет рисунков для сайта. Создание логотипа сайта и размещение на титульной странице”.

4. Списки. Нумерованный и маркированный. Списки определений. (6 часов) - Понятие списка, виды списков.

Практикум: «Создание списков и вставка их в сайт».

5. Размещение графики. (6 часов) - Вставка графических изображений, фоновая графика.

Практикум: «Создание странички с графическими изображениями».

6. Создание и фоновое оформление главной Web-страницы. (6 часов) - Панель инструментов. Текстура, фон, добавление текстуры. HTML страница, редактирование HTML страницы, ввод текста и графики в HTML страницу, просмотр Web-страницы.

Практикум: “Создание главной Web-страницы”.

7. Использование таблиц. (6 часов) - Построение таблиц в HTML документе, оформление таблиц, объединение ячеек, изменение ширины ячеек, использование таблицы без рамки.

Практикум: “Создание таблиц в HTML документе”.

8. Анимация. Бегущая строка. (6 часов) - Анимированные файлы, бегущая строка, диалоговое окно бегущей строки.

Практикум: “Добавление на Web-страницу анимированных рисунков и бегущей строки”.

9. Работа с гиперссылками. Создание страниц сайта. (6 часов) - Гиперссылка, добавление гиперссылки, изменение гиперссылки, удаление гиперссылки.

Практикум: “Добавление гиперссылок на главную Web-страницу”.

10. Оформление гиперссылок. (6 часов) - Текстовые ссылки, графические ссылки, навигация.

Практикум: “Размещение панели навигации на титульной странице сайта”.

11. Фреймы. (6 часов) - Фрейм, установочный HTML-файл, левый фрейм, центральный фрейм, верхний фрейм.

Практическая работа “Заполнение и оформление фреймов”.

12. Создание сайта с помощью языка HTML. (15 часов)

Практикум: “Проект сайта. Оформление главной страницы. Добавление гиперссылок”.

Практикум: “Дизайн сайта”.

Практикум: “Оформление и заполнение страниц сайта”

13. Создание кнопок с помощью программы ButtonStudio. (3 часа) - Запуск программы, текст, форма кнопки, форматирование текста, цветовой оформление кнопки.

Практикум: «Создание кнопок для своей странички»

14. Импорт и вставка кнопки на Web-страничку. (3 часа) - Сохранение изображения в различных графических форматах и вставка их на страничку.

Практикум: «Добавление кнопок на главную Web-страницу»

15.ОкнопрограммыMacromedia Flash MX.Панель инструментов и ее структура. Выделение изображения. (2 часа) - Два способа обработки графических изображений на компьютере. Окно программы и окно документа. Подготовка рабочего пространства. Окно просмотра и тестирования программы. Панель инструментов. Инструменты Овал, Прямоугольник. Модификатор инструмента Прямоугольник. Инструменты выбора цвета. Инструмент Лассо.

16. Практикум: «Рисование полумесяца». (4 часа)

17. Инструменты Черная стрелка и Модификатор. (2 часа) -Модификаторы инструмента Черная стрелка. Изменение формы контуров и заливок инструментом Черная стрелка. Инструмент Трансформатор. Модификаторы инструмента Трансформатор.

18. Практикум: «Преобразование овала в букет цветов». (4 часа)

19. Копирование фрагментов изображения с одновременным искажением копии. (2 часа) - Панель инструментов Transform.

20. Практикум: «Создание кружевного узора». (4 часа)

21. Объединение изображений в группы. (2 часа) - Понятие сгруппированный рисунок, целесообразность группировки, работа с группами, редактирование содержимого группы, создание пустой группы.

22. Практикум: Рисование автомобиля. (4 часа)

23. Инструменты и панели для рисования, изменения и удаления линий. (2 часа) - Инструмент Линия для рисования прямых линий, в частности строго горизонтальных и вертикальных, инструмент Карандаш для произвольной линии, инструмент Чернильница для изменения цвета и стиля существующих линий, а также для обводки областей занятых заливкой, инструмент Ластик для редактирования рисунков. Выбор параметров линии на панели свойства.

24. Практикум: «Рисование многоугольника инструментом Линия». (4 часа)

25.Инструмент Перо. Техника рисования и редактирования кривых Безье. (2 часа) - Метод рисования кривых инструментом Перо, метод редактирования кривых Безье.

26. Практикум: «Рисование синусоиды инструментом Перо». (4 часа)

27. Цвет. Некоторые свойства и закономерности. Инструмент Ведро с краской. (2 часа) -Природа цвета, разложение белого цвета, сложение цветов, цветовая модель RGB, глубина цвета, цветовой круг. Однотонные, градиентные и растровые заливки. Инструменты и способы нанесения заливок. Инструмент Ведро с краской и его модификаторы. Модификатор «замок». Инструмент Кисть.

28.Практикум: «Лампа». (4 часа)

29. Текст и его роль в создании анимации. Гиперссылки. (2 часа) - Текстовые блоки, инструмент Текст, организация гиперссылок, преобразование текста в рисунок.

30. Практикум: «Создание ссылки на Web-странички». (4 часа)

31. Практикум: «Создание «рисованного текста» с градиентной заливкой». (4 часа)

32. Создание пошаговой анимации. (2 часа) - Панель Шкала времени. Ключевой и дублирующий кадры. Пошаговая анимация.

33. Практикум: Создание анимации «Переливающийся цветной шар». (4 часа)

34. Перемещение, копирование и уничтожение кадров. Изменение очередности их следования. (2 часа) - Перемещение, копирование и уничтожение кадров. Изменение очередности их следования. Скорость воспроизведения фильма. Одновременный просмотр и редактирование нескольких кадров.

35. Практикум: Создание анимации «Двигающийся по кругу цветной шар». (4 часа)

36. Практикум:Создание анимации «Бегущий человек» (4 часа).

37.Структура анимационного фильма. Пример многослойного фильма с пошаговой анимацией. (2 часа) -Слои и их роль в организации фильма, пошаговая анимация, понятие «сцена» в структуре фильма

38. Практикум: Создание анимации «Движущийся автомобиль». (4 часа)

39. Анимация движения. (2 часа) - Понятие «анимация движения», начальная и конечная фазы анимации, настройка анимации на панели свойства.

40. Практикум: Создания анимации движения. (4 часа)

41. Практикум: Создание анимации с участием букв текста. (4 часа)

42. Практикум: Создание анимации движения букв текста. (4 часа)

43. Анимация формы. Метки формы. (2 часа) - Понятие «анимация формы» настройка анимации на панели инструментов свойства, непредсказуемость анимации форма, метки формы, создание и удаление меток формы.

44. Практикум: Использования метки формы. (4 часа)

45. Архитектура образцов типа Button (кнопка). (2 часа) - Кнопка, функции кнопки в фильме, редактирование кнопки.

46. Практикум: Создание кнопки. (4 часа)

47. Направляющий слой и слой траектории. (2 часа) - Слой траектории, создание траектории движения, обеспечение правильной ориентации объекта относительно траектории, вспомогательный слой направляющих.

48. Практикум: Создание анимации «Полет бабочки над цветком по заданной траектории». (4 часа)

49. Маскируемый слой и слой-маска. (2 часа) - Временное сокрытие анимации на части рабочего поля, перемещение окна, в котором видна часть анимации.

50. Практикум: Создание эффекта постепенного появления текста. (4 часа)

51. Практикум: Создание анимации «Отверстие в виде текста в непрозрачном экране». (4 часа)

52. Практикум: Создание анимированного образца клипа, в котором имеет место эффект маскирования. (4 часа)

53.Публикация фильма и экспорт его в графические форматы. (3 часа)

54. Сохранение и просмотр опубликованных файлов. (3 часа)

55. Создание анимированных клипов для своей Web странички. (12 часов)

Практика: В соответствии с выбранной темой своейWeb – странички создают кнопки для гиперссылок, клипы.

Литература

Симонович С.В. и др. Общая информатика. Учебное пособие для средней школы. – М.: АСТ-ПРЕСС, 1998.

СагманС. Microsoft Office 2000. – М.:ДМКПресс, 2002.

Леонтьев В.П. Новейшая энциклопедия персонального компьютера 2002. – М.: ОЛМА-ПРЕСС, 2002.

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

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

Леонтьев В.П. Новейшая энциклопедия персонального компьютера. – М.: ОЛМА-ПРЕСС, 2004.

С. И. Переверзев Анимация вMacromediaFlashMX.

Приложение 1.

Список примерных тем проектных работ для создания Web-сайта.

Мир, в котором я живу.

Я выбираю здоровый образ жизни.

Архитектура и художники 19 века.

Мой спортивный класс.

Моя школа.

Моя электронная газета (Мой электронный журнал).

Завтра будет лучше.

Информатика вокруг нас.

Все науки хороши, выбирай на вкус.

Мой любимый город.

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/265337-osnovy-web-dizajna