Открытый урок по информатике

Открытый урок по информатике

Тема: «Web-страница с графическими объектами».

Цель: Научить учащихся размещать графические объекты на веб-странице.

Задачи:

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

Оборудование:

Программы: Тест, разработанный в программе КТС, Презентация, Блокнот, Paint, Internet Explorer, Picture Manager. Проектор с эраном. Компьютеры.

Тип урока: Комбинированный.

План урока:

Этап урока	Время
1.  Организационный момент.	2 мин
2.  Проверка знаний (тестирование).	10 мин
3.  Объяснение нового материала.	10 мин
4.  Закрепление изученного материала (практическая работа).	15 мин
5.  Подведение итогов.	5 мин
6.  Домашнее задание.	3 мин

Ход урока:

Организационный момент

2 мин

Здравствуйте, ребята! Сегодня нам предстоит проверить ваши знания тегов и познакомится с новой темой. «Web-страница с графическими объектами».

Проверка знаний

10 мин

Проверим ваши знания тегов. Проведем тест на компьютере по теме «html-теги». 15 вопросов на 5-7 минут. Вопросы с выбором одного правильного варианта ответа. После выбора ответа выдается сообщение о правильности вашего ответа и демонстрируется правильный ответ в случае не верного ответа. В конце теста будет выставлена отметка по 5ти-бальной системе, которая заносится в журнал. Подведение итогов теста.

Объяснения нового материала

10 мин

Учитель: Ребята сравните два сайта. Какой из них интересней и почему?

Ученик: Справа, там есть рисунки.

Учитель: А зачем добавляют графику в документ?

Ученик: отвечают.

Учитель: Правильно, чтобы привлечь внимание, для сопровождения, пояснения текста. Сейчас невозможно представить Интернет без графики.

Учитель: Запишите тему урока: «Web-страница с графическими объектами».

Учитель: Но прежде давайте вспомним, что вы знаете про графические объекты. Какие виды графических изображений вы знаете?

Ученик: Векторное и растровое графическое изображение.

Учитель: В web-документы добавляют только растровые графические изображения. Приведите примеры получения растровых изображений?

Ученики: Приводят примеры.

Учитель: Следовательно, растровое изображение это изображение

Созданное в растровом редакторе. Цифровые фотографии. Отсканированное изображение.

Учитель: Но графические изображения бывают разных форматов. Какие графические форматы вы знаете?

Ученик: .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-странице.

Слайд	Комментарии
	Сам графический файл в Блокнот вставить невозможно, поэтому мы только описываем его в 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-страницу «Визитка». Что в ней не хватает? Добавим на эту страницу вашу фотография и автограф. Вы принесли сегодня на урок файл с вашей фотографией.

Закрепление изученного материала

15 мин

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

На 5 – сказано, что надо выполнить, но не написано как (вставка двух изображений). На 4 – сказано, что и как надо выполнить (вставка двух изображений). На 3 – половина работы выполненной на 4 (вставка одного изображения).

Подведение итогов

5 мин

Выставление оценок:

Во время выполнения работы учитель внимательно следит за ходом выполнения практической работы и в конце урока выставляет оценки, аргументируя их. Можно задать вопрос – Что было наиболее сложным при выполнении практической работы?

Учитель: Подведем итог. Кто может сказать, какие действия необходимо выполнить для размещения графических объектов в веб-документе?

Ученики: Формулируют алгоритм.

Учитель: Запишем в тетради:

Домашнее задание

2 мин

Выучить записи в тетради. В практикуме тема 6.5. Дополнительное творческое задания для желающих получить дополнительную оценку – Найти способ описания фонового изображения.

Практическая работа

по теме

«Добавление графических объектов на Web-страницу»

Максимальная оценка 4

1.  Зайдите в вашу папку.

2.  В программе 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 не сохраняя изменения.

3.  Вставить описание графического файла 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.

4.  Создайте графический файл 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.

5.  Вставьте описание графического файла aftograf. gif в файл Визитка.

5.1.  Перейдите в файл Визитка открытый в Блокноте.

5.2.  Добавьте перед тегом </body> тег, описывающий файл aftograf. gif

5.3.  Добавьте тег, выравнивающий по центру автограф.

5.4.  В меню «Файл» выберите «Сохранить».

5.5.  Перейдите в файл Визитка открытый в Internet Explorer и нажмите кнопку Обновить или клавишу F5.

Практическая работа

по теме

«Добавление графических объектов на Web-страницу»

Максимальная оценка 5

1.  Зайдите в вашу папку.

2.  В программе Microsoft Office Picture Manager сжать размер графического файла с вашей фотографией и сохранить его под именем foto.

3.  Вставить описание графического файла foto в файл Визитка.

4.  Откройте программу Paint и измените размер листа, задав атрибуты - ширина 5 см и высота 3 см.

5.  В программе Paint создайте свой автограф.

6.  Сохраните файл под именем aftograf. gif .

7.  Вставьте в конце веб-страницы Визитка тег, описывающий графический файл aftograf. gif .

8.  Добавьте на веб-страницу тег, выравнивающий по центру автограф.