4.1. Встраивание изображений
4.2. Добавление мультимедиа
При создании сайта невозможно обойтись без использования активных объектов вроде Flash-анимации, видео или картинок. Так мы можем улучшить вид сайта, сделать его ярче, интереснее и удобнее для посетителей. Однако неграмотное использование мультимедиа на странице способно погубить самые лучшие и интересные сайты. Поэтому в данной главе, помимо технических аспектов встраивания мультимедиа, будут освещены эстетические аспекты и моменты, связанные с удобством для посетителя.
4.1. Встраивание изображений
Начнем СЃ добавления изображения, потому что это самый простой для добавления Рё самый распространенный мультимедийный элемент, встречающийся РІ Рнтернете. РЈ изображений РјРЅРѕРіРѕ плюсов: статичность, небольшие размеры файлов (относительно РґСЂСѓРіРёС… типов мультимедиа-содержимого), широкая область применения. Сейчас трудно представить сайт без картинок. Дизайнеры научились использовать РёС… очень разумно. Современные скорости соединений позволяют размещать большое количество графики РЅР° странице. Однако нужно знать меру, сайт РЅРµ должен выглядеть пустым, РЅРѕ РІ то же время РЅРµ стоит Рё злоупотреблять рисунками. Грамотное Рё уместное использование изображений поможет сделать сайт красивым, интересным Рё удобным. Бывают ситуации, РєРѕРіРґР° без большого количества картинок невозможно обойтись, например РїСЂРё создании галереи, фотоальбома, каталога. Р’ таких случаях умелое распределение файлов РїРѕ сайту Рё удобная навигация РїРѕРјРѕРіСѓС‚ сэкономить время загрузки Рё трафик. Получается, что РїСЂРё создании сайта без изображений вам РЅРµ обойтись, этот объект является самым простым, удобным Рё распространенным.
Для встраивания изображений в HTML-документ применяется элемент IMG. Он имеет обязательный атрибут src, значением которого должен быть адрес встраиваемого изображения.
Простейший вариант записи для включения картинки: . При такой записи размер картинки на экране будет соответствовать ее реальному размеру.
Примечание
Адрес изображения может быть указан либо полностью (например, когда картинка находится на другом сервере ( http://www.mypage.ru/IMG/myfoto.jpg )), либо относительно местоположения вашего документа (например, если картинка находится во вложенной папке (IMG/myfoto.jpg)). Во втором случае для указания директории, находящейся выше в иерархии каталогов, используются символы../ (переход из папки DOC, находящейся в одном каталоге с папкой IMG, будет выглядеть так:. /IMG/myfoto.jpg).
В листинге 4.1 продемонстрирован простейший вариант встраивания картинки.
Листинг 4.1. Простое встраивание изображения в документ
На рис. 4.1 показан результат обработки браузером кода из листинга 4.1 – простое встраивание картинки, без редактирования.
Рис. 4.1. Вставка изображения
Р РёСЃСѓРЅРѕРє РЅР° странице отображается РІ реальном размере. Рто простейший вариант вставки картинки, его можно использовать, РєРѕРіРґР° нет необходимости РЅРё РІ какой трансформации СЂРёСЃСѓРЅРєР°, например, если СЂРёСЃСѓРЅРѕРє будет единственным элементом РЅР° странице.
Один рисунок на странице встречается нечасто, обычно на странице, помимо рисунка, присутствуют другие объекты, и большие размеры картинки становятся проблемой, но ничего страшного – размеры изображения можно легко подкорректировать.
Размер изображения
Если необходимо значительно изменить размер изображения, то лучше использовать специальные программы, однако в небольших пределах допустимо использовать и атрибуты элемента IMG.
Чтобы редактировать размер картинки, используют атрибуты width Рё height. РС… значения можно указывать РІ пикселах или процентах РѕС‚ размера РѕРєРЅР° (РІ этом случае после размера ставится знак %).
Примечание
При изменении размеров окна картинка, размер которой указан в процентах, тоже меняет размер.
Можно указать только один из атрибутов, и тогда второй будет вычисляться автоматически для сохранения пропорций рисунка.
Меняя размер картинки СЃ помощью атрибутов элемента IMG, внимательно следите Р·Р° изображением, есть вероятность того, что СЂРёСЃСѓРЅРѕРє исказится. Сам браузер РЅРµ обрабатывает картинки РїРѕРґ новый размер, поэтому, если размер выставлен неаккуратно, РёР· произведения искусства СЂРёСЃСѓРЅРѕРє может превратиться РІРѕ что-то непонятное (особенно если задать размер больше, чем РІ реальности). Рскажение пропорций тоже РЅРµ РїСЂРёРІРѕРґРёС‚ Рє улучшению качества изображения, как РІРёРґРЅРѕ РЅР° СЂРёСЃ.В 4.2.
Рис. 4.2. Размеры изображения
В листинге 4.2 показан пример встраивания изображения с заданными размерами.
Листинг 4.2. Задание размеров изображения
Задана только ширина в пикселах
Задана ширина в процентах
Ширина и высота заданы непропорционально (изображение искажается)
IMG_0628.jpg
В листинге 4.2 для первого изображения задана только ширина, высота вычисляется автоматически. Для второго изображения размер определен в процентах, а для третьего установлены неверные размеры, которые искажают картинку.
Результат работы листинга 4.2 показан на рис. 4.2.
РќР° СЂРёСЃ.В 4.2 РІРёРґРЅРѕ, что размеры РІСЃРµ-таки имеют значение, особенно для картинок, поэтому следить Р·Р° РёС… изменением нужно очень внимательно. Если нет необходимости РІ изменении размеров, то задавайте размеры картинки, соответствующие реальности. Рто позволит избежать искажений Рё СѓСЃРєРѕСЂРёС‚ обработку картинки браузером.
Совет
Если вам нужно значительно изменить размер картинки, то используйте специальные программы для работы с изображениями. Они смогут проделать эту операцию, минимально исказив картинку или вовсе без искажений.
Помимо размеров картинки, на внешний вид сайта влияет расположение изображений.
Выравнивание изображения
Расположение картинки влияет на общий вид страницы, на восприятие текста вокруг нее. Удобство чтения текста, находящегося около картинки, сильно зависит от их взаимного расположения.
Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.
У атрибута align много значений, которые позволяют установить картинку именно так, как надо, и именно там, где надо.
Горизонтальное выравнивание:
• left – по левому краю;
• right – по правому краю.
Вертикальное выравнивание:
• top – выравнивание верхней границы картинки по самому высокому элементу строки;
• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;
• middle – середина изображения выравнивается по базовой линии строки;
• absmiddle – середина изображения выравнивается по середине строки;
• baseline – выравнивание нижней границы изображения по базовой линии строки;
• bottom – аналогично baseline;
• absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.
Примечание
Базовая линия строки – это линия, на которой расположены все элементы. При этом некоторые буквы выступают за эту линию, например буква «р». Ее палочка заканчивается ниже базовой линии и будет самым нижним элементом строки. Заглавные буквы, наоборот, выступают сверху этой линии.
В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.
Листинг 4.3. Выравнивание картинки по вертикали
Выравнивание по самому верхнему элементу в строке
Нижняя граница изображения выравнивается по нижней границе текущей строки
Нижняя граница изображения выравнивается по базовой линии строки
Середина изображения выравнивается по базовой линии строки
На рис. 4.3 показан результат обработки кода из листинга 4.3, где можно увидеть разницу между выравниваниями по базовой линии и по границам строки.
Рис. 4.3. Выравнивание по вертикали
С выравниваниями по горизонтали все проще. Код для выравнивания по горизонтали приведен в листинге 4.4.
Листинг 4.4. Выравнивание картинки по горизонтали
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
На рис. 4.4 виден результат обработки браузером кода из листинга 4.4, текст обтекает картинку слева.
Рис. 4.4. Выравнивание по горизонтали
При горизонтальном выравнивании текст плотно обтекает картинку и для внешнего вида страницы важным параметром становится расстояние между текстом и изображением.
Расстояние между текстом и изображением
Расстояние между текстом и картинкой влияет на читаемость текста. Очень маленькое или очень большое расстояние может оказаться неудобным.
Чтобы отодвинуть текст от картинки, используют атрибуты hspace и vspace элемента IMG. Они задают расстояние в пикселах между изображением и текстом по горизонтали и вертикали.
В листинге 4.5 указано очень большое расстояние по вертикали (100 пикселов) и очень маленькое по горизонтали (1 пиксел). На рис. 4.5 видно, что такое сочетание расстояний неудобно для чтения.
Рис. 4.5. Задано расстояние от картинки до текста
Листинг 4.5. Задание расстояния от текста до изображения
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
Рамка вокруг изображения
Кроме регулировки расстояния до текста, есть еще один способ отделить картинку от остального содержимого страницы.
Отделить изображение РѕС‚ текста можно, поступив СЃ РЅРёРј, как СЃ обычной картиной: поставив РІ рамку. Рто делается СЃ помощью атрибута border, значение которого указывает ширину рамки РІ пикселах.
В листинге 4.6 задана рамка шириной 10 пикселов, а слева и справа указаны разумные расстояния по 50 пикселов. На рис. 4.6 видно, что с такими параметрами изображение выглядит намного лучше, чем в предыдущем примере, и текст гораздо проще воспринимать.
Рис. 4.6. Рамка
Листинг 4.6. Задание рамки вокруг изображения
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
Альтернативный текст
С атрибутами, отвечающими за оформление картинки, все понятно, но существуют еще атрибуты, напрямую не влияющие на отображение картинки, но тем не менее сильно облегчающие жизнь посетителям сайта.
РРЅРѕРіРґР° получается так, что картинка РЅРµ загружается, например, РєРѕРіРґР° пользователь отключил загрузку картинок или сервер, РЅР° котором РѕРЅР° расположена, «упал». Если размеры картинки указаны РІ СЏРІРЅРѕРј РІРёРґРµ, то посетитель имеет Рѕ РЅРёС… представление, однако зачем ему этот размер, если РѕРЅ РЅРµ может даже предположить, что изображено РЅР° СЂРёСЃСѓРЅРєРµ.
Р’ таких ситуациях может помочь атрибут alt. Его значение – текст, который будет показан РїСЂРё наведении указателя мыши РЅР° картинку или если картинка РЅРµ загрузится. Рто даст возможность пользователям, которые РЅРµ РІРёРґСЏС‚ картинок, понять, хотят ли РѕРЅРё увидеть РёС… вообще, Р° тем, кто РІРёРґРёС‚, поможет понять, что именно РѕРЅРё РІРёРґСЏС‚.
В листинге 4.7 приведен пример кода для задания альтернативного текста.
Листинг 4.7. Альтернативный текст
На рис. 4.7 показан результат обработки кода из листинга 4.7 при условии, что изображение загрузилось.
Рис. 4.7. Альтернативный текст при загруженном рисунке
Альтернативный текст всплывает при наведении указателя мыши на картинку.
На рис. 4.8 показан результат обработки кода из того же листинга, но в случае, когда изображение не загрузилось.
Рис. 4.8. Альтернативный текст при незагруженном рисунке
Вместо картинки виден поясняющий текст, и при наведении указателя мыши на рисунок появляется всплывающая подсказка.
Предварительная загрузка
Если изображений на сайте много и их загрузка занимает немало времени, можно не испытывать терпение посетителя, а дать ему примерное представление о том, что он увидит.
Рто делается СЃ помощью атрибута lowsrc, РіРґРµ РІ качестве значения используется адрес изображения худшего качества, РЅРѕ того же содержания, что Рё основная картинка. РџСЂРё первом РїСЂРѕС…РѕРґРµ браузером страницы это изображение будет быстро загружено, Рё Сѓ пользователя появится представление Рѕ том, что РѕРЅ СѓРІРёРґРёС‚ дальше. РџСЂРё последующем РїСЂРѕС…РѕРґРµ страницы браузер загрузит главное изображение хорошего качества.
Совет
Для получения изображения худшего качества нужно использовать специальные программы для работы с изображениями. В них возможно уменьшение размеров изображения за счет уменьшения количества цветов, например.
В листинге 4.8 приведен пример кода, который задает изображение с предварительной загрузкой.
Листинг 4.8. Рзображение СЃ предварительной загрузкой
На рис. 4.9 показан результат предварительной загрузки изображения, на следующем проходе браузер загрузит изображение нормального качества.
Рис. 4.9. Предварительное изображение
Альтернативный текст и предварительная загрузка изображения делают сайт удобнее.
Ссылки изображения
Рспользуя картинки, можно повысить функциональность сайта, создавая изображения-ссылки.
Ссылки – главное РІ Рнтернете, Рё, естественно, существует возможность использовать РІ качестве ссылок изображения.
Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <А> и , при этом вокруг картинки появится рамка, которой можно управлять с помощью атрибута border. Синие рамки вокруг рисунков выглядят некрасиво, зато с ними сразу понятно, что можно щелкнуть кнопкой мыши на этой картинке и перейти на другую страницу.
В листинге 4.9 приведены примеры создания ссылок-изображений с различными размерами рамок.
Листинг 4.9. Создание изображений-ссылок
Ссылка без задания атрибута border (рамка ставится по умолчанию)
Ссылка без рамки
Рамка в 10 пикселов
Результат обработки кода из листинга 4.9 можно увидеть на рис. 4.10.
Р РёСЃ.В 4.10. Рзображения-ссылки
Возможность делать из рисунков ссылки позволяет удобнее размещать информацию на сайтах, где необходимо использовать много изображений.
Галереи изображений
При создании галерей используют возможность менять размер картинок и таким образом создают галереи, в которых пользователь сначала видит миниатюрные варианты изображений, а затем может выбрать необходимую ему картинку для загрузки. Посетитель щелкает кнопкой мыши на картинке, и она открывается в полный размер на новой странице.
Примером может служить поиск картинок в поисковых системах. На основе галерей можно делать фотоальбомы и выставки картин, эта технология часто используется при создании каталогов.
Теперь вы можете добавлять любые изображения на сайт и делать это наилучшим образом. Вы знаете, как корректировать внешний вид картинки, ее размеры и расположение на странице, а также как добавлять элементы, позволяющие посетителю просматривать ваши рисунки с комфортом. Теперь вы умеете создавать галереи изображений, а надо сказать, что картинки чаще всего структурируют именно в галереи. В общем, создание сайта с графическим наполнением – больше не проблема для вас.
4.2. Добавление мультимедиа
Что же делать, если, помимо коллекции картинок, у вас есть коллекция аудио или видео и вы хотите поделиться с посетителями сайта? В этом случае вы можете поместить на страницу ссылку на тот мультимедиа-файл, который желаете сделать доступным, или просто встроить его на страницу вместе с проигрывателем.
Ссылки на мультимедийные файлы
Ссылки на файлы мультимедиа ничем не отличаются от ссылок на другие страницы. Как видно из листинга 4.10, при щелчке кнопкой мыши на такой ссылке браузер откроет музыкальный файл в новом окне. Для удобства посетителей советую использовать атрибут title элемента A, он работает так же, как альтернативный текст для картинок. При наведении указателя мыши на ссылку всплывает строка с более подробной информацией о файле (рис. 4.11).
Рис. 4.11. Ссылки на мультимедиа
В листинге 4.10 приведен пример кода для создания ссылок на мультимедиа.
Листинг 4.10. Ссылки на мультимедиа
Указание ссылки на объект – самый простой вариант для реализации доступа к нему. Плюсом этого способа являются маленький объем страницы и простота использования. С помощью ссылки посетитель может сохранить файл у себя на компьютере, а затем проиграть его наиболее подходящим для себя проигрывателем. Для удобства посетителей сайта можно указывать размер мультимедийного файла.
Однако этот способ не помогает, если нужно, чтобы пользователь посмотрел Flash-файл. С их помощью обычно «раскрашивают» сам сайт; яркие и динамичные Flash-объекты могут нести смысловую нагрузку и быть неотъемлемой частью страницы, поэтому их удобнее встраивать сразу в страницу, а не передавать по ссылке. Хотя, если ваш Flash-мультик – самостоятельное произведение, можно использовать способ со ссылками.
Встраивание объектов
Ртак, есть СЃРїРѕСЃРѕР± загрузить наш мультимедиа-файл РЅР° страницу сразу, РїСЂРё этом надо учитывать, СЃ помощью какой программы будет воспроизводиться файл, потому что загружать динамический объект нужно вместе СЃ проигрывателем. Для обращения Рє этой программе необходимо использовать элемент OBJECT. РћРЅ позволит управлять РјРЅРѕРіРёРјРё параметрами проигрывателя. Р’ предыдущих версиях языка для встраивания объектов использовали элементы EMBED Рё APPLET, РЅРѕ сейчас рекомендуют Рє использованию именно OBJECT. Ртому элементу необходим закрывающий тег .
Примечание
В последнем стандарте принято использование элемента OBJECT, но, чтобы избежать проблем у пользователей, которые работают со старыми версиями браузеров, не распознающими этот элемент, рекомендуется внутрь его встраивать элемент EMBED.
Ртот элемент предоставляет большие возможности для управления встраиваемым объектом. Внутри тегов РјРѕРіСѓС‚ находиться элементы PARAM, которые РЅРµ требуют наличия закрывающего тега. РЎ РёС… помощью программам воспроизведения передают параметры, указывающие РІРёРґ проигрывателя, тип воспроизведения Рё множество РґСЂСѓРіРёС… параметров. РЎ точки зрения управления содержимым Рё внешним РІРёРґРѕРј сайта это очень СѓРґРѕР±РЅРѕ. Создатель сайта получает РіРёР±РєРёР№ инструмент для управления воспроизведением мультимедиа РЅР° странице. Р’ результате сайт выглядит Рё работает именно так, как хочется вам.
Начнем рассмотрение встраивания объектов с основного элемента, необходимого для этого, – элемента OBJECT.
Атрибуты элемента OBJECT
Ртот элемент позволяет встроить РЅР° сайт любой мультимедиа-объект вместе СЃ программой обработки данного объекта. Р’ этом разделе РјС‹ рассмотрим РІРѕРїСЂРѕСЃС‹ встраивания музыки, видео Рё Flash-анимации. Однако возможности элемента OBJECT намного шире: РІ принципе, РІС‹ можете встраивать РІ страницу любое активное содержимое, главное, чтобы Сѓ пользователя была программа для обработки этого объекта.
Рлемент OBJECT использует программы, находящиеся РЅР° компьютере посетителя, Рё СЃ РёС… помощью РІРѕСЃРїСЂРѕРёР·РІРѕРґРёС‚ активное содержимое. РћРЅ может использовать программу проигрывания РїРѕ умолчанию для конкретного типа файлов, если этот тип файлов знаком браузеру, или использовать конкретную указанную вами программу, если РѕРЅР° есть РЅР° компьютере пользователя.
У этого элемента много атрибутов. Очевидно, что не все они являются обязательными, точнее, у этого элемента нет строго обязательных атрибутов. Однако среди них можно выделить наиболее важные, которые упростят и ускорят обработку вашего объекта браузером.
Атрибут classid указывает адрес программы, которая будет работать СЃ объектом. Р’ качестве значения этого атрибута можно указывать полный или относительный путь Рє файлу программы. Рто РЅРµ всегда СѓРґРѕР±РЅРѕ, потому что РЅР° разных компьютерах программы располагаются РІ разных местах, Р° РЅР° серверах обычно РЅРµ бывает программ, необходимых для воспроизведения мультимедиа-файлов. Удобнее второй метод: использование идентификатора зарегистрированного ActiveX-приложения. Р’ этом случае перед самим идентификатором должно стоять ключевое слово clsid, как РІ листинге 4.11. Чаще всего применяют именно второй вариант, потому что РѕРЅ универсален. Рдентификаторы для различных приложений Рё активных объектов легко найти РІ Рнтернете.
Атрибут codetype должен принимать значение, содержащее MIME-тип объекта, который указан в атрибуте classid. Браузер использует эту информацию для подготовки ресурсов, необходимых для запуска файла.
Совет
MIME-тип (Multipurpose Internet Mail Extensions) – стандарт, используемый РІ Рнтернете, для указания типа объекта. РўРёРї, соответствующий вашему объекту, можно посмотреть РІ реестре. Для этого РІ папке HKEY_CLASSES_ROOT нужно открыть папку СЃ разрешением, соответствующим вашему объекту, Рё РІ строке Content Type будет указан MIME-тип объекта.
В листинге 4.11 показано применение атрибутов classid и codetype.
Листинг 4.11. Рспользование атрибутов classid Рё codetype
В примере указан идентификатор для Проигрывателя Windows Media, а тип – для проигрывания МР3-файла. При просмотре страницы вы увидите проигрыватель, готовый к запуску (рис. 4.12).
Рис. 4.12. Вставка Проигрывателя Windows Media
Атрибут data в качестве значения принимает адрес файла, который необходимо запустить с помощью проигрывателя. Правда, такой метод определения файла используется не всегда – иногда имя файла для запуска нужно передавать через элемент PARAM. Путь к файлу необходимо указывать относительно папки, заданной атрибутом codebase. Если значение этого атрибута не указано, то путь следует задать относительно текущего документа.
Атрибут type задает тип объекта, который указан РІ параметре data. Здесь нужно указывать MIME-тип объекта. Рто позволит браузеру выбрать программу для воспроизведения файла. Если РІС‹ РЅРµ укажете конкретную программу для воспроизведения, то браузер сам выберет приложение для воспроизведения файлов заданного типа. Значение атрибута type браузер использует, РєРѕРіРґР° РЅРµ указано значение атрибута codetype.
В листинге 4.12 приведен код, который запустит файл test. mp3 на проигрывание.
Листинг 4.12. Рспользование атрибутов data Рё type
Если вам понадобилось встроить на страницу Java-апплет, используйте атрибут code и в качестве его значения укажите имя класса вашего Java-апплета. По сути этот атрибут используется вместо элемента APPLET.
В листинге 4.13 представлен пример встраивания апплета.
Листинг 4.13. Встраивание Java-апплетов
С атрибутом codebase вы встречались уже несколько раз, он указывает путь к папке, в которой хранятся файлы, используемые этим объектом. Пути ко всем файлам определяются в элементе OBJECT относительно папки, указанной в качестве значения этого атрибута.
РџРѕРјРёРјРѕ атрибутов, отвечающих Р·Р° основные функции объекта, нас интересуют атрибуты, позволяющие управлять РІРёРґРѕРј объекта РЅР° странице. Рменно такие атрибуты элемента OBJECT РјС‹ рассмотрим далее.
Для выравнивания объекта на странице служит атрибут align, его значения аналогичны значениям этого атрибута для элемента IMG, но я их повторю на всякий случай.
Горизонтальное выравнивание:
• left – по левому краю;
• right – по правому краю.
Вертикальное выравнивание:
• top – выравнивание верхней границы объекта по самому высокому элементу строки;
• texttop – выравнивание верхней границы объекта по самому высокому элементу текста;
• middle – середина объекта выравнивается по базовой линии строки;
• absmiddle – середина объекта выравнивается по середине строки;
• baseline – выравнивание нижней границы объекта по базовой линии строки;
• bottom – аналогично baseline;
• absbottom – нижняя граница объекта выравнивается по нижней границе текущей строки.
Р—Р° размеры объекта отвечают атрибуты height Рё width, РѕРЅРё устанавливают его высоту Рё ширину соответственно. Рти параметры задают размеры РѕРєРЅР° приложения, которое будет использовано для воспроизведения файла. Рначе РіРѕРІРѕСЂСЏ, если РІС‹ воспроизводите видеофайл, то заданные высота Рё ширина Р±СѓРґСѓС‚ указывать РЅРµ только размер экрана, РІ РЅРёС… будет включен еще Рё размер панели проигрывателя.
Как и для картинок, для объектов можно задавать расстояние до текста с помощью атрибутов hspace и vspace.
Благодаря атрибутам элемента OBJECT вы можете менять общие параметры вашего объекта, но есть еще один очень важный элемент, позволяющий задавать параметры самого приложения, в котором происходит воспроизведение.
Рлемент PARAM
Рто главный элемент, предназначенный для управления проигрывателем. РЎ его помощью можно управлять панелями проигрывателя, регулировать начальную громкость воспроизведения Рё РґСЂСѓРіРёРµ параметры приложения; в общем, этот элемент позволяет РіРёР±РєРѕ управлять программой, которая РІРѕСЃРїСЂРѕРёР·РІРѕРґРёС‚ мультимедийное содержимое. Команды для каждой РёР· программ обработчиков СЃРІРѕРё, Рё РёС… легко можно найти РІ Рнтернете.
Рлементов PARAM внутри элемента OBJECT может быть РјРЅРѕРіРѕ, так как для каждого управляющего параметра нужен СЃРІРѕР№ элемент.
Рспользуют РґРІР° основных атрибута элемента PARAM: name Рё value. Первый задает РёРјСЏ параметра приложения (переменной), Р° value – значение этого параметра.
Рлемент PARAM дает неограниченные возможности для управления воспроизведением мультимедиа РЅР° вашей странице.
В примере из листинга 4.14 указан параметр AutoStart, в котором можно задать автоматическое начало воспроизведения файла, и параметр URL, в котором задается адрес файла.
Листинг 4.14. Рспользование элемента PARAM
Теперь подробно рассмотрим встраивание основных типов файлов.
Встраивание аудио
Для начала возьмем самую распространенную задачу – проигрывание фонового звука. Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого специальный элемент BGSOUND. Он должен располагаться в заголовке документа, его основные атрибуты – src (путь к звуковому файлу) и loop (количество повторных воспроизведений файла). Для управления звуком можно задавать параметр volume, который определяет громкость воспроизведения музыки. Пример установки фонового звука с помощью элемента BGSOUND приведен в листинге 4.15.
Листинг 4.15. Задание фонового звука с помощью элемента BGSOUND
В случае примера из листинга 4.15 музыка из файла test.mp3 будет проиграна один раз с пятой громкостью.
Есть Рё РґСЂСѓРіРѕР№ СЃРїРѕСЃРѕР± задать фоновую музыку, например ввести РЅР° сайт проигрыватель Рё задать ему нулевые размеры. Ртот СЃРїРѕСЃРѕР± имеет смысл использовать, РєРѕРіРґР° нужно реализовать нестандартное управление воспроизведением музыки РЅР° сайте. Р’ таком случае это можно будет сделать через управляющие команды проигрывателя.
В листинге 4.16 приведен пример того, как задать фоновую музыку с использованием элемента OBJECT.
Листинг 4.16. Задание фоновой музыки с помощью элемента OBJECT
В листинге 4.16 используются параметры AutoStart и Volume, которые задают автоматическое начало воспроизведения и громкость звука соответственно, а сам файл для воспроизведения указывается с помощью параметра URL. Количество повторов определяет параметр PlayCount. При обработке кода из листинга 4.16 файл test.mp3 будет проигрываться сразу при открытии страницы с десятой громкостью два раза.
Примечание
В последних версиях браузеров, перед тем как запустить активное содержимое, запрашивается разрешение пользователя на запуск. Если использовать вариант с элементом BGSOUNG, то подобного запроса не будет, а сразу же начнется воспроизведение звука. При использовании второго варианта для запуска активного содержимого необходимо будет получить согласие пользователя.
С фоновым звуком все просто, но его явно недостаточно для создания полноценной мультимедийной галереи, чаще приходится встраивать на страницу музыку вместе с проигрывателем. В таком случае без элемента OBJECT не обойтись, и альтернатив здесь нет.
Начнем СЃ того, что приведем проигрыватель Рє СѓРґРѕР±РЅРѕРјСѓ для посетителя РІРёРґСѓ. РџСЂРё воспроизведении музыки пропадает необходимость РІ полном РѕРєРЅРµ проигрывателя Рё поэтому графический дисплей можно «срезать». Рто делается очень просто: нужно изменить высоту объекта, то есть просто опустить атрибут height элемента OBJECT, оставляя проигрыватель без высоты.
Код для такого отображения проигрывателя представлен в листинге 4.17.
Листинг 4.17. Неполное окно проигрывателя
Результат обработки браузером листинга представлен на рис. 4.13.
Рис. 4.13. Аудиопроигрыватель
В примере не заданы ни высота, ни ширина. В случае с проигрыванием музыки в этом нет необходимости.
Ртак, Сѓ нас есть удобный для посетителя сайта проигрыватель. Единственное, что хотелось Р±С‹ добавить РІ него, это возможность видеть название песни Рё РёРјСЏ исполнителя данной мелодии. Рто очень просто сделать: нужно добавить строку параметров: .
Результат добавления такой строки параметров показан на рис. 4.14.
Рис. 4.14. Аудиопроигрыватель с дополнительной информацией
Теперь у нас есть удобный и симпатичный проигрыватель музыкальных файлов.
Примечание
РџСЂРё использовании Проигрывателя Windows Media версии выше 6. 4 параметры РјРѕРіСѓС‚ отличаться. Например, вместо FileName используется параметр URL. Рдентификатор clsid для Проигрывателя Windows Media версий выше 6. 4: 6BF52A52-394A-11D3-B153-00C04F79FAA6.
Ртак, музыка встроена, РЅРѕ нам РЅРµ терпится добавить туда еще немного возможностей, например проигрывание видео.
Встраивание видео
Сейчас встраивать видео РЅР° сайт можно без опасений – нынешних скоростей доступа РІ Рнтернет достаточно, чтобы Сѓ пользователей РЅРµ было проблем СЃ просмотром Рё скачиванием видео. Тем более что сейчас перемещение видеоархивов РІ сеть становится весьма популярным. Однако надо помнить, что файлы для потокового видео должны быть небольшими, Р° если РІС‹ хотите поделиться большим фильмом, то лучше выложить его для скачивания РїРѕ ссылке.
Примечание
Потоковое видео – это видео, для просмотра которого пользователю нет необходимости дожидаться полной загрузки файла. Рными словами, РїРѕРєР° РѕРґРЅР° часть файла скачивается, другая воспроизводится.
Ртак, РІС‹ определили размер вашего файла Рё решили, что РѕРЅ РїРѕРґС…РѕРґРёС‚ для потокового воспроизведения. Теперь нужно выбрать программу для воспроизведения.
В этой части мы будем рассматривать воспроизведение в Проигрывателе Windows Media, однако позже рассмотрим и другие проигрыватели.
Выбор проигрывателя зависит от типа файла, и хотя большинство проигрывателей может воспроизвести любой файл, иногда встречаются исключения. Возьмем для рассмотрения формат AVI как наиболее универсальный. MIME-тип такого файла – video/x-msvideo.
Управление проигрывателем осуществляется с помощью элемента PARAM. Как видно в листинге 4.18, с помощью параметров задаются имя файла для проигрывания, параметры панели проигрывателя. В примере реализован проигрыватель, который после загрузки сразу начинает проигрывание со звуком 20. Вообще не стоит разрешать видеопроигрывателю автоматический старт. Поскольку видео требует много трафика и загружает канал, то лучше решение о старте оставить на усмотрение пользователя.
Листинг 4.18. Встраивание видео
Добавить панель с информацией о видео можно так же, как и с аудио, присоединив строку параметров .
Таких полезных параметров много, вы их увидите, когда будете знакомиться с возможностями различных проигрывателей.
Главное – помните, что на первом месте должно стоять удобство посетителя вашего сайта, и выбирать элементы проигрывателя нужно с этой точки зрения.
Помимо видео и аудио, есть еще один распространенный вид мультимедийного содержимого: Flash. Он используется на многих сайтах и, возможно, понадобится вам.
Встраивание Flash-графики
Необходимость Flash-графики не всегда очевидна, однако красиво нарисованная заставка может оживить вашу страницу. Не стоит ни пренебрегать Flash-графикой, ни переоценивать ее действие. Переизбыток подобного содержимого может замедлить загрузку страницы. Если же вы создаете сайт только на Flash, то советую предусмотреть возможность просмотра содержимого без графики. Некоторые посетители будут вам благодарны.
Рассмотрим особенности встраивания Flash-графики. Для воспроизведения Flash-файла РЅР° компьютере пользователя должна быть установлена специальная программа. Чаще всего это Shockwave, ее можно бесплатно скачать СЃ сайта производителя. Рдентификатор этой программы clsid:d27cdb6e-ae6d-11cf-96b8-44455354 0000, Р° MIME-тип для SWF-файла будет application/ x-shockwave-flash.
Для управления проигрыванием файла, как обычно, используем элементы PARAM.
В листинге 4.19 показано встраивание Flash-объекта. Параметр movie задает имя файла, который надо воспроизвести. Параметр loop отвечает за количество воспроизведений, а play – за автоматическое начало воспроизведения.
Листинг 4.19. Встраивание Flash-графики
При обработке этого кода браузер воспроизведет файл test.swf только после соответствующего указания пользователя и проиграет его один раз.
Теперь, когда вы знаете, как встроить Flash или любой другой активный объект на сайт, рассмотрим подробнее проигрыватели и их параметры.
Проигрыватели
Самыми распространенными являются Проигрыватель Windows Media, RealPlayer, QuickTime Player. Каждый из них имеет свой формат файлов, но воспроизводить может практически любые файлы мультимедиа.
Рассмотрим подробнее эти проигрыватели и их самые полезные параметры.
• Проигрыватель Windows Media – стандартный проигрыватель для Windows, его плюс в универсальности: там, где есть Windows, есть этот проигрыватель.
Рдентификатор: 22D6F312-B0F6-11D0-94AB-0080C74C7E95.
Параметры приведены в табл. 4.1. Если в таблице в графе Значение указано 0/1, то 0 – выключить функцию, 1 – включить.
Таблица 4.1. Параметры WMP
• RealPlayer – этот проигрыватель, помимо простого проигрывания файлов, приспособлен для воспроизведения радио или телевидения в режиме online.
Рдентификатор: CFCDAA03-8BE4-11cf-B8 4B-0 02 0AFBBCCFA.
Параметры приведены в табл. 4.2.
Таблица 4.2. Параметры RealPlayer
Таблица 4.3. Значения параметра controls
• QuickTime Player – РІРѕСЃРїСЂРѕРёР·РІРѕРґРёС‚ большинство современных мультимедийных форматов, включая собственные форматы MOV Рё QT. Если позволяет скорость подключения, СЃ помощью этого проигрывателя можно просматривать потоковое видео РёР· Рнтернета.
Рдентификатор: 02BF2 5D5-8C17-4B2 3-BC80-D3488ABDDC6B. Параметры приведены РІ табл. 4.4.
Таблица 4.4. Параметры QuickTime Player
Мы рассмотрели основные виды проигрывателей и их самые востребованные параметры, теперь видео– и аудиосодержимое сайта полностью в вашей власти.
Однако возможности элемента OBJECT не ограничиваются добавлением только музыки и фильмов, есть много других способов для использования этого элемента.
Дополнительные возможности элемента OBJECT
Посмотрим, что еще можно добавить на сайт с помощью элемента OBJECT.
В качестве объекта на сайт можно добавить картинку:
Можно добавить другой сайт:
По сути подобные возможности элемента позволяют добавлять абсолютно любые объекты и управлять ими как угодно.
Приведу интересный пример: добавление календаря, соответствующий код приведен в листинге 4.20.
Листинг 4.20. Добавление календаря
Получившийся календарь изображен на рис. 4.15.
Рис. 4.15. Встроенный календарь
РР· этих примеров можно понять, что возможности элемента OBJECT очень большие Рё только РѕС‚ создателя сайта зависит, как РѕРЅРё Р±СѓРґСѓС‚ использованы.
Резюме
Р’ этой главе РјС‹ рассмотрели возможности улучшения РІРёРґР° сайта СЃ помощью картинок, Flash, аудио Рё видео. РР· примеров РІРёРґРЅРѕ, что возможности языка HTML РІ этом плане весьма велики.
Однако необходимо проявлять осторожность, чтобы большое количество графики не помешало функциональности сайта, потому что мультимедиа-приложения используют значительные ресурсы для загрузки на компьютер пользователя.
В главе приведены примеры, показывающие универсальность элемента OBJECT и демонстрирующие его дополнительные возможности.
Теперь вы легко можете добавить на сайт картинку, причем разными методами; вставить видео– или аудиофайл вместе с проигрывателем. Вы знаете, в каком направлении двигаться для получения большей функциональности своей страницы.