СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Разработка урока "Вставка изображений в веб-страницы"

Категория: Информатика

Нажмите, чтобы узнать подробности

Данная тема изучается по учебнику Н.Д. Угриновича в 8 классе в главе «Коммуникационные технологии» в разделе «Разработка Web-сайтов с использованием языка разметки гипертекста HTML». 

Просмотр содержимого документа
«Разработка урока "Вставка изображений в веб-страницы"»

















Конспект урока по информатике и ИКТ

«Вставка изображений в веб-страницы»





























- Здравствуйте, ребята. Надеюсь, отведённое нам время мы проведем с пользой, интересно и продуктивно. Предлагаю вам повернуться друг к другу лицом и улыбнуться.

Учитель. А теперь, ребята, обратите внимание на экран. Здесь две веб-страницы. (Приложение 1)

1) Чем отличаются эти веб-страницы?

2) Которая из страниц интереснее?

3) Почему? (она более информативная, реалистичная, много изображений,…)

4) что нужно сделать чтобы создать такую страницу? (вставить изображения)

- Итак, какая тема сегодняшнего урока? («Вставка изображений в веб-страницы»)

Учитель. Для изучения темы нужно повторить некоторые понятия:

(ученик читает вопрос и отвечает)

1. Как называются ключевые слова при создании web-страниц?

а) операторы;

б) гипертексты;

в) тэги.

2. Какой помощью чего просматривается web-страница?

а) драйвер;

б) текстовый процессор;

в) браузер.

3. С помощью какой программы можно редактировать web-страницу?

а) Блокнот;

б) Paint;

в) Microsoft-PowerPoin.

- Учитель. Молодцы

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

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

-Цель - научиться вставлять изображения в веб-страницы.

Для этого в языке HTML используется тег IMG с атрибутом SRC, который указывает на место хранения файла.

Возможны три способа записи тэга:

1. Файл хранится в той же папке, что и веб-страница. Тогда в атрибуте можно указать только имя файла и его расширение: IMG SRC=”kazan.jpg”. Возможны и другие расширения графических файлов.

Попытаемся расшрифовать эту запись: открывающая угловая скобка, тэг, атрибут, знак равенства, имя файла, расширение, закрывающая угловая скобка.

Очень важно правильно писать название файла и его расширение. Поняли?

2. Файл хранится в другой папке данного компьютера. Тогда необходимо указать путь к файлу. Например: IMG SRC=”C:\Photo\Sait\kazan.jpg” Снова расшрифуем запись: тэг, атрибут, диск, папка, папка, имя файла, расширение. Запомнили?

3. Если файл находится в глобальной сети, то необходимо указывать Интернет-адрес того файла: IMG SRC=”http://www.baltasi.ru/kazan.jpg” . Поняли?

А. Все 3 способа с тегом IMG я раздал вам в виде карточек, их изучите дома.

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

Учитель. А теперь закрепим изученное. Перед вами листочки бумаги, на которых написаны составные части тэга IMG. (Приложение 2). Тэг разделен на 11 частей. Возьмите листы и выйдите ко мне. Ваша задача - расположиться в правильной последовательности, чтобы получился правильный тэг. Попрошу тебя посмотреть. (IMG SRC=”C:\IMAGE\class.bmp”). Какой из трех путей вставки изображения вы повторили только что? Что нужно сделать, чтобы появился первый способ?

Учитель. Что мы делали?

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

Учитель. Молодцы! А теперь садимся за компьютеры.

Учитель. А где вам пригодиться вставка изображений в веб-страницы?

(при создании сайтов).

Учитель. А еще практическое умение вставлять изображения вам пригодится при составлении резюме. Скоро вы окончите школу, вуз, даже во время каникул вы начнете искать работу. От вас будут требовать резюме. Слово «резюме» с французского языка переводится как «краткое изложение». Составные части резюме (прочитай ХХ): возраст, профессия, учебное заведение, которое вы закончили, место предыдущей работы и другие данные. Резюме может быть представлено как в письменной форме, так и в электронной, которую потом можно будет разместить в сети Интернет нас сайтах по поиску работы. Посмотрите на веб-страницу в которой я нашел интересный материал. Туристическая компания предлагает конкурс на работу зарплатой 100 000 долларов за полгода. Работа состоит в том, надо путешествовать по Австралии и разместить на сайт фотографии и вести блог. Чтобы получить эту работу необходимо загрузить свое резюме. А теперь представим, что нам нужна эта работа и попробуем самостоятельно заполнить веб-резюме.

Ребята, задания практической работы перед вами, начнем работу по заданному алгоритму.

  1. На рабочем столе открыть папку «Резюме», с помощью Блокнота открыть файл index.htm.

  2. В первый контейнер введите ваше имя и фамилию.

  3. Открыть файл «Информация» и скопировать оттуда подходящие вам 3 качества во второй контейнер файла index.htm

  4. Выбрать понравившуюся вам геометрическую фигуру (Приложение 3) и в контейнер IMG SRC=” вписать имя и расширение этого изображения.

  5. С помощью браузера Internet Explorer открыть файл index.htm, убедиться в правильности выполненной работы, закрыть браузер.

  6. Открыть электронную почту, прикрепить файл index.htm и выбранное изображение и отправить по адресу *******@mail.ru


Учитель. Итак, рассмотрим ваши работы. Я открою работу Вадима. Вадим, расскажи про свое резюме.

Вадим выбрал квадрат.

- Все работы я просмотрю и на электронной почте вы увидите свои оценки.

- Кто из вас задумался: для чего вместо фотографий я вставил изображение геометрической фигуры?

- Выбрав фигуру, вы прошли психогеометрическое тестирование, в котором отображаются подходящие вам качества. Вам интересно узнать про себя?

Тогда встали и подошли к той фигуре, которую вставили в веб-странице.

Кто выбрал треугольник, у кого из вас самые светлые волосы - прочитайте о себе.

Кто из прямоугольников самый близкий к потолку – прочитай о себе.

Среди выбравших квадрат, у кого самый высокий каблук – прочти ваши качества.

Из выбравших круг, у кого самые светлые глаза прочитай, какие вы замечательные люди.

Среди выбравших зигзаг, у кого самая большая обувь, прочитайте о себе.

Учитель. На уроке мы говорили о вставке изображений в веб-страницы. Какие проблемы могут возникнуть при вставки изображений

1. Картинка не отображается. В качестве домашнего задания, я предлагаю тем из вас, кто выбрал Треугольник и Зигзаг выяснить причины проблемы.

2. Картинка открывается на полный экран. У кого Квадрат или Круг – домашнее задание – как уменьшить изображение ?

3. Изображение двигается – анимация. Ребята с Прямоугольниками – вам задание – как вставить анимацию в веб-страницу.

Учитель. Ответы на этот вопрос вы найдете, прочитав Параграф 3.7.4.

Учитель. Ребята, приглашаю вас к себе в круг. Давайте обобщим урок. Что я сегодня узнал – я, например, узнал, что вы - замечательные ребята, которые умеют помогать, сотрудничать, поддержать. А что узнали вы?

-

-

-

Спасибо, ребята, за активное участие на уроке. Мне было очень приятно работать с вами! Удачи вам и успехов!

Огромное вам спасибо!


Скачать

Рекомендуем курсы ПК и ППК для учителей

Вебинар для учителей

Свидетельство об участии БЕСПЛАТНО!