Конспект урока на тему "Изображения на веб-страницах"

Изображения на веб-страницах

Цели урока:

·        расширение и углубление представлений о языке гипертекстовой разметки HTML;

·        формирование умений создавать веб-страницы с графикой;

·        развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.

Тип урока:  урок усвоения новых знаний и умений.

Учащиеся должны уметь: создавать в редакторе Блокнот веб-страницы
с графикой.

Программное и методическое обеспечение урока: редактор Блокнот;
учебное пособие «Информатика 11», § 3 (п. 3.2)  [1];  приложения к уроку 6;
ЭСУ Web11‑6 [2].

Методические рекомендации к уроку

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

Выполнение индивидуальных заданий на компьютере: оформить текст на предложенной учителем веб-странице в соответствии с рисунком упражения к  §3 (п.3.1)  пособия  [1] или ЭСУ Web11-5 [2].

Предложите учащимся ответить на вопросы: В чем заключается гипертекстовая разметка документов? Какова структура HTML-документа?  Каким тегом задается абзац? Переход на новую строку?  Какими тегами задается полужирное и курсивное начертание символов? Как задать фон и цвет текста всей веб-страницы? Какими тегами и атрибутами задается шрифт, размер и цвет символов?  Возможно использование теста (приложение к уроку 6; ЭСУ Web11‑5 [2]).

2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).

Перед началом объяснения нового материала в форме фронтальной беседы обсудите роль, которую  в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения (обои), разделительные линии. Они не только делают страницы более привлекательными и наглядными, но во многих случаях являются основными источниками информации. Продемонстрируйте примеры (ЭСУ Web11‑6 [2]).

Подчеркните, что предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Они могут быть получены с помощью цифрового фотоаппарата, сканера или из сети Интернет. Наиболее предпочтительны графические форматы gif, jpg и png,  файла которых имеют небольшие размеры, что позволяет ускорить процесс загрузки. Напомните, что в формате jpg обычно сохраняют фотографии. Формат gif поддерживает анимацию и прозрачность.

3. Объяснение нового материала (объяснительно-иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы).

Объяснение начните с вопроса: хранятся ли изображения на самой веб-странице?  Подчеркните, что все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML-коде имеются лишь ссылки на них.  Для отображения рисунков предназначен тег <img>, неотъемлемым атрибутом которого является имя графического файла.

Далее продемонстрируйте действие некоторых атрибутов тега <img>.  Так, высоту и ширину отображаемого на экране рисунка задают значениями атрибутов height и width, а толщину рамки вокруг изображения ‑ значением атрибута border.  В классах с низким уровнем подготовки это делает учитель с помощью видеопроектора. При достаточной подготовленности учащихся можно предложить им провести самостоятельное исследование с последующим фронтальным обсуждением результатов.

Важно подчеркнуть, что указание размеров позволяет увеличить или уменьшить лишь видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не указаны, то по мере загрузки рисунка может измениться расположение текста и других объектов на экране. Поэтому, полезно всегда явно задавать эти атрибуты. Значения атрибута align указывают на выравнивание текста относительно рисунка или на способ обтекания текстом.

С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден или показ отключен в браузере. Кроме того, это сообщение показывается в виде подсказки, когда курсор мыши подводится к рисунку. Продемонстрировать полезность явного задания атрибутов height, width и alt можно, сняв установленный по умолчанию флажок Показывать изображения на вкладке Дополнительно диалогового окна Свойства обозревателя.

В заключение продемонстрируйте использование изображения из файла в качестве фона веб-страницы с помощью атрибута background тега <body>.

4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).

Предложите учащимся занять места за компьютерами и выполнить задания примеров 1 и 2 из § 3 (п.3.2) учебного пособия [1], ЭСУ Web11‑6 [2]. Контролируйте самостоятельную работу каждого ученика, просматривая результаты на каждом этапе в браузере. При затруднениях оказывайте необходимую помощь.

При наличии времени подготовленным учащимся дополнительно предложите создать поздравительную открытку (пример 3 из §3 (п.3.2) пособия [1],  ЭСУ Web11‑6 [2].

5. Подведение итогов урока

Учащиеся демонстрируют созданные страницы. Обсуждаются этапы работы и затруднения учащихся. Кратко формулируются особенности использовании изображений на веб-страницах,

6. Домашнее задание

Изучить материал § 3 (п. 3.2) учебного пособия [1], ответить на вопросы 1‑3, подготовиться к практическому выполнению одного из заданий упражнения 2