Кадры-фреймы в HTML. Аудио и видео. (Тема 6) презентация

Содержание

3 определения Понятия: Кадр / фрейм In-line фрейм, плавающий фрейм

Слайд 1Аттестация нр. 1 Тема 6. Кадры/ фреймы в HTML. Аудио и видео


Слайд 23 определения
Понятия:
Кадр / фрейм
In-line фрейм, плавающий фрейм


Слайд 3СОДЕРЖАНИЕ
Горизонтальные, вертикальные, смешанные фреймы
Плавающие фреймы – тег iframe.
Добавление аудио и

видео

Слайд 4ТЕГ FRAME И FRAMESET
Тег „frame” определяет специальное окно, называемое „frame”-ом. Данный

элемент не имеет содержания
Тег „frameset” определяет группу фреймов. Данный элемент имеет начальный тег и завершающий тег
Каждый frame определенный в frameset имеет собственные атрибуты
Для правильного использования фреймов в HTML-документе, необходимо правильно установить элемент DOCTYPE! („HTML Frameset DTD" или "XHTML Frameset DTD")
Эти два тега поддерживаются всеми браузерами
Фреймы не поддерживаются HTML5

Слайд 5АТРИБУТЫ ТЕГА „FRAMESET”
Примечание:
1. Атрибуты не поддерживаются HTML5
2. Но, поддерживаются известными

браузерами

Слайд 6ПРИМЕР ОПРЕДЕЛЕНИЯ ВЕРТИКАЛЬНЫХ FRAME-ОВ
Файл GrupFrameuri.html


Пример с frame-ами

/>



Fisier1.html


Frame 1

Первый вертикальный frame





Fisier2.html


Frame 2

Второй вертикальный frame





Fisier3.html


Frame 3

Третий вертикальный frame





Слайд 7РЕЗУЛЬТАТ ПРИМЕРА


Слайд 8ПРИМЕР ОПРЕДЕЛЕНИЯ ГОРИЗОНТАЛЬНЫХ FRAME-ОВ
Файл GrupFrameuri.html


Пример с frame-ами

/>



Fisier1.html


Frame 1

Первый frame





Fisier2.html


Frame 2

Второй frame





Fişier3.html


Frame 3

Третий frame





Слайд 9РЕЗУЛЬТАТ ПРИМЕРА


Слайд 10АТРИБУТЫ ТЕГА „FRAME”
Примечание: Ни один атрибут не поддерживается HTML5


Слайд 11ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Frameborder
Поддерживается всеми известными браузерами
Может иметь одно

из двух значений [0, 1]. Пример:






Слайд 12ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Marginheight
Поддерживается всеми известными браузерами
Пример:

src="/frame1.html" marginheight="100" />




Слайд 13ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Noresize
Поддерживается всеми известными браузерами
Пример:

src="/frame1.html" noresize />




Слайд 14ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „FRAME”. Scrolling
Поддерживается браузерами Opera şi FireFox
Пример:






Слайд 15РЕЗУЛЬТАТ ПРИМЕРА


Слайд 16СМЕШАННЫЕ КАДРЫ. Пример


Exemplu cu frame-uri









Слайд 17РЕЗУЛЬТАТ ПРИМЕРА


Слайд 18ТЕГ „IFRAME”
Данный тег определяет frame в режиме „inline”
In-line-кадр используется для вставки

другого документа в текущий HTML-документ
Поддерживается браузерами
В версии HTML5 появились новые атрибуты
Пример:




Страницу с информациями о бабочках смотрите здесь...





Слайд 19АТРИБУТЫ ТЕГА IFRAME
Чаще всего используемые атрибуты:


Слайд 20ПРИМЕР 2



Страницу с информациями о бабочках смотрите здесь...

width="330">




Слайд 21ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ
Будет использован тег „iframe”
Будет использована карта

с maps.google.com
Выбирается точка, которую вы хотите отобразить на карте


Слайд 22ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ
2. Используются опции google.maps


Слайд 23ПРИМЕР ВСТАВКИ КАРТЫ НА ВАШ САЙТ
3. Выбирается опция „embed map”
Будет генерирован

необходимый код, который вы можете копировать в ваш HTML документ

Слайд 24КОДЫ ДЛЯ ВСТАВКИ КАРТЫ USM


Inserarea unui link in iframe

Ne gasiti

aici...






Слайд 25РЕЗУЛЬТАТ


Слайд 26ВСТАВКА АУДИО-ЭЛЕМЕНТА
Для вставки разных звуков, аудио, музыки на веб странице используется

HTML-элемент „audio”. Появился в HTML5
На данный момент поддерживаются 3 формата звуков тега „audio”: MP3, Wav, Ogg
Данный элемент поддерживается всеми браузерами

Слайд 27СИНТАКСИС И АТРИБУТЫ
Синтаксис:
  Conţinut
Атрибуты:


Слайд 28ТЕГ „SOURCE”
Тег используется для определения нескольких медиа-ресурсов для какого-то медиа-элемента,

как например

Слайд 29АТРИБУТ „TYPE” ТЕГА „SOURCE”
Атрибут type, может иметь несколько значений:
Для звуковой последовательности:
audio/ogg
audio/mpeg
А

для видео-последовательности:
video/ogg
video/mp4
video/webm

Детали можете посмотреть: http://www.iana.org/assignments/media-types/media-types.xhtml
Оn-line конвертер: http://audio.online-convert.com/
http://video.online-convert.com/

Слайд 30ПРИМЕР






Ваш браузер не поддерживает данный

аудио-формат!





Vezi rezultatul

Слайд 31АТРИБУТ „AUTOPLAY”



Ваш браузер не

поддерживает данный аудио-формат!




Слайд 32ДОБАВЛЕНИЕ ВИДЕО
Видео можно добавить на веб страницу при помощи тега ,

который поддерживается всеми веб браузерами
Вместе с ним используется тег „source”
На данный момент поддерживаются 3 видео-формата: MP4, WebM и Ogg

Слайд 33АТРИБУТЫ ТЕГА „VIDEO”



Слайд 34ПРИМЕР


/>

Ваш браузер не поддерживает данный видео-формат!




Rezultat

Слайд 35!!!
3 важные понятия про которые узнали сегодня
2 вопроса которые возникли


1 предложение для следующей темы

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика