kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

Методическая разработка открытого урока

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

Цели урока:

  • закрепить знания учащихся по теме «Основные понятия о CSS»
  • изучить графические редакторы для обработки изображений
  • изучить методы вставки изображений в html документ

Задачи урока:

учебные

  • закрепить знания учащихся по теме «Основные понятия о CSS»
  • формирование умений и навыков обработки изображений с помощью специальных графических редакторов
  • усвоение учащимися методов вставки изображений в html документ
  • развитие у учащихся практических навыков работе на компьютере и познавательного интереса к изучению предмета.

развивающие

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

воспитательные

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

Просмотр содержимого документа
«Методическая разработка открытого урока»

М

1

ИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН

Учреждение образования «Центральноазиатский технико-экономический колледж»





Утверждаю

Заместитель директора по учебной работе

__________ Н.Жаксыбаева

__ ___________20___года









МЕТОДИЧЕСКАЯ РАЗРАБОТКА

ОТКРЫТОГО УРОКА


по дисциплине Основы Web - дизайна

на тему Обработка изображений и вставка в HTML документ

в группе ИС2А

специальность 1305000 – Информационные системы

квалификация 1305023Техник-программист











Разработал преподаватель

специальных дисциплин

Абдрахманова А.К.










Алматы 2019


Пояснительная записка


Дата проведения игры: 15 марта 2019 года


Время проведения: 90 минут


Место проведения: учебная аудитория №410


Цели урока:

  • закрепить знания учащихся по теме «Основные понятия о CSS»

  • изучить графические редакторы для обработки изображений

  • изучить методы вставки изображений в html документ


Задачи урока:

учебные

  • закрепить знания учащихся по теме «Основные понятия о CSS»

  • формирование умений и навыков обработки изображений с помощью специальных графических редакторов

  • усвоение учащимися методов вставки изображений в html документ

  • развитие у учащихся практических навыков работе на компьютере и познавательного интереса к изучению предмета.

развивающие

  • развитие у учащихся интеллекта, умение анализировать, сравнивать, обобщать, выделять существенные признаки, выделять главное

  • развитие творческих способностей

  • развитие общих умений: работа со справочной литературой, с инструментами

  • развитие у учащихся познавательного интереса

  • развитие логического мышления учащихся при создании веб-станиц со вставкой изображений

  • формирование у учащихся компьютерной грамотности и потребности в приобретении знаний

воспитательные

  • развитие познавательного интереса учащихся

  • трудовое воспитание: стремление к труду, воспитывать чувство ответственности за порученное дело

  • развитие личных качеств: ответственность, аккуратность, наблюдательность, самостоятельность

  • развитие культуры поведения

  • привитие учащимся навыков самостоятельной работы


Тип урока: комбинированный урок


Вид урока: лекция-практикум


Метод обучения: объяснительно-иллюстративный


Оснащение урока:

  • мультимедийный проектор;

  • интерактивная доска;

  • ПК;

  • раздаточный материал;

  • карточки с заданиями;

  • книга по HTML;

  • презентация.


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

  • ПО Windows;

  • графический редактор Photoshop;

  • текстовый редактор Notepad++.


Межпредметные связи

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

  • рисование;

  • геометрия.


Междисциплинарные связи:

  • инструментальные средства визуальной коммуникации и прикладной дизайн;

  • компьютерная графика;

  • мультимедиа технология;

  • Web - программирование и Интернет технологии.


Литература к занятию:

  • Робосон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд., 2014.-215 с.

  • Кириченко А.В., Хрусталев А.А. HTML5 + CSS3. Основы современного WEB-дизайна 2018.-315с.

  • Кудрец Д. Основы языка HTML.1-2 часть. 2019.-120с.


План урока


  1. Вводно-подготовительная часть;

  2. Основная часть;

  3. Заключительная часть.


Ход урока


  1. Вводно-подготовительная часть

  • приветствия учащихся;

  • проверка явки и подготовленности студентов к учебному занятию;

  • организация внимания учащихся.


  1. Основная часть

Актуализация знаний:

  • Стиль – это …

  • Таблица стилей – это …

  • Преимущества использования CSS…

  • Уровни CSS…

  • Правила таблиц CSS…

  • Методы связывания CSS таблиц…

  • Группирование – это…

  • Группирование для элементов таблиц CSS…

  • Наследование – это…


Содержание и последовательность изложения новой темы


Скажите пожалуйста, с что такое изображение? С чем оно ассоцируется? А что такое изображение в веб-документе?

Сегодня на уроке вы узнаете все о том как вставить изображение на html страницу. У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Для этого мы подробно поговорим о теге   и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим, как создаются карты-изображения.

Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег . Встретив такой тег, с адресом браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, а только затем отображает его на Web-странице.

Все графические изображения и вообще любые данные, которые хранятся в отдельных, от web-страницы, файлах называются внедренными элементами страницы.

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


Таблица 1. Форматы графических изображений

Название

Степень сжатия

Типы изображений

Недостатки

Применение

JPEG

Самая высокая

Фотографии

Потеря качества

Интернет, домашний фотоальбом

TIFF

Высокая

Любые

Меньшая, чем у JPEG степень сжатия

Хранение качественных изображений, подготовка к полиграфической печати

GIF

Высокая

Без плавных цветовых переходов

Плохо сохраняются фотоизображения

Интернет

EPS

Низкая

Любые

Большой размер файла и его внутренняя сложность

Полиграфия

PSD

Низкая

Любые

Большой размер файла и его внутренняя сложность

Промежуточные сохранение изображения при его обработке


Тег


Элемент img представляет изображение и его альтернативный текст, который добавляется с помощью атрибута alt. Так как элемент img является строчным, то лучше всего его использовать внутри блочного элемента, например p или div. Тег img имеет обязательный атрибут src, значением которго является абсолютный или относительный путь к изображению:



Для тега доступны следующие атрибуты (Таблица 2):


Таблица 2. Атрибуты тега

Атрибут

Описание, принимаемое значение

src

Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg".

alt

Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения".

height

Атрибут height задает высоту изображения. Может указываться в pxили %.
Синтаксис: height: 300px.

width

Атрибут width задает ширину изображения. Может указываться в pxили %.
Синтаксис: width: 100%.

sizes

Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, указанных через запятую.

srcset

Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src. Значением атрибута является одна или несколько строк, разделенных запятой.

srcset="

img/flower-mobile.jpg 320w,

img/flower-wide-mobile.jpg 480w,

img/flower-tablet.jpg 768w,

img/flower-desktop.jpg 1024w,

img/flower-hires.jpg 1280w"

sizes="

(max-width: 20em) 30vw,

(max-width: 30em) 60vw,

(max-width: 40em) 90vw"

alt="Роза в моём саду"


ismap

Атрибутismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента  с действительным атрибутом href.
Синтаксис: ismap.

usemap

Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа #. Значение ассоциируется со значением атрибута name или id тега  и создает связь между элементами  и . Атрибут нельзя использовать, если элемент  является потомком элемента  или .
Синтаксис: usemap="#mymap".

crossorigin

Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous".

longdesc

URL расширенного описания изображения, дополняющее атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".


Адрес изображения


Адрес изображения может быть указан полностью (абсолютный URL), например:


url(http://anysite.ru/images/anyphoto.png)


Или же через относительный путь от документа или корневого каталога сайта:


url(../images/anyphoto.png) — относительный путь от документа,


url(/images/anyphoto.png) — относительный путь от корневого каталога.


Это интерпретируется следующим образом:


../ — означает подняться вверх на один уровень, к корневому каталогу,


images/ — перейти к папке с изображениями,


anyphoto.png — указывает на файл изображения.


Размеры изображения


Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.


Тег


Тег map служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name который задает имя карты. Значение атрибут name для тега map должно соответствовать имени в атрибуте usemap элемента img:


...


Элемент содержит ряд элементов , определяющих интерактивные области в изображении карты.


Тег


Тег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одно активная область перекрывает другую, то будет реализована первая ссылка из списка областей.



Также у этого тега есть свои атрибуты (Таблица 3):


Таблица 3. Атрибуты тега

Атрибут

Краткое описание

alt

Задает альтернативный текст для активной области карты.

coords

Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.

download

Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.

href

Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.

hreflang

Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.

media

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

shape

Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.

rel

Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.

target

Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.

type

Указывает MIME-тип файлов ссылки, т.е. расширение файла.






Закрепление нового материала, формирование умений и навыков


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

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


Рис.1. Пример разметки изображения для создания карты



  1. Задаем имя карты, добавив его в тег map с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега img.

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


Гербера" alt="gerbera" target="_blank"

Ромашка" alt="camomiles" target="_blank"

Нарцисс_(растение)" alt="narcissus" target="_blank"

Тюльпан" alt="tulip" target="_blank"


Рис.2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием

  1. Заключительная часть

Подведение итогов занятия

Выставление оценок


Рефлексия

  1. На уроке я работал…

  2. Своей работой на уроке я…

  3. Урок для меня показался…

  4. За урок я…

  5. Мое настроение…

  6. Материал урока мне был…


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

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



Преподаватель ______________

(подпись)


______ ____________________ 20 _____ года



Согласован

Методист ­­­­_____________ Т.Шакирова

(подпись)


______ ____________________ 20 _____ года


Одобрен на заседании цикловой предметной комиссии ______________________________

(название ЦПК)

______ ____________________ 20 _____ года

протокол № ______

Председатель ___________ А.Касенова

(подпись)







Форма 02.18 КП ЦАТЭК 04-2012 Издание 1


Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: Прочее.
Урок соответствует ФГОС

Скачать
Методическая разработка открытого урока

Автор: Абдрахманова Аида Кайнаровна

Дата: 15.05.2019

Номер свидетельства: 510335

Похожие файлы

object(ArrayObject)#850 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(209) "Методическая разработка открытого урока  производственного обучения  «Отделка поверхности гипсовыми изделиями»"
    ["seo_title"] => string(113) "mietodichieskaiarazrabotkaotkrytoghourokaproizvodstviennoghoobuchieniiaotdielkapovierkhnostighipsovymiizdieliiami"
    ["file_id"] => string(6) "322321"
    ["category_seo"] => string(7) "prochee"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1461569081"
  }
}
object(ArrayObject)#872 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(209) "Методическая разработка открытого урока  производственного обучения  «Отделка поверхности гипсовыми изделиями»"
    ["seo_title"] => string(114) "mietodichieskaiarazrabotkaotkrytoghourokaproizvodstviennoghoobuchieniiaotdielkapovierkhnostighipsovymiizdieliiami1"
    ["file_id"] => string(6) "322322"
    ["category_seo"] => string(7) "prochee"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1461569088"
  }
}
object(ArrayObject)#850 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(209) "Методическая разработка открытого урока  производственного обучения  «Отделка поверхности гипсовыми изделиями»"
    ["seo_title"] => string(114) "mietodichieskaiarazrabotkaotkrytoghourokaproizvodstviennoghoobuchieniiaotdielkapovierkhnostighipsovymiizdieliiami2"
    ["file_id"] => string(6) "322323"
    ["category_seo"] => string(7) "prochee"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1461569094"
  }
}
object(ArrayObject)#872 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(209) "Методическая разработка открытого урока  производственного обучения  «Отделка поверхности гипсовыми изделиями»"
    ["seo_title"] => string(114) "mietodichieskaiarazrabotkaotkrytoghourokaproizvodstviennoghoobuchieniiaotdielkapovierkhnostighipsovymiizdieliiami3"
    ["file_id"] => string(6) "322324"
    ["category_seo"] => string(7) "prochee"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1461569101"
  }
}
object(ArrayObject)#850 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(226) "методическая разработка открытого урока по физической культуре с применением технологий оздоровительной направленности "
    ["seo_title"] => string(134) "mietodichieskaia-razrabotka-otkrytogho-uroka-po-fizichieskoi-kul-turie-s-primienieniiem-tiekhnologhii-ozdorovitiel-noi-napravliennosti"
    ["file_id"] => string(6) "177150"
    ["category_seo"] => string(10) "fizkultura"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1424591435"
  }
}

Получите в подарок сайт учителя

Видеоуроки для учителей

Курсы для учителей

ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства