Урок 3

Тема: Мультимедиа на веб-страницах
Цель:
   знать
  • алгоритм создания веб-страницы;
  • теги для размещения видео и аудио на веб-страницах
    уметь
  • создавать веб-страницы с использованием мультимедийных объектов;
  • создавать веб-сайт из нескольких страниц;
  • применять полученные знания для решения практических задач.
1. Повторение изученного материала


2. Самостоятельная работа  (материалы к самостоятельной работе)
Создайте фрагмент сайта Сказки Пушкина, состоящий из главной страницы index.html и трех страниц skazka1.html, skazka2.html, skazka3.html.
Главная страница:
  •  Название веб-страницы– index.html
  • Фоновое изображение страницы – из файла fon.jpg
  • Иллюстрация на странице – из файла Pushkin.jpg
  • Заголовок "СКАЗКИ ПУШКИНА" - заголовок первого уровня, выравнивание по центру, цвет текста черный
  • Гиперссылки – названия сказок
 
Страницы со сказками (оформить по аналогии)
 Например (страница "Сказка о попе и его работнике Балде") :
  • Название веб-страницы – skazka1.html
  • Фоновое изображение веб-страницы  – из файла fon.jpg
  •  Иллюстрация на странице – из файла ris1.jpg
  •  Заголовок на странице  - заголовок первого уровня, выравнивание по центру, цвет - синий
 
  Гиперссылки на главной странице должны открывать в новом окне соответствующую тексту ссылки страницу.

Результат отправьте учителю.



3. Изучение нового материала
Мультимедиа - компьютерная технология, обеспечивающая с помощью технических и программных средств совместное использование текста, графики, звука, анимации и видео.
Мультимедиа делают веб-страницу наиболее яркой и наглядной.

 Для вставки видео служит парный тег <audio> с обязательным атрибутом src, который указывает на аудиофайл. Для вставки видеоролика предназначен парный тег <video> с обязательным атрибутом src, который указывает на видеофайл.
Например:
<audio src=”имя файла”></audio>

<video src=”имя файла”></video>
Кроме обязательного атрибута src, используются атрибуты без значения:
аutoplay  - для автоматического воспроизведение звука(видео)
controls - для отображения аудио (видео) ролика на веб-странице с элементами управления: кнопкой запуска и приостановки воспроизведения, шкалой воспроизведения и регулятором громкости
poster  - используется только для видео и указывает графическое изображение, которое будет выведено в панели просмотра в качестве заставки.

Например: 
<video scr="last_bell.mp4" autoplay></video> - вставка видео из файла last_bell.mp4, воспроизводится автоматически,  после загрузки страницы
<video scr="last_bell.mp4" controls poster="zvonok.jpg"></video> - вставка видео из файла last_bell.mp4, с отображением заставки (изображение из файла zvonok.jpg) и элементами управления
<audio src="zvonok.mp3" controls></audio>  - вставка аудио из файла zvonok.mp3, отображаются элементы управления

Разберем на примере задания. 
Задание. Создайте веб-страницу, посвященную Последнему звонку, с именем Фамилия(bell).htm, содержащую изображение, аудио- и видеоролик (материалы к выполнению задания)

 1. Скачайте материалы. 
 2. Измените текст заготовки шаблон.txt в соответствии с текстом задания:
  • фоновое изображение веб-страницы - "косая линейка" из файла fon.jpg;
  • заголовок  на странице Последний звонок - оформить как заголовок первого уровня, выравнивание по центру;
  • изображение из файла zvonok.jpg, ширина изображения 110 пикселей;
  • стихотворение  - курсивное начертание, размер символов -5 единиц
Последние детства минуты
Последний, прощальный  урок.
Печально слегка почему-то.
Звенит нам последний звонок.
  • добавить видео из файла last_bell.mp4, отобразить на веб-странице с элементами управления
  • текст "Нажмите кнопку воспроизведения, чтобы услышать мелодию школьного вальса" - оформить абзацем, выравнивание по центру
  • добавить звук из файла waltz.mp3, отобразить на странице с элементами управления.
Просмотреть страницу в браузере, при необходимости внести изменения. (пример оформления)

3. Домашнее задание: составить конспект урока.

Популярные сообщения из этого блога