ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Вставка Flash-документов. Вставка звука и видео

Вставка Flash-документов

Flash-документ (мультфильм, ролик, клип) может включать разнородное содержимое: текст, растровую и векторную статическую и анимационную графику, звук, видео и элементы пользовательского интерфейса. Вы можете создать отдельную страницу или даже целый сайт, используя технологию Flash. Flash-документы разрабатываются с помощью пакета Macromedia Flash, выходные файлы которого имеют расширение swf. Просмотр sef-файлов производится с помощью специального Flash-проигрывателя. Чтобы просматривать swf-файл в окне браузера MS Internet Explorer, требуется элемент управления ActiveX, реализующий функции Flash-проигрывателя, ссылка на который вставляется в HTML-документ с помощью тегов <object> и <param>:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id = "myflash">
<param name = "movie" value = "URL-адрес swf-файла ">
</object>

Здесь атрибут classid принимает в качестве значения идентификатор объекта, соответствующего Flash-проигрывателю.

Атрибут codebase содержит URL-адрес исходных файлов Flash-проигрывателя версии 9.0 на случай если он не установлен на компьютере пользователя.

Тег param служит для указания URL-адреса swf-файла, содержащего Flash-документ, который должен быть воспроизведен Flash-проигрывателем.

Атрибут id указан только для обеспечения возможности доступа к объекту с помощью сценария.

Чтобы Flash-проигрыватель был вставлен в веб-страницу браузерами, не воспринимающими теги object и param (например, Nestcape Navigator), внутри внутри контейнера object используется тег embed:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
<param name = "movie" value = "URL-адрес swf-файла ">
<embed src = "URL-адрес swf-файла " name = "myflash"
type = application/x-shockwave-flash"
pluginspage = "http://www.macromedia.com/go/getflashplayer">
</object>

Здесь в теге <embed> атрибут name играет такую же роль, что и id в <object>, а атрибут pluginspage — что и codebase.

Кроме рассмотренных выше, можно использовать много других параметров Flash-проигрывателя, среди которых отметим наиболее важные, задаваемые с помощью тегов <param>:

  • прозрачность фона Flash-документа
    • в теге <object> используется тег:
    • <param name = "wmode" value = "transparent">

    • в теге <embed> используется атрибут:
    • wmode = "transparent"

  • цвет фона Flash-документа:
    • в теге <object> используется тег:
    • <param name = "bgcolor" value = "цвет">

    • в теге <embed> используется атрибут:
    • bgcolor = "цвет"

      Здесь цвет задается именем или шеснадцатеричным кодом

  • качество воспроизведения Flash-документа:
    • в теге <object> используется тег:
    • <param name = "quality" value = "уровень_качества">

    • в теге <embed> используется атрибут:
    • quality = "уровень_качества"

      Здесь уровень_качества принимает значения:

      • low — низкое;
      • medium — среднее;
      • high — высокое;
      • best — самое лучшее;
      • autolow — автонизкое;
      • autohigh — автовысокое.

В пакете Macromedia Flash имеются средства автоматизации создания HTML-документа, содержащего заданный Flash-документ, которые позволяют легко установить все необходимые параметры.

Рассмотрим пример размещения Flash проигрывателя на веб-странице.

<html>
<head>
<meta charset="utf-8">
<title>Размещение Flash на веб-странице</title>
<link href="../../css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="col2">
<div class="content_page" >
<h2>Размещение Flash на веб-странице</h2>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="banner" align="middle">

<param name="movie" value="../images/avto1.swf">

<param name="play" value="true">

<param name="loop" value="true">

<param name="quality" value= "high">
</object>
</div>
</div>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Вставка звука и видео

Современные веб-браузеры могут воспроизводить видео и звуковые файлы различных форматов. Для этого они используют встроенные проигрыватели (plug-in, элементы управления ActiveX) или внешние программы проигрыватели. Вставить звук или видео в HTML-документ можно с помощью различных тегов:

  • <bgsound src = адрес_файла> — для вставки фонового звука;
  • <img dynsrc = адрес_файла> — для вставки видео в формате AVI;
  • <a href = адрес_файла> — для вставки звуковых и видеофайлов;
  • <embed = адрес_файла></embed> — для вставки звуковых и видео файлов.
  • При решении вставить звук и/или видео в HTML-документ следует учитывать, что соответствующие файлы имеют довольно большой объем. Наиболее популярными в веб сейчас являются файлы звуковых форматов MP3, WMA, AIFF, AU, RealAudio (c расширением ra и ram), MP4, MIDI и видеоформатов MPEG, MOV. Звуковой формат WAV и видеоформат AVI в Интернете используются довольно редко.

    Для операционной системы Windows стандартными звуковыми файлами являются WMA и WAV, для Macintosh — AIFF. Общепринятым видеоформатом для Windows, Macintosh и UNIX является MPEG. Формат QuickTime (MOV) также широко распространен и может использоваться Windows и Macintosh. При выборе других форматов желательно предупреждать об этом пользователей.

    Фоновый звук

    Тег <bgsound> позволяет указать звуковой файл формата WMA, AU, MIDI или WAV, который проигрывается при загрузке страницы. При этом на экран не выводится панель управления воспроизведением.

    Тег <bgsound> имеет следующие атрибуты:

    • src — URL-адрес звукового файла;
    • loop — определяет, сколько раз звуковой файл должен быть воспроизведен; принимает значения:
      • -1 или infinite —воспроизведение в течении всего времени показа документа;
      • число — количество воспроизведений
    • balance — число, определяющее баланс для стереозвука;
    • volume — число, определяющее громкость звучания.

    Пример:

    <bgsound src="ib_logfile0" loop="3">

    Применение тега img и ссылок

    Тег <img> применяется в основном для вставки графических изображений, адрес файла которых указывается атрибутом src. Этот тег имеет еще один атрибут dynsrc, с помощью которого можно узнать адрес видеофайла формата AVI. Если указаны оба атрибута, dynsrc и src, то действует dynsrc.

    Атрибуты, определяющие воспроизведение видеофайлов, таковы:

    • dynsrc — URL-адрес видеофайла формата AVI(расширение avi);
    • loop — определяет, сколько раз звуковой файл должен быть воспроизведен; принимает значения:
      • -1 или infinite —воспроизведение в течении всего времени показа документа;
      • число — количество воспроизведений
    • start = mouseover —выводится изображение первого кадра, а воспроизведение начинается только при наведении на него указателя мыши и продолжается далее заданное атрибутом loop количество раз.

    Пример:

    <img dynsrc = "myvideo.avi" loop = 2 start = mouseover>

    Можно также использовать и другие атрибуты тега <img>, например, align, border, hspase и vspace.

    Для воспроизведения звуковых и видео файлов можно использовать тег ссылки <a>, указав в качестве значения атрибута href URL-адрес файла. При этом файл будет воспроизводиться в окне приложения(проигрывателя), которое ассоциировано с данным типом файла и установлено на компьютере пользователя. Это может быть, например,Windows Media Player, панель Медиа (в Internet Explorer), Winamp, QuickTime Player или RealPlayer G2.

    URL-адрес файла RealAudio имеет вид:

    pnp://адрес_файла.

    Технология RealAudio обеспечивает передачу звука и видео практически в режиме реального времени и позволяет устраивать аудио- и видеоконференции. Звуковые файла RealAudio имеют расширение ra. Кроме того, могут использоваться метафайлы с расширением ram. Это обычные текстовые файлы, содержащие полные URL-адреса файлов с расширением ra.

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Вставка звука</title>
    </head>

    <body>
    Сергей Трофимов
    <a href="S._Trofimov-Snegiri.mp3">Снегири</a>
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

    Применение тега embed

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

    Рассмотрим пример, где с помощью тега <embed> встраиваются три звуковых и один видеофайл. Размеры панелей воспроизведения можно задать с помощью атрибутов width и heiht.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Звук и видео</title>
    </head>

    <body>
    <p>Сергей Трофимов<br>
    Снегири </p>
    <p><embed src="Snegiri.mp3" ></embed>
    <p>Beatles<br>
    Girl</p>
    <p><embed src="Girl.mp3" width="200" height="150"></embed></p>
    <p>Shocking Blue<br>
    Venys</p>
    <p><embed src="Venys.mp3"</p>
    <p>Видео</p>
    <p><embed src="../images/avto1.swf" width="350" height="200" ></embed></p>
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

    Тег <embed> имеет следующие атрибуты, связанные с воспроизведением звука и видео:

    • src — URL-адрес файла;
    • align — горизонтальное выравнивание панели, принимает следующие значения:
    • absbottom — выравнивание нижней границы панели по нижней границе текущей строки;
      • absmiddle — выравнивание середины панели по середине текущей строки;
      • baseline — выравнивание нижней границы панели по базовой линии текущей строки;
      • bottom — то же, что и baseline;
      • top — верхняя граница панели выравнивается по самому высокому элементу текущей строки;
      • texttop — верхняя граница панели выравнивается по самому высокому текстовому элементу текущей строки;
      • left — панель располагается у левого края окна, текст и другие элементы обтекают его справа;
      • right — панель располагается у правого края окна, текст и другие элементы обтекают его слева;
    • alt — альтернативный текст;
    • hight — высота в пикселах или процентах;
    • width — ширина в пикселах или процентах;
    • hspace — боковые отступы в пикселах;
    • vspace — верхний и нижний отступы в пикселах;
    • name — имя (идентификатор) встроенного элемента.

    Кроме перечисленных, тег <embed> имеет еще атрибуты code и codebase, имеющие такой же смысл, что и для тега <object>.

    Тег object

    Тег <object> позволяет вставлять в HTML-документы графические изображения, HTML-документы, элементы ActiveX и апплеты.

    Тег <object> является контейнерным и обладает множеством атрибутов:

    • accesskey —определяет клавишу быстрого доступа к объекту, встроенному с помощью тега <object>. Значением атрибута является строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишей , то объект получит фокус;
    • align — выравнивание; возможны следующие значения:
      • absbottom — выравниванивает нижнюю границу объекта по подстрочной линии символов окружающего текста;
      • absmiddle — выравнивает середину объекта по центральной линии между top и absbottom окружающего текста;
      • baseline — выравнивает нижнюю границу объекта по базовой линии окружающего текста;
      • bottom — то же, что и baseline (только в Internet Explorer);
      • left —выравнивает объект по левому краю элемента-контейнера;
      • middle — выравнивает воображаемую центральную линию окружающего текста по воображаемой центральной линии объекта;
      • right —выравнивает объект по правому краю элемента-контейнера;
      • texttop —выравнивает верхнюю границу объекта по верхней границе окружающего текста;
      • top — выравнивает верхнюю границу объекта по верхней границе окружающего текста.
    • classid — уникальный регистрационный идентификатор встраиваемого компонента;
    • code — имя файла Java(класс апплета), если он является источником.
    • codebase — базовый URL-адрес, по которому веб-браузер может взять файл (обычно упакованный) компонента, чтобы установить его при отсутствии на компьютере пользователя. Вслед за URL-адресом указывается версия компонента в виде строки: #Version = M1, M2, m1, m2. Где M1, M2 — максимальные, а m1, m2 — минимальные мажорный и минорный номера версии, доступные на сервере. Встречая в HTML-документе ссылку на компонент, веб-браузер проверяет его наличие на компьютере пользователя. Если компонента нет, то производится его загрузка и установка, с разрешения пользователя или без него в зависимости от настроек безопасности веб-браузера. Если на компьютере пользователя установлена более новая версия чем указана атрибутом codebase, то загрузка компонента не производится.
    • codetype — MIME-тип файлов, указанных атрибутом codebase. Например, для элементов управления ActiveX значением этого атрибута (если он указан) является application/x-oleobject;
    • data — URL-адрес файла данных (для объектов, работающих с данными);
    • datafld — имя столбца табличных данных;
    • datasrc — "#идентификатор_источника_данных";
    • disabled — если указан то объект не доступен;
    • hight — высота в пикселах визуального образа компонента (если такой имеется);
    • width — ширина в пикселах визуального образа компонента (если такой имеется);
    • hspace — расстояние по горизонтали между объектом и соседними элементами;
    • vspace — расстояние по вертикали между объектом и соседними элементами;
    • id — идентификатор объекта как элемента HTML-документа, с помощью которого обеспечивается доступ к свойствам объекта из сценария;
    • name — идентификатор объекта элемента формы; используется в случае, когда объект находится в контейнере <form>, а его данные требуется передать на сервер щелчком кнопки мыши типа submit;
    • type — MIME-тип файлов, указанных атрибутом data;
    • tabindex — целое число, определяющее порядок перехода к элементу с помощью клавиши Tab;
    • lang —определяет тип языка для событий контейнера, например script/javascript;
    • language —определяет имя языка для событий контейнера. Возможные значения: javascript, jscript, vbscript, vbs.

    Кроме перечисленных выше, тег <object> имеет атрибуты class и style (для задания параметров каскадной таблицы стилей), title (для задания текста всплывающей подсказки) и атрибуты-события (для связи с их обработчиками).

    Встраиваемый компонент может иметь параметры, которые задаются с помощью тегов <param>, вставляемых в контейнер <object>. Для каждого параметра требуется отдельный тег <param>, имеющий следующие атрибуты:

    • name — имя параметра;
    • value — значение параметра;
    • datafld — имя столбца табличных данных;
    • dataformatas — формат данных;
    • datasrc —"#идентификатор _источника_данных"

    Кроме элементов ActiveX и апплетов, с помощью тега <object> можно вставлять в веб-страницы графические изображения из файлов формата GIF и JPEG, звуковые файлы, а также HTML-документы. Для этого необходимо использовать атрибуты data и type. Значением атрибута data является URL-адрес вставляемого графического или html-файла. Значением атрибута type является тип данных в этом файле: image/jpeg или image/gif для графического и text/html — для html-файла

    .

    Вставляемые объекты указанных выше типов отображаются в отдельных окнах, подобных плавающим фреймам и снабженных при необходимости полосами прокрутки. Размеры этих окон устанавливаются с помощью атрибутов width и height. В отличие от тега img, специально предназначенного для вставки графики, эти атрибуты не влияют на размеры графического изображения (не маштабируют его). Они задают размеры только окна отображения графики.

    Для корректного отображения в окне веб-браузера графики и HTML-документов, вставляемых посредством тега <object>, последние либо должны находится в контейнере <body>, либо исходный HTML-документ должен содержать, кроме тега <object>, еще какой-нибудь элемент, способный принять фокус (например, текст).