<< Пред. стр.

стр. 44
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

необходимые для воспроизведения документов Acrobat. Однако это практическое пра-
вило не всегда верно. Теперь браузер Microsoft Internet Explorer поставляется в стандарт-
ной конфигурации с подключаемым модулем Flash-проигрывателя компании
Macromedia, предназначенным для просмотра Flash-анимации. Обычный, далекий от
техники пользователь компьютера, возможно, не имеет представления о том, что
смешную мультипликацию в Интернете в действительности заставляет оживать не
его браузер, а отдельное приложение, разработанное не Майкрософт.
Итак, на этом закончим описание того, что собой представляет или не представляет
мультимедиа. Простейший способ использования любого из видов мультимедиа на
Web-странице состоит в применении тега <embed>. Но, поступая так, будьте осторож-
ны: тег <embed> не является оригинальным HTML-тегом. Он никогда не входил ни в
какую спецификацию HTML. Наоборот, это неофициальный тег разметки, который
поддерживается в большей или меньшей мере всеми основными браузерами.
В соответствии с политикой стандартов, проводимой консорциумом W3C (World
Wide Web Consortium), принято считать, что тега <embed> не существует. А офици-
альной альтернативой, одобренной консорциумом W3C и представленной в специфи-
кации, является тег <object>, который попросту не работает должным образом на
разных платформах и в разных браузерах. В действительности, большинство дизайне-
ров лучше справляются с каскадными таблицами стилей, заставляя их функциониро-
вать надлежащим образом, но при этом не могут заставить тег <obj ect> работать с
мультимедийным файлом.
И когда тег <ob j ect > не работает, он действительно не работает. Он создает всяческие
странные проблемы, способен вызывать сбои в работе браузера и вызывает их.
При прочих равных условиях, всегда предпочтительней использовать надлежащую
разметку. Однако в случае мультимедиа условия не совсем равны. Тег <object> не
функционирует должным образом, поэтому не тратьте время на работу с ним. Вместо
него используйте нестандартный тег <embed>.
Чтобы увидеть тег <embed> в действии, взгляните на рисунок 74.1.
Листинг 74.1. Исходный код страницы, вид которой в браузере
показан на рисунке 74.1
<body>
<p>Enjoy t h i s Flash movie!</p>
<embed src="movie.swf" width="550" height="400"x/embed>
</body>
412 Строим Web-сайты


Не ?dt tfew Favorites lools yelp


Enjoy this Flash move!




Рис. 74.1. Используйте тег <embed> для ссылки
на внешний мультимедийный файл

Как видно из исходного кода Web-страницы, показанной на рисунке 74.1, тег <embed>
находится в коде точно в том месте, где должен отображаться мультимедийный файл,
точно также, как и тег <img>. Другим сходством между этими тегами является атри
бут s r c , который направляет браузер в место расположения мультимедийного файла.
Кроме того, атрибуты w i d t h и h e i g h t определяют размер мультимедийного файла
на странице. Таким образом, в некотором роде тег <embed> можно считать тегом
<img>, предназначенным для мультимедийных файлов.


Совет
В теге <embed> так же, как и в теге <img>, используется атрибут
align. Однако атрибут align работает в теге <embed> не так, как в
теге <img>, особенно в горизонтальном направлении, поэтому луч-
ше выравнивать мультимедийные файлы с помощью специальных
приемов. Заключите тег <embed> в теги <div> и задайте для атрибу-
та align тега <div> положение мультимедийного файла:
<div align="center">
<embed scr="movie.swf" width="550"
height ="'40 0 ">< /'embed>



Для достижения лучших результатов в теге <embed> используются некоторые атрибу
ты, которые в теге <img> не применяются. Предположим, что браузер посетителя не
имеет подключаемого модуля Flash-проигрывателя — крайне маловероятный сцена-
рий, поскольку практически любой компьютер в Интернете воспроизводит Flash-ро-
лики. Но только вообразите на мгновение, что случилось невозможное. Без подклю-
чаемого модуля (plug-in) браузеру неизвестно, как представлять SWF-файл, и вы полу-
чите Web-эквивалент неловкого молчания. Поэтому считается правилом хорошего то-
на добавление атрибута p l u g i n s p a g e , который направляет браузер на Web-страницу,
где посетитель может загрузить и установить необходимый подключаемый модуль и
просмотреть мультимедийный файл:
<embed src="movie.swf" width="550" height="400"
ГЛАВА 74. Встраивание мультимедиа 413

pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>


Совет
Атрибуты width и height звукового файла определяют размеры па-
нели управления подключаемого модуля (с кнопками Stop (Стоп),
Play (Воспроизвести), Fast Forward (Перемотка вперед), Volume
(Громкость) и другими). Если вы не хотите, чтобы панель управления
появлялась вообще, присвойте атрибуту hidden тега <embed> зна-
чение true.


В зависимости от типа мультимедийного файла в теге <embed> могут указываться дру-
гие атрибуты. Так, подключаемый модуль Flash-проигрывателя принимает три значе-
ния атрибута q u a l i t y : low (низкое), medium (среднее) и high (высокое). С помощью
атрибута q u a l i t y можно установить вариант, используемый по умолчанию:
<embed src="movie.swf" width="550" height="400" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

Совет
Если у вас возникают сомнения относительно правильности адреса
страницы загрузки подключаемого модуля, просто приведите ссылку
на домашнюю страницу Web-сайта изготовителя подключаемого мо-
дуля; например, http:/www.adobe.com/ или http://www.macrome-
dia, com/. Обычно с этого места страницу загрузки достаточно просто
найти самостоятельно.

Точно также, если вы не хотите, чтобы Flash-ролики запускались автоматически при
загрузке браузером страницы или если вы не хотите, чтобы воспроизведение выпол-
нялось в цикле, можно задать значения для атрибутов play и loop:-
<embed src="movie.swf" width="550" height="400" quality="high"
play="false" loop="false"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
В таблице 74.2 приводятся стандартные атрибуты тега <embed> для управления раз-
личными видами мультимедийных файлов. Для некоторых типов мультимедиа в неко-
торых браузерах эти атрибуты не всегда работают так, как описано, поэтому будьте го-
товы к использованию старого доброго метода проб и ошибок.
414 Строим Web-сайты

Табл. 74.2. Стандартные атрибуты тега <embed>

Атрибут Управляемые элементы Возможные Примечания
значения
Определяет, будет ли автоматичес- Не применяется
true, false
auto-
ки воспроизводиться мультимедий- для Flash-роликов
play
ный файл при загрузке браузером
страницы
height Размер по вертикали мультимедий- Любое число- Нет
вое значение
ного файла в пикселах
hidden Определяет, будет ли появляться па- t r u e , f a l s e Используется для
звуковых файлов
нель управления на Web-странице
Нет
loop Определяет, будет ли мультимедий- true,false
ный файл воспроизводиться в цикле
Для Flash-роликов; определяет, бу- Для Flash-роликои
play true,false
дет ли автоматически воспроизво-
диться мультимедийный файл при
загрузке браузером страницы
Любое число- Только для Internet
play- Количество воспроизведений муль-
вое значение Explorer
count тимедийного файла
quality Визуальная разборчивость содержи- low, medium, Для Flash-роликом
мого мультимедийного файла high
Нет
volume Уровень громкости звука мультиме- 1-100
дийного файла
Любое число- Н е т
Горизонтальный размер в пикселах
width
мультимедийного файла вое значение


Атрибут loop в Netscape выполняет ту же функцию, что и p l a y c o u n t в Internet Explorer
если установить для него число вместо значений t r u e или f a l s e . Однако, по-видимо-
му, Flash-ролики не реагируют на числовое значение атрибута loop в Netscape.


Часто задаваемые вопросы
Как узнать, какие атрибуты работают с моим мультимедийным
файлом?
Краткий ответ: для всех случаев узнать нельзя. Документация по это-
му вопросу поверхностна, поэтому определение специальных атри-
бутов, которые управляют мультимедийным файлом часто связано с
использованием метода проб и ошибок. К примеру, хотя для Flash-
ролика используется атрибут play, управляющий включением и вык-
лючением воспроизведения, для звуковых файлов применяется атри-
бут autoplay, который выполняет туже функцию. В идеале, следует
найти Web-страницу, на которой встроен такой же тип мультимедий-
ного файла, как у вас, и просмотреть исходный код, чтобы увидеть,
как все работает.
ГЛАВА75.
Автоматическое обновление страницы
Обычно для перезагрузки текущей Web-страницы посетитель должен щелкнуть в бра-
узере на кнопке Refresh (Обновить). Однако для вас, дизайнера, существует простой
способ встроить на страницу цикл автоматического обновления так, чтобы браузер
перезагружал текущий документ без каких-либо действий со стороны посетителя.
Этот прием будет полезным, если ваша Web-страница содержит сведения, зависящие
. от времени или изменяемые в реальном времени, как, например, текущая погода, ко-
тировки акций или уровни складских запасов.


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


Скажем, существует Web-страница, которая генерирует и отображает выбор счастли-
вого номера для посетителей, как на рисунке 75.1. Операции выбора обрабатываются
простой функцией JavaScript, называемой doLucky ().
Теперь допустим, что вы хотите избежать судебного иска и решили изменить свою
Web-страницу так, чтобы браузер отображал счастливые номера посетителей толь-
ко в течение трех секунд, полагая, что посетители вряд ли докажут обман, если на-
бор счастливых номеров пригоден только в течение трех секунд каждый. По суще-
ству, здесь налицо ситуация с информацией, изменяющейся в реальном времени.
Чтобы поддерживать правильность страницы, ее необходимо обновлять каждые
три секунды.


Be Е« I * * Fjvortes look И *

Here are your lucky numbers for the d a y 4 1 6




Puc. 75.1. Ha этой Web-странице вызывается три раза простая функция JavaScript,
чтобы сгенерировать для посетителей, счастливые номера на день
416 Строим Web-сайты

Листинг 75.1. Исходный код страницы, вид которой в браузере
показан на рисунке 75.1
<html>
<head>
<title>Lucky Numbers</title>
<script language="JavaScript">


/* Эта функция выбирает случайное число между 0 и 9 и записывает
его на страницу. */


function doLucky() {
var x = Math.round(Math.random() * 9);
document.write(x);




</script>
</head>
<body>


/* В следующем абзаце функция doLucky() вызывается три раза для
записи на страницу трех случайных чисел. */


<p>Here are your lucky numbers for the day: <strong>
<script language="JavaScript">doLucky() ;</script>
<script language="JavaScript">doLucky();</script>
<script language^"JavaScript">doLucky();</script>
</strong>
</body>
</html>

Простейший способ заключается во вставке специального тега <meta> в раздел заго-
ловка Web-страницы. В HTML-документе теги <meta> определяют информацию, ко-
торая не предназначена для отображения браузером. Эти теги выполняют различные
функции. Чаще всего они включают ключевые слова или описание страницы, исполь-
зуемые поисковыми системами. Но вы можете использовать определенный тип тега
<meta> для включения функции обновления, как в коде Web-страницы, показанной
на рисунке 75.2.
ГЛАВА 75. Автоматическое обновление страницы 417

Листинг 75.2. Исходный код страницы, вид которой в браузере
показан на рисунке 75.2
<html>
<head>
<title>Lucky Numbers</title>
<meta http-equiv="refresh" content="3,#">
<script language="JavaScript">


/* Функция doLucky() располагается здесь. */


</script>
</head>
<body>
<p>Here are your lucky numbers for the next three seconds:
<strong>
<script language^"JavaScript">doLucky();</script>
<script language="JavaScript">doLucky();</script>
<script language="JavaScript">doLucky();</script>
</strong>
</body>
</html>




Here are your lucky numbers for the next three seconds 1 0 2




Puc. 75.2. Используйте тег <meta> для передачи браузеру команды
на перезагрузку страницы каждые три секунды
Строим Web-сайты
418



Часто задаваемые вопросы
Где располагаются теги <meta>?
Теги <meta> принадлежат разделу заголовка Web-страницы. Не по-
мещайте их в основной раздел, заключенный между тегами <body>.


Так же, как атрибут type тега < input > определяет тип элемента управления формы,
отображаемый браузером, так атрибут h t t p - e q u i v тега <meta> играет роль волшеб-
ника. Разные значения атрибута h t t p - e q u i v создают разные виды тегов <meta>. За-
давая для атрибута h t t p - e q u i v значение refresh, вы превращаете тег <meta> в
средство автоматического обновления страницы.
Частота обновления браузером страницы зависит от значения атрибута content.
В исходном коде Web-страницы, показанной на рисунке 75.2, тег <meta> имеет следу-
ющий вид:
<meta h t t p - e q u i v = " r e f r e s h " content="3,#">
Значение «3» в атрибуте content определяет трехсекундный цикл обновления. Дру-
гими словами, браузер перезагружает страницу каждые три секунды. Символ # в атри-
буте content является стенографическим знаком для браузера, обозначающим теку-
щую страницу. Данное обозначение использовалось в предыдущих главах для созда-
ния ссылающихся на себя ссылок. Итак, на обычном языке значение атрибута con-»
t e n t можно было бы выразить приблизительно следующей фразой: «Каждые три се-
кунды перезагружать текущую страницу».
Не существует такого правила, которое бы определяло, что страница должна перезаг-
ружаться именно каждые три секунды. Для более длительного цикла обновления уве-
личьте число секунд:
<meta h t t p - e q u i v = " r e f r e s h " content="60,#">
Этот тег <meta> вызывает перезагрузку страницы через каждую минуту.

Совет
Если обозначение с помощью знака номера (#) смущает вас, можете
не использовать его. Просто замените знак номера на полный интер-
нет-адрес страницы «Счастливые номера», включив префикс
«http://www»:
<meta'http-equiv="'refresh' content=3, [здесь рас-
полагается полный URL-адрес]"
ГЛАВА 76.
Автоматическая переадресация браузера
В главе 75 было показано, как использовать тег <meta> для задания цикла автомати-
ческого обновления Web-страницы. Синтаксис тега <meta> выглядел следующим об-
разом:
<meta h t t p - e q u i v = " r e f r e s h " content="x,#">
где х соответствует числу секунд, через которые браузер обновляет страницу, а знак
# — стенографический знак, обозначающий для браузера текущую страницу.
У вас есть возможность изменять как значение х, так и Web-страницу, которая загру-
жается браузером. Достаточно указать другой URL-адрес вместо знака порядкового
номера (#).

Часто задаваемые вопросы
Если для переадресации используется тег <meta>, приспособ-
ленный для обновления страницы, значит ли это, что переадре-
сация будет выполняться циклически?
Необязательно. После перехода браузера на новую страницу тег
<meta> предыдущей страницы больше не действует. Если на новой
странице нет переадресации, браузер остается на ней. Конечно, ес-
ли на новой странице есть переадресация, браузер ожидает указан-
ное количество секунд и снова выполняет переход.


В действительности этот прием создает страницу, которая автоматически переадресу-
ет браузер в новое место по истечении указанного количества секунд. Такого типа
страницы удобно иметь. Скажем, вы только что переработали и переупорядочили
свой сайт, и некоторые старые категории навигации больше не существуют в новой,
улучшенной версии. Но посетители вашего сайта могут иметь закладки на старые
страницы. Чтобы аудитория вашего сайта не испытывала разочарование при попыт-
ке загрузить несуществующий документ, можно было бы вставить на место прежней,
устаревшей страницы замещающую страницу, подобную той, что показана на рисун-
ке 76.1. Получается очень классно.
Листинг 76.1. Исходный код страницы, вид которой в браузере
показан на рисунке 76.1
<html>
<head>
<title>Uh, o h ! < / t i t l e >
<meta h t t p - e q u i v = " r e f r e s h " co ntent= "5 , http://newpage.htm">
</head>
<body>
Строим Web-сайты
420

<hl>Uh, oh!</hl>
<p>The page you're looking for no longer exists. Your browse: с
will automatically jump to the new page in five seconds. Please
update your bookmarks.</p>
</body>
</html>


&le ?,d* View Favorites lods Help



Uh, oh!
The page you're looking for no longer exists Your browser will automatically jump to the new page in five
seconds Please update your bookmarks




Рис. 76.1. Используйте страницу, подобную этой,
для переадресации посетителей в новое место
Тег <meta> в исходном коде Web-страницы, показанной на рисунке 76.1, работает так
же, как тег <meta>, приведенный в начале этой главы. Значение «5» атрибута
c o n t e n t определяет пятисекундную паузу, а URL-адрес сообщает браузеру, куда необ-

<< Пред. стр.

стр. 44
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>