Цели и задачи урока:
- Образовательные:
- Знать способы работы с элементами редактора Web-страниц.
- Уметь создавать Web-страницы в редакторе FrontPage.
- Развивающие:
- Способствовать развитию творческих способностей учащихся.
- Способствовать развитию интереса к предмету.
- Подготовка к последующей профессиональной деятельности.
- Воспитательные:
- Воспитывать коммуникативную культуру.
Материально техническое оснащение:
- Компьютеры с операционной системой Windows XP.
- Программное обеспечение Microsoft Office: Word XP, FrontPage.
- Принтер
- Локальная и глобальная сеть
- Фотоаппарат
- Диктофон
- Электронная мозаика для опроса
- Слайд презентации для рефлексии– 11 шт.
- Доска, маркеры (для схемы, отображающей продвижение работы).
ХОД УРОКА
- Организационный момент и целеполагание (2 мин)
Учитель: Посмотрите, ребята, на девиз сегодняшнего урока “Вместе не грузно, а врозь, хоть брось” – он выбран не случайно. Нам надо сделать небольшой Web-сайт. Сегодня у нас много гостей - это жюри конкурса педагогического мастерства “Сердце на ладони”. Они любезно предоставили материал по участникам этого конкурса, а нам надо сделать небольшой Web-сайт. Я подумала, а почему бы и нет. Тем более тема сегодняшнего урока “Верстка и оптимизация страниц”.
Как вы думаете, почему я выбрала такой девиз?
Учитель: А я вам отвечу. Потому что мы с вами из имеющихся материалов, попытаемся получить – Web-сайт, который будет являться результатом нашей совместной работы, так как каждый из вас создаст Web-странички, объединив которые, мы получим нужный результат. Только вместе – сила мы!
На предыдущих уроках мы говорили о языке разметки гипертекста, его структуре, учились создавать web-странички с использованием блокнота и редактора Microsoft FrontPage. Мы умеем делать фон страницы, создавать таблицы, вставлять рисунки, изменять размер, стиль, цвет шрифта, форматировать абзацы. Но как вы уже заметили, то редактор прописывает много лишней информации в коде страницы, а для нас это катастрофа! Почему?
Ответ учащегося.
Учитель: Да, верно, чем больше код страницы, тем дольше она будет загружаться, поэтому нам необходимо четко знать теги, из которых он строится.
- Актуализация знаний (3 мин)
Учитель: Сначала проверим ваши теоретические знания по этому материалу.
Для этого я предлагаю вам собрать электронную мозаику (Приложение 1) или интерактивное задание на доске (файл для доски Smart Board – опрос.rar)
Учитель: Спасибо, мы повторили основные теги языка HTML.
Вы видите, что собранная мозаика – это
иллюстрация к басне Крылова. Кто ее помнит?
Процитируйте строки из нее, подтверждающие девиз
нашего урока. Ответ учащегося.
Новый материал (5 мин)
Учитель:Верстальщик. То есть, тот, кто верстает. Скажем, задумали вы выпустить газету или журнал. Подготовили и набрали на компьютере тексты, подобрали к ним иллюстрации. Что? Можно уже отдавать номер в печать? Как бы не так.
А чтобы напечатать газету, журнал, книгу или, скажем, рекламную листовку, её нужно сначала сверстать. Или говоря иначе, сделать оригинал-макет. Разумеется, на компьютере.
Оригинал-макет – это, по сути, электронная копия бумажной газеты, журнала и так далее. Его можно распечатать на обычном принтере. Но вид привычного нам печатного издания можно придать исключительно на типографском оборудовании.
Что умеет средний верстальщик? Переписав к себе на жесткий диск переданные ему редактором тексты и отсканированные иллюстрации (фото, рисунки, графики и т.п.), верстальщик начинает располагать их на экране (а точнее говоря, на виртуальных полосах, то есть страницах, будущего издания). Конечно же, верстальщик обычно требует от редактора техническое задание. Или, подробную схему расположения на страницах издания текстов с иллюстрациями. А также концепцию оформления: сколько колонок на полосе, какие шрифты использовать, какие цвета и т.д.
Верстальщиков сегодня становится всё больше и больше. На их услуги всё время большой спрос. Но работа эта крайне сложная. Сегодня все хотят верстальщика-виртуоза. Чтобы, скажем, цветной журнал из 48-ми полос формата А4 (обычный журнальный формат) сверстал для предварительного просмотра максимум за двое суток.
Среднему верстальщику обычно приходится упорно нарабатывать опыт и мастерство в течение как минимум 7-8 лет. И начинать обычно приходится в рекламном отделе какой-нибудь крупной фирмы, постоянно распространяющей свои рекламные листовки, буклеты и другие материалы.
Где можно выучиться на верстальщика кроме платных курсов? В полиграфическом колледже или институте. Там вы получите фундаментальное образование.
Выбирая профессию верстальщика, желательно всегда иметь в виду, что эта профессия не только творческая, но и технически сложная. К тому же она весьма утомительная для мозга и глаз. Но при этом очень и очень интересная.
На прошлом занятии мы посмотрели с вами некоторые способы оптимизации Web-страниц. Что такое оптимизация страниц? И какие способы оптимизации Вы уже знаете? Ответ учащегося.
Сегодня мы попробуем с Вами еще один способ.
Посмотрите объем страницы, созданной на прошлом уроке. А теперь войдите в меню Сервис, выберите команду Оптимизировать HTML-код, установите флажки в поле Удалить пустое пространство и нажмите ОК. Сохраните свой документ и вновь посмотрите его объем. Сделайте вывод. Ответ учащегося.
Давайте определимся с размещением элементов на нашей странице. Голосование членов жюри. (В качестве домашнего задания учащиеся создавали логотипы для сайта о направлениях дополнительного образования, а также разрабатывали варианты навигации по сайту и дизайн меню (Приложение2.rar). После выбора конечного дизайна сайта, можно приступить к практической работе.
Сегодня мы распределим обязанности по созданию сайта следующим образом:
- 1 учащийся - главный редактор в его обязанности входит: разработать главную страницу и страницу Участники конкурса;
- 1 учащийся – фоторепортер, он должен сфотографировать членов жюри конкурса и обработать эти фото для размещения на сайте и сделать страницу о Жюри, сделать ссылки на страницу с конкретным членом жюри;
- 1 учащийся – журналист, в его обязанности взять интервью у членов жюри (Приложение 2) и опубликовать их на сайте в разделе Жюри (количество страниц по числу членов жюри);
- остальные учащиеся – верстальщики, создают по 2 страницы об участниках конкурса (Приложение 3).
Все необходимые материалы через сетевое окружение Вы можете получить с компьютера учителя (Диск D: папка Конкурс).
- Здоровьесберегающий элемент урока (2 мин)
Учитель: Далее вам ребята предлагается начать работу по созданию документов. Настроиться на эту нелегкую совместную работу нам поможет простое упражнение. Существует много различных способов настроиться на работу. Я предлагаю вам один из них.
Возьмитесь за руки, друзья, чтоб не пропасть по-одиночке (звучит одноименная мелодия песни). Закройте глаза. Ваша задача пожатием руки передать информацию по часовой стрелке, а по моему хлопку в обратную сторону (учитель делает 3-4 хлопка). Спасибо! Откройте глаза ребята. Таким образом, мы настроились на работу, т.е. вы на тактильном уровне передали друг другу информацию. Помните, что только вместе сила мы! И вместе мы сможем многое!
Компьютер для нас – это не только развлечение, но и инструмент для серьезной работы. Поэтому мы должны помнить и соблюдать правила поведения и техники безопасности при работе с ЭВМ.
- Выполнение индивидуальных работ за компьютером (28 мин)
Приступаем к работе. Приложение 4 – Инструкционная карта.
Каждый законченный документ сохранить в своей папке и опубликовать в сети Интернет, для чего в адресной строке ввести адрес сервера http://narod.ru/, а затем логин: cdt-rodnik и пароль 123. Используя в Мастерской команду Загрузка файлов на сайт опубликовать свои файлы нажав на кнопку Обзор.
(Во время работы учащихся за компьютерами
звучит классическая музыка. Учитель оказывает
консультационную помощь)
Учитель: Ребята, мы обычно во время работы за компьютером проводим гимнастику для глаз, и сегодня мы не будем отступать от правил.
Итак, проведем гимнастику для глаз.
- Быстро поморгайте обоими глазами в течение 10-15 секунд, затем повторите тоже самое 3-4 раза с интервалами в 8-10 секунд.
- Обоими глазами смотрите 3-5 секунд на указательный палец вытянутой левой руки, вытянутой перед лицом, затем, сгибая руку, приближайте палец к носу до тех пор, пока палец не начнет двоиться, повторить 6-8 раз.
- Медленно делайте глазами круговые движения по часовой стрелке, затем против, и так 6-8 раз.
С более полным перечнем упражнений ГИМНАСТИКИ ДЛЯ ГЛАЗ вы можете познакомиться в журнале “ПРЕДУПРЕЖДЕНИЕ-ПЛЮС” № 1, январь 2008 г.. Там же я рекомендую вам познакомиться там со статьей “КОМПЬЮТЕР и ОРГАН ЗРЕНИЯ” стр. 31-34.
- Итог урока (5 мин)
Слово учителя: Итак, позади не одна неделя упорного труда. Сегодня, используя различные возможности редактора, мы выполнили совместную работу и получили - Web-сайт. (Демонстрируется выполненная работа http://cdt-rodnik.narod.ru/).
Посмотрим, что удалось, а что нет (замечания учащимся и оценка работы)
А скажите, пожалуйста
- Что вызвало у вас затруднение в сегодняшней работе? (Ответы учеников)
- А что получилось более удачно? (Ответы учеников)
Учитель: Я довольна тем, что вы объективны в самооценке и оценке своих товарищей.
Все приобретенные в процессе работы знания еще не раз помогут вам, пригодятся в дальнейшей вашей жизни.
А теперь, в конце урока хочется, чтобы вы выразили свое отношение к нашей сегодняшней работе и всему уроку в целом. Ответьте на следующие вопросы презентации Рефлексия.ppt (в первом вопросе оставьте одну “мордашку”) затем поставьте оценку за урок себе и учителю, а затем запустите слайд.
Домашнее задание: Сегодня мы с вами создали основную часть сайта, осталось только разработать в нем раздел – гороскоп. Поэтому я попрошу Вас в сети Интернет найти знаки Зодиака, или выполнить творческое задание - нарисовать их.
Рекомендации по подготовке урока:
- Желательно, чтобы все необходимые материалы (фото и статьи) находились в одной папке;
- Создайте фреймовую структуру для сайта, чтобы объективно оценить работы учащихся.
В процессе урока был создан сайт, посетить который Вы можете по адресу http://cdt-rodnik.narod.ru/