Просмотр содержимого документа
«Методическая разработка открытого урока»
М
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с.
План урока
Вводно-подготовительная часть;
Основная часть;
Заключительная часть.
Ход урока
Вводно-подготовительная часть
приветствия учащихся;
проверка явки и подготовленности студентов к учебному занятию;
организация внимания учащихся.
Основная часть
Актуализация знаний:
Стиль – это …
Таблица стилей – это …
Преимущества использования 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.)
з-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег 
Адрес изображения 
