Урок Создание веб

Государственное бюджетное образовательное учреждение
начального профессионального образования
Профессиональный лицей № 56
Московской области
ОТКРЫТЫЙ УРОК
на тему: «Разработка макета веб-сайта ГБОУ НПО ПЛ № 56
в программе CorelDraw»
Автор-составитель – Шляпникова Н.В.,
преподаватель специальных дисциплин
ГБОУ НПО ПЛ № 56 г. Чехов МО
Март 2014 г.
Технологическая карта уроков № 55-56
ПМ.02 «Верстка текста с использованием программных продуктов
полиграфического производства»
МДК 02.02. «Технологии электронной верстки текста»
Дата проведения: 27 марта 2014 г.
Группа № К-21, мастера п/о Можевеенко Е.В., Изотова Ю.Н.
Курс 2
Единичная квалификация «Оператор электронного набора и верстки»
Преподаватель специальных дисциплин: Шляпникова Н.В.
Тема учебного занятия: «Разработка макета веб-сайта ГБОУ НПО ПЛ № 56 МО
в программе CorelDraw».
Цели:
 Обучающая: сформировать понятия элементов структуры сайта и знания по
созданию макета сайта; создать условия для совершенствования умений и
навыков в разработке макета веб-сайта в программе CorelDraw.
 Воспитательная: формировать у обучающихся чувство понимания значимости профессиональных знаний, умений и навыков работы в программе CorelDraw; дать почувствовать, увидеть, что, решая и выполняя все более сложные
задачи и упражнения, они продвигаются в своем интеллектуальном, профессиональном и волевом развитии.
 Развивающая: развивать творческое воображение, художественный вкус,
устойчивость внимания; развивать самостоятельность в выборе способа, режима, условий и организации работы. Умение анализировать собственную деятельность.
Тип урока: усвоение новых знаний
Вид урока: комбинированный
В результате изучения темы обучающийся должен:
уметь:
 использовать инструментарий, специальные эффекты при работе с графическими примитивами и шрифтами в программе CorelDraw;
 создавать макет сайта.
знать:
 технологию электронной верстки текста;
 требования к сверстанному тексту;
 понятия «фиксированная ширина», «резиновая ширина», «хедер»,
«сайдбар», «контент», «футер», «структура веб-интерфейса», «дизайн сайта»;
 программные продукты, используемые при верстке сайта.
Задачи:
 освоить алгоритм создания макета сайта;
 отрабатывать навыки работы в графическом редакторе CorelDraw.
 развивать творческое воображение и художественный вкус при создании
макета;
 анализировать работу обучающихся своей группы по созданию макета сайта.
Материально-техническое оснащение урока:
 образец макета-шаблона сайта;
 образцы макетов сайтов;
 технологическая карта;
 рабочие места ПК обучающихся;
 рабочее место преподавателя (ноутбук, проектор, экран).
Формируемые общие компетенции:
ОК. 1. Понимать сущность и социальную значимость своей будущей профессии,
проявлять к ней устойчивый интерес.
ОК. 2. Организовывать собственную деятельность, исходя из цели и способов её
достижения, определенных руководителем.
ОК. 3. Анализировать рабочую ситуацию, осуществлять текущий и итоговый
контроль, оценку и коррекцию собственной деятельности, нести ответственность
за результаты своей работы.
ОК. 6. Работать в команде, эффективно общаться с коллегами, руководством,
клиентами.
Формируемые профессиональные компетенции:
ПК 2.2. Выполнять верстку многокрасочных массовых изданий и рекламной
продукции
с использованием программных продуктов полиграфического производства
Планируемый результат:
 представление индивидуального макета сайта каждым обучающимся;
 демонстрация умений сравнения, обобщения и нахождения творческих
находок при создании сайта;
 владение речевой культурой, доведение любой информации до собеседника,
умение высказывать свою точку зрения.
1. Этап. Введение в учебную деятельность
-
создание учебной мотивации
осознание и принятие учебной цели
постановка учебных задач.
а. Создание учебной мотивации
Здравствуйте ребята, сегодня тема нашего занятия «Разработка макета вебсайта ГБОУ НПО ПЛ № 56 МО в программе CorelDraw».
Мы живем в быстро меняющемся мире. Интернет прочно занял свои позиции в жизни человека. Часто нам нужна информация, которая необходима в
нашей работе. Сайт любого учреждения является одним из главных источников
информации о деятельности государственной и негосударственной организаций.
Правильная расстановка объектов информации на сайте позволяет задержать
внимание, более полно ознакомить пользователя с нужной ему информацией.
И целью нашего занятия – научиться создавать макет веб-сайта образовательной организации (на примере нашего лицея).
б. Актуализация знаний
Но прежде, давайте вспомним некоторые вопросы, которые мы рассматривали на предыдущих уроках.
Что такое журнал? (Журнал — периодическое издание, содержащее статьи или рефераты по различным общественным, научным, производственным и другим вопросам, литературно-художественные произведения).
Какие виды журнальных изданий знаете? (общественно-политические;
научные; научно-популярные; производственно-практические; популярные (иллюстрированные); литературно-художественные; реферативные).
Что лежит в основе оформления иллюстрированного журнала? (В основе
оформления иллюстрированного журнала лежит свободная композиция. подчиняющаяся общему сценарию, зависящему от тематических разделов (рубрик). Иллюстрации и текст являются самостоятельными элементами).
Какие элементы оформления содержит обложка иллюстрированного
журнала? (Обложка. Внешний вид обложки должен быть узнаваем. Основными элементами
являются шрифтовой логотип (название журнала) и тематическая иллюстрация (или иллюстрации), показывающие направленность журнала. Помимо основных элементов, на обложке располагаются:
— выходные данные (номер, дата выпуска, индекс издания), которые компонуются с логотипом журнала;
— названия наиболее интересных статей журнала, в строке которых могут содержаться
номера страниц, на которых эти статьи расположены).
Используя знания по верстке обложки иллюстрированного журнала, вы
сегодня создадите макет веб-сайта нашего лицея.
Если мне нужно создать рисунок на компьютере, что мне потребуется?
Если мне необходимо оформить доклад, без чего я не обойдусь?
Если мне нужно посетить сайт, что мне потребуется? (Программа!)
Какие программы вы изучили? (PageMaker, QuarkXPress, CorelDraw).
На ваш взгляд, в какой программе целесообразно создавать макет сайта и почему? (В графическом редакторе CorelDraw. Так как программа предназначена для
работы с графическими изображениями и в ней имеется большой выбор специальных эффектов, которые можно использовать при работе с графическими примитивами).
Но прежде, чем приступить к выполнению работы на компьютерах
вспомним правила техники безопасности.
Правила поведения и техника безопасности в кабинете информатики
Техника безопасности
1. Неправильное обращение с аппаратурой, кабелями и мониторами может привести к поражениям электрическим током, вызвать возгорание. Поэтому запрещается трогать кабели
электрооборудования кабинета.
2. Если возникла неисправность, то следует немедленно позвать преподавателя для ее устранения. Ни в коем случае не пытайтесь устранить ее сами! Кроме тех случаев, когда необходимо отключение электропитания при поражении кого-либо током.
3. Во время работы монитор является источником электромагнитного излучения, которое
неблагоприятно действует на зрение. Поэтому надо работать на расстоянии 60-70 см, соблюдая правильную осанку (вертикально прямая спина, плечи опущены и расслаблены, ноги на
полу не скрещены, стоят на подставке для ног, локти, запястья и кисти рук на одном уровне).
4. Непрерывное занятие за компьютером не должно превышать времени: 25 минут для обучающихся I курса, 30 минут для обучающихся II-III курса. По истечению данного времени необходим перерыв длительностью 5 минут для снятия напряжения глаз.
5. Для снятия усталости мышц используйте комплекс упражнений по профилактике зрительного утомления, упражнения для рук и плечевого пояса, для туловища и ног.
6. При плохом самочувствии, появлении головной боли, головокружении и др. прекратить работу и сообщить об этом преподавателю.
7. Запрещается использовать воду и пенные огнетушители для тушения загоревшейся аппаратуры, т.к. эти средства являются проводниками тока и, следовательно, могут привести к
короткому замыканию и к поражению током человека, производящего тушение.
8. В кабинете информатики строго запрещается:
– Находиться в верхней одежде и грязной обуви;
– Находиться с едой и напитками;
– Удалять и перемещать чужие файлы;
– Приносить и запускать свое программное обеспечение (программы);
– Работать на ЭВМ грязными или мокрыми руками;
– Прикасаться пальцами к мониторам, стучать по ним;
– Включать и выключать аппаратуру без указания учителя;
– Класть диски, книги, тетради на составляющие компьютера;
– Подключать к компьютеру свои устройства (сот. телефоны, плееры).
2. Этап. Создание учебной ситуации
а. Информирование
Рисование сайта начинается с выяснения и согласования нюансов. Сайт может быть «резиновым», а может быть «фиксированной» ширины. От этого может зависеть, например, внешний вид шапки сайта – хедера, или колонок – сайдбаров (их может одна или две). В зависимости от назначения сайта продумывается структура веб-интерфейса.
Фиксированный» дизайн позволяет создать единообразие в отображении сайта. При любом разрешении все элементы будут оставаться на своих местах, там, где их заверстал разработчик, в то время как при «резиновых» дизайнах при разном разрешении элементы сдвигаются-раздвигаются в стороны, что при дальнейшем самостоятельном наполнении сайта клиентом
может привести к вариантам отображения, не предусмотренным при первоначальной разработ-
ке. Фиксированный дизайн на сегодняшний день считается стандартом для корпоративных сайтов.
б. Создание макета. План заполнения шаблона макета сайта
Основные принципы создания дизайна сайтов. В CorelDraw создать рабочую область
(формат А4). Дальше включается творческое воображение, ограниченная только рамками здравого смысла и пониманием технических возможностей верстки. Создать хедер, сайдбар, зону
контента и футер.
Набросок макета:
ХЕДЕР (шапка сайта)
СЛАЙДЕР
(Это могут быть как фотографии (изображения,
картинки), так и ссылки на текстовую информацию).
САЙДБАР
(перечень категорий сайта;
список популярных статей; окно поиска по страницам сайта и
т.д.)
ЗОНА КОНТЕНТА
(текст, таблицы, фото,
видео, аудио, слайдшоу и
т.д.)
ФУТЕР
содержит информацию об авторских правах администратора сайта, эту информацию еще называют - копирайтинг. Еще в футер, добавляют дату создания сайта, название
сайта и некоторые ссылки.
Далее нужно заполнить этот макет информацией. Добавить шрифтовой логотип, меню и
поле ввода поиска. Пункты меню и текст главной страницы заполнить произвольно, можно
взять с примеров других сайтов. Главное – показать страницу так, как она могла бы выглядеть в
реальности. Создать веб-фон, поэкспериментировать с цветовой гаммой, со шрифтами. Применить специальные эффекты векторного редактора CorelDraw к графическим примитивам. Не
упустить ни одной мелочи, так как от того, как вы подробно нарисуете дизайн, зависит окончательный вид сверстанного сайта.
Вот так выглядит страница, заполненная информацией и элементами интерфейса:
3. Этап. Выполнение практического задания
Обучающиеся приступают к работе по созданию сайта.
Консультирование, корректировка элементов выполнения макета сайта у
обучающихся, оценивание выполнение техники безопасности, работы обучающихся в графическом редакторе со стороны преподавателя.
4. Этап. Обеспечение учебной рефлексии
1. При выполнении практического задания, с какими трудностями вы
столкнулись?
– при создании фигурного текста в графическом редакторе;
– при создании градиентной заливки для веб-фона;
– при применении специальных эффектов для текста и графических примитивов.
2. Демонстрация на экране с помощью проектора макетов веб-сайта
лицея, выполненных обучающимися.
Использовали ли вы в своей работе шаблон макета?
Можно ли сейчас обойтись без шаблона на данной практической работе?
Как ты считаешь, почему у однокурсника сайт привлекает больше внимания, чем у тебя?
5. Этап. Обеспечение контроля за деятельностью обучающихся
Контроль складывается из нескольких шагов:
- Уровень умения представления своего индивидуального макета сайта;
- Умеет ли обучающийся сравнивать, обобщать и находить творческие моменты при представлении макета сайта;
- Умение владеть речевой культурой, высказывания своей точки зрения.
- Оценка результата по определенной шкале (см. Оценочный лист).
Оценка результатов учебной деятельности обучающихся
по учебному занятию
«Разработка макета веб-сайта ГБОУ НПО ПЛ № 56 МО
в программе CorelDraw»
Отметка
в баллах
1
Показатели оценки результатов учебной деятельности
Включение компьютеров, соблюдая правила техники безопасности.
Запуск графического редактора CorelDraw.
Умение правильно включать и выключать компьютер, загружать
на выполнение изучаемую программу, завершать работу с ней.
1
Задание параметров документа. Создание рабочей области (формат А4
– 210х297 мм) – фиксированный дизайн. Задание полей, вспомогательных линий, модульной сетки.
3-5
Создание хедера, слайдера, сайдбара, зоны контента и футера. Заполнение элементов макета веб-сайта информационным (текстовым и
графическим) материалом.
3-5
Создание стиля дизайна страницы сайта, используя шрифты, графические примитивы и применяя к ним специальные эффекты в программе
CorelDraw.
4-5
1
Создание шрифтового логотипа в векторном формате. Применение
специальных эффектов к фигурному и простому тексту.
Сохранение файла в свою папку в формате pdf.
17-18 баллов – «отлично» («5»)
15-16 баллов – «хорошо» («4»)
13-14 баллов – «удовлетворительно» («3»)
Приложение 1
СТРУКТУРА МАКЕТА ВЕБ-САЙТА
ХЕДЕР (шапка сайта)
СЛАЙДЕР
(Это могут быть как фотографии (изображения, картинки), так и ссылки на текстовую информацию).
САЙДБАР
(перечень
категорий
сайта; список популярных статей;
окно поиска
по страницам сайта и
т.д.)
ЗОНА КОНТЕНТА
(текст, таблицы, фото, видео,
аудио, слайдшоу и т.д.)
ФУТЕР содержит информацию об авторских правах администратора
сайта, эту информацию еще называют - копирайтинг. Еще в футер, добавляют дату создания сайта, название сайта и некоторые ссылки.
Хедер. Это шапка сайта и предсталяет собой картинку или рисунок и размещается в самой верхней части сайта.
Область контента. Содержит текстовую, видео, аудио и фото информацию, размещается в центральной части сайта.
Область меню (сайдбар). Представлять собой одну или две боковые колонки для размещения меню, рекламы или другой вспомогательной информации.
Футер или подвал. Предназначается для служебной информации. Размещается в самом низу
сайта.
Слайдер. — это определенный ширины блок, занимающий часть веб-страницы. Основная его
особенность — динамически изменяющийся в автоматическом или ручном режиме контент.
Приложение 2
ПЛАН СОЗДАНИЯ МАКЕТА ВЕБ-САЙТА
Для разработки дизайна сайта нашего лицея обозначаем основные параметры
создания макета:
1. Включение компьютеров, соблюдая правила техники безопасности. Запуск
графического редактора CorelDraw.
2. Задание параметров документа. Создание рабочей области (формат А4210х297 мм) – фиксированный дизайн. Задание полей, вспомогательных линий, модульной сетки.
3. Создание хедера, слайдера, сайдбара, зоны контента и футера. Заполнение
элементов макета веб-сайта информационным (текстовым и графическим)
материалом.
4. Создание стиля дизайна страницы сайта (например, «минимализм» – белый
фон, минимум цветных навязчивых графических элементов, либо в соответствии с требованиями корпоративного стиля или разрабатывается
свой дизайн), используя шрифты, графические примитивы и применяя к ним
специальные эффекты в программе CorelDraw.
5. Создание шрифтового логотипа в векторном формате.
6. Сохранение файла в формате pdf.