Разработка урока по МДК 01.01. Технология создания и обработки цифровой мультимедийной информации Размещение графики на Web-страницах

Разработка открытого урока по МДК 02.01. Технология публикации цифровой мультимедийной информации
преподавателя Ондар А.Б.
Группа №4.0 по профессии «Мастер по обработке цифровой информации»
Дата проведения: 10.03.2017 г.
Тема: «"Размещение графики на WEB-страницах"»
Цель: повышение компьютерной грамотности учащихся в вопросе создания Web-страниц на языке HTML средствами текстового редактора Блокнот.
Задачи:
Образовательные:
Сформировать у учащихся способности самостоятельного создания сайта;
Научить размещать графические изображения на web-страницах;
Научить размещать анимации на web-страницах.
Развивающие:
Развитие мотивации и стимулирование интересов учащихся к изучению информатики;
Развитие у учащихся внимания и навыков самостоятельной работы.
Воспитательные:
Формирование восприятия компьютера как инструмента информационной деятельности человека;
Воспитание стремления к самоутверждению через освоение персонального компьютера;
Воспитание потребности и умения работать в коллективе.
Методы обучения:
по источнику знаний: словесные, наглядные, практические;
по характеру познавательной деятельности: объяснительно – иллюстративные.Тип занятия: изучение нового материала.
Вид занятия: защита проектов.
Оборудование занятия: компьютерный класс, мультимедийный проектор, экран, раздаточный материал.
План занятия:
Организационная часть- 5 мин.
Актуализация знаний -10 мин.
Изложение нового материала- 15 мин.
Разработка проекта – 20 мин.
Защита проекта – 20 мин.
Запись домашнего задания – 3 мин.
Подведение итогов -7 мин.
Ход занятия
Организационная часть.
(Приветствие, проверка готовности к занятию).
- Здравствуйте, садитесь! Сегодня кто у нас отсутствует, дежурный дайте рапорт, пожалуйста.
Актуализация знаний.
- Мы изучили большую тему «Создание сайта на языке HTML». К сегодняшнему дню мы уже знаем, что такое сайт и чем он отличается от обычного текстового документа. Знаем, что Web-сайт можно создавать с помощью языка HTML, а команды HTML задаются с помощью специальных элементов – тэгов, которые бывают парные и непарные. Знаете, что программы, написанные на языке HTML, имеют определенную структуру.
- На предыдущих уроках мы изучали структуру документа HTML, форматирование текста и создание гиперссылок на Web- страницах. Сегодня вы должны показать чему научились. Теперь вспомним основную структуру HTML-документа.

- На доске показано тело человека, укажите структуру HTML-документа на теле человека. Расположите тэги, где они должны быть. Сравните тело человека на структуру HTML-документа.
- Перед тем как начать новую тему, сначала повторяем пройденные темы. Проверим ваши знания нестандартным способом с помощью игры «Самый умный». (Презентация 1).Вопросы:
Что такое Web-страница? (Web-страница – это информация, которая оформляется при помощи специального языка – языка разметки гипертекста HTML)
Что называется тэгом? (Тег – это и есть та инструкция компьютеру, которая указывает, как должен выглядеть и что должен делать тот или иной элемент web-страницы).
Назовите расширение HTML-документа. (*.html)
Тэг <CENTER> что означает? (позволяет располагать элементы по центру)
Какой тэг отвечает гиперссылку? (<A HREF>, которому соответствует закрывающий тэг </A>)
Тэг <BR> что означает? (предписывает переход на следующую строку)
Какие тэги отвечают для изменения размера шрифта? (<Н1>……<H6>___</H1>…..</H6>).
С помощью, каких тэгов можно определять стиль шрифта (полужирный, курсив, подчеркнутый)? (полужирный <B>…</B>, подчеркнутый <U>…</U>, курсив <I>…</I>).
- Прекрасно! Молодцы, это все была работа с текстом. За повторение получили оценки:…Следующий шаг очень важный при создании сайтов – это вставка рисунка. Теперь запишите тему урока «Размещение графики на Web-страницах». Давайте, сами попробуем сформулировать цель нашего урока. (Научить размещать графические изображения и фоновую графику на Web-страницах).
Изложение нового материала.
- Мы с вами сегодня узнаем, какие форматы поддерживает web-страница, и научимся внедрять на страницы изображения, а также узнаем, как сделать картинку фоном.
В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.
Существуют два способа размещения графических изображений на странице:
вставка отдельных картинок;
заполнение фона картинкой.
В любом случае графическое изображение берется из файла.
Для размещения изображений, сначала их обрабатывают в графическом редакторе, задают размер в пикселях и помещают в папку, например, Images (изображения) данного сайта.
Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.
Вставка на страницу графического изображения из файла графического формата производится с помощью тега <IMG> (от англ, image — изображение) с указанием адреса файла в качестве аргумента атрибута SRC:
<IMG SRC="адрес_графического_файла">
Адрес графического файла — это имя файла с указанием пути.
Например, для показа графического файла tehnikum.jpg следует написать тег<IMG SRC=" tehnikum.jpg ">
Для увеличения скорости передачи графического изображения в теге <IMG> можно использовать с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселях. Браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:< IMG SRC=" tehnikum.jpg " WIDTH=40 HEIGHT=20>.
Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга <IMG> с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева.
ALIGN =CENTER (по центру), LEFT (слева), RIGHT (справа), TOP (сверху) или BOTTOM (снизу web-страницы) – выравнивание изображения;
Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежании этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов HSPACE и VSPACE.
HSPACE - горизонтальный отступ в пикселях от изображения до текстовой или графической информации web-страницы;
VSPACE - вертикальный отступ;
Например, <IMG SRC=”tehnikum.jpg” ALIGN=LEFT> картинка будет находиться слева от текста.
Чтобы задать поля вокруг картинки, надо написать тэг вида:
<IMG SRC=”tehnikum.jpg” ALIGN=LEFT HSPACE=20 VSPACE=10>.
Рисунок можно использовать для фона web-страницы.
Фоновая графика задается в тэге <BODY> в начале документа HTML, подобно тому, как задается цвет фона. При этом используется атрибут BACKGROUND, значением которого является имя графического файла.
Например, < BODY BACKGROUND=”fon.gif” BGPROPERTIES=FIXED>
BGPROPERTIES=”FIXED”, (свойство присоединения фона - фиксировано), то фон остается неподвижным при использовании вертикальной и горизонтальной полос прокрутки.
- А теперь перейдем к практической части нашего урока. Все работаем на компьютере.
4. Разработка проекта
Проектное задание
«Вставка графических изображений на Web-странице»
Цель: научиться размещать графические изображения и фоновую графику на Web-странице.
Указания к выполнению проекта.
Создайте мини Web-сайт на тему “Времена года”, состоящей из двух страниц.
На странице 1 должна содержать:
Заголовок
Вставить гиперссылку на 2 странице с именем “Анимация&Времена года”
По 2 два или более отформатированных абзаца текста (один абзац — не менее трех полных строк);
Если в тэге <body> не указывать цвет странички, то по умолчанию фон будет белым. Сделайте цвет фона странички оранжевым. (Приложение 1).
Разместите на страничке фотографии всех времен года. Для размещения изображения вам требуется указать путь к файлу в элементе <img>. Чтобы упростить описание пути к этому графическому файлу, скопируйте этот файл в ту же папку, в которой будет сохранена Web-страничка.
Фотографии всех времен года есть на рабочем столе в папке с именем Времена года. (Рабочий столВремена года)
Использовать разные способы выравнивания фотографий.
На странице 2 должна содержать:
Заголовок
Вставить гиперссылку на 1 странице с именем “Времена года”
Использовать фоновый рисунок.
Вставить анимацию «Времена года» и выровняйте по центру страницы. Создайте анимацию из фотографий времен года в графическом редакторе Adobe Photoshop.
Сохраните документ под именем vremena_goda.html
Защита своего проекта.
5. Защита проекта
Критерии оценки защиты проекта: (Приложение 2)Качество работы: объем и глубина и соответствие оформления проекта стандартным требованиям. (5 баллов)
Доброжелательность. (3 балла)
Умение отвечать на вопросы. (4 балла)
Культура речи. (2 балла)
Умение применять полученные теоретические знания на практике. (5 баллов)
Системы оценивания: 17-19 баллов – «5» (отлично);
14-16 баллов – «4» (хорошо);
10 – 13 баллов – «3» (удовлетворительно).
6. Запись домашнего задания
Принести материалы для проекта «Моя страничка».
7. Итог урока
- Молодцы! Все хорошо поработали на уроке.
- Прочитайте еще раз цели урока. Достигли вы заданных целей? Что мешало достижению целей? Хорошо. Теперь поставлю ваши оценки. Кто набрал 17-19 баллов …..«5», а 14-16 баллов ……. «4», 10 – 13 баллов ……«3». Спасибо за урок. До свидания!