МДК 01.04 Основы веб-дизайна

Министерство образования Республики Мордовия
ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ РЕСПУБЛИКИ МОРДОВИЯ
«КОВЫЛКИНСКИЙ АГРАРНО-СТРОИТЕЛЬНЫЙ КОЛЛЕДЖ»

УТВЕРЖДАЮ
Зам. директора по учебной работе
_________________В.В. Маркова
«____» _______________ 202___ г.

РАБОЧАЯ ПРОГРАММА УЧЕБНОЙ ДИСЦИПЛИНЫ
МДК 01.04 ОСНОВЫ ВЕБ-ДИЗАЙНА

Специальность 54.02.01 «Дизайн (по отраслям)»
Форма обучения очная

Рабочая программа учебной дисциплины «Основы веб-дизайна» разработана в соответствии с федеральным государственным образовательным стандартом среднего профессионального образования и с учетом примерной основной
образовательной программы по специальности 54.02.01 Дизайн (по отраслям).

Организация-разработчик:
ГБПОУ РМ «Ковылкинский строительный колледж».
Разработчик:
Преподаватель _______________

Э.П. Водяков

подпись

Программа рассмотрена на заседании предметной цикловой комиссии
специальности 54.02.01 Дизайн (по отраслям).
Протокол № __________ от «____» _________ 20 ___ г.
Председатель ПЦК __________________ /___________________/
2

СОДЕРЖАНИЕ

ПАСПОРТ РАБОЧЕЙ ПРОГРАММЫ УЧЕБНОЙ ДИСЦИПЛИНЫ

СТРУКТУРА И СОДЕРЖАНИЕ УЧЕБНОЙ ДИСЦИПЛИНЫ

УСЛОВИЯ РЕАЛИЗАЦИИ ПРОГРАММЫ ДИСЦИПЛИНЫ

КОНТРОЛЬ И ОЦЕНКА РЕЗУЛЬТАТОВ ОСВОЕНИЯ
ДИСЦИПЛИНЫ

1. ПАСПОРТ РАБОЧЕЙ ПРОГРАММЫ УЧЕБНОЙ ДИСЦИПЛИНЫ
Основы веб-дизайна
1.1. Область применения рабочей программы
Рабочая программа учебной дисциплины является частью программы подготовки специалистов среднего звена в соответствии с ФГОС специальности
СПО 54.02.01 «Дизайн (по отраслям)» (базовая подготовка), входящей в состав
укрупненной группы специальностей 54.00.00 «Изобразительное и прикладные
виды искусств».
Рабочая программа учебной дисциплины может быть использована в дополнительном профессиональном образовании (в программах повышения квалификации и переподготовки) и профессиональной подготовке работников в
области дизайна при наличии среднего (полного) общего образования. Опыт
работы не требуется.
1.2. Место учебной дисциплины в структуре программы подготовки
специалистов среднего звена:
Входит в профессиональный цикл, относится к общепрофессиональным
дисциплинам.
Общие компетенции:
ОК 01. Выбирать способы решения задач профессиональной деятельности
применительно к различным контекстам;
ОК 02. Осуществлять поиск, анализ и интерпретацию информации, необходимой для выполнения задач профессиональной деятельности;
ОК 03. Планировать и реализовывать собственное профессиональное и личностное развитие;
ОК 04. Работать в коллективе и команде, эффективно взаимодействовать с
коллегами, руководством, клиентами;
ОК 05. Осуществлять устную и письменную коммуникацию на государственном языке Российской Федерации с учетом особенностей социального и
культурного контекста;
4

ОК 06. Проявлять гражданско-патриотическую позицию, демонстрировать
осознанное поведение на основе традиционных общечеловеческих ценностей,
применять стандарты антикоррупционного поведения;
ОК 07. Содействовать сохранению окружающей среды, ресурсосбережению, эффективно действовать в чрезвычайных ситуациях;
ОК 08. Использовать средства физической культуры для сохранения и
укрепления здоровья в процессе профессиональной деятельности и поддержания необходимого уровня физической подготовленности;
ОК 09. Использовать информационные технологии в профессиональной деятельности.
Профессиональные компетенции:
ПК 1.3. Осуществлять процесс дизайнерского проектирования с применением специализированных компьютерных программ;
ПК 2.4. Доводить опытные образцы промышленной продукции до соответствия технической документации.
Контрольно-оценочные средства включают контрольные материалы для
проведения текущей и промежуточной аттестации. Итоговой формой аттестации по учебной дисциплине является комплексный экзамен.
Личностные результаты воспитания:
ЛР 14 - способность ставить перед собой цели, под решения возникающих
профессиональных задач, подбирать способы решения и средства развития, в
том числе с использованием информационных технологий;
ЛР 15 – способность содействовать формированию положительного образа
и поддержанию престижа своей профессии;
ЛР 16 - способность искать и находить необходимую информацию используя разнообразные технологии ее поиска, для решения возникающих в процессе
производственной деятельности;
ЛР 17 - способность выдвигать альтернативные варианты действий с целью
выработки новых оптимальных алгоритмов; позиционировать себя как результативный и привлекательный участник трудовых отношений;
5

ЛР 18 – способность демонстрировать развитый художественный вкус, владение методами моделирования и гармонизации искусственной среды обитания;
ЛР 19 - содействовать при организации дизайнерской деятельности сохранению окружающей среды, ресурсосбережению, эффективно действовать в
чрезвычайных ситуациях.
1.3. Цели и задачи учебной дисциплины – требования к результатам
освоения дисциплины:
В результате освоения дисциплины студент должен уметь:

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

- базовые принципы обработки графики;
- понятие «колористика»;
- психологию человека при просмотре сайтов;
- тренды в веб-дизайне.
В рамках программы учебной дисциплины обучающимися осваиваются
умения и знания
Код ПК, ОК,
Умения
ЛР
ЛР 14 – ЛР 19, - создавать Web-страницы;
ОК 1 – ОК 9,
- форматировать текст на
ПК 1.3, ПК 2.4 Web-страницах и создавать
гиперссылки;
- использовать в оформлении Web-страницы фреймы
и таблицы;
- оформлять Web-страницы
с помощью графики;
- добавлять звук на Webстраницу;
- создавать и редактировать
изображения в графическом
редакторе Photoshop;
- делать эскиз прототипа
сайта;
- применять модульные сетки и направляющие;
- применять золотого сечения для построения макета
сайта;
- создавать кнопки, меню и
блоков с контентом для сайта;
- создавать форму с регистрацией для сайта;
- создавать дизайн сайта интерне магазина;
- создавать дизайн Landing
Page.

Знания

- правила форматирования
HTML – документа;
- основы работы в графических программах;
- основы работы со звуком и
видео на Web-странице;
- основы работы в поисковых системах и каталогах;
- основы работы в поисковых системах и каталогах;
- понятие «типографика»;
- базовые принципы обработки графики;
- понятие «колористика»;
- психологию человека при
просмотре сайтов;
- тренды в веб-дизайне.

1.4. Рекомендуемое количество часов на освоение программы дисциплины:
– максимальной учебной нагрузки обучающегося - 144 часа, в том числе:
– обязательной аудиторной учебной нагрузки обучающегося - 96 часов;
– самостоятельной работы обучающегося - 48 часов.

2. СТРУКТУРА И СОДЕРЖАНИЕ УЧЕБНОЙ ДИСЦИПЛИНЫ
2.1. Объем учебной дисциплины и виды учебной работы
Вид учебной работы
Максимальная учебная нагрузка (всего)
Обязательная аудиторная учебная нагрузка (всего)
в том числе:
практические занятия
Самостоятельная работа обучающегося (всего)
в том числе:
работа с технической литературой
практические работы
подготовка рефератов
Итоговая аттестация в форме комплексного экзамена

Объем
часов
144
96

40
48

44
4

2.2. Тематический план и содержание учебной дисциплины «Основы веб-дизайна»
Наименование
разделов и тем

Содержание учебного материала, лабораторные и практические работы,
самостоятельная работа обучающихся

1
2
Раздел 1. Работа в глобальной сети Интернет
Содержание учебного материала
Тема 1.1.
1 Понятие Internet и его функции. Способы подключения к Интернет. КоммуГлобальные вычислительные
тация каналов, сообщений и пакетов.
сети
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 1. Подготовка рефератов по теме: «Этапы развития
сети Интернет», «История развития Всемирной паутины».
Содержание учебного материала
Тема 1.2.
1 Базовые и прикладные протоколы Интернета. Поисковые системы и каталоПротоколы, службы, услуги сети
ги.
Интернет
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 2. Создание электронного почтового ящика.
Раздел 2. Графический редактор Photoshop
Тема 2.1.
Содержание учебного материала
Начинаем работать в Photoshop 1 Обзор интерфейса. Рабочее пространство. Настройка программы. Сравнение векторной и растровой графики. Размер и разрешение изображения.
10

Объём
часов

3
8
2

68
2

Коды
компетенций,
формированию
которых способствует элемент
программы
4

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,

Тема 2.2.
Слои

Тема 2.3.
Выделяем и вырезаем

Тема 2.4.
Трансформируем и искажаем

Цветовые модели.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
1 Понятие слоя. Операции со слоями.
2 Маска слоя. Обтравочная маска.
3 Режимы наложения.
4 Стили слоя.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 3,4. Выполнение задания.
Содержание учебного материала
1 Основные операции с инструментами выделения.
2 Быстрое выделение и волшебная палочка. Инструменты группы лассо.
3 Цветовой диапазон. Область фокусировки. Инструмент Кадр.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 5,6. Выполнение задания.
Содержание учебного материала
1 Свободная трансформация. Деформация перспективы. Марионеточная деформация. Масштаб с учётом содержимого.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся.
11

ПК 1.3, ПК 2.4
8

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

4
6

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

4
2

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

Самостоятельная работа № 7. Выполнение задания.
Содержание учебного материала
Тема 2.5.
1 Рамка, раскройка, пипетка, заплатка, восстанавливающая кисть.
Инструменты
2 Инструмент кисть.
3 Зеркальное рисование и сглаживание. Карандаш. Штамп.
4 Архивная кисть. Ластик. Градиент. Заливка.
5 Фигура. Перо.
6 Текст.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 8,9,10,11,12 Выполнение задания.
Содержание учебного материала
Тема 2.6.
1 Команды коррекции.
Команды коррекции
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
Тема 2.7.
1 Фильтры.
Фильтры
Лабораторные работы
Практические занятия.
Практическая работа № 1. Работа с фильтрами.
Практическая работа № 2. Покадровая анимация.
Практическая работа № 3. Анимация на шкале времени.
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 13,14,15,16 Выполнение задания.
Раздел 3. Язык разметки гипертекста HTML
Содержание учебного материала
12

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

10
2
2
6

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

20
2

ЛР 14 – ЛР 19,

Тема 3.1.
Структура HTML-документа

Тема 3.2.
Форматирование текста

Тема 3.3.
Рисунки на Web-странице

Тема 3.4.
Таблицы

1 Назначение HTML. Основные понятия.
Лабораторные работы
Практические занятия.
Практическая работа № 4. Создание простейшей Web-страницы.
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
1 Особенности ввода и форматирование текста. Правила использования
шрифтов. Структурирование текста. Форматирование абзаца.
Лабораторные работы
Практические занятия.
Практическая работа № 5. Форматирование текста на Web-странице.
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
1 Форматы графических файлов для Web. Управление цветом. Достижение
баланса между текстом и графикой.
Лабораторные работы
Практические занятия.
Практическая работа № 6. Размещение графики и создание гиперссылок на
Web-странице.
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 17. Работа над творческим проектом.
Содержание учебного материала
1 Создание и форматирование таблиц. Разметка Web-страницы при помощи
таблицы.
Лабораторные работы
Практические занятия.
Практическая работа № 7. Создание и форматирование таблиц.
Контрольные работы
13

2
2

ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

2
2

2
-

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

Самостоятельная работа обучающихся.
Самостоятельная работа № 18. Создание Web-сайта на заданную тему в текстовом редакторе «Блокнот».
Раздел 4. Основы веб-дизайна
Содержание учебного материала
1 Прототип сайта. Модульные сетки и направляющие.
2 Типографика. Прорисовка элементов плюс контент.
3 Колористика. Базовые принципы обработки графики.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
Тема 4.2.
1 Правило золотого сечения. Психология человека.
Общие моменты веб-дизайна
2 Тренды в веб-дизайне. Как развить хороший вкус.
Лабораторные работы
Практические занятия
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
Тема 4.3.
1
Рисуем основные элементы сайта Лабораторные работы
Практические занятия.
Практическая работа № 8. Создание дизайна кнопок сайта.
Практическая работа № 9. Создание дизайна меню сайта.
Практическая работа № 10. Создание дизайна блоков с контентом.
Практическая работа № 11. Создание дизайна форм с регистрацией.
Контрольные работы
Самостоятельная работа обучающихся
Содержание учебного материала
Тема 4.4.
1

48
6

Тема 4.1.
Пошаговый процесс создание дизайна сайта

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

ЛР 14 – ЛР 19,

Дизайн-промо сайта
(стиль – web 2.0)

Тема 4.5.
Дизайн интернет магазина
(стиль - минимализм)

Тема 4.6.
Дизайн Landing Page
(стиль - Flat)

Лабораторные работы
Практические занятия.
Практическая работа № 12. Создание дизайна макета промо-сайта.
Практическая работа № 13. Работа с макетом сайта.
Практическая работа № 14. Создание дизайна макета для контента сайта.
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 19,20. Создание дизайна промо-сайта.
Содержание учебного материала
1
Лабораторные работы
Практические занятия.
Практическая работа № 15. Создание дизайна макета сайта интернет магазина.
Практическая работа № 16. Прорисовка элементов интернет магазина.
Практическая работа № 17. Создание дизайна каталога интернет магазина.
Практическая работа № 18. Создание дизайна страниц товаров интернет магазина.
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 21,22. Создание дизайна интернет магазина.
Содержание учебного материала
1
Лабораторные работы
Практические занятия.
Практическая работа № 19. Создание дизайна макета одностраничного сайта в
плоском стиле.
Практическая работа № 20. Прорисовка элементов Landing Page.
Контрольные работы
Самостоятельная работа обучающихся.
Самостоятельная работа № 23,24. Создание дизайна Landing Page.
Всего:

ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

4
8

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

4
4

144

ЛР 14 – ЛР 19,
ОК 1 – ОК 9,
ПК 1.3, ПК 2.4

3. УСЛОВИЯ РЕАЛИЗАЦИИ ПОГРАММЫ ДИСЦИПЛИНЫ
3.1. Требования к минимальному материально-техническому обеспечению
Реализация программы дисциплины требует наличия лаборатории «Информационные технологии в профессиональной деятельности».
Оборудование учебного кабинета:

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

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

- средства телекоммуникации;
- принтер, плоттер.
Оборудование лаборатории и рабочих мест лаборатории:

- компьютеры Pentium Dual Core 2,0 Ghz/500Mb/80Gb/FDD/DVD;.
- сервер Xeon 30002 Xeon 3000/74 G/RAID 5 (3x250) 500 G;
- сетевой коммутатор D-Link 10/100 16-port DES-1016D;
- сетевой коммутатор TRENDnet TEG-S240TX;
- интернет-центр ZyXEL Keenetic III с точкой доступа Wi-Fi 802.11n 300
Мбит/с, коммутатором Ethernet и многофункциональным хостом USB;

- экран, мультимедийный проектор NEC VT48, Epson EP-X18.
16

3.2. Информационное обеспечение обучения
Перечень рекомендуемых учебных изданий, Интернет-ресурсов, дополнительной литературы
Основные источники:

1. Алексеев А.П. Введение в Web-дизайн. - М.: СОЛОН-ПРЕСС, 2008
2. Смирнова И. Е. Начала Web-диэайна. — СПб.: БХВ-Петербург, 2003
3. Решетнёва О. Photoshop с нуля 4.0 (видео уроки), 2020
4. Захаренко А. Мастер веб-дизайна 2.0. Профи (видео уроки), 2014
Интернет-ресурсы (И-Р)
И-Р 1 http://123samodelki.com/vse_uroki.html
И-Р 2 http://123samodelki.com/urok1-01.html
И-Р 3 http://123samodelki.com/urok1-02.html
И-Р 4 http://123samodelki.com/urok1-05.html
И-Р 5 http://123samodelki.com/urok1-07.html
И-Р 6 http://123samodelki.com/urok1-08.html
И-Р 7 http://123samodelki.com/urok1-11.html
И-Р 8 http://123samodelki.com/urok1-14.html
И-Р 9 http://123samodelki.com/urok1-17.html
И-Р 10 http://123samodelki.com/urok1-21.html
И-Р 11 https://www.youtube.com/playlist?list=PLB2A99A9DEC7B590F

4. КОНТРОЛЬ И ОЦЕНКА РЕЗУЛЬТАТОВ ОСВОЕНИЯ
ДИСЦИПЛИНЫ
Результаты обучения
Перечень знаний, осваиваемых в рамках дисциплины:
- правила форматирования
HTML – документа;
- основы работы в графических программах;
- основы работы со звуком и
видео на Web-странице;
- основы работы в поисковых системах и каталогах;
- понятие «типографика»;
- базовые принципы обработки графики;
- понятие «колористика»;
- психологию человека при
просмотре сайтов;
- тренды в веб-дизайне.

Критерии оценки

Методы оценки
Знает:
Тестирование
- правила форматирования Устный опрос
HTML – документа;
- основы работы в графических программах;
- основы работы со звуком и
видео на Web-странице;
- основы работы в поисковых
системах и каталогах;
- понятие «типографика»;
- базовые принципы обработки графики;
- понятие «колористика»;
- тренды в веб-дизайне.

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

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

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