Урок 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, используются атрибуты без
значения:
<video scr="last_bell.mp4" autoplay></video> - вставка видео из файла last_bell.mp4, воспроизводится автоматически, после загрузки страницы
аutoplay - для
автоматического воспроизведение звука(видео)
controls - для
отображения аудио (видео) ролика на веб-странице с элементами управления:
кнопкой запуска и приостановки воспроизведения, шкалой воспроизведения и
регулятором громкости
poster - используется только для видео и
указывает графическое изображение, которое будет выведено в панели просмотра в
качестве заставки.
Например:
<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, содержащую изображение, аудио- и видеоролик (материалы к выполнению задания)
2. Измените текст заготовки шаблон.txt в соответствии с текстом задания:
- фоновое изображение веб-страницы - "косая линейка" из файла fon.jpg;
- заголовок на странице Последний звонок - оформить как заголовок первого уровня, выравнивание по центру;
- изображение из файла zvonok.jpg, ширина изображения 110 пикселей;
- стихотворение - курсивное начертание, размер символов -5 единиц
Последний, прощальный урок.
Печально слегка почему-то.
Звенит нам последний звонок.
- добавить видео из файла last_bell.mp4, отобразить на веб-странице с элементами управления
- текст "Нажмите кнопку воспроизведения, чтобы услышать мелодию школьного вальса" - оформить абзацем, выравнивание по центру
- добавить звук из файла waltz.mp3, отобразить на странице с элементами управления.
3. Домашнее задание: составить конспект урока.