Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Конспект урока на тему "Изображения на веб-страницах"

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

  • Информатика

Поделитесь материалом с коллегами:

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

Цели урока:

  • расширение и углубление представлений о языке гипертекстовой разметки 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 можно, сняв установленный по умолчанию флажок Показывать изображения на вкладке Дополнительно диалогового окна Свойства обозревателя.

hello_html_da8f7fa.pnghello_html_29a49ba2.gif

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

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

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

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

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

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

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

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


Автор
Дата добавления 23.10.2015
Раздел Информатика
Подраздел Конспекты
Просмотров178
Номер материала ДВ-089088
Получить свидетельство о публикации

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