Методическая разработка открытого занятия «Работа с графическим оформлением сайта»

Государственное образовательное учреждение

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

Луганской Народной Республики

«Стахановский машиностроительный техникум»

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

НА ТЕМУ

«Работа с графическим оформлением сайта»

Дисциплина: «Веб-технологии и веб-дизайн»

Вид занятия: Практическое занятие

Тема занятия: «Работа с графическим оформлением сайта (дизайн)»

Подготовила: преподаватель Дидыч Р.В.

СТАХАНОВ, 2017

Дата проведения: 17.11.17

Место проведения: ауд. №20

Время проведения: 2 пара

Группа: ДП9-14

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

Методическая разработка открытого занятия по дисциплине ««Web-технологии и Web-дизайн»» разработана в соответствии с рабочей программой и календарно-тематическим планом учебной дисциплины по специальности 5.05010301 «Разработка программного обеспечения».

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

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

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

Форма контроля: фронтальный опрос.

Работа студентов на занятии оценивается по бальной системе на основании условий и критериев оценивания. Для оценивания используются самоанализ, самооценка и оценка участниками занятия.

После выполнения практической части занятия

студент должен уметь:

• использовать различные графические редакторы;

• создавать и редактировать элементы дизайна веб-страниц;

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

• находить и устранять ошибки в отображении элементов дизайна веб-страниц;

студент должен знать:

• сущность этапов разработки дизайна веб-страниц;

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

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

Источниками информации для самостоятельного изучения темы являются:

1. Веб-дизайн для разработчика и заказчика; Эксмо - Москва, 2012. - 192 c.

2. Ключевые принципы повышения конверсии веб-сайта. Проектирование прибыльных веб-сайтов. Повышение эффективности интернет-рекламы. Оптимизация целевых страниц для улучшения конверсии (комплект из 3 книг); Манн, Иванов и Фербер - Москва, 2011. - 976 c.

3. Отзывчивый веб-дизайн. Эмоциональный веб-дизайн (комплект из 2 книг); Манн, Иванов и Фербер - Москва, 2012. - 320 c.

4. Цифровой дизайн. Основы веб-проектирования с помощью инструментов Adobe; Рид Групп - Москва, 2011. - 768 c.

5. Берд Джейсон Веб-дизайн. Руководство разработчика; Питер - Москва, 2012. - 224 c.

6. Ватерман, Гизела Дизайн вашей квартиры: Дизайн. Цвет. Освещение. Интерьер; М.: Кристина & К - Москва, 2010. - 128 c.

7. Гарретт Дж. Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия; Символ-Плюс - , 2013. - 192 c.

8. Глэйзер Милтон , Илик Мирко Дизайн-протест, дизайн-провокация; РИП-Холдинг - Москва, 2014. - 240 c.

9. Глэйзер, М.; Илик, М. Дизайн-протест. Дизайн-провокация; М.: РИП-холдинг - Москва, 2013. - 240 c.

10. Грашин А. А. Методология дизайн-проектирования элементов предметной среды. Дизайн унифицированных и агрегатированных объектов; Архитектура-С - Москва, 2012. - 232 c.

План занятия

Предмет: «Веб-технологии и веб-дизайн»

Группа: ДП9-14

Дата проведения занятия: 17.11.17 г.

Тема занятия: Работа с графическим оформлением сайта (дизайн).

Тип занятия: практическое занятие.

Форма проведения: практическое занятие.

Цели занятия:

1. Образовательная:

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

- осмысление и практическое применение ранее изученного теоретического материала;

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

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

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

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

- формирование ценностной ориентации и мировоззрения.

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

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

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

Задачи занятия:

1. Закрепить полученные ранее теоретические сведения по разработке элементов графического дизайна сайтов.

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

3. Развивать профессиональные умения, навыки и познавательные возможности при изучении данной темы.

4. Воспитание личностных качеств, обеспечивающих исполнительность, внимательность и самостоятельность.

Время занятия: 80 минут.

Обеспечение занятия:

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

Наглядные пособия – конспект лекций, электронные справочники по дисциплине.

Раздаточный материал – карточки с краткими рекомендациями по созданию элементов дизайна для веб-страниц.

Технические средства обучения – компьютер, мультимедийный экран.

Учебные места – кабинет № 20.

Основная литература – Отзывчивый веб-дизайн. Эмоциональный веб-дизайн (комплект из 2 книг); Манн, Иванов и Фербер - Москва, 2012. - 320 c.

Цифровой дизайн. Основы веб-проектирования с помощью инструментов Adobe; Рид Групп - Москва, 2011. - 768 c.

Дополнительная литература – Берд Джейсон Веб-дизайн. Руководство разработчика; Питер - Москва, 2012. - 224 c.

План занятия

№ п/п	Этап занятия	Приемы и методы	Время, мин.
1	Организационный момент.	Беседа.	5
2	Актуализация знаний необходимых для выполнения практической работы.	Фронтальный опрос, постановка проблемы.	10
3	Выполнения практической работы.	Репродуктивный, частично-поисковый.	50
4	Обобщения результатов выполненной работы.	Решение тестовых заданий.	10
5	Подведение итогов занятия.	Беседа	5

Ход занятия

Действия преподавателя	Действия студентов
1 этап - организационный момент (5 мин.): Приветствие студентов. Преподаватель проводит перекличку, сообщает тему и цель занятия.	1 этап - организационный момент: Студенты приветствуют преподавателя, сообщают, кто отсутствует.
2 этап - Актуализация знаний необходимых для выполнения практической работы. (10мин.): Актуализация знаний необходимых для выполнения практической работы, постановка проблемы которую необходимо решить во время занятия.	2 этап - актуализация базовых знаний: Студенты отвечают на вопросы преподавателя.
3 этап - Выполнения практической работы. (50мин.): Преподаватель следит за ходом работы, консультирует студентов, координирует работу.	3 этап - Выполнения практической работы. Студенты занимают рабочие места за компьютером и решают поставленную задачу.
4 этап - Обобщения результатов выполненной работы. (10 мин.): Преподаватель выдает тестовые задания для обобщения проделанной работы.	4 этап - Обобщения результатов выполненной работы.: Студенты отвечают в письменной форме на тестовые задания закрепленной теме. (приложение 1)
5 этап - подведение итогов занятия (3 мин.): Преподаватель подводит итог занятия, акцентирует внимание на наиболее значимых моментах выполненной работы.	5 этап - подведение итогов занятия: Студенты слушают итоги занятия.

Приложение 1

Тест по теме «Основы языка разметки гипертекста HTML»

1. HTML (HYPER TEXT MARKUP LANGUAGE) является:

1. Одним из средств при создании Web-страниц
2. Системой программирования
3. Графическим редактором
4. Системой управления базами данных

2. Инструкция браузеру, указывающая способ отображения текста:

1. Программный код

2. Тэг

3. Файл

4. Кегль

3. Программа для создания Web-страницы с использованием языка HTML:

1. MS Word

2. Paint

3. Калькулятор

4. Блокнот

4. Web-страница (документ HTML) представляет собой:

1. Текстовый файл с расширением txt или doc

2. Текстовый файл с расширением htm или html

3. Двоичный файл с расширением com или exe

4. Графический файл с расширением gif или jpg

5. Программа для просмотра гипертекстовых страниц называется:

1. Сервер

2. Протокол

3. HTML

4. Браузер

6. Гипертекст - это:

1. Текст очень большого размера
2. Текст, в котором используется шрифт большого размера
3. Структурированный текст, где возможны переходы по выделенным меткам

4. Текст, в который вставлены объекты с большим объемом информации

7. Тэг - это:

1. Инструкция браузеру, указывающая способ отображения текста
2. Текст, в котором используются спецсимволы
3. Указатель на другой файл или объект
4. Фрагмент программы, включённой в состав Web-страницы

8. Какие тэги указывают браузеру, что это HTML документ?

1. bodybody

9. Какие теги определяют видимую часть документа?

1. bodybody
2. pp
3. htmlhtml
4. titletitle

10. Какие тэги помещают название документа в оглавление программы просмотра web-страниц?

1. titletitle
2. bodybody
3. h1h1
4. img src=”name”

11. Какие тэги задают размер заголовка?

1. pp
2. img src=”name”
3. bodybody
4. h1h1

12. Какие тэги создают гиперссылку на другие документы?