Открытый урок по информатике Тема: «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