Урок графика на wеб-страницакх


ИНФОРМАТИКА. 8 класс
Конспект урока
1. Тема урока. Вставка изображений в Web-страницы
1). Реализуемые требования ФГОС ООО к личностным образовательным результатам:
1.1. формирование ответственного отношения к учению, готовности и способности обучающихся к саморазвитию и самообразованию на основе мотивации к обучению и познанию,  осознанному выбору и построению дальнейшей индивидуальной траектории образования …, с учётом устойчивых познавательных интересов, а также на основе формирования уважительного отношения к труду …;
1.2. формирование осознанного, уважительного и доброжелательного отношения к другому человеку, его мнению …, готовности и способности вести диалог с другими людьми и достигать в нём взаимопонимания;
1.3. формирование коммуникативной компетентности в общении и  сотрудничестве со сверстниками, …; взрослыми в процессе образовательной, …; учебно-исследовательской, творческой и других видов деятельности.
2). Реализуемые требования ФГОС ООО к метапредметным образовательным результатам:
2.1. умение самостоятельно определять цели своего обучения, ставить и формулировать для себя новые задачи в учёбе и познавательной деятельности, развивать мотивы и интересы своей познавательной деятельности;
2.2. умение самостоятельно планировать пути  достижения целей,  в том числе альтернативные,  осознанно выбирать  наиболее эффективные способы решения учебных и познавательных задач;
2.3. умение оценивать правильность выполнения учебной задачи,  собственные возможности её решения;
2.4. владение основами самоконтроля, самооценки, принятия решений и осуществления осознанного выбора в учебной и познавательной деятельности;
2.5. умение  определять понятия, создавать обобщения, устанавливать аналогии, классифицировать,   самостоятельно выбирать основания и критерии для классификации, устанавливать причинно-следственные связи, строить  логическое рассуждение, умозаключение (индуктивное, дедуктивное  и по аналогии) и делать выводы;
2.6. умение создавать, применять и преобразовывать знаки и символы, модели и схемы для решения учебных и познавательных задач;
2.7. умение организовывать  учебное сотрудничество и совместную деятельность с учителем и сверстниками;   работать индивидуально и в группе: находить общее решение и разрешать конфликты на основе согласования позиций и учёта интересов;  формулировать, аргументировать и отстаивать своё мнение;
2.8. умение осознанно использовать речевые средства в соответствии с задачей коммуникации для выражения своих … потребностей; планирования и регуляции своей деятельности…;
2.9. формирование и развитие компетентности в области использования информационно-коммуникационных технологий.
3). Реализуемые требования ФГОС ООО к предметным образовательным результатам: 
3.1. развитие умений применять изученные понятия, результаты, методы для решения задач практического характера;
3.2. развитие основных навыков и умений использования компьютерных устройств;
3.3. формирование навыков и умений безопасного и целесообразного поведения при работе с компьютерными программами …, умения соблюдать нормы информационной этики и прав.
Планируемые образовательные результаты –
как уточнение требований ФГОС ООО к образовательным результатам
при изучении данной темы
Планируемые личностные образовательные результаты:
1.1. проявление и развитие познавательного интереса к изучению особенностей компьютерной графики, представленной на Web-страницах;
1.2. участие в коллективном обсуждении дискуссионных вопросов по особенностям графики, представляемой на Web-страницах;
1.3. совместное решение учебных задач при создании и редактировании графических изображений на компьютере для вставки их в Web-страницы.
Планируемые метапредметные образовательные результаты:
2.1. понимание значимости сформированности умений создания графических объектов с помощью компьютера;
2.2. нахождение эффективных способов представления изображений предназначенных для размещения на Web-страницах;
2.3. умение сотрудничать с педагогом и одноклассниками, оценивать деятельность отвечающего школьника и выражать собственное мнение о разработке и размещении графических объектов.
2.4. понимание важности компьютерной графики для применения данных знаний в учебной и познавательной деятельности
2.5. умение обоснованно и точно выражать смысл понятий формата графического изображения, понимание достоинств и недостатков данных видов компьютерного изображения, умение сравнивать и отличать разную компьютерную графику
2.6. применение знаний кодирования информации к новому объекту кодирования – изображению
2.7. умение слаженно работать со сверстниками и педагогом при групповой деятельности по разработке творческих заданий, умение отстоять свою точку зрения
2.8. умение обоснованно и грамотно донести свою току зрения до преподавателя и до своих сверстников
2.9. понимание понятий различных прикладных программ, умение адаптироваться к любом компьютерной среде
Планируемые предметные образовательные результаты:
3.1. использование понятий растрового и векторного изображения для решения задач на кодирование информации
3.2. понимание интерфейса и свойств графических редакторов для будущего умения редактирования растровых и векторных изображений на компьютере при размещении их на Web-страницах;
3.3. умение безопасно и с использованием норм информационной этики работать с компьютерной графикой и графическими редакторами

3. Описание места темы урока в изучаемом курсе (темы курса).
Урок на тему «Вставка изображений в Web-страницы» предусматривается как третий в разделе «Разработка Web-сайтов с использованием языка HTML» школьного курса информатики в 4 четверти (07.04.14-05.05.14) 7 класса:
Web – страницы и Web-сайты.
Форматирование текста на Web-страницах
Вставка изображений в Web-страницы.
Гиперссылки на Web-страницах
Творческая работа
Тип урока - комбинированный урок
5. Рекомендуемая литература по теме урока.
Учебник Н.Д. Угринович «Информатика. 8 класс». – М., БИНОМ, 2008, 168с – обратить внимание на страницу 117
Интерактивный «Учебник HTML»
Методы обучения на уроке.
По характеру познавательной деятельности:
Объяснительно-иллюстративный.
Репродуктивный.
Проблемный
Методы обучения на уроке.
По характеру познавательной деятельности:
Объяснительно-иллюстративный.
Репродуктивный.
Проблемный
По источнику информации:
Словесные (объяснение, рассказ)
Наглядные (иллюстрация (презентация через проектор))
Необходимые аппаратные и программные средства информационных технологий.
проектор;
экран (интерактивная доска);
программа Pаint для редактирования изображения
программа Блокнот для создания Web-страницы
программа Internet Explorer для просмотра Web-страницы
Структура урока (основные этапы урока: проверка задания, объяснение нового материала, выполнение упражнений и т.д.).
Организационный момент.
Актуализация опорных знаний и практического опыта учащихся.
Изучение нового материала.
Закрепление нового материала.
Первичный контроль результатов учебной деятельности.
Задание на дом.
Подведение итогов урока. Рефлексия.
Опорные понятия и способы деятельности.
Опорные понятия:
- графическая информация,
- графический редактор;
- форматы графических файлов;
- адрес файла;
- Web-страниц и ее структура;
- язык HTML, его назначение, основные теги.
Опорные способы деятельности:
- осуществление основных операций в графическом редакторе «Paint».
- осуществление основных операций в текстовом редакторе «Блокнот».
Формируемые знания и способы деятельности.
Формируемые понятия:
форматы графических файлов для Web-страниц (jpg, gif);
оптимизация графических файлов;;теги их атрибуты для работы с изображениями;
картинки-ссылки;
Формируемые способы деятельности:
построение и редактирование растровых изображений для Web-страниц;
построение векторных изображений для Web-страниц;
гипертекстовая разметка изображения;
вставка изображения в HTML-документ.
выбор значений для атрибутов тега IMG
Типы самостоятельной работы учащихся.
Самостоятельные задания на репродуктивную деятельность
Какое из этих изображений растровое, а какое векторное?

Какие графические редакторы используются для создания этих изображений?
Какие инструменты редактора Paint используются для изменения размера изображения?
В каких единицах может быть задан размер изображения?
Самостоятельное задание на продуктивную деятельность:
Из предлагаемого набора картинок (10 шт) выбрать подходящие по формату и размеру для Web-страницы.
Самостоятельное задание на творческую деятельность:
Создание графического изображения для последующей вставки в HTML-документ
Виды контроля учебных достижений.
Текущий контроль:
Устный фронтальный контроль: (для закрепления материала урока)
Какой тег используется для вставки изображения?
Какой обязательный атрибут задает имя файла с картинкой?
Какие необязательные атрибуты могут быть использованы при описании изображения?
Самоконтроль – нахождение ошибок в списке допустимых для Интернета картинок, который каждый ученик составлял самостоятельно.
Домашнее задание.
Создать Web-страничку на тему «Мое любимое животное», содержащее изображение, прислать на почту учителя.
Подготовиться к тесту для проверки знаний основных тегов HTML
Деятельность учителя и учащихся по выделенным этапам урока с учетом фактора времени по прилагаемой схеме.
Этап урока Время Деятельность учителя Деятельность учащихся
Организационный момент 4 минуты Войти в класс, поздороваться, отметить отсутствующих. Сообщить ученикам тему и ход урока Встать поздороваться, отвечать «Я» или поднимать руку во время отмечания отсутствующих.
Актуализация опорных знаний и практического опыта учащихся. 7 минут Задать некоторые вопросы проблемного характера по данной теме, чем самым замотивировать учеников и перевести их мысли на нужную тему.
Вопросы:
Все вы сталкивались с изображениями на компьютере – фотографировали на камеру или рисовали сами в разных программах. В каких случаях изображение приходится редактировать? Постараться найди решение проблемы и выразить свою мысль нужными словами.
Изучение нового материала. 10 минут Изложить новый материал ученикам в наглядной форме с использованием проектора и интерактивной доски.
(изложение нового материала смотри в п. 15) Записывать конспект урока в тетрадь
Закрепление нового материала. 15 минут Выполнить задания, указанные учителем
(задания указаны в п. 11) Выполнять задания или внимательно следить за работающим у доски
Первичный контроль результатов учебной деятельности. 3 минуты Пройти и посмотреть ведение тетради, и работу на компьютере. проверить, работал ли ученик на уроке. Выставить оценки отвечающим у доски и с места ученикам. Предоставить преподавателю тетрадь для проверки.
Задание на дом. 3 минуты Задать домашнее задание, сообщить, что задание будет вынесено в электронный журнал (смотри п. 13) Записать домашнее задание
Подведение итогов урока. Рефлексия. 3 минуты Спросить детей, какая была тема урока, какие новые понятия мы сегодня изучили.
1) Какие форматы гр. файлов используются для Web-страниц?
2) Какой тег используется для вставки изображения?
3) Какой обяза-тельный атрибут задает имя файла с картинкой Поблагодарить за урок, попрощаться. Ответить на заключительные вопросы педагога.
Правильные ответы:
Тема урока: Вставка изображений в . Web-страницы. Изучили новые теги языка HTML
1) для Web-страниц используются форматы (jpg, gif)
2) для вставки изображения используется тег IMG.
3) обязательный атрибут SRC/
Краткий конспект содержания учебного материала по теме урока.
На прошлом уроке мы научились создавать  web-страницы с использованием HTML-тэгов. Давайте повторим.
▪ Что такое HTML? (HTML – язык гипертекстовой разметки Web-страниц – является компьютерным языком программирования для разработки Web-страниц. HTML – коллекция управляющих символов -дескрипторов для добавления, форматирования элементов Web-страницы);
▪ Вспомним теги, описывающие структуру Web-страницы. (учащиеся по порядку называют теги, и объясняют их значение):
(<HTML> - начало страницы<HEAD> -оформление заголовка страницы
<TITLE>…</TITLE>
</HEAD
<BODY> - текст и основная часть страницы
</BODY>
</HTML>
Вспомним теги, для форматирования текста.
Парный тег <FONT> позволяет управлять параметрами шрифта. Он должен
обязательно содержать хотя бы один из атрибутов:
COLOR=”шестнадцатеричный код цвета”, 
FACE=гарнитура шрифта, 
SIZE размер от 1 до 7. 
<P> ваш текст </P> - создание абзаца
ALIGN=“left” – выравнивание текста по левой стороне
ALIGN=“right” – выравнивание текста по правой стороне
ALIGN=“center” – выравнивание теста по центру
Изучение нового материала
Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии. Сегодня мы научимся вставлять рисунки и гиперссылки  в web-страницы.
Для вставки рисунка в web – страницу используется тег <img>, с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. Если графический файл находится на локальном компьютере в той же папке, что и файл  web-страницы, то в качестве значения атрибута src достаточно указать только имя файла. Например:
<img SRC=’Мой файл.jpg’ > </img>
Если файл находится в другой папке на данном  локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
<img SRC=’C:Мои рисунки\Мой файл.jpg' > </img>
 Следующий атрибут тега <img> - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать? Правильно:(left, right, top, middle, bottom).
Например: <img SRC=’C:Мои рисунки\Мой файл.jpg'  ALIGN=‘right’> </img>
Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10. Чем больше значение, тем толще обводка рисунка. 
А теперь рассмотрим размещение гиперссылок в web-страницу. Гиперссылки, размещенные на web-странице, позволяют загружать в браузер другие web-страницы, хранящиеся на локальном компьютере или в интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью тэга <A> и его атрибута Href, указывающего, в каком файле хранится загружаемая web-страница:
<A HREF=‘адрес’>гиперссылка </A>
Указателем ссылки может быть текст или рисунок.
 IV.  Закрепление нового материала
Создать html – страницу про свою семью. Вставить рисунок и гиперссылку. Например, 

<html>
<head>
<body bgcolor="blue">
<title> Моя семья </title>
</head>
<FONT COLOR="white" Faсe="Arial"size=16>
<P  ALIGN="center">Семья Ивановых</P>
</FONT>
<FONT COLOR="white"size=6>
<p>Моя семья очень дружная. Она состоит из четырех человек: папа, мама, сестра Марина и я - Карина. Я очень люблю свою семью </p>
<img SRC="foto.jpg" align=left > </img>
<A href="Karina.html"><FONT COLOR="white"size=6> Карина</FONT></A>
</FONT>
</body>
</html>
Вторая страница:
<html>
<head>
<body bgcolor="blue">
<title> Страница Карины </title>
</head>
<FONT COLOR="white" Faсe="Arial"size=16>
<P  ALIGN="center">Карина</P>
</FONT>
<FONT COLOR="white"size=6>
<p>Иванова Карина Александровна родилась 18 июля 1999 года </p>
</FONT>
</body>
</html>
V.  Подведение итога
- сегодня мы с вами научились вставлять изображения и гиперссылки в web-страницу; 
- полученные сегодня знания пригодятся нам при создании своего сайта.
VI. Домашнее задание
п.3.7.4, 3.7.5 читать, ответить на вопросы

Приложенные файлы


Добавить комментарий