Открытый урок по информатике 1. Образовательная:

Открытый урок по информатике
Тема: «Web-страница с графическими объектами».
Цель: Научить учащихся размещать графические объекты на веб-странице.
Задачи:
1. Образовательная:
a. Проверить знания учащихся по изученным тегам.
b. Повторить виды, форматы графических изображений и способы их получения.
c. Отрабатывать навыки применения тега IMG и его атрибутов при создании вебстраниц.
2. Развивающая:
a. Развивать абстрактное мышление.
b. Развивать умение анализировать.
3. Воспитательная:
a. Воспитывать умение адекватно оценивать свои возможности.
b. Воспитывать аккуратность, внимательность.
Оборудование:
1. Программы:
a. Тест, разработанный в программе КТС,
b. Презентация,
c. Блокнот,
d. Paint,
e. Internet Explorer,
f. Picture Manager.
2. Проектор с эраном.
3. Компьютеры.
Тип урока: Комбинированный.
План урока:
1.
2.
3.
4.
5.
6.
Этап урока
Организационный момент.
Проверка знаний (тестирование).
Объяснение нового материала.
Закрепление изученного материала (практическая работа).
Подведение итогов.
Домашнее задание.
Время
2 мин
10 мин
10 мин
15 мин
5 мин
3 мин
Ход урока:
Организационный момент
2 мин
Здравствуйте, ребята! Сегодня нам предстоит проверить ваши знания тегов и познакомится с
новой темой. «Web-страница с графическими объектами».
Проверка знаний
10 мин
Проверим ваши знания тегов. Проведем тест на компьютере по теме «html-теги». 15 вопросов на
5-7 минут. Вопросы с выбором одного правильного варианта ответа. После выбора ответа
выдается сообщение о правильности вашего ответа и демонстрируется правильный ответ в
случае не верного ответа. В конце теста будет выставлена отметка по 5ти-бальной системе,
которая заносится в журнал. Подведение итогов теста.
1
Объяснения нового материала
10 мин
Учитель: Ребята сравните два сайта. Какой из них интересней и почему?
Сравните два web-документа
Ученик: Справа, там есть рисунки.
Учитель: А зачем добавляют графику в документ?
Ученик: отвечают.
Учитель: Правильно, чтобы привлечь внимание, для сопровождения, пояснения текста. Сейчас
невозможно представить Интернет без графики.
Учитель: Запишите тему урока: «Web-страница с графическими объектами».
Учитель: Но прежде давайте вспомним, что вы знаете про графические объекты. Какие виды
графических изображений вы знаете?
Ученик: Векторное и растровое графическое изображение.
Учитель: В web-документы добавляют только растровые графические изображения. Приведите
примеры получения растровых изображений?
Ученики: Приводят примеры.
Учитель: Следовательно, растровое изображение это изображение
1. Созданное в растровом редакторе.
2. Цифровые фотографии.
3. Отсканированное изображение.
Учитель: Но графические изображения бывают разных форматов. Какие графические форматы
вы знаете?
Ученик: .jpg, .bmp и др.
Учитель: Не все графические форматы поддерживают браузеры. Основными являются .jpg, .gif,
png. Их поддерживают практически все браузеры.
Учитель: Но графические изображения в Интернете обычно размещают небольшого размера
для быстроты загрузки.
Для сжатия изображений можно использовать программу Picture Manager, входящую в пакет
Microsoft Office. Эта программа обеспечивает гибкие средства управления, редактирования и
совместного использования рисунков. Можно изменять вид рисунков, корректируя следующие
их параметры: яркость и контрастность, цвет, обрезка, поворот и отражение, устранение
эффекта красных глаз, изменение размера. На данном этапе познакомимся лишь сжатием
рисунка.
1. Запустить программу Picture Manager можно
а. В контекстном меню на графическом файле выбрать «Открыть с помощью», «Microsoft
Office Picture Manager»;
б. Пуск->Программы->Microsoft Office->Средства Microsoft Office->Microsoft Office Picture
Manager.
2. В меню «Рисунок» выбрать «Сжать рисунок». Выбрать «Параметр сжатия рисунка» «вебстраница».
Показать на примере, как сжать изображение в программе Picture Manager
Учитель: Мы подготовили графическое изображение к размещению на веб-странице. Теперь
познакомимся, как можно разместить графическое изображение на web-странице.
2
Слайд
Тег IMG
IMG (от слова Image – рисунок).
<img src="COMPUTER.jpg">
<img src="COMPUTER.jpg"
width=300 height=300>
<img src="COMPUTER.jpg"
width=300>
<img src="COMPUTER.jpg"
width=100% height=100>
<img src="COMPUTER.jpg"
width=100% height=100%>
<img src="COMPUTER.jpg"
width=300 height=300
border=10>
<img src="COMPUTER.jpg"
width=300 height=300
border=10 alt="Компьютер">
Тег,
описывающий графический файл
на web-странице
<IMG SRC="имя файла"
WIDTH=значение в процентах
HIGHT=значение в процентах
BORDER=толщина рамки
ALT= "Надпись вместо рисунка">
Пример
<IMG SRC= "frog.jpg" WIDTH=50
HIGHT=50 BORDER=3
ALT="Лягушонок">
Web-страница «Визитка»
Web-страница «Визитка»
Комментарии
Сам графический файл в Блокнот вставить
невозможно, поэтому мы только описываем
его
в
html-документ.
Для
описания
графического
файла
на
web-странице
используется тег IMG (от слова Image –
рисунок).
Атрибут SRC="имя файла с расширением",
если графический файл находится там же где и
html-файл. В противном случае указывается
полное имя файла (путь+имя файла с
расширением).
Этот
атрибут
является
обязательным, остальные используются по
необходимости. Рисунок отображается в
реальном размере.
Если вы хотите отображение рисунка
увеличить или уменьшить используется
атрибуты WIDTH и HEIGHT.
Атрибут WIDTH =значение в пикселях и
процентах. 100% - заполнение всей ширины
экрана рисунком вне зависимости от размера.
100 – 100 пикселей по ширине.
Атрибут HEIGHT=значение в пикселях и
процентах. 100% - заполнение всей высоте
экрана рисунком вне зависимости от размера.
100 – 100 пикселей по высоте.
Атрибут BORDER=толщина рамки в пикселах.
0 – отсутствие рамки
Атрибут ALT= "Надпись вместо рисунка".
Альтернатива, если браузер не может
отобразить рисунок или загрузка рисунков
выключена.
Еще раз повторим атрибуты тега IMG.
Запишите тег, описывающий графический
файл на web-странице.
Учитель: Что описано с помощью этого тега?
Ученик: Размещен рисунок в той же папке,
что и веб-документ, размер отображения - 50
пикселей по ширине и 100 по высоте, рамка
шириной 3 пикселя, надпись при отсутствии
рисунка или наведении на него «Лягушонок».
Учитель: Вы на прошлом уроке создали webстраницу «Визитка».
Что в ней не хватает? Добавим на эту страницу
вашу фотография и автограф. Вы принесли
сегодня на урок файл с вашей фотографией.
3
Закрепление изученного материала
15 мин
Выполнить разноуровневую практическую работу. Предлагается два варианта:
1. На 5 – сказано, что надо выполнить, но не написано как (вставка двух изображений).
2. На 4 – сказано, что и как надо выполнить (вставка двух изображений).
3. На 3 – половина работы выполненной на 4 (вставка одного изображения).
Подведение итогов
5 мин
Выставление оценок:
Во время выполнения работы учитель внимательно следит за ходом выполнения практической
работы и в конце урока выставляет оценки, аргументируя их. Можно задать вопрос – Что было
наиболее сложным при выполнении практической работы?
Учитель: Подведем итог. Кто может сказать, какие действия необходимо выполнить для
размещения графических объектов в веб-документе?
Ученики: Формулируют алгоритм.
Учитель: Запишем в тетради:
Для размещения в web-документе
графического файла необходимо
1. Преобразовать в формат
.jpg, .gif, .png;
2. Сжать графическое изображение;
3. Описать изображение в webдокументе.
Домашнее задание
2 мин
Выучить записи в тетради. В практикуме тема 6.5. Дополнительное творческое задания для
желающих получить дополнительную оценку – Найти способ описания фонового изображения.
4
Практическая работа
по теме
«Добавление графических объектов на Web-страницу»
Максимальная оценка 4
1.
2.
3.
4.
5.
Зайдите в вашу папку.
В программе Microsoft Office Picture Manager сжать размер графического файла
с вашей фотографией и сохранить его под именем foto.
2.1. Нажмите правую клавишу на графическом файле.
2.2. Выберите «Открыть с помощью», «Microsoft Office Picture Manager».
2.3. В меню «Рисунок» выбрать «Сжать рисунок».
2.4. Выбрать «Параметр сжатия рисунка» «веб-страница».
2.5. Нажать ОК.
2.6. В меню «Файл» выбрать «Сохранить как…».
2.7. Указать свою папку и имя файла foto.
2.8. Закрыть программу Picture Manager не сохраняя изменения.
Вставить описание графического файла foto в файл Визитка.
3.1. Откройте файл Визитка с помощью Блокнота.
3.2. Добавьте перед словом e-mail строку, изменив при необходимости имя
файла и расширение,
<img src="foto.jpg" width=100 height=100 border=1 alt="Фотография">
3.3. Сохранить изменения, не закрывая Блокнот.
3.4. Перейдите в свою папку и запустите файл «Визитка» с помощью Internet
Explorer.
3.5. Вернитесь в файл «Визитка» открытый в Блокноте.
3.6. Измените атрибуты width и height так, чтобы фотография подходила по
размеру.
3.7. Сохранить изменения, не закрывая Блокнот.
3.8. Вернитесь в файл Визитка открытый в Internet Explorer и нажмите
клавишу F5.
Создайте графический файл aftograf.gif в программе Paint.
4.1. Запустите программу Paint.
4.2. В меню «Рисунок», «Атрибуты» установите флажок на сантиметры.
4.3. Установите ширину листа 5 см, а высоту 3 см.
4.4. Измените цвет фона в соответствии с фоном html-файла.
4.5. С помощью инструмента карандаш или кисть создайте свой автограф.
4.6. В меню «Файл» выберите «Сохранить как…».
4.7. Укажите свою папку, имя файла aftograf, тип файла .gif.
4.8. Выберите кнопку «Сохранить».
4.9. Закройте программу Paint.
Вставьте описание графического файла aftograf.gif в файл Визитка.
5.1. Перейдите в файл Визитка открытый в Блокноте.
5.2. Добавьте перед тегом </body> тег, описывающий файл aftograf.gif
5.3. Добавьте тег, выравнивающий по центру автограф.
5.4. В меню «Файл» выберите «Сохранить».
5.5. Перейдите в файл Визитка открытый в Internet Explorer и нажмите
кнопку Обновить или клавишу F5.
5
Практическая работа
по теме
«Добавление графических объектов на Web-страницу»
Максимальная оценка 5
1. Зайдите в вашу папку.
2. В программе Microsoft Office Picture Manager сжать размер графического
файла с вашей фотографией и сохранить его под именем foto.
3. Вставить описание графического файла foto в файл Визитка.
4. Откройте программу Paint и измените размер листа, задав атрибуты ширина 5 см и высота 3 см.
5. В программе Paint создайте свой автограф.
6. Сохраните файл под именем aftograf.gif .
7. Вставьте в конце веб-страницы Визитка тег, описывающий графический
файл aftograf.gif .
8. Добавьте на веб-страницу тег, выравнивающий по центру автограф.
6