М
1
ИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН
Учреждение образования «Центральноазиатский технико-экономический колледж»
Утверждаю
Заместитель директора по учебной работе
__________ Н.Жаксыбаева
__ ___________20___года
МЕТОДИЧЕСКАЯ РАЗРАБОТКА
ОТКРЫТОГО УРОКА
по дисциплине Основы Web - дизайна
на тему Обработка изображений и вставка в HTML документ
в группе ИС2А
специальность 1305000 – Информационные системы
квалификация 1305023 – Техник-программист
Разработал преподаватель
специальных дисциплин
Абдрахманова А.К.
Алматы 2019
Пояснительная записка
Дата проведения игры: 15 марта 2019 года
Время проведения: 90 минут
Место проведения: учебная аудитория №410
Цели урока:
закрепить знания учащихся по теме «Основные понятия о CSS»
изучить графические редакторы для обработки изображений
изучить методы вставки изображений в html документ
Задачи урока:
учебные
закрепить знания учащихся по теме «Основные понятия о CSS»
формирование умений и навыков обработки изображений с помощью специальных графических редакторов
усвоение учащимися методов вставки изображений в html документ
развитие у учащихся практических навыков работе на компьютере и познавательного интереса к изучению предмета.
развивающие
развитие у учащихся интеллекта, умение анализировать, сравнивать, обобщать, выделять существенные признаки, выделять главное
развитие творческих способностей
развитие общих умений: работа со справочной литературой, с инструментами
развитие у учащихся познавательного интереса
развитие логического мышления учащихся при создании веб-станиц со вставкой изображений
формирование у учащихся компьютерной грамотности и потребности в приобретении знаний
воспитательные
развитие познавательного интереса учащихся
трудовое воспитание: стремление к труду, воспитывать чувство ответственности за порученное дело
развитие личных качеств: ответственность, аккуратность, наблюдательность, самостоятельность
развитие культуры поведения
привитие учащимся навыков самостоятельной работы
Тип урока: комбинированный урок
Вид урока: лекция-практикум
Метод обучения: объяснительно-иллюстративный
Оснащение урока:
мультимедийный проектор;
интерактивная доска;
ПК;
раздаточный материал;
карточки с заданиями;
книга по HTML;
презентация.
Программное обеспечение:
Межпредметные связи
информатика;
рисование;
геометрия.
Междисциплинарные связи:
Литература к занятию:
Робосон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд., 2014.-215 с.
Кириченко А.В., Хрусталев А.А. HTML5 + CSS3. Основы современного WEB-дизайна 2018.-315с.
Кудрец Д. Основы языка HTML.1-2 часть. 2019.-120с.
План урока
Вводно-подготовительная часть;
Основная часть;
Заключительная часть.
Ход урока
Вводно-подготовительная часть
Основная часть
Актуализация знаний:
Стиль – это …
Таблица стилей – это …
Преимущества использования 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-тип файлов ссылки, т.е. расширение файла. |
Закрепление нового материала, формирование умений и навыков
Для закрепления пройденной темы проделаем самостоятельно готовый пример создания карты-изображения.
Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например AdobePhotoshop или Paint.(Рис.1.)
Рис.1. Пример разметки изображения для создания карты
Задаем имя карты, добавив его в тег map с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега img.
Добавляем ссылки на веб-страницы или части веб-документа для каждой активной области, по которым пользователь будет переходить при нажатии курсором мыши на активную область изображения.(Рис.2.)
Гербера" alt="gerbera" target="_blank"
Ромашка" alt="camomiles" target="_blank"
Нарцисс_(растение)" alt="narcissus" target="_blank"
Тюльпан" alt="tulip" target="_blank"
Рис.2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием
Заключительная часть
Подведение итогов занятия
Выставление оценок
Рефлексия
На уроке я работал…
Своей работой на уроке я…
Урок для меня показался…
За урок я…
Мое настроение…
Материал урока мне был…
Домашнее задание
Прочитать лекцию и придумать свою карту-изображения, применяя методы, пройденные в лекции.
Преподаватель ______________ (подпись) ______ ____________________ 20 _____ года | |
Согласован Методист _____________ Т.Шакирова (подпись) ______ ____________________ 20 _____ года | Одобрен на заседании цикловой предметной комиссии ______________________________ (название ЦПК) ______ ____________________ 20 _____ года протокол № ______ Председатель ___________ А.Касенова (подпись) |
Форма 02.18 КП ЦАТЭК 04-2012 Издание 1