4. Графика и Мультимедиа

Графика Macromedia Shockwave

Осталось сказать чуть-чуть о других форматах поддерживаемых данных.

Macromedia Shockwave — непосредственный предшественник Flash. Чтобы поместить файл в этом формате на Web-страницу, нажмите кнопку Shockwave (рис. 4.24) вкладки Media панели объектов, выберите пункт Shockwave подменю Media меню Insert или нажмите комбинацию клавиш <Ctrl>+<Alt>+<D>. После этого на экране появится диалоговое окно Select File, где вы сможете найти и выбрать нужный файл.

Внешний вид редактора свойств при выделенном изображении Shockwave показан на рис. 4.25. Как видите, свойства изображения Shockwave аналогичны соответствующим свойствам изображения Flash за исключением отсутствия некоторых параметров.

Фоновые изображения

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

Задать фоновое изображение для Web-страницы очень просто. Для этого вызовите на экран диалоговое окно Page Properties (см. рис. 3.50), для чего выберите пункт Page Properties меню Modify или контекстного меню или нажмите клавиши <Ctrl>+<J>. В поле ввода Background Image введите имя файла фонового изображения или нажмите кнопку Browse и выберите нужный файл в диалоговом окне. После этого нажмите кнопку ОК. Получившийся результат может выглядеть, например, так — см. рис. 4.26. (Автор создал пустую Web-страницу, поместил на нее фрагмент текста этой книги, задал для него в качестве фонового изображения файл J0143756.gif, поставляемый в составе Microsoft Office 2000, и сохранил результат в файле 4.5.htm.)

Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Снова посмотрите на рис. 4.26 — там текст выглядит на фоне достаточно контрастно, чтобы нормально читаться.

Фоновое изображение ведет себя точно так же, как обычные изображения, помещенные на странице: Web-обозреватель сначала загружает HTML-файл страницы, а потом — все сопутствующие файлы, в том числе изображения. Это значит, что какое-то время фон на вашей странице будет отсутствовать. И вам нужно позаботиться о том, чтобы пользователь хотя бы смог прочитать текст вашей страницы. Для этого подберите цвет ее фона, аналогичный общему тону фонового изображения. Так, если фоновое изображение имеет темный тон, задайте для страницы темно-серый, темно-синий или черный цвет фона. И не следует в этом случае оставлять фон страницы белым, т. к. ваш текст тоже, скорее всего, будет белого цвета.

Элементы ActiveX

Теперь рассмотрим элементы ActiveX и их размещение на Web-страницах.

Для начала откроем новое окно Dreamweaver и сохраним новую пустую страницу в файле под именем 4.7.htm. После этого найдем файл данных. В одной из папок Microsoft Office 2000 хранится аудиофайл формата MIDI (Musical Instruments Digital Interface — цифровой интерфейс музыкальных инструментов) по имени Htech_01.mid, который мы и используем в качестве файла данных. Если вы не найдете этого файла, можете использовать любой другой аудио- или видеофайл, например, ding.wav или clock.avi.

Для помещения на Web-страницу элемента ActiveX можно использовать либо кнопку ActiveX (рис. 4.33), расположенную на вкладке Media панели объектов, либо пункт ActiveX подменю Media меню Insert. После этого в окне документа вы увидите значок элемента ActiveX (рис. 4.34). Увеличьте его размеры, как вы проделывали это с изображениями и модулем расширения,

Заметьте, что запроса на открытие файла данных Dreamweaver при этом не выдает. Как привязать данные к элементу ActiveX, мы сейчас рассмотрим.

Взгляните на редактор свойств (рис. 4.35). В раскрывающемся списке ClassID выберите нужный элемент ActiveX. В нашем случае это будет из вестная программа мультимедийного проигрывателя RealPlayer — именно с ее помощью мы будем проигрывать MIDI-файл.

Найдите в редакторе свойств кнопку Parameters. Вы помните, зачем она нужна?

Все дело в том, что у элемента ActiveX нет собственного параметра для задания файла данных, как это было у модуля расширения. Файл данных задается в списке дополнительных параметров, вызываемых с помощью кнопки Parameters или одноименного пункта контекстного меню. Для этого служит параметр под названием src.

Откройте уже знакомое вам диалоговое окно Parameters (см. рис. 4.30). В единственной строке таблицы параметров в графе Parameter введите имя параметра — src, а в графе Value — имя MIDI-файла. И нажмите кнопку ОК.

Теперь можно проверить в работе получившийся элемент ActiveX. Нажмите кнопку Play, щелкните по кнопке воспроизведения — и вы услышите музыку.

Внешний вид запущенного элемента ActiveX изображен на рис. 4.31. Не правда ли, он поразительно напоминает модуль расширения, с которым мы познакомились выше. Почему? Дело в том, что многие программы имеют несколько пользовательских интерфейсов. Один из этих интерфейсов -обычная программа, которую пользователь запускает из меню Пуск или щелчком по файлу в окне Проводника. Второй и третий — соответственно модуль расширения Web-обозревателя и элемент ActiveX. И зачастую эти три интерфейса очень похожи друг на друга; это делается для того, чтобы пользователю было удобно. Программа RealPlayer, используемая нами для размещения на Web-страницах аудиоклипов, как раз имеет все эти три интерфейса.

Давайте посмотрим, что еще нам предлагает редактор свойств. Конечно, поля ввода W, H, H Space и V Space и раскрывающийся список Align вам уже знакомы. Рассмотрели также мы и раскрывающийся список ClassID. А вот остальные элементы управления пока еще не знакомы нам.

Поле ввода Base служит для задания интернет-адреса дистрибутивного файла элемента ActiveX. И, если нужного элемента ActiveX на компьютере пользователя не установлено, Web-обозреватель самостоятельно загрузит дистрибутив с указанного адреса и установит его. Единственное: вам нужно точно знать этот интернет-адрес.

Поле ввода Data служит для задания имени файла дополнительных данных для элемента ActiveX. (He путайте его с файлом данных.) В настоящее время мало кто использует этот параметр.

В поле ввода Alt Img задается имя файла изображения, которое будет отображаться вместо элемента ActiveX, если Web-обозреватель не сможет загрузить файл или не в полной мере поддерживает технологию ActiveX. Правила хорошего тона и законы рынка требуют написания Web-страниц, совместимых с максимальным числом программ, поэтому лучше предусмотреть такое "альтернативное" изображение. Впрочем, если вы уверены, что нужды в нем не возникнет, можете не задавать — подавляющее большинство Web-дизайнеров так и делают.

Теперь обратимся к флажку Embed и полю ввода Src.

Выше мы выяснили, что элементы ActiveX поддерживаются не всеми браузерами. Но что делать тем, кто предпочитает пользоваться теми программами, которые как раз их не поддерживают? Выходит, те, кто помещают на свои Web-страницы элементы ActiveX, ограничивают свою аудиторию? Отчасти, да. Но Dreamweaver предлагает изящное решение этой проблемы.

Все дело в стандартах HTML, определяющих поведение Web-обозревателя, встретившего тег, которого он не "знает" (неизвестный тег). Web-обозреватель должен такой тег игнорировать. Тогда можно сделать так: в код Web-страницы помещается тег элемента ActiveX, а внутри него — тег модуля расширения. Поэтому "знакомая" с элементами ActiveX программа прочитает и обработает первый тег и проигнорирует второй, а "не знакомая", наоборот, проигнорирует первый, т. к. его не "знает", зато обработает второй. Как говорится, и овцы сыты, и волки целы...

Dreamweaver автоматически создает такой "двойной" тег, если в редакторе свойств был включен флажок Embed. В этом случае доступно поле ввода Src, где задается имя файла данных для модуля расширения. Это уже нам знакомо. И еще: если флажок Embed включен, то поле ввода Alt Img, где задается "альтернативное" изображение, выводимое, если элемент ActiveX почему-то не удается запустить, становится недоступным. (Фактически, "альтернативное" изображение задается точно так же, как модуль расширения — расположение внутри тега элемента ActiveX тега <IMG>.)

Выше мы рассмотрели, как можно поместить на Web-страницы изображения в формате Flash — надписи и кнопки. Dreamweaver при этом решал проблему совместимости точно так же, т. е. помещением модуля расширения внутри описания элемента ActiveX. Поэтому наши надпись и кнопка будут одинаково хорошо работать в обоих популярных браузерах.

Примечание

Элемент ActiveX задается уже знакомым вам тегом <OBJECT>. Этот тег мы рассмотрели, когда говорили о помещении на Web-страницы изображений Flash. Как видите, изображения формата Flash на самом деле обрабатываются элементом ActiveX.

macromedia dreamweaver - на главную