Конспект урока "Элементы управления: Image, Picturebox"

1
1. ФИО автора материала - Скоркина Олеся Викторовна
2. Место работы (название образовательного учреждения) - БОУ г. Омска «Лицей № 143»
3. Должность автора - учитель информатики
2
Тема:
Элементы управления: Image, PictureBox.
Цели:
продолжить изучение элементов управления;
объяснить учащимся назначение элементов управления: Рисунок, Графическое окно.
Задачи урока:
Образовательные
Познакомить с компонентами Image и PictureBox их свойствами.
Совершенствовать навыки работы с компонентами языка VBasic.
Воспитательная
Способствовать формированию информационной культуры учащихся.
Развивающая
Содействовать развитию познавательного интереса, алгоритмического мышления, памяти,
внимания.
Тип урока: освоение и закрепление нового материала.
Оборудование: ПК, интерактивная доска, ActivStudio Professional Edition v3, Microsoft Word, Microsoft
PowerPoint, Microsoft Visual Basic 6.0, карточки (опорный конспект).
Предварительная подготовка
1. Распечатать задание практической работы - Проект 7.
2. Скопировать на все РМУ папку Проект Выбери картинку.
Раздаточный материал: теоретический материал для изучения новой темы, задание для практической
работы.
План урока
I. Организационный момент.
II. Постановка целей и задач урока. Ознакомление с планом урока.
III. Актуализация знаний.
IV. Изучение нового материала:
Элементы управления
Image (Рисунок)
PictureBox (Графическое окно)
V. Практическая работа.
Проект 7- Выбери картинку.
VI. Рефлексия. Подведение итогов.
VII. Домашнее задание.
ХОД УРОКА
I. Организационный момент.
II. Постановка целей и задач урока. Ознакомление с планом урока.
III. Актуализация знаний (работа с интерактивной доской).
3
IV. Изучение нового материала.
На интерактивной доске отображается тема урока.
4
Элементы управления: Рисунок (Image)
При создании проекта возникает необходимость сделать его наглядным добавить рисунок. Сразу
возникает вопрос “Где его взять?”
(Можно из библиотеки стандартных картинок или дисков с ClipArt’ами, можно из Интернета, а
можно и самим нарисовать.)
В каком виде должен быть рисунок? (Важно, чтобы рисунок был у вас на диске в виде файла.)
Элемент управления Image позволяет выводить на форму изображения из графических файлов в
заданную область.
Элемент управления Image (Рисунок)
Назначение: выводит на экран графический объект (рисунок).
Пиктограмма:
Свойства: Name имя объекта, по умолчанию Image1, Image2 и т.д.;
Visible - изменение свойства делает объект видимым (значение True) или невидимым (значение
False);
Stretch при значении True рисунок сжимается или растягивается в соответствии с размерами
объекта Image; при значении False размер объекта Image меняется в соответствии с размером
рисунка;
Picture рисунок, загруженный из графического файла с расширением bmp, gif, wmf, ico или jpg.
Ввести рисунок в объект Image в процессе редактирования можно двумя способами.
Порядок загрузки рисунка из графического файла следующий:
выделите объект Image (рис. 1);
выделите свойство Picture и нажмите на выделенную кнопку (рис. 2);
найдите графический файл, выделите его и нажмите кнопку Открыть (рис. 3).
Примечание: для того чтобы подогнать размер изображения под размер элемента Image,
воспользуйтесь свойством Stretch (подгонка), установив значение True.
Рис. 4-5 иллюстрирует влияние
свойства Stretch на внешний вид объекта
Image. На форме два объекта Image
одинакового размера. В оба объекта введен
один и тот же рисунок. Размеры рисунка
больше размеров объектов Image. У левого
объекта свойство Stretch равно True,
поэтому рисунок сжался до размеров
объекта. У правого объекта Image свойство
Stretch равно False, поэтому рисунок
сохранил первоначальный размер.
Графическое окно (PictureBox)
Элемент PictureBox (графическое окно) позволяет размещать графическую информацию их
файлов различных типов в определенных участках формы. При этом графическое окно является
фактически “формой внутри формы”, в которой можно помещать элементы управления, выводить
текст и рисовать при помощи графических методов. Оно имеет больше возможностей, чем элемент
Image, но требует больше памяти и времени на обработку. Они больше подходят для динамических
объектов, когда, например, нужно перемещать значки или картинку
Рис.1
Рис.2
Рис.3
Рис.4
Рис.5
5
Свойства элементов управления PictureBox и Image
Элемент управления
Picture Box
Элемент управления
Image
Эти элементы управления позволяют размещать графическую
информацию в определенных участках формы.
Элементы Picture Box более гибкие,
но требуют больше памяти и
времени на обработку. Они больше
подходят для динамических
объектов, когда, например, нужно
перемещать значки или картинку.
Элемент Image удобно
использовать в статической среде,
когда созданную картинку или
значок не предполагается
изменять.
Префикс для имен элементов Picture
Box - pic.
Префикс для имен элементов Im-
age img.
Свойства элемента управления
Picture Box
Свойства элемента управления
Image
Enabled (логическое свойство, определяющее, доступен ли пользователю
элемент во время выполнения приложения)
Height (высота объекта)
Left (координаты левой границы объекта относительно формы)
Name (имя объекта)
Picture (позволяет выводить в элементе растровую картинку (bitmap), либо
значок (icon))
Top (координаты верхней границы объекта относительно формы)
Visible (логическое свойство, определяющее, отображается ли элемент во
время выполнения приложения)
Width (ширина объекта)
Font Bold
Stretch (логическое свойство,
позволяющее подогнать размеры
картинки под размер элемента
управления)
Font Italic
Font Name
Font Size
Font Underline
V. Практическая работа.
Учащиеся самостоятельно работают над проектом за
компьютером.
Проект 7 - «Выбери картинку»
Задание.
На оценку «3».
1. Открыть файл Project1.vbp из папки Проект Выбери
картинку (Мои документы/ 10Б). Запустить программу на
выполнение.
6
На рис. 1 представлен вид формы сразу после старта программы.
Проверить, как работают кнопки. Если щелкать мышкой по кнопке с цифрой, в объекте Label2
появляется надпись и становиться видимой соответствующая картинка (рис. 2, 3).
2. Одна кнопка работает неправильно. Исправить ошибку в программном коде.
На оценку «4».
3. Заменить рисунок для кнопки 1 вместо льва вставить изображение Тигра (Мои
документы/10Б/Tiger.jpg) и соответственно изменить надпись в объекте Label2. Задать свойства
объекту Image1: Visible False, Strech True.
Результат выполнения заданий 1-3 на рис. 4-5.
На оценку «5».
4. Добавить в проект объект Image3 (файл Dog.jpg из папки Проект Выбери картинку). Задать
свойства объекту: Visible False, Strech True.
5. Добавить в проект объект CommandButton3. Написать программный код для созданной кнопки
(аналогично двум другим кнопкам).
Рис.1
Рис. 2
Рис. 3
Рис. 4
Рис. 5
7
Схема проекта
VI. Рефлексия. Подведение итогов.
Рефлексия
урока по теме «Элементы управления: Image, PictureBo
учени__ 10Б класса ________________________________
Проанализировать работу на уроке (выбрать в таблице и подчеркнуть один из двух вариантов
ответа).
1.На уроке я работал
активно
пассивно
2.Своей работой на уроке я
доволен
не доволен
3.Урок для меня показался
коротким
длинным
4.За урок я
не устал
устал
5.Мое настроение
стало лучше
стало хуже
6. Повторение материала
(работа с интерактивной доской)
Image1
Image2
Image3
Рис 7.
Рис. 6
8
а) вопросы
б) использование ручки при ответе
трудные
есть проблемы
не трудные
нет проблем
7.Материал урока мне был
интересен
понятен
полезен
скучен
не понятен
бесполезен
8.Практическая работа
а) по выбору уровня
б) по содержанию
в) по выполнению
легко выбрать
интересно
легким
трудно определиться
не интересно
трудным
VII. Домашнее задание.
По учебнику читать – стр. 108-111.
Отвечать на вопросы в конце главы.