Цель: планируется, что к окончанию урока учащиеся будут

знать:

• тег и атрибуты для добавления изображения на веб-страницу;

• как оптимизировать изображения для добавления на веб-страницу.

уметь:

• создать веб-страницу с графикой.

Задачи личностного развития:

• содействовать формированию компьютерной грамотности;

• способствовать воспитанию информационной культуры;

• содействовать развитию дисциплинированности и любознательности;

• способствовать бережному отношению при эксплуатации средств ИКТ.

Тип урока: урок изучения нового материала.

Учебно-методическое обеспечение: 

• учебное пособие "Информатика 11, В.М. Котов";

• рабочая тетрадь по информатике 11 класс Л.Г. Овчинникова;

• раздаточный материал "Занятие 14. Графика на веб-страницах".

Программное обеспечение:

• Текстовый редактор Notepad++ (скачать).

Ход урока

1. Организационный момент (1 минута)

1. Приветствие учащихся. Создание благоприятного настроя на уроке.

2. Проверить готовность учащихся к уроку с помощью слова ТРУД: "Тетрадь, ручка, учебник и дневник"(презентация, 1 слайд).

2. Актуализация знаний, умений и навыков (2 минуты)

1. Задать вопросы: "Что такое графика? Приведите примеры графики.", "Как может применяться графика на веб-страницах?"

2. Сказать: графика на веб-страницах - это важный информационный и стилевой элемент. Графика используется как: изображение товара в онлайн-магазине, поясняющие изображения к тексту или изображение как самостоятельный элемент, фоновое изображение как стилевое решение для внешнего вида веб-сайта, анимированные изображения для привлечения внимания, или для отображения стадий, процессов с целью наглядности (презентация, 2 слайд).

3. Целемотивационный этап (1 минута)

1. Сообщить учащимся, что на данном занятии они научатся добавлять графику на веб-страницах.

2. Сформулировать тему урока: "Графика на веб-страницах" (презентация, 3 слайд).

3. Совместно с учащимися сформулировать цели урока (презентация, 4 слайд):  

• Буду знать:

3. 1. 1. тег и атрибуты для добавления изображения на веб-страницу;

      2. как оптимизировать изображения для добавления на веб-страницу.

• Буду уметь (смогу):

1. создать веб-страницу с графикой.

4. Домашнее задание (1 минута)

1. Параграф 9.1, ответить на вопросы 1-7 (с. 68, рабочая тетрадь).

2. Урок 14, выполнить по желанию задание 4.

5. Изучение новой темы (10 минут)

1. Рассказать, что прежде чем добавлять графику на веб-страницу, изображения следует оптимизировать, ввести понятие "оптимизация" (с. 66, рабочая тетрадь). 

2. Продолжить: оптимизация позволяет быстрее загружать изображения, современные подходы в оптимизации осуществляют загрузку изображений, по мере приближения видимой области у пользователя, также существует технология которая позволяет загружать менее качественные изображения при низкой скорости Интернета и более высокое качество при оптимальной и быстрой скорости сети Интернет.

3. Пояснить, что нужно учитывать при оптимизации графики:

• размер изображения (сколько изображение весит в памяти компьютера);

• качество картинки (количество пикселей и глубина цвета).

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

4. Сказать, что процесс оптимизации включает в себя следующие операции:

• уменьшение размера изображения;

• сжатие изображения с сохранением оптимального качества.

5. Рассказать, что оптимизировать изображение можно средствами растрового графического редактора (Adobe Photoshop, Paint), продемонстрировать процесс оптимизации на примере одной картинки по возможности.

6. Познакомить, какой тег позволяет загрузить на веб-страницу изображение и объяснить основные атрибуты (src, alt, align, height, width, border), с. 66, рабочая тетрадь, или презентация, 6 слайд. 

7. Продемонстрировать примеры добавления и изменения изображения на веб-странице:

• позиционирование внутри блочного элемента и выравнивание (презентация, 7 слайд);

• изменение размеров с помощью правил CSS (с. 64, пример 9.3, учебное пособие, или презентация, 8 слайд);

• размещение изображения внутри теста как плавающего элемента, и изменение отступов от текста до изображения (с. 65, примеры 9.4, 9.5, учебное пособие, или презентация, 9, 10 слайды);

• добавление рамки для изображения с помощью правил CSS (презентация, 11 слайд), пояснить о свойстве none на с. 66, пример 9.7, учебное пособие.

8. Продемонстрировать, как сделать и з изображения ссылку (пример 9.7, с. 66, учебное пособие, или презентация, 12 слайд).

9. Пояснить учащимся, как добавить изображение в качестве фона на веб-страницу с помощью правил CSS и напомнить как использовать атрибут для тега <body> (презентация, 13 слайд).

10. Пояснить учащимся, как указывать полный путь к файлу, если файл находится в другой папке выше или ниже файловой иерархии (презентация, 14 слайд).

6. Проверка понимания и закрепления изученного (12 минут)

Предложить учащимся выполнить на компьютере задание 1 (с. 66, рабочая тетрадь, или задание 1 из раздаточного материала). 

7. Физкультминутка (1 минута)

Акцент делается на зрительную систему.

8. Контроль знаний и умений (13 минут)

Предложить учащимся выполнить на компьютере задание 2 (с. 67, рабочая тетрадь, или задание 2 из раздаточного материала).

9. Обобщение и систематизация изученного (3 минуты)

Организовать обсуждение (презентация, 16 слайд):

• Что значит "оптимизировать изображение"?

• Зачем нужен в теге <img> атрибут alt?

• Как вы думаете, полезен ли тег alt для слабовидящих или слепых? (Да, так как слабовидящие или слепые могут использовать машинного диктора, он озвучит текст который описан в атрибуте alt).

10. Подведение итогов и рефлексия (1 минута)

1. Обсудить результаты выполнения заданий (тестов) и выборочно оценить работу учащихся на учебном занятии. 

2. Предложить вернуться к цели урока, организовать обсуждение:

• Насколько вы достигли поставленной цели?

• Как вы оцениваете свою работу на уроке?

3. Предложить закончить фразы:

• "Сегодня мне понравилось ..."

• "На уроке для меня было трудным ..."

• "Хотелось бы узнать еще ..."

• "Хотелось бы изменить в уроке ..."