Разработка урока «Верстка веб страниц» междисциплинарного курса «МДК 04.02. Технология публикации цифровой мультимедийной информации» с использованием интерактивных методов обучения
методическая разработка на тему

Министерство образования Республики Саха (Якутия)

ГАПОУ РС(Я) Якутский колледж связи и энергетики им. П.И. Дудкина

Разработка урока «Верстка веб страниц» междисциплинарного курса «МДК 04.02. Технология публикации цифровой мультимедийной информации» с использованием интерактивных методов обучения

Якутск 2017

ТЕХНОЛОГИЧЕСКАЯ КАРТА УЧЕБНОГО ЗАНЯТИЯ

ВЕРСТКА ВЕБ СТРАНИЦ

ФИО преподавателя: Спиридонова Марианна Олеговна

Специальность: 09.02.03. Программирование в компьютерных системах

Тема учебного занятия: Блочная верстка веб страниц

1. Обучающая: 

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

закрепить навыки и умения работы на векторном / растровом редакторе;

закрепить навыки и умения применения CSS стилей;

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

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

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

способствовать развитию умения сравнивать, анализировать, обобщать

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

3. Воспитательная:

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

Задачи учебного занятия:

Формирование навыка  и умения блочной верстки  используя CSS.

Развитие умения видеть и применять изученные методы верстки веб-сайтов и их стандартную структуру.

Тип учебного занятия: Практическое занятие

Форма обучения: фронтальная, групповая

Методы обучения: проектный метод, интерактивный

Средства обучения: ПК, электронный учебник, обучающие программы, презентация

Формируемые общие и профессиональные компетенции

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

ОК 5. Использовать информационно-коммуникационные технологии для совершенствования профессиональной деятельности.

ОК 6. Работать в коллективе и команде, обеспечивать ее сплочение, эффективно общаться с коллегами, руководством, потребителями.

ОК 8. Самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации.

ПК 1.1. Выполнять разработку графического интерфейса.

ПК 1.2. Осуществлять разработку кода программного продукта на основе готовых спецификаций на уровне модуля.

Дополнительные профессиональные компетенции с учетом стандарта Worldskills:

1. Выполнять верстку веб сайтов по заданному параметру и соответствующие современным стандартам;

2. Создавать дизайн «с нуля», используя описательную информацию;

3. Применять творческие способности в разработке дизайна сайта, используя цвет, типографию и графику при создании контента;

4. Определять соответствие дизайн-проекта выбранной целевой аудитории;

5. Определить и управлять поведением пользователя на сайте.

Ход учебного занятия

1.Организационный этап практического занятия

Тема урока: Блочная верстка веб страниц

Планируемы результат навыков и умений:

• Использовать CSS стили наиболее эффективно;
• Создавать веб-страницы, которые способны оставаться функциональными на различных устройствах при разных разрешениях;
• Создавать блочные веб-страницы.

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

2. Актуализация знаний

Прежде чем начать выполнение заданий давайте вспомним основные определения прошлого лекционного занятия. Перед вами основные теги и их определения.

Преподаватель задет вопросы:

1. Что такое блоки? Приведите примеры.

2. Какие виды CSS стилей вам известны?

3. Перечислите и определите теги по параметрам.

2. Формулировка целей и задач

Цели урока:

- формирование умений и навыков учащихся применять блочную верстку веб страниц применяя CSS правила и селекторы.

- освоение технологии CSS

Задачи:

- создание макета и разработка веб страниц с помощью технологии блочной верстки.

4. Планирование деятельности

Организуется групповая работа.

Преподаватель озвучивает задание.

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

Необходимо:

- Создать макеты для нового дизайна отдельно для каждого разрешения в отдельных файлах:

Компьютер (десктоп) – 1440 x 900 пикселей

Планшет – 768 x 1024 пикселей

Смартфон – 320 x 480 пикселей

- Верстка сайта по разработанному шаблону в HTML5/CSS3Ҥ

- Презентация созданного проекта.

Для выполнения работы можете использовать электронные ресурсы, расположенные в вашей сетевой папке.

Преподаватель организует коллективное обсуждение возможных подходов к решению задания.

Студенты, основываясь на прежнем опыте и знаниях, вызывают предположения о путях решения, обобщают ранее приобретенные знания:

-обговаривают правил совместной деятельности:

-работать дружно;

-быть внимательными друг к другу, вежливыми,

-не отвлекаться на посторонние дела,

-не мешать друг другу,

-вовремя оказывать помощь.

- определяют роли и обязанности при выполнении заданий:

- роль – веб дизайнера;

- роль – веб разработчика;

- роль – адвоката.

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

6. Подведение итогов. Давайте посмотрим что у вас получилось. Желающая команда демонстрируют результат проекта. Обучающиеся на примере своего веб сайта обосновывают, аргументируют используемые способы верстки веб страниц.

Преподаватель оценивает результаты по критериям.

7. Рефлексия. Давайте подведем итоги занятия. Перед вами 5 незаконченных предложений. Каждый из вас должен дать оценку совей работы на занятии, и продолжить высказывания.

1. Было интересно ...

2. Было трудно ...

3. Теперь я могу ...

4. У меня получилось ...

5. У меня не получилось…

6. Я попробую ...

Преподаватель выслушивает все варианты.

Домашнее задание.

Составить от 5 и более примеров использования атрибутов при редактировании стиля веб сайта по технологии CSS.

 Спасибо всем за занятие. До свидания.