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

знать:

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

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

уметь:

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

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

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

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

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

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

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

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

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

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

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

• презентация по теме (16 слайдов).

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

• Текстовый редактор 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 (рабочая тетрадь).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• привести пример использования альтернативного текста с помощью атрибута alt (пример 9.6, §9.1, учебное пособие).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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