Файл: Конспект лекций ОИД_испраленный2.doc

Скачать файл
Заказать решение

ВУЗ: Одесский корпоративный компьютерный колледж

Категория: Лекция

Дисциплина: Не указана

Добавлен: 13.02.2019

Просмотров: 5597

Скачиваний: 30

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Целесообразно прописать свойста transition и transform для видимости во всех браузерах, используя нестандартные свойства -ms-, -webkit-, -o-, -moz-:


Chrome до версии 26.0, Safari, Android и iOS

Internet Explorer 9 поддерживает

поддерживают нестандартное свойство -

нестандартное свойство -ms-transform.

webkit-transition.

Chrome, Safari, Android и iOS поддерживают


Opera до версии 12.10 поддерживает

нестандартное свойство -webkit-transform.

нестандартное свойство -o-transition.

Opera до версии 12.10 поддерживает


Firefox до версии 16.0 поддерживает

нестандартное свойство -o-transform.

нестандартное свойство -moz-transition.

Firefox до версии 16.0 поддерживает



нестандартное свойство -moz-transform.




  1. Добавление аудио-файлов



Тег <audio> добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.


Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.















Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.


Синтаксис



<audio src="URL"></audio>


<audio>



<source src="URL">

</audio>

Атрибуты


autoplay Звук начинает играть сразу после загрузки страницы.

controls Добавляет панель управления к аудиофайлу.

loop Повторяет воспроизведение звука с начала после его завершения. preload Используется для загрузки файла вместе с загрузкой веб-


страницы.

src Указывает путь к воспроизводимому файлу.



Пример



<!DOCTYPE html>

<html>


<head>

<title>audio</title>

</head>


<body>

<p>Исполнитель - Название</p>


<audio controls>


<source src="audio/music.ogg" type="audio/ogg"> <source src="audio/music.mp3" type="audio/mpeg">


</audio>


</body>


</html>


  1. Добавление видео-файлов


Тег <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла: <video src="video/file.mp4" controls></video>


  • настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.

Браузер


MP4


WebM


Ogg


















Internet Explorer 9 или выше


да


нет


нет










Firefox 4.0 или выше


нет


да


да










Google Chrome 6 или выше


да


да


да










Apple Safari 5 или выше


да


нет


нет










Opera 10.6 или выше


нет


да


да










Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:

<!DOCTYPE html>


<html>

<head>

<title>Видео</title>

</head>


<body>

<video width="320" height="240" controls="controls"> <source src="1.ogg" type="video/ogg"> <source src="1.m4v" type="video/mp4">


</video>

</body>

</html>




Размещение видео с ресурса youtube


Вставка кода фрейма с Youtube – является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube. Он находится сразу под окном плеера во вкладке «HTML-код»:






















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



<iframe width="560" height="315" src="https://www.youtube.com/embed/3jT_q7dt-cM"



frameborder="0" allowfullscreen>



</iframe>


  • помощью тега <iframe> создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.

Атрибуты тега <iframe>:


  • width – задается длина окна фрейма;


  • height – устанавливается высота окна плавающего фрейма;


  • src – путь к файлу, содержимое которого будет воспроизводиться;


  • frameborder – устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);


  • allowfullscreen – разрешение на полноэкранное отображение видео.



Google-карта на сайте


При создании и разработке веб-сайтов все чаще необходимо указать адрес и местоположение на странице «Контакты». Рассмотрим, как указать необходимые данные с помощью сервиса Карты Google (Google Maps)



Чтобы встроить на страницу сайта карту или маршрут, нужно выполнить следующие действия:



  1. Откройте Google Карты - https://maps.google.com/


  1. Найдите нужную карту, панораму в Просмотре улиц или маршрут.

  2. Нажмите на значок меню в левом верхнем углу экрана.

  3. Выберите Ссылка/код.

  4. В верхней части появившегося окна откройте вкладку Код.

  5. Выберите размер карты. Затем скопируйте текст в поле и вставьте его в


код своего сайта.


Пример:


Самостоятельно



Создание слайдера



Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие возможности и не требуются. Простой слайдер гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Рассмотрим:


Слайдер с анимированным



переключением кадров с помощью кнопок Слайдер с кнопками «вперёд» и «назад»

и (или) нажатием на изображение












Слайдер с анимированным переключением кадров с помощью кнопок


  • html прописываем количество слайдов, которые будет использовать слайдер. В данном случае используется 4 слайда (количество может быть любое):


<div class='sliderA'>


<input type="radio" name="slider1" id="slider1_1" checked="checked">


<label for="slider1_1"></label>

<div></div>


<input type="radio" name="slider1" id="slider1_2"> <label for="slider1_2"></label> <div></div>



<input type="radio" name="slider1" id="slider1_3"> <label for="slider1_3"></label> <div></div>



<input type="radio" name="slider1" id="slider1_4"> <label for="slider1_4"></label> <div></div>



</div>


Контейнер слайдера — div с классом sliderA. Каждый кадр слайдера описывается трёмя тегами:


  • Радиокнопкой (input type="radio"), отвечающей за состояние данного кадра (видно / не видно)

  • Меткой label, отвечающей за отображение кнопки перехода на данный слайдер.


  • Тегом div в котором находится содержимое кадра.

Смотрите также файлы