Вставка графических изображений на Web-страницу. Мультимедиа

27-28 урок, 11 класс – практика

Учитель: Брух Т.В.

Дата: __________

Тема: Вставка графических изображений на Web-страницу. Мультимедиа

Цели урока:

Образовательные:

1.     Дать представление о форматах графических файлов, используемых при вставке графики на Web-страницу;

2.     Познакомить с тэгом вставки графических изображений и его атрибутами;

3.     Формировать умение размещать графику на Web-странице.

Ход урока:

Этапы урока	Деятельность учителя
I.Организационный момент.
II. Повторение изученного.	На  прошлых  уроках  мы  с вами  говорили, что  одной  из  профессиональных  компетенций  учителя  является  умение  организовать  обмен опытом  с  коллегами. Для  этого  служат  образовательные  сайты, порталы  и  издательства, где  учителя  размещают  свой  опыт.          Давайте  вспомним  основные  вопросы,  рассмотренные  нами  на  прошлых   уроках. - Что такое Web-cайт? - В чём состоит технология HTML? - Определите назначение основных тэгов HTML. Вспомним структуру  Web- страниц. Расположите тэги HTML в нужной последовательности. Проверим результат.
III. Сообщение темы урока.	На прошлом уроке мы учились форматировать текст на Web- странице. Но только отформатированного текста не достаточно для того, чтобы привлечь внимание к вашему сайту. Что ещё необходимо разместить на сайте, чтобы он был интересен пользователям? (графику) Включение изображений в Web-страницу всегда приводит к успешным проектам или просто к хорошему и красивому интерфейсу сайта. Чему же мы будем учиться на уроке? Тема нашего урока: «Как вставить изображение на Web-страницу?».
IV. Работа по теме урока.	По ходу изучения нового материала мы будем заполнять опорный конспект. В настоящее время существует три основных графических Web-формата. В качестве части вашего дизайна веб-обозреватель может отображать форматы GIF, JPEG и PNG. Формат графического обмена (Graphic Interchange Format), более известный как GIF, был одним из первых поддерживаемых в Интернете  форматов. Особенным его делает тот факт, что он поддерживает только 256 цветов и чаще всего используется для изображений с большими областями одного цвета. Мультипликацию, иллюстрации, черно-белые фотографии и графики лучше сохранять в формате GIF.  Кроме того, gif-файлы могут быть анимированными. Формат JPEG был специально разработан для фотоизображений, так как он поддерживает миллионы цветов. Изначально разработанный для замены GIF, формат PNG оказался достаточно универсальным. Он имеет ряд преимуществ перед форматами GIF и JPEG. Более подробно об особенностях этого формата рассказывается на официальном узле PNG www.libpng.org. Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из этих форматов с помощью графического редактора. Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи такого тэга, не требующего закрывающей части, как: <img src="имя файла">.  Src – обязательный атрибут тэга img. «image.jpg» - это собственно вставляемая картинка с ее именем и расширением. Вся информация, расположенная между кавычками является ссылкой (путь к картинке). Если файл находится в том же каталоге, что и файл Web-страницы, то достаточно указать его имя. Например:  <img srс= “компьютер.gif”>   Если файл находится в другом месте, то необходимо указывать полное имя файла. <img src="papka/image.jpg"> Например: < img srс= ”C:\компьютер\компьютер.gif”> Если файл находится на удалённом сервере в Интернете, то необходимо указать URL-адрес этого файла. URL-адрес - это способ однозначно указать на что-то в интернете. Например: < img srt=”http: //www.server.ru/компьютер.gif> На практике, для своего же удобства, картинку всегда нужно класть в одну папку с Web-страницей и никакой путаницы не будет. Принято папке с изображениями присваивать имя  images. Иллюстрации на Web-страницах – неотъемлемый элемент дизайна. Однако пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст. Поясняющий текст выводится с помощью атрибута АLT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: <img src= “компьютер.gif” alt= «Компьютер»> Вместе с текстом картинка на Web-странице выглядит так: После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка? Вспомним об атрибуте "ALIGN", который отвечает за выравнивание и используется с множеством других тэгов. Атрибут «align» есть и у картинок: <img src="image.jpg" align="left"> В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать  …"Right". <img src="image.jpg" align="right"> Но это еще не все параметры.  Текст может располагаться: внизу картинки - <img src="image.jpg" align="bottom"> посередине - <img src="image.jpg" align="middle"> вверху - <img src="image.jpg" align="top"> Запишите эти атрибуты в опорный конспект. Встраивание мультимедийных файлов в html-документ Все мультимедийные файлы создаются или обрабатываются в специализированных приложениях и сохраняются отдельно от HTML-доку-ментов. Обратившись к этим файлам из документа можно воспроизвести их содержимое на web-странице. Для встраивания любых мультимедийных файлов в HTML-документ можно использовать два пути. 1. Создание гиперссылки на мультимедийный файл. <A rel="nofollow ugc" target="_blank" href="music.mp3"> В. Ободзинский</A> При нажатии такой ссылки запускается проигрыватель звуковых файлов, установленный по умолчанию на компьютере. 2. Применение специального тега вставки мультимедийных файлов, которые загружаются вместе со страницей (EMBED и BGSOUND). Загрузка звукозаписи занимает значительно меньше времени, чем загрузка видеофильма, поэтому использование на странице звука вместе с фотографией часто предпочтительнее, чем вставка видео. В WWW распространено большое количество форматов звуковых файлов, которые различаются способами записи и областями применения. Наиболее распространены следующие форматы: WAV (.wav) – стандартный формат цифрового аудио в системе Windows. Звук этого формата воспроизводится одинаково во всех Windows-приложениях. MIDI (расширение .midi или .mid) – этот формат содержит просто запись нот, коды музыкальных инструментов и прочую информацию, по которой синтезируется музыка. AU (.au) – стандартный формат для 8-битового звука, который является одним из старейших звуковых форматов в Интернете. Размер звуковых файлов относительно небольшой, однако качество звука невысокое. MP3 (.mp3) – формат звукового файла отличается высокой степенью сжатия данных за счет некоторого ухудшения качества звука, не заметного на слух. Перечисленные форматы файлов являются загружаемыми, т. е. до начала воспроизведения они должны быть загруженными. RealAudio (.ra) – данные этого файла могут воспроизводиться по мере поступления данных, не ожидая окончательной загрузки файла. Для подключения звукового файла в фоновом режиме применяется тег <BGSOUND> (табл. 2.3). Атрибуты тега <BGSOUND> Атрибут Назначение Принимаемые значения и способы записи SRC Задает адрес файла SRC="URL-адрес" LOOP Определяет количество повторений LOOP="5" (1, 2, 3… и т. д. или infinite– повторение до закрытия страницы) VOLUME Уровень воспроизведения VOLUME="–100" (от –10 000 до 0) BALANCE Настройка стереобаланса BALANCE="0" (от –10 000 до 10 000) Например, запись <BGSOUND SRC="music.mp3"> задает однократное воспроизведение звукового файла: так как атрибут loop опущен, по умолчанию его значение равно 1. <BGSOUND SRC="music.mp3" LOOP="5" VOLUME="0" BALANCE="0"> задает пятикратное повторение звукового файла с максимальным уровнем звука (0) и нормальным стереобалансом (0). Звуковое сопровождение в фоновом режиме не дает возможности управлять звуком. При использовании тега <EMBED> будет выполнена загрузка текстовой части документа и изображений, а затем – звукового файла. После этого в окне браузера появится панель проигрывателя с набором управляющих кнопок, и затем начнется воспроизведение звука. Тег <EMBED> может дополняться атрибутами (табл. 2.4), которые позволяют управлять воспроизведением музыкального файла. <EMBED SRC="music.mp3" HIDDEN="true" LOOP="true"> запускает музыкальный файл с многократным воспроизведением и без отображения панели проигрывателя. Атрибуты тега <EMBED> Атрибут Назначение Значение и способы записи SRC URL-адрес воспроизводимого звукового (видео-) файла SRC="music.mp3" WIDTH Ширина панели воспроизведения WIDTH="30%" Ширина задается в пикселях или процентах HEIGHT Высота панели воспроизведения HEIGHT="200"Высота задается в пикселях или процентах AUTOSTART Определяет порядок воспроизведения данных мультимедиа AUTOSTART="true"– автоматический запуск звукового файла (по умолчанию) false– запуск мультимедиафайла пользователем LOOP Режим повторений LOOP="2" (количество повторений) true– многократное воспроизведение false– однократное воспроизведение (по умолчанию) ralidrom– воспроизведение в прямом направлении, а затем в обратном HIDDEN Используется для управления отображением панели проигрывателя HIDDEN="false"(по умолчанию) – вывод панели проигрывателя на экран true– воспроизводит звук без отображения панели проигрывателя С помощью уже рассмотренных элементов вставки изображений или аудиофайлов на web-странице можно разместить и видеоклип. Однако предварительно нужно учитывать объем используемых видеоматериалов, поскольку, как правило, их объем очень велик. В Сети применяется несколько стандартных форматов видеофайлов. MPEG (.mpeg) – обеспечивает высокое качество и является своего рода стандартом в цифровом видео. Однако файлы этого формата имеют большие размеры и работать с ними трудно. AVI (.avi) – применяется в системе Windows для хранения и воспроизведения аудио- и видеоданных. QuickTime (.mov или .gt) – наиболее популярный видеоформат. Этот формат имеет большое распространение в Internet, не требует длительной загрузки по сети, обеспечен множеством модулей. SWF (.swf или .fla) – предназначен для хранения flash-анимации. Такие файлы могут содержать картинки в векторном формате, звук, мультфильмы, элементы управления, интерактивные эффекты. Для просмотра служит проигрыватель Flash Player, который встроен в последней версии Internet Explorer и Netscape. Простейшим способом размещения видео на web-странице является внедрение видеофайлов с помощью тега <EMBED>: <EMBED SRC="Belyi.avi" CONTROLLER="false" HEIGHT="150" WIDTH="150"> В результате загрузки файла в окне браузера появится панель проигрывателя с набором управляющих кнопок, для воспроизведения файла необходимо нажать стартовую кнопку Пример отображения загрузки видеофайла с тегом <EMBED> Если вы рассчитываете на просмотр вашей страницы в браузере Internet Explorer, можете для вcтавки видеоклипа воспользоваться известным тегом <IMG>. Для этого вместо атрибута SRC нужно поставить атрибут DYNSRC, значением которого является URL видеофайла. В теоретической части второй главы мы рассмотрели гиперссылки и способы их задания, изучили, как можно использовать в качестве гиперссылки рисунок, узнали, как можно на web-страницу помещать рисунки, музыку и видеоклипы.
V. Практическая работа.	Попробуем вставить графическое изображение на титульную страницу нашего сайта. Посмотрите, какая страница у нас должна получиться - Какой тэг мы будем использовать для вставки изображения? - Какие атрибуты мы должны прописать? В случае затруднений в работе воспользуйтесь памяткой. Памятка. 1.     Скопируйте файл компьютер.gif  2.     Откройте с помощью Блокнота файл index.html. 3.     После тэга задания черты пропишите тэг вставки графического изображения (укажите имя файла с расширением и атрибут выравнивания по правому краю). 4.     Сохраните файл и проверьте результат своей работы, открыв страницу с помощью браузера. - Сравните результат вашей работы заданному образцу? - Какие ещё атрибуты необходимо задавать при вставке графического изображения на Web-страницу? Вставка изображения на Web-страницу происходит с сохранением её размера. Для того, чтобы изменить размер картинки используются атрибуты: (презентация, слайд  №2) ·       Width = «значение в пикселях» – задаёт ширину изображения ·       Height = «значение в пикселях»– задаёт высоту изображения Внесите изменения в html-код страницы, задав ширину и высоту 200 пикселей.
VI. Закрепление изученного материала.	Для того  чтобы проверить, как вы усвоили новый материал, решим кроссворд. Если вы ответите на все вопросы правильно, то сможете прочитать ключевое слово кроссворда. Вопросы: 1.     Один из форматов графических файлов, используемых  Web-дизайнерами. 2.     Тэг вставки графического изображения на Web-страницу. 3.     Обязательный атрибут тэга вставки графического изображения. 4.     Атрибут, определяющий ширину изображения. 5.     Какую команду необходимо прописать, для того, чтобы  расположить изображение справа относительно текста? 1 p n g 2 i m g 3 s r c 4 w i d t h u 5 r i g h t 6 h e i g h t 6.     Атрибут, определяющий высоту изображения. - Какое слово получилось? -Мы дописали в слове букву  U. Вспомните для чего предназначен тэг, обозначаемый  этой буквой. - Для чего предназначен тэг <u>? Дома вам предстоит вспомнить  и другие основные тэги html, предназначенные для форматирования текста. Вы должны написать  html-код страницы «Внутренние устройств а ПК».  Применить нужные параметры форматирования и  команды вставки графического изображения.
VI. Итог урока.	- Наш урок подходит к концу. Давайте ответим на главный вопрос, поставленный в начале урока: как вставить графическое изображение на Web-страницу? - На следующих уроках мы продолжим знакомство с технологией HTML  и  ещё не  раз вернёмся к сегодняшней теме урока.

Краткое описание документа:

Тема: Вставка графических изображений на Web-страницу. Мультимедиа Цели урока: Образовательные: 1.Дать представление о форматах графических файлов, используемых при вставке графики на Web-страницу; 2.Познакомить с тэгом вставки графических изображений и его атрибутами; 3.Формировать умение размещать графику на Web-странице. Ход урока: Этапы урока Деятельность учителя I.Организационный момент. II. Повторение изученного. Напрошлыхурокахмы с вамиговорили, чтооднойизпрофессиональныхкомпетенцийучителяявляетсяумениеорганизоватьобмен опытомсколлегами. Дляэтогослужатобразовательныесайты, порталыииздательства, гдеучителяразмещаютсвойопыт. Давайтевспомнимосновныевопросы,рассмотренныенаминапрошлыхуроках. - Что такое Web-cайт? - В чём состоит технология HTML? - Определите назначение основных тэгов HTML. Вспомним структуруWeb- страниц. Расположите тэги HTML в нужной последовательности. Проверим результат. III. Сообщение темы урока. На прошлом уроке мы учились форматировать текст на Web- странице. Но только отформатированного текста не достаточно для того, чтобы привлечь внимание к вашему сайту. Что ещё необходимо разместить на сайте, чтобы он был интересен пользователям? (графику) Включение изображений в Web-страницу всегда приводит к успешным проектам или просто к хорошему и красивому интерфейсу сайта. Чему же мы будем учиться на уроке? Тема нашего урока: «Как вставить изображение на Web-страницу?». IV. Работа по теме урока. По ходу изучения нового материала мы будем заполнять опорный конспект. В настоящее время существует три основных графических Web-формата. В качестве части вашего дизайна веб-обозреватель может отображать форматы GIF, JPEG и PNG. Формат графического обмена (Graphic Interchange Format), более известный как GIF, был одним из первых поддерживаемых в Интернетеформатов. Особенным его делает тот факт, что он поддерживает только 256 цветов и чаще всего используется для изображений с большими областями одного цвета. Мультипликацию, иллюстрации, черно-белые фотографии и графики лучше сохранять в формате GIF.Кроме того, gif-файлы могут быть анимированными. Формат JPEG был специально разработан для фотоизображений, так как он поддерживает миллионы цветов. Изначально разработанный для замены GIF, формат PNG оказался достаточно универсальным. Он имеет ряд преимуществ перед форматами GIF и JPEG. Более подробно об особенностях этого формата рассказывается на официальном узле PNG www.libpng.org. Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из этих форматов с помощью графического редактора. Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи такого тэга, не требующего закрывающей части, как: img src="имя файла" .Src – обязательный атрибут тэга img. «image.jpg» - это собственно вставляемая картинка с ее именем и расширением. Вся информация, расположенная между кавычками является ссылкой (путь к картинке). Если файл находится в том же каталоге, что и файл Web-страницы, то достаточно указать его имя. Например: imgsrс= “компьютер.gif” Если файл находится в другом месте, то необходимо указывать полное имя файла. img src="papka/image.jpg" Например: img srс= ”C:\компьютер\компьютер.gif” Если файл находится на удалённом сервере в Интернете, то необходимо указать URL-адрес этого файла. URL-адрес - это способ однозначно указать на что-то в интернете. Например: На практике, для своего же удобства, картинку всегда нужно класть в одну папку с Web-страницей и никакой путаницы не будет. Принято папке с изображениями присваивать имяimages. Иллюстрации на Web-страницах – неотъемлемый элемент дизайна. Однако пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст. Поясняющий текст выводится с помощью атрибута АLT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: img src= “компьютер.gif” alt= «Компьютер» Вместе с текстом картинка на Web-странице выглядит так: После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка? Вспомним об атрибуте "ALIGN", который отвечает за выравнивание и используется с множеством других тэгов. Атрибут «align» есть и у картинок: img src="image.jpg" align="left" В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать…"Right". img src="image.jpg" align="right" Но это еще не все параметры. Текст может располагаться: внизу картинки - img src="image.jpg" align="bottom" посередине - img src="image.jpg" align="middle" вверху - img src="image.jpg" align="top" Запишите эти атрибуты в опорный конспект. Встраивание мультимедийных файлов в html-документ Все мультимедийные файлы создаются или обрабатываются в специализированных приложениях и сохраняются отдельно от HTML-доку-ментов. Обратившись к этим файлам из документа можно воспроизвести их содержимое на web-странице. Для встраивания любых мультимедийных файлов в HTML-документ можно использовать два пути. 1. Создание гиперссылки на мультимедийный файл. A HREF="music.mp3" В. Ободзинский /A При нажатии такой ссылки запускается проигрыватель звуковых файлов, установленный по умолчанию на компьютере. 2. Применение специального тега вставки мультимедийных файлов, которые загружаются вместе со страницей (EMBED и BGSOUND). Загрузка звукозаписи занимает значительно меньше времени, чем загрузка видеофильма, поэтому использование на странице звука вместе с фотографией часто предпочтительнее, чем вставка видео. В WWW распространено большое количество форматов звуковых файлов, которые различаются способами записи и областями применения. Наиболее распространены следующие форматы: WAV (.wav) – стандартный формат цифрового аудио в системе Windows. Звук этого формата воспроизводится одинаково во всех Windows-приложениях. MIDI (расширение .midi или .mid) – этот формат содержит просто запись нот, коды музыкальных инструментов и прочую информацию, по которой синтезируется музыка. AU (.au) – стандартный формат для 8-битового звука, который является одним из старейших звуковых форматов в Интернете. Размер звуковых файлов относительно небольшой, однако качество звука невысокое. MP3 (.mp3) – формат звукового файла отличается высокой степенью сжатия данных за счет некоторого ухудшения качества звука, не заметного на слух. Перечисленные форматы файлов являются загружаемыми, т. е. до начала воспроизведения они должны быть загруженными. RealAudio (.ra) – данные этого файла могут воспроизводиться по мере поступления данных, не ожидая окончательной загрузки файла. Для подключения звукового файла в фоновом режиме применяется тег BGSOUND (табл. 2.3). Атрибуты тега BGSOUND Атрибут Назначение Принимаемые значения и способы записи SRC Задает адрес файла SRC="URL-адрес" LOOP Определяет количество повторений LOOP="5" (1, 2, 3… и т. д. или infinite– повторение до закрытия страницы) VOLUME Уровень воспроизведения VOLUME="–100" (от –10 000 до 0) BALANCE Настройка стереобаланса BALANCE="0" (от –10 000 до 10 000) Например, запись BGSOUND SRC="music.mp3" задает однократное воспроизведение звукового файла: так как атрибут loop опущен, по умолчанию его значение равно 1. BGSOUND SRC="music.mp3" LOOP="5" VOLUME="0" BALANCE="0" задает пятикратное повторение звукового файла с максимальным уровнем звука (0) и нормальным стереобалансом (0). Звуковое сопровождение в фоновом режиме не дает возможности управлять звуком. При использовании тега EMBED будет выполнена загрузка текстовой части документа и изображений, а затем – звукового файла. После этого в окне браузера появится панель проигрывателя с набором управляющих кнопок, и затем начнется воспроизведение звука. Тег EMBED может дополняться атрибутами (табл. 2.4), которые позволяют управлять воспроизведением музыкального файла. EMBED SRC="music.mp3" HIDDEN="true" LOOP="true" запускает музыкальный файл с многократным воспроизведением и без отображения панели проигрывателя. Атрибуты тега EMBED Атрибут Назначение Значение и способы записи SRC URL-адрес воспроизводимого звукового (видео-) файла SRC="music.mp3" WIDTH Ширина панели воспроизведения WIDTH="30%" Ширина задается в пикселях или процентах HEIGHT Высота панели воспроизведения HEIGHT="200"Высота задается в пикселях или процентах AUTOSTART Определяет порядок воспроизведения данных мультимедиа AUTOSTART="true"– автоматический запуск звукового файла (по умолчанию) false– запуск мультимедиафайла пользователем LOOP Режим повторений LOOP="2" (количество повторений) true– многократное воспроизведение false– однократное воспроизведение (по умолчанию) ralidrom– воспроизведение в прямом направлении, а затем в обратном HIDDEN Используется для управления отображением панели проигрывателя HIDDEN="false"(по умолчанию) – вывод панели проигрывателя на экран true– воспроизводит звук без отображения панели проигрывателя С помощью уже рассмотренных элементов вставки изображений или аудиофайлов на web-странице можно разместить и видеоклип. Однако предварительно нужно учитывать объем используемых видеоматериалов, поскольку, как правило, их объем очень велик. В Сети применяется несколько стандартных форматов видеофайлов. MPEG (.mpeg) – обеспечивает высокое качество и является своего рода стандартом в цифровом видео. Однако файлы этого формата имеют большие размеры и работать с ними трудно. AVI (.avi) – применяется в системе Windows для хранения и воспроизведения аудио- и видеоданных. QuickTime (.mov или .gt) – наиболее популярный видеоформат. Этот формат имеет большое распространение в Internet, не требует длительной загрузки по сети, обеспечен множеством модулей. SWF (.swf или .fla) – предназначен для хранения flash-анимации. Такие файлы могут содержать картинки в векторном формате, звук, мультфильмы, элементы управления, интерактивные эффекты. Для просмотра служит проигрыватель Flash Player, который встроен в последней версии Internet Explorer и Netscape. Простейшим способом размещения видео на web-странице является внедрение видеофайлов с помощью тега EMBED : EMBED SRC="Belyi.avi" CONTROLLER="false" HEIGHT="150" WIDTH="150" В результате загрузки файла в окне браузера появится панель проигрывателя с набором управляющих кнопок, для воспроизведения файла необходимо нажать стартовую кнопку Пример отображения загрузки видеофайла с тегом EMBED Если вы рассчитываете на просмотр вашей страницы в браузере Internet Explorer, можете для вcтавки видеоклипа воспользоваться известным тегом IMG . Для этого вместо атрибута SRC нужно поставить атрибут DYNSRC, значением которого является URL видеофайла. В теоретической части второй главы мы рассмотрели гиперссылки и способы их задания, изучили, как можно использовать в качестве гиперссылки рисунок, узнали, как можно на web-страницу помещать рисунки, музыку и видеоклипы.