В главе 3 мы научились работать с текстом. В этой главе мы разберемся со всем, что относится к внедренным объектам: графическими изображениями и мультимедийными данными (прежде всего, аудио- и видеоклипами). Мы научимся помещать их на Web-страницы и использовать для специальных целей, например, для создания изображений-гиперссылок и изображений-карт. И Dreamweaver нам в этом поможет.
Следующая по очереди Web-страница нашего сайта — сведения об авторе. А какая страница об авторе обойдется без его портрета. Но прежде чем помещать на Web-страницу портрет (да и любое изображение), неплохо было бы создать эту самую страницу. Этим мы сейчас и займемся.
Сначала создадим в Dreamweaver новую пустую Web-страницу. Вы уже знаете, как это делается. Не будем ничего особо выдумывать: достаточно сочинить немного текста. Единственное: цвета и шрифты на новой странице должны быть такими же, как и на ранее созданной. Это необходимо, чтобы соблюсти единообразное оформление, чтобы пользователь знал, что пока еще находится на одном сайте.
На рис. 4.1 показана наша новая Web-страница. Опустим рассказ о ее создании, т. к. в этой главе речь пойдет совсем о другом.
Как видите, мы не слишком утруждали себя придумыванием деталей биографии нашего героя. Хватило нескольких строк текста, чтобы получилась Web-страница. Сохраним ее в файле 4.1.htm.
Теперь откроем первую нашу страницу (файл 3.1.htm). Сейчас мы создадим первую "внутрисайтовую" гиперссылку, т. е. гиперссылку, ведущую на другую страницу нашего сайта. Для этого сначала выделим строку "подробнее обо мне, любимом" (последняя строка списка). И обратим внимание на редактор свойств.
Рис. 4.1. Web-страница сведений об авторе
Вы уже заметили — справа от поля ввода адреса находятся две кнопки. Одна из них имеет вид мишени и расположена левее; она нам сейчас бесполезна. Вторая гораздо интереснее: она имеет вид папки и при нажатии открывает диалоговое окно Select File, показанное на рис. 3.41. В верхней части этого окна находится список файлов текущей папки и раскрывающийся список выбора папок, совсем как в стандартном диалоговом окне открытия файлов Windows. Вы должны будете выбрать нужный файл Web-страницы, чтобы создать на нее гиперссылку. Так мы и сделаем. И не забудьте нажать кнопку ОК. Вот и все — гиперссылка создана.
И обязательно сохраните нашу главную страницу. Частое сохранение документов (любых) — важнейшая и надежнейшая гарантия от потери данных. После этого главную страницу можно закрыть и сосредоточиться на сведениях об авторе.
Работа с графическими изображениями
Графические изображения (а также аудио- и видеоклипы), как вы помните, являются внедренными элементами, т. к. они не помещаются в сам HTML-код Web-страницы, а хранятся в отдельных файлах. Дело в том, что графика принципиально отличается от текста, кодируется и хранится иначе, чем текст. Поэтому совместить в одном файле HTML-текст и графику невозможно.
Примечание
Здесь нужно сделать оговорку. Существует язык VRML (Virtual Reality Markup Language — язык разметки виртуальной реальности), с помощью которого создаются целые виртуальные миры, которые можно исследовать. Эти миры записываются в виде текстовых тегов, аналогичных тегам HTML, встраиваемым прямо в HTML-код. Также фирмой Microsoft разработан язык VML (Vector Markup Language — язык разметки векторов), служащий для создания графических изображений, тоже в виде текстовых тегов. Но этот язык распространен очень слабо и поддерживается пока только Internet Explorer, начиная с версии 5.0.
Два вида графических изображений
Все графические изображения делятся на две большие группы по принципу кодирования, хранения в файлах и отрисовки на устройствах вывода (экран, принтер и т. п.). Давайте их рассмотрим.
Растровые изображения представляют собой набор точек; каждая такая точка может иметь какой-либо цвет, от белого до черного. Цвета всех точек, составляющих подобное изображение, записываются в массив, который, в свою очередь, вместе с некоторой служебной информацией сохраняется в файле. Такой массив называется растром.
К растровым относятся хорошо вам известные изображения форматов GIF (Graphic Interchange Format — формат обмена графикой) и JPEG (Joint Pictures Encoding Group — группа кодирования неподвижных изображений), которые вы загружаете из Интернета, чтобы полюбоваться творениями Бориса Вальехо. К растровым относится также стандартный формат хранения изображений в Windows — BMP (BitMaP — битовая матрица). Еще стоит упомянуть весьма напористого новичка — формат PNG (Portable Network Graphics — перемещаемая сетевая графика). Этот пока еще малораспространенный формат может стать преемником формата GIF, если недавние попытки сделать последний платным все-таки увенчаются успехом.
На самом деле, растровых форматов огромное множество, но подавляющее большинство из них — либо "фирменные", поддерживаемые одной программой, либо малораспространенные в силу каких-то причин, либо просто не используемые в Интернете.
Достоинствами растровых изображений являются исключительно простая обработка и вывод на устройство отображения. Действительно, что может быть проще, чем считать массив значений цветов точек и эти самые точки показать пользователю. Недостатки: большой размер (особенно, качественных изображений с большим количеством цветов) и резкая потеря качества при масштабировании.
Хотя большой размер — не такой уж и непреодолимый недостаток. Форматы GIF, JPEG и PNG стандартно поддерживают сжатие массива данных с помощью специальных алгоритмов. Однако тут кроется другая опасность. Дело в том, что эти алгоритмы реализуют так называемое сжатие с потерями, при которых часть информации, не очень существенная для отображения, отбрасывается, в результате чего объем массива сильно уменьшается. ("Обычные" программы архиваторов, которыми вы пользуетесь, например Zip или Rar, реализуют сжатие без потерь.) При этом, если задать слишком сильное сжатие такого изображения, может пострадать его качество из-за того, что слишком большая часть информации будет отброшена. Впрочем, это уже проблема Web-художника, который будет готовить подобное изображение к публикации в Интернете.
Какие форматы растровых изображений используются в Web-дизайне? В основном, GIF и JPEG. Угадайте, почему? Конечно, потому, что они поддерживают сжатие. Причем, изображения GIF применяют для элементов оформления страниц (линии, маркеры списков и т. п.) и штриховых рисунков, a JPEG — для полутоновых рисунков с большим количеством цветов. Это вызвано тем, что для сжатия изображений этих форматов применяются разные алгоритмы, имеющие свои сильные стороны и свои недостатки.
Формат GIF имеет особое свойство, за что его любят Web-художники. Дело в том, что из-за особенностей этого формата в один GIF-файл можно записать последовательность графических изображений, фактически настоящий фильм. Многочисленные "живые" (даже слишком) рекламные картинки — баннеры - которые в последнее время просто залепили Web-страницы, сделаны в формате "анимированный GIF". Иногда такими картинками злоупотребляют, и ничего хорошего из этого не получается.
Другое достоинство формата GIF — возможность задать "прозрачный" цвет. Впоследствии Web-обозреватель вместо точек, имеющих этот цвет, будет подставлять точки "фона" родительского элемента. Говоря просто, можно сделать рисунок с "дырками", сквозь которые "просвечивает" то, что находится под рисунком.
Формат PNG, как говорят его создатели, объединяет возможности GIF и JPEG, не "прихватывая" заодно с собой их недостатки. Но пока он что-то не очень популярен в Сети. Однако если GIF все-таки сделают платным...
Internet Explorer также поддерживает формат BMP. Непонятно, зачем это нужно, ведь другие Web-обозреватели его не поддерживают.
Осталось только привести расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF, PNG и BMP имеют "говорящие" расширения gif, png и bmp, а файлы JPEG — jpeg, jpg или jpe.
Вторая разновидность графических изображений — векторные. В отличие от растровых, состоящих из точек, они состоят из линий, называемых примитивами. Каждый такой примитив описывается определенной формулой, имеющей конкретный набор параметров. Вот эти параметры и сохраняются в массиве данных. К векторным относится формат изображений, созданных в популярнейшей программе Macromedia Flash, а также второй стандартный формат хранения изображений в Windows — WMF (Windows MetaFile — метафайл Windows). Вообще, существует много форматов векторных изображений, здесь перечисляться они не будут.
Что предлагают нам векторные изображения? Во-первых, небольшой объем, т. к. параметры какой-нибудь загогулины занимают значительно меньше места, чем весь набор составляющих ее точек. Во-вторых, исключительно простое масштабирование: Web-обозревателю достаточно перевычислить формулы с новыми параметрами размеров и нарисовать новую картинку на основе результатов этих вычислений. Недостаток: очень сложные алгоритмы вывода, включающие вычисление сложных формул. К тому же, чем векторное изображение сложнее, тем оно больше и тем дольше выводится на экран.
В Web-дизайне широко используется только один формат векторной графики — Flash. Но назвать это чудо программистского искусства графической программой не поворачивается язык — это мощнейший мультимедийный комплект, позволяющий создавать целые фильмы со звуковым сопровождением, причем, фильмы интерактивные, реагирующие на действия пользователя. При этом файлы, имеющие расширение swf, отличаются небольшими размерами и быстро грузятся даже по относительно слабым каналам. Все Web-обозреватели имеют в своем составе дополнительные модули, позволяющие просматривать фильмы Flash, а те, кто их не имеет, могут без проблем загрузить с сайта Macromedia.
Примечание
Формат VML, о котором говорилось выше, также растровый.
Вставка графического изображения
Ну вот, теория закончена. Пора переходить к практике.
Прежде всего, запасемся портретом, который впоследствии поместим на нашу страницу. Только вот откуда его взять? Ведь нашего Ивана Ивановича Иванова не существует в природе. Автор нашел выход... хоть художник из него не бог весть какой. Готовый "портрет", если можно так выразиться, сохранен в файле Ivanov.gif.
Посмотрим на страницу сведений об авторе. Портрет мы вставим сразу же после слова "Фотография". Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов — там находится кнопка Image (рис. 4.2). Вы также можете воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш <Ctrl>+<Shift>+<!>.
Рис. 4.2. Кнопка Image панели объектов
Нажмем эту кнопку. На экране появится диалоговое окно Select Image Source, показанное на рис. 4.3.
Рис. 4.3. Диалоговое окно Select Image Source
Да-а-а... Взглянуть страшно. Но вас предупреждали, что автор не дружит с живописью!
В общем, здесь описывать особо нечего. Раскрывающийся список папок и список файлов позволят вам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или вы можете вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов вы хотите найти. Все это знакомо вам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предварительного просмотра, где вы в данный момент видите физиономию Ивана Ивановича. А если она вам настолько противна, что вы хотите убрать ее с глаз долой, просто отключите флажок Preview Images.
Итак, вы выбрали файл, где находится портрет нашего героя. Осталось нажать кнопку ОК. После этого наша страница примет такой вид, как на рис. 4.4.
Ну вот! Мало того, что этот портрет страшен, как семь смертных грехов, так он еще и занял почти все окно! Давайте его уменьшим, а то пользователь испугается.
Рис. 4.4. Страница сведений об авторе с его портретом
Обратите внимание, что на правой и нижней границе портрета имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Вы можете "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если вы хотите, чтобы оба размера изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише <Shift>. Вот так стало лучше (рис. 4.5).
Теперь сохраним получившуюся страницу и посмотрим на редактор свойств. Проверьте, выделен ли портрет: признаком этого служат маркеры изменения размеров. Если их не видно, щелкните мышью по портрету — и они появятся. То, что вы увидите после этого, показано на рис. 4.6.
Поля ввода W и Н позволяют вам ввести вручную соответственно ширину и высоту изображения. Это может быть полезно, если выделенное изображение — часть оформления сайта и должно плотно "прилегать" к другим таким же элементам оформления. В остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры размера.
При вставке графического изображения Dreamweaver сам заполняет эти поля. Мы рекомендуем вам не удалять эти значения. Дело в том, что Web-обозреватель после загрузки страницы отобразит еще не загруженные изображения в виде пустых рамок. Если размеры изображений были явно заданы, они будут сразу же применены к рамкам, и оформление страницы не нарушится. В противном случае Web-обозреватель отобразит рамки некоего размера по умолчанию, и при последующей загрузке изображений их размеры будут меняться, что вызовет изменение самой страницы. А это очень неприятно.
Поля ввода V Space и Н Space задают соответственно вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.
Поле ввода Src задает имя файла, где хранится графическое изображение. Справа от него вы видите уже знакомые вам две кнопки. Нажав на правую из них (с изображением папки), вы откроете диалоговое окно Select Image Source, показанное на рис. 4.3.
Рис. 4.5. Страница сведений об авторе после изменения размера портрета
Рис. 4.6. Вид редактора свойств при выделенном изображении
Вы также можете изменить имя файла изображения, выбрав пункт Source File в контекстном меню или просто дважды щелкнув по изображению мышью. После этого на экране появится диалоговое окно Select Image Source.
Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет большего сжатия и низкого качества. Когда пользователь соединяется с Интернетом по низкоскоростному каналу, Web-обозреватель первым делом загружает "черновик", т. к. он имеет значительно меньший размер, и выводит его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается полноценное изображение и подменяет собой "черновик".
Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение с'лишком велико, чтобы быстро загрузиться. В частности, это подойдет, если вы делаете сайт с художественной графикой.
Dreamweaver предоставляет вам другую возможность задать имя файла "черновика". Для этого выберите пункт Low Source в контекстном меню и укажите нужный файл в появившемся на экране диалоговом окне Select Image Source.
Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет.
Поле ввода Alt задает так называемый "альтернативный текст". Это придумано опять же для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображений, помещенных на ней, отобразит пустые рамки соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель отобразит небольшую подсказку, содержащую этот самый "альтернативный текст". Поэтому мы рекомендуем вам всегда заполнять это поле ввода.
А теперь обратимся к раскрывающемуся списку Align. Оно позволяет вам задать выравнивание, а фактически — относительное местоположение изображения и обтекающего его текста. Но сначала поговорим о том, как графические изображения размещаются на Web-странице.
Дело в том, что изображение, вставленное в текст Web-страницы, ведет себя как обычный символ. Он находится в так называемом "потоке" текста, "льющемся" от начала до конца страницы и заполняющем ее целиком, и всецело подчиняется ему. В этом случае Web-дизайнер жестко ограничен "потоком" текста и не сможет переместить графический элемент туда, куда он хочет. И специально для такого случая был предусмотрен параметр относительного расположения графического изображения и обтекающего его текста.
Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты:
Browser Default — расположение по умолчанию, обычно аналогично пункту Baseline;
Baseline — низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);
Тор — верх изображения совпадает с верхом текста;
Middle — середина изображения совпадает с базовой линией текста;
Bottom — низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
TextTop — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);
Absolute Middle — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);
Absolute Bottom — низ изображения совпадает с низом самого низко сидящего символа текста;
Left — изображение "прижимается" к левому краю страницы;
Right — изображение "прижимается" к правому краю страницы;
Default - расположение по умолчанию, обычно аналогично пункту Baseline.
В последних двух случаях изображение становится "плавающим", т. е. не привязанным жестко к "потоку" текста. "Плавающее" изображение может быть смещено Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, может быть раздвинут. А в точке, где оно было вставлено, Dreamweaver отображает специальный маркер "плавающего" изображения, показанный на рис. 4.7. Этот маркер выводится только для удобства Web-дизайнера; в окне Web-обозревателя он виден не будет.
Рис. 4.7. Маркер "плавающего" изображения
Задать выравнивание изображения вы также можете в подменю Align контекстного меню.
Итак, с редактором свойств мы разобрались. Теперь давайте зададим свойства портрета нашего героя. Таким образом, расстояния от текста — 5 пикселов с обеих сторон, выравнивание — по левому краю, альтернативный текст — "Это я, Иван Иванович Иванов". Сохраним страницу.
Примечание
Изображение вставляется в текст с помощью одинарного тега <IMG>. Имя файла задается посредством атрибута SRC. Кроме него, этот тег имеет множество других атрибутов, соответствующих описанным нами параметрам. Получить подробное описание каждого из них вы можете, воспользовавшись поставляемым с Dreamweaver руководством по HTML.
Теперь опишем еще несколько возможностей, предлагаемых Dreamweaver для работы с изображениями. Сразу оговорюсь, что они весьма невелики — если вы хотите что-то подправить, лучше воспользуйтесь специализированным графическим редактором.
Кнопка Reset Size редактора свойств и одноименный пункт контекстного меню позволят вам сбросить размеры изображения в их значения по умолчанию. Это полезно, если вы сильно исказили размеры изображения и хотите начать все сначала.
Кнопка Edit редактора свойств и пункт Edit With <имя программы> контекстного меню позволят вам открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне Проводника. Вполне возможно, вам от этой функции не будет особой пользы (у автора, например, некоторые изображения открываются в Internet Explorer, в котором много не наредактиру-ешь). В этом случае воспользуйтесь подменю Edit With контекстного меню; выберите в нем пункт Browse, затем выберите в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной программы и нажмите кнопку открытия. Изображение откроется в этой программе, и вы сможете сделать с ним все, что хотите.
Изображения-гиперссылки
В предыдущей главе мы научились преобразовывать фрагменты текста в гиперссылки. Но, кроме текста, гиперссылкой можно сделать и графическое изображение. Такие изображения-гиперссылки часто встречаются на Web-страницах.
Сделать изображение-гиперссылку очень просто, так же просто, как и гиперссылку текстовую. Вам необходимо только выделить нужное изображение и ввести в поле ввода Link редактора свойств нужный адрес.
Давайте, чтобы проиллюстрировать вышесказанное, вставим на нашу страницу со сведениями об авторе еще одно изображение. И преобразуем его в почтовую гиперссылку.
Но, прежде всего, заготовим само изображение. Это будет значок "коммерческое эт", часто использующийся в качестве символа электронной почты.
Создайте его в графическом редакторе или найдите готовый. Назовите файл с этим изображением Email.gif.
После этого поставьте курсор в начале строки "E-mail: ivanov@somemail.ru", сотрите символы "E-mail" и нажмите кнопку Image вкладки Common панели объектов. Выберите файл, где сохранено ваше "коммерческое эт", и нажмите кнопку ОК. Измените размеры свежевставленного изображения, чтобы оно не сильно отличалось от размера шрифта текста, и установите для него выравнивание Absolute Middle. Результат вы можете видеть на рис. 4.8.
Рис. 4.8. Значок "коммерческое эт" — символ электронной почты
Теперь преобразуем этот значок в почтовую гиперссылку. Для этого выделим его, наберем в поле ввода Link редактора свойств почтовый адрес нашего героя mailto:ivanov@somemail.ru и нажмем клавишу <Enter>.
Внешне изображение-гиперссылка ничем не отличается от обычного изображения. Однако если вы вызовете Web-обозреватель для предварительного просмотра Web-страницы, то при наведении курсора мыши на это изображение он изменит свою форму на "указующий перст". А при щелчке на этом изображении откроется почтовый клиент.
Если параметр Border изображения-гиперссылки имеет значение, отличное от нуля, то рамка, рисуемая вокруг изображения, будет иметь такой же цвет, какой был установлен для гиперссылок в общих свойствах данной страницы. В нашем случае, такая рамка будет иметь светло-синий цвет для непосещенных, темно-синий для посещенных и ярко-красный для активной гиперссылок. Такой эффект можно специально использовать, чтобы сделать оригинальный дизайн Web-страницы, но обычно им не пользуются.
Ну и, конечно же, изображение-гиперссылка может указывать на обычную Web-страницу.
Примечание
HTML-код, использующийся для вставки изображения гиперссылки, имеет вид:
Изображение-гиперссылка при наведении на нее курсора мыши никак не проявляет себя. Конечно, можно выставить параметр Border равным пяти или десяти, но это во многих случаях будет не совсем эстетично. Вот сделать бы так, чтобы изображение менялось при наведении на него курсора мыши, чтобы пользователь сразу видел, что это гиперссылка...
Оказывается, это можно сделать. Такие изображения, реагирующие на действия пользователя, называются активными. И Dreamweaver позволяет делать их несколькими щелчками мыши. Единственное, о чем вам нужно позаботиться, так это о втором изображении, которое будет появляться на месте исходного, когда пользователь наведет на него курсор мыши (так называемое перекрывающее изображение).
Давайте рассмотрим, как поместить на страницу активное изображение. Для этого используем страницу сведений об авторе 4.1.htm, куда мы уже вставили изображение-гиперссылку. Согласитесь, она выглядит не очень эстетично. Давайте заменим ее активным изображением. Создадим в графическом редакторе два изображения со значком "коммерческое эт": одно — обычное, а второе — инвертированное, которое будет перекрывать первое. Первое изображение сохраним в файле Email.gif, а второе — в файле Email2.gif. И, конечно, сотрем всю строку с адресом электронной почты так, чтобы на ее месте остался пустой параграф. Текстовый курсор оставим на получившемся пустом параграфе.
Активное изображение вставляется с помощью кнопки Rollover Image (рис. 4.9) вкладки Common панели объектов или пункта Rollover Image подменю Interactive Images меню Insert. При этом на экране появляется диалоговое окно Insert Rollover Image, показанное на рис. 4.10.
Рис. 4.9. Кнопка Rollover Image панели объектов
Рис. 4.10. Диалоговое окно Insert Rollover Image
В поле ввода Image Name вводится уникальное имя вставляемого активного изображения. Имя должно содержать только латинские буквы, цифры и знаки подчеркивания, причем начинаться должно с буквы. Проверьте только, действительно ли это имя уникально.
В поле ввода Original Image вводится имя файла оригинального изображение. Если вы не хотите вводить его вручную, нажмите кнопку Browse справа от этого поля ввода. После этого на экране появится диалоговое окно Select Image Source (см. рис. 4.3), где вы сможете выбрать нужный файл.
В поле ввода Rollover Image вводится имя файла перекрывающего изображения. Также, если вам неохота водить его вручную, на помощь всегда придет кнопка Browse.
Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок включен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши.
В поле ввода Alternate Text вводится "альтернативный текст". Лучше его ввести.
Последнее поле ввода When Clicked, Go To URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении. Спасительная кнопка Browse придет на помощь тем, кто не любит стучать по клавиатуре.
На рис. 4.10 в соответствующие поля ввода подставлены все нужные значения. Вам остается ввести их и нажать кнопку ОК, после чего активное изображение будет создано. Измените его размер, если хотите.
Теперь остается проверить созданное нами активное изображение в действии. Для этого выведите его в Web-обозревателе для предварительного просмотра и поместите курсор мыши над активным изображением. Вы увидите, как оно изменится. Если вы щелкнете по нему, откроется почтовый клиент.
Карты-изображения
Изображение-гиперссылка — это простейший случай графических гиперссылок, применяемых сейчас в Web-дизайне. Более сложным случаем являются активное изображение и карта-изображение, сложная графическая гиперссылка, представляющая собой изображение, разбитое на части, причем каждая часть является гиперссылкой и указывает на свой интернет-адрес. Например, можно сделать красивую заставку и разместить на ней надписи, соответствующие разделам сайта. Такие части, представляющие собой отдельные гиперссылки, называются "горячими областями".
Для создания карты-изображения используются обычные графические изображения, созданные в любом графическом редакторе. Информация о местонахождении, форме, размерах "горячих областей" и интернет-адресах, на которые они указывают, хранится в HTML-коде страницы.
Dreamweaver позволяет очень просто создать карты-изображения. Нужные "горячие области" рисуются поверх изображения, после чего остается только ввести интернет-адреса, на которые они будут указывать.
В данный момент давайте не будем использовать на своих Web-страницах карты-изображения. Однако пример создания привести необходимо, поэтому мы создадим специальную Web-страничку и специальное изображение для учебных нужд. Файл изображения называется Map.gif, а файл странички — 4.2.htm. Эта страничка не будет содержать ничего, кроме изображения (рис 4.11).
Рис. 4.11. Учебная Web-страница с картой-изображением
Разместить на изображении "горячие области" нам помогут несколько элементов управления, находящиеся в левом нижнем углу редактора свойств и пока еще нами не рассмотренные. Теперь пришла пора разобраться с ними (рис. 4.12).
Рис. 4.12. Элементы управления редактора свойств,использующиеся для создания "горячих областей"
Прежде всего, рассмотрим четыре кнопки, расположенные вдоль нижней границы окна редактора свойств. Они поделены на две неравные группы. Группа, находящаяся правее и состоящая из трех кнопок, позволяет разместить на изображении соответственно прямоугольную, круглую и многоугольную "горячую область". Единственная кнопка, расположенная левее, позволяет манипулировать уже созданными "горячими областями".
Так как же разместить "горячую область"? Очень просто. Давайте начнем с прямоугольной. Щелкните на кнопке с изображением прямоугольника, затем щелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим.
После этого, как вы заметили, Dreamweaver подставит в поле ввода Map строку "Map". Что она значит? Это уникальное имя изображения-гипер-ссылки, которое будет использоваться Web-обозревателем. Если вы планируете на своей странице только одну карту-изображение, можете оставить это имя по умолчанию, в противном случае дайте ей уникальное имя, хотя бы "Мар1. Заметьте, что в таких именах допускаются только латинские буквы, цифры и знаки подчеркивания, причем начинаться имя должно с буквы.
Но Dreamweaver не только сгенерировал уникальное имя для карты-изображения. Он еще и в очередной раз изменил вид редактора свойств (рис. 4.13). Теперь вы можете задать параметры только что созданной "горячей области".
Рис. 4.13. Вид редактора свойств для выделенной "горячей области"
Все элементы управления нового редактора свойств вам уже знакомы. Это поле ввода Src, используемое для ввода интернет-адреса, раскрывающийся список Target, задающий цель гиперссылки, и поле ввода Alt, где вводится "альтернативный" текст. Здесь все понятно.
Разобравшись с тем, как вводятся параметры "горячей области", снова обратим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики — маркеры изменения размера. "Захватив" любой такой маркер мышью, вы можете изменить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Однако перед всеми этими операциями проверьте, что из кнопок, показанных на рис. 4.12, нажата та, на которой изображена стрелка, и, если нет, нажмите ее.
Но пора двигаться дальше. Введите в поле Src имя файла Web-страницы сведений об авторе (4.1.htm) и нажмите клавишу <Enter>.
Теперь добавим на наше изображение круглую "горячую область". Для этого нажмем кнопку с изображением круга и точно так же "протащим" мышь по изображению, охватив надпись "E-mail". Dreamweaver поместит круглую область там, где мы ему указали, и активизирует ее, разместив по четырем сторонам круга маркеры изменения размеров.
Вы можете изменять размеры и местоположение круглой "горячей области" так же, как и прямоугольной. Редактор свойств имеет в этом случае такой же вид (см. рис. 4.13). Поэтому мы не будем здесь останавливаться. Введите в поле ввода Src почтовый адрес Ивана Ивановича и нажмите клавишу <Enter>.
Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка — начало нашего многоугольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые и образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете — вам придется удалить созданную "горячую" область и создать новую.
Выделите многоугольную "горячую область", если она еще не выделена, введите в поле ввода Src имя файла 3.1.htm — нашей главной страницы и нажмите клавишу <Enter>. Наша карта-изображение закончена. То, что получилось, показано на рис. 4.14.
После этого можно вызвать Web-обозреватель для просмотра нашей страницы и испытать нашу карту-изображение в действии. Сделайте так — она действительно работает!
Осталось описать совсем немного дополнительных функций, предлагаемых Dreamweaver для работы с картами-изображениями.
С помощью пункта Image Map Name контекстного меню вы можете изменить имя "горячей области", если редактор свойств недоступен. При выборе этого пункта на экране появится диалоговое окно Change Attribute, показанное на рис. 4.15. Введите новое значение атрибута (в нашем случае — имени "горячей области") и нажмите кнопку ОК.
Рис. 4.14. Готовая карта-изображение
Пункт Link контекстного меню выводит на экран диалоговое окно Select File, где вы можете выбрать файл, на который будет ссылаться "горячая область".
Пункт Alt контекстного меню позволит вам с помощью диалогового окна Change Attribute задать "альтернативный" текст.
Рис. 4.15. Диалоговое окно Change Attribute
А о пунктах Bring To Front и Send To Back все того же неисчерпаемого контекстного меню поговорим подробнее.
Иногда случается так, что две "горячие области" перекрывают друг друга, т. е. имеют общий фрагмент. При этом при щелчке на такой "спорной территории" активизируется "горячая область", расположенная сверху, а сверху всегда появляется та область, что была создана последней. Но не всегда получается разместить "горячие области", как было предусмотрено по плану. Так вот, чтобы управлять их перекрытием, используются пункты Bring To Front и Send To Back контекстного меню. Первый переносит выделенную "горячую область" наверх, а второй -- "загоняет" ее вниз.
В последнем случае вы также можете воспользоваться пунктами Bring To Front и Send To Back подменю Arrange меню Modify.
И еще. Иногда бывает нужно избавиться от показываемых Dreamweaver "горячих областей", например, чтобы оценить, как будет выглядеть карта-изображение в окне Web-обозревателя. Конечно, можно загрузить его в самом Web-обозревателе для предварительного просмотра. Но можно сделать иначе. Отключите пункт-выключатель Image Maps в подменю Visual Aids меню View. При этом "горячие области" пропадут. Чтобы вернуть их назад, просто включите этот пункт.
Графика Macromedia Flash
Выше мы уже упоминали мощнейший пакет векторной Web-графики и анимации Macromedia Flash, "родного брата" Dreamweaver. "Братство" это проявляется не только в общем "родителе" — фирме Macromedia, но и в тесной интеграции двух пакетов. В частности, если у вас на компьютере установлены и Dreamweaver, и Flash, вы можете запустить Flash из Dreamweaver, нарисовать изображение и тут же вставить его в Web-страницу, открытую в окне Dreamweaver. Также Dreamweaver предлагает пользователю несколько "заготовок" различных надписей и кнопок, выполненных в формате Flash, которые вы также можете поместить на страницу.
Но даже если вы не имеете установленного на компьютере пакета Flash, вы все равно сможете размещать на своих страницах надписи и кнопки в формате Flash. Надписи Flash — это уже знакомые вам изображения-гиперссылки, но выполненные в формате Flash. Что касается кнопок Flash, то это просто активные изображения, имеющие вид кнопок и "нажимающиеся" при щелчке на них.
Если у вас установлена достаточно новая программа Web-обозревателя, то необходимый модуль расширения уже находится в ее составе. В противном случае вам придется посетить Web-сайт Macromedia, чтобы найти соответствующую версию проигрывателя. Так или иначе, вам время от времени все равно придется туда заходить, чтобы найти "свежий" проигрыватель, т. к. Flash постоянно обновляется, "обрастает" новыми возможностями, которые не поддерживаются старыми версиями проигрывателя.
Сейчас мы рассмотрим, какие возможности работы с Flash-изображениями предлагает нам Dreamweaver.
Для такого случая мы снова создадим небольшую учебную страничку. Страница со сведениями об авторе уже готова (или почти готова), так что не стоит пока над ней издеваться. Для наших экспериментов будет достаточно обычной пустой странички. Но, прежде чем помещать на нее Flash-изображения, сохраните ее в файле 4.3.htm, в противном случае Dreamweaver сам напомнит вам об этом. И закройте эту страницу.
Увы, увы, опять приходится говорить об ошибках, как бы нам этого не хотелось... Конечно, иногда ошибки бывают маленькими и незаметными, но Dreamweaver MX — не тот случай. Из-за досаднейшей промашки разработчиков он не всегда корректно воспринимает имена файлов и папок, набранные русскими буквами. Поэтому проверьте имя папки, в которой вы сохранили Web-страницу 4.3.htm, и если ее имя или имя одной из папок верхнего уровня имеет русские имена, перенесите файл страницы в другую папку, имеющую в имени только английские имена и цифры. Теперь можете открывать вашу страницу 4.3.htm.
Сначала рассмотрим вставку надписи Flash — изображения в формате Flash, содержащего строку текста и работающего как изображение-гиперссылка.
Надпись Flash создается с помощью кнопки Flash Text (рис. 4.16) страницы Media панели объектов. Вы также можете воспользоваться пунктом Flash Text подменю Interactive Images меню Insert. Параметры создаваемой надписи Flash задаются в диалоговом окне Insert Flash Text, показанном на рис. 4.17.
Рис. 4.16. Кнопка Flash Text панели объектов
Рис. 4.17. Диалоговое окно Insert Flash Text
В раскрывающемся списке Font выбирается шрифт, которым будет написан текст надписи. В поле ввода Size задается его размер в пунктах. Кнопки-выключатели В и I позволяют сделать шрифт текста жирным или курсивным. Три кнопки с изображением выровненных влево, по центру и вправо абзацев задают соответствующее выравнивание текста. Селектор цвета Color задает цвет текста, a Rollover Color — цвет, который примет текст, когда пользователь поместит над ним курсор мыши. В области редактирования Text вводится собственно текст надписи. Если флажок Show Font включен (а он включен по умолчанию), содержимое этой области редактирования показывается так, как оно будет выглядеть на Web-странице.
Поле ввода Link служит для задания интернет-адреса, по которому произойдет переход, если пользователь щелкнет на надписи. Также предусмотрена кнопка Browse. Цель гиперссылки задается с помощью раскрывающегося списка Target.
Селектор цвета Bg Color задает цвет фона надписи.
Последнее поле ввода Save As позволяет задать имя файла, где будет сохранена созданная надпись. По умолчанию Dreamweaver подставляет туда автоматически созданное имя файла, которое вы можете изменить, если хотите. Кнопка Browse вызывает на экран стандартное диалоговое окно сохранения файла Windows.
Наберите в области редактирования какой-либо текст, например, "Macromedia". Введите в поле ввода Link какой-нибудь интернет-адрес, например http://www.macromedia.com. Выберите шрифт и цвета по вкусу. И нажмите кнопку ОК. То, что у вас получится, показано на рис. 4.18.
Рис. 4.18. Только что созданная надпись Flash
Редактор свойств позволяет отредактировать множество параметров надписи Flash (рис. 4.19). Как и у обычного изображения, доступно изменение геометрических размеров (поля ввода W и Н), выравнивания (раскрывающийся список Align и одноименное подменю в контекстном меню), горизонтальное и вертикальное расстояние до текста (поля ввода Н Space и V Space) и сброс размеров в изначальное состояние (кнопка Reset Size).
Рис. 4.19. Вид редактора свойств при выбранном изображении Flash
Остальные элементы управления задают специфичные для изображений Flash параметры. Кнопка Edit (а также одноименный пункт контекстного меню) выводит на экран диалоговое окно создания надписи Flash, где вы сможете ее отредактировать. В поле ввода File задается имя файла, где хранится Flash-изображение; если у вас есть другие файлы надписей Flash, оно вам может пригодиться. Селектор цвета Bg позволяет быстро сменить цвет фона надписи Flash.
Теперь обратим внимание на кнопку Play. Как вы помните, чтобы протестировать активное изображение, созданное нами выше, мы были вынуждены загрузить страницу в Web-обозревателе, т. к. Dreamweaver не поддерживает выполнение сценариев. Изображения формата Flash не используют сценариев и поэтому могут быть просмотрены в самом Dreamweaver. Для того чтобы запустить просмотр, щелкните на кнопке Play. После этого рамка выделения с маркерами изменения размеров пропадет и вы, если поместите курсор мыши над надписью, увидите, что ее цвет изменился. Вот только на щелчки она не реагирует.
Заметьте, что при этом кнопка Play изменит название на Stop. Чтобы вернуть надпись Flash в режим редактирования из режима просмотра, щелкните по ней.
Вместо нажатия кнопки Play вы можете выбрать пункт Play подменю Plugins меню View или нажать комбинацию клавиш <Ctrl>+<Alt>+<P>. Пункт Play All того же подменю (или комбинация клавиш <Ctrl>+<Alt>+ +<Shift>+<P>) запускают просмотр всех изображений Flash, имеющихся на странице. Соответственно, пункт Stop (или комбинация клавиш <Ctrl>+ +<Alt>+<X>) останавливает просмотр текущего изображения Flash, a Stop All (или комбинация клавиш <Ctrl>+<Alt>+<Shift>+<X> - тренируйте свои пальцы) — всех изображений Flash на данной странице.
Раскрывающийся список Quality позволяет задать качество отображения изображения Flash. По умолчанию выбран пункт High — высокое качество. Однако в этом случае модуль просмотра изображений Flash будет требовать слишком много системных ресурсов, и если вы планируете распространять свои Flash-творения среди владельцев маломощных компьютеров, то стоит выбрать пункт Low. Еще два пункта позволят достичь компромисса: Auto High сначала устанавливает высокое качество, а потом при необходимости понижает, a Auto Low — наоборот.
Раскрывающийся список Scale задает, как изображение Flash отображается в границах, установленных параметрами W и Н. Выбранный по умолчанию пункт Default (Show all) заставляют проигрыватель Flash изменять масштаб изображения, "впихивая" его в нужные размеры, и предотвращать его искажение, соблюдая пропорции. Пункт No border выводит изображение в оригинальном масштабе; если при этом размеры W и Н слишком мачы, часть изображения может не быть видна. И, наконец, пункт Exact fit подобен Default (Show all), но не предотвращает искажение масштаба.
Манипулируя этими параметрами, вы можете получить весьма интересные эффекты. Поэкспериментируйте с полученным изображением Flash и посмотрите, что выйдет из ваших экспериментов.
Теперь поговорим о кнопках Flash. Создайте новую Web-страницу и сохраните ее под именем 4.4.htm. (Впрочем, вы можете стереть надпись Flash, вставленную нами ранее на страницу 4.3.htm, очистив ее.)
Кнопка Flash создается с помощью кнопки Flash Button страницы Media панели объектов (см. рис. 4.20). Вы также можете воспользоваться пунктом Flash Button подменю Interactive Images меню Insert. Параметры создаваемой кнопки Flash задаются в диалоговом окне Insert Flash Button, показанном на рис. 4.21.
Рис. 4.20. Кнопка Flash Button панели объектов
Рис. 4.21. Диалоговое окно Insert Flash Button
Здесь вы видите, прежде всего, большой список Style, где представлены все доступные в Dreamweaver стили кнопок Flash. Мы не будем их все рассматривать, т. к. описание получится большое и маловразумительное. Лучше всего вам будет просто посмотреть на них воочию, ведь правду говорят, что лучше один раз увидеть, чем сто раз услышать. Поможет вам в этом панель предварительного просмотра, расположенная выше этого списка.
Текст кнопки вводится в поле ввода Button Text. Остальные элементы управления знакомы вам по диалоговому окну Insert Flash Text (см. рис. 4.17), и выполняют они те же самые функции.
Давайте введем в поле ввода Button Text строку Macromedia, в поле ввода Link — http://www.macromedia.com, выберем какой-нибудь приглянувшийся стиль кнопки и нажмем кнопку ОК. Получившаяся кнопка может выглядеть, например, так — см. рис. 4.22.
Рис. 4.22. Только что созданная кнопка Flash
Дизайнеры фирмы Macromedia приготовили для вас прекрасные шаблоны для создания Flash-кнопок. Не верите? Нажмите кнопку Play на редакторе свойств, поднесите курсор мыши к кнопке и посмотрите, что получится. К сожалению, печатная иллюстрация не может передать движение...
Редактор свойств позволит вам изменить различные параметры кнопки Flash. Все они аналогичны параметрам надписи Flash, да и всем изображениям Flash.
Примечание
Изображения Flash помещаются на страницу с помощью парного, тега <OBJECT>. Этот тег служит для размещения не только изображений Flash, но и любых внедренных объектов, для которых в системе установлены модули просмотра. Таким образом можно, например, разместить на Web-странице документ MS Word или видеофильм. Тег <OBJECT> имеет множество атрибутов, которые служат для задания типа внедренного объекта, интернет-адреса дистрибутивного файла модуля просмотра, служащего для его обработки, геометрических размеров внедренного объекта и т. п. Мы не будем рассматривать эти атрибуты — вы можете найти их описания в электронном руководстве по HTML, поставляемом в составе Dreamweaver.
Выше говорилось, что тег <OBJECT> парный. Внутри этого тега помещаются описания различных параметров внедренного объекта (не самого тега <OBJECT>). Каждый параметр описывается с помощью одинарного тега <PARAM>, имеющего атрибуты NAME (имя параметра) и VALUE (значение параметра).
В дальнейшем мы вернемся к тегу <OBJECT>, когда будем рассматривать внедренные объекты.
Рис. 4.23. Кнопка Flashпанели инструментов
Ну и, разумеется, вы можете поместить на Web-страницу любое изображение Flash, созданное вами или кем-то другим. Это выполняется очень просто. Нажмите кнопку Flash (рис. 4.23) вкладки Common панели объектов (эта же кнопка находится на вкладке Media). Вы также можете выбрать пункт Flash подменю Media меню Insert или нажать комбинацию клавиш <Ctrl>+<Alt>+<F>. На экране появится уже знакомое вам диалоговое окно Select File, где вы сможете выбрать нужный файл SWF.
Графика Macromedia Shockwave
Осталось сказать чуть-чуть о других форматах поддерживаемых данных.
Macromedia Shockwave — непосредственный предшественник Flash. Чтобы поместить файл в этом формате на Web-страницу, нажмите кнопку Shockwave (рис. 4.24) вкладки Media панели объектов, выберите пункт Shockwave подменю Media меню Insert или нажмите комбинацию клавиш <Ctrl>+<Alt>+<D>. После этого на экране появится диалоговое окно Select File, где вы сможете найти и выбрать нужный файл.
Рис. 4.24. Кнопка Shockwave панели объектов
Внешний вид редактора свойств при выделенном изображении Shockwave показан на рис. 4.25. Как видите, свойства изображения Shockwave аналогичны соответствующим свойствам изображения Flash за исключением отсутствия некоторых параметров.
Рис. 4.25. Вид редактора свойств при выделенном изображении Shockwave
Фоновые изображения
Выше мы рассмотрели, как размещаются на 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.)
Рис. 4.26. Web-страница с фоновым изображением
Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Снова посмотрите на рис. 4.26 — там текст выглядит на фоне достаточно контрастно, чтобы нормально читаться.
Фоновое изображение ведет себя точно так же, как обычные изображения, помещенные на странице: Web-обозреватель сначала загружает HTML-файл страницы, а потом — все сопутствующие файлы, в том числе изображения. Это значит, что какое-то время фон на вашей странице будет отсутствовать. И вам нужно позаботиться о том, чтобы пользователь хотя бы смог прочитать текст вашей страницы. Для этого подберите цвет ее фона, аналогичный общему тону фонового изображения. Так, если фоновое изображение имеет темный тон, задайте для страницы темно-серый, темно-синий или черный цвет фона. И не следует в этом случае оставлять фон страницы белым, т. к. ваш текст тоже, скорее всего, будет белого цвета.
Мультимедиа
Мультимедиа (от англ, multimedia — многосредность) — это сокращенное обозначение информации, отличающейся от простых текста и графики. Мультимедиа — это звуки, музыка, видео, анимация, в последнее время оккупировавшие диски наших компьютеров, загромоздившие их гигабайтами полезной и бесполезной информации. Мультимедиа -- это мощнейшие трехмерные ускорители на видеокартах, это звуковые контроллеры, ставшие (наконец-то) стандартом, CD- и DVD-диски и соответствующие им приводы. Мультимедиа — это Web-страницы, пестрящие анимацией, оглушающие каждого встречного приветственной музыкой. Мультимедиа — это символ современного компьютерного мира.
Разумеется, мы не можем пройти мимо такой насущной темы. Да и сами создатели Dreamweaver не могли ее проигнорировать. Dreamweaver оснащен впечатляющими средствами помещения на Web-страницы мультимедийного содержания, да и вообще любых внедренных объектов. И мы их сейчас рассмотрим.
Но, прежде всего, решим, куда же помещать наше мультимедийное содержание. Как правило, его помещают на главную страницу, и оно будет проигрываться либо при ее (страницы) открытии, либо после того, как пользователь нажмет на кнопку, запускающую проигрывание. Так поступим и мы. И еще: это мультимедийное содержание не должно быть очень большим, иначе пользователь устанет ждать, пока оно загрузится, и уйдет с вашего сайта.
Не будем говорить о проблеме соблюдения авторских прав — это и так понятно, ведь практически любое авторское произведение защищено законодательством от кражи и незаконного копирования (что, собственно, одно и то же). В качестве решения проблемы вы можете поместить на свою страницу небольшой кусочек, скажем, музыкального произведения или фильма, сопроводив его текстом, предлагающим пользователю купить соответствующее произведение на кассете или компакт-диске, если оно ему понравится. Это обычная практика музыкальных сайтов, соблюдающих (или пытающихся соблюдать) законы.
Есть, конечно, и второй выход: написать музыку или снять фильм самому...
Поддержка мультимедийных данных
Поговорим о том, каким же образом Web-обозреватель обрабатывает мультимедийное содержание.
Некоторые типы мультимедийных данных поддерживаются Web-обозревателем непосредственно. (Хотя мультимедийными данными это назвать сложно.) Как вы поняли, речь идет об обычных растровых изображениях в формате GIF, JPEG или PNG (они помещаются на страницы с помощью тега <IMG>). Internet Explorer также поддерживает свой собственный тег <BGSOUND> для привязки к странице фонового музыкального сопровождения и атрибут DYNSRC тега <IMG>, с помощью которого на страницу можно поместить фильм. Но эти возможности не являются стандартными, поэтому мы не будем их рассматривать. Если вы хотите узнать о них побольше, обратитесь к электронному руководству по HTML.
Но поддержка очень и очень многих форматов данных в Web-обозреватель не заложена — форматов так много, что охватить все просто невозможно. Проблема решается использованием дополнительных программ. Каждая'такая программа "отвечает" за свой формат данных. И, когда Web-обозреватель получает какие-либо данные, которые он не может обработать непосредственно, он загружает соответствующую программу.
Мультимедийные данные, не поддерживаемые Web-обозревателем, помещаются на страницу с помощью особого тега. С помощью соответствующего атрибута задается имя файла данных, который и будет обрабатываться дополнительной программой. Программа читает данные из файла, обрабатывает их и генерирует на их основе какой-то экранный вывод, либо проявляет себя каким-то иным образом.
Но как Web-обозреватель определяет, какая программа нужна для обработки данных того или иного формата? Дело в том, что каждый формат данных имеет свой уникальный идентификатор, называемый типом MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения почты Интернета). А дополнительная программа при установке сообщает системе, какой тип MIME ей "по зубам". Соответствия типов MIME форматам данных и обрабатывающим их программам записываются в Реестре Windows.
В табл. 4.1 приведены некоторые типы MIME и соответствующие им форматы данных.
Таблица 4.1. Типы MIME
Тип файлов
Тип MIME
Архив RAR Архив ZIP
application/x-tar application/x-zip-compressed
Аудио- или видеозапись ASF
video/x-ms-asf
Аудио- или видеозапись WMV
video/x-ms-wmv
Аудиозапись AIFF
audio/aiff
Аудиозапись AU
audio/basic
Аудиозапись MIDI
audio/mid
Аудиозапись МРЗ
audio/mpeg
Аудиозапись WAV
audio/wav
Аудиозапись WMA
audio/x-ms-wma
Видеозапись AVI
video/avi
Видеозапись Indeo (IVF)
video/x-ivf
Видеозапись MPEG
video/mpeg
Визитная карточка, используемая почтовыми программами для хранения данных об адресате
text/x-vcard
Графический файл ART
image /x-jg
Графический файл BMP
image /bmp
Графический файл GIF
image/gif
Графический файл JPEG
image /jpeg
Графический файл Macromedia Flash
application/futuresplash
Графический файл TIFF
image/tiff
Документ Adobe Acrobat
application/pdf
Документ HTML
text/html
Документ Microsoft Excel
application/x-msexcel
Документ Microsoft Word
application/msword
Документ RTF
application/msword
Документ XML
text/xml
Приложение
application/x-msdownload
Приложение HTML (HTA)
application/hta
Таблица стилей HTML
text/ess
Текстовый документ
text/plain
Дополнительные программы, расширяющие возможности Web-обозревателя, делятся на две разновидности, различающиеся принципом работы:
Модули расширения Web-обозревателя (по-английски — plugins). Впервые их начал поддерживать Netscape 2.0; в Internet Explorer поддержка их появилась в версии 3.0. Это небольшие специализированные программы, выполненные в виде динамических библиотек Windows DLL. Они загружаются самим Web-обозревателем, чтобы обработать тот или иной файл. Если нужный модуль расширения не установлен, то Web-обозреватель может сам загрузить и установить его.
Элементы ActiveX. Общий стандарт расширения для операционной системы Windows, продвигаемый фирмой Microsoft, может быть использован и для "оживления" Web-страниц. Обладая всеми возможностями модулей расширения, элементы ActiveX могут поддерживаться не только Web-обозревателями, но и всеми программами, установленными в системе. Элемент ActiveX однозначно идентифицируется с помощью GUID (Global Unique IDentifier - глобальный уникальный идентификатор), который вместе с поддерживаемыми типами данных MIME записывается в Реестре. Элементы ActiveX поддерживаются Internet Explorer 3.0, Navigator 6.0, Mozilla 1.0 и более новыми версиями; о поддержке их Opera данных нет.
Модули расширения
Если вы хотите поместить на Web-страницу какое-либо мультимедийное (и не только) содержание, обрабатываемое с помощью модуля расширения, вы, прежде всего, должны удостовериться, что этот модуль расширения установлен у вас на компьютере. В противном случае он не будет появляться в списке установленных модулей расширения, и вы не сможете его выбрать. Кроме того, у вас должен быть установлен Netscape Navigator версии 4.7*. Дело в том, что модули расширения считаются устаревшей технологией, и для их поддержки необходимо устаревшее программное обеспечение.
Давайте поместим на нашу Web-страницу небольшой аудиоклип в формате WAV (WAVe — "волна", стандартный формат хранения звуков в Windows). Откроем новое окно Dreamweaver и сохраним пустую страницу в файле 4.6.htm. В качестве файла данных мы используем небольшой аудиоклип из папки Windows\Media, например, ding.wav. Скопируйте его в папку, где хранится Web-страница 4.6.htm.
Для вставки на Web-страницу модуля расширения служит кнопка Plugin (рис. 4.27), расположенная на вкладке Media панели объектов. Вы также можете использовать пункт Plugin подменю Media меню Insert. После этого на экране появится диалоговое окно Select File. Найдите аудиофайл, который вы хотите поместить на страницу, выберите его в списке файлов и нажмите кнопку ОК.
Рис. 4.27. Кнопка Plugin панели объектов
После этого в окне документа появится значок модуля расширения. Измените его размеры, как вы проделывали это с изображением. Результат показан на рис. 4.28.
Рис. 4.28. Модуль расширения
Теперь обратим внимание на редактор свойств (рис. 4.29).
Поля ввода W и Н, Н Space, V Space и Border и раскрывающийся список Align должны быть вам уже знакомы. Также должна быть вам знакома кнопка Play/Stop.
Рис. 4.29. Редактор свойств при выделенном модуле расширения
В поле ввода Src вводится имя файла данных. Справа от него расположена уже знакомая нам кнопка с изображением папки. Щелкнув по ней, вы получите на экране диалоговое окно открытия файла данных. С тем же успехом вы можете выбрать пункт Source File контекстного меню.
Поле ввода Pig URL используется для задания интернет-адреса файла, содержащего дистрибутивный комплект этого модуля расширения.
Кнопка Parameters служит для задания дополнительных параметров модуля расширения. Вместо нажатия кнопки Parameters вы также можете использовать одноименный пункт контекстного меню. В большинстве случаев это не нужно, но если вы хотите, чтобы модуль расширения вел себя особым образом, вам придется задать параметры. Само собой, предварительно вам необходимо будет выяснить, какие параметры поддерживает этот модуль расширения, для чего вам придется обратиться к его документации.
При нажатии кнопки Parameters на экране появляется диалоговое окно Parameters, показанное на рис. 4.30. Большую его часть занимает список-таблица параметров и их значений. Параметры вводятся простым набором нужных значений в соответствующих колонках таблицы: имени параметра в графе Parameter и значения параметра в графе Value. Кнопка со знаком "плюс" добавляет новую строку таблицы, кнопка со знаком "минус" — удаляет текущую строку. Кнопки вверх и внизсдвигают текущую строку выше или ниже.
Рис. 4.30. Диалоговое окно Parameters
Теперь посмотрим, как работает наш модуль расширения. Для этого закроем окно задания параметров, если оно открыто, выделим модуль расширения в окне документов, если он не выделен, и нажмем кнопку Play редактора свойств. Модуль расширения примет такой вид — см. рис. 4.31.
Рис. 4.31. Запущенный модуль расширения
Как видите, это привычный интерфейс проигрывателя мультимедийных файлов. Подавляющее большинство программ-проигрывателей имеют именно такой вид. Здесь мы видим кнопки (перечислены в порядке слева направо) остановки, запуска и приостановки проигрывания и движок-регулятор громкости воспроизведения звука. Если вы нажмете кнопку запуска проигрывания, то услышите аудиоклип.
Если вы щелкнете по модулю расширения, когда он работает, появится контекстное меню, предлагающее вам запустить (пункт Play), приостановить (Pause) или остановить совсем (Stop) проигрывание файла. Пункт Save As позволит вам сохранить файл данных под другим именем, а пункт About выведет небольшое диалоговое окно со сведениями о модуле расширения и его разработчике. Заметьте, что это меню выводит не Dreamweaver, а сам модуль расширения.
Внимание!
Здесь мы описали интерфейс модуля расширения, предназначенного для проигрывания мультимедийных файлов. Интерфейс других модулей расширения, разумеется, будет иным.
Закончив экспериментировать с модулем расширения, нажмите кнопку Stop. Вот и все! Теперь вы можете загрузить эту страничку в Web-обозревателе и проверить ее по полной программе.
Вы также можете задать в качестве файла данных видеоклип. В каталоге Windows (WinNT) имеется файл clock.avi в формате AVI (Audio and Video Interleaved — чередующиеся аудио и видео) — стандартном формате хранения видеоданных в Windows, который можно задать в качестве файла данных. Правда, для этого придется подогнать размеры модуля, чтобы клип влез в него целиком. Результат показан на рис. 4.32.
Рис. 4.32. Видеоклип на Web-странице
В этом случае в контекстном меню доступны следующие пункты:
Play — запуск проигрывания клипа;
Rewind (Start of movie) — перемотка в начало;
Forward (End of movie) — перемотка в конец;
Frame Back — перемотка на кадр к началу;
Frame Forward — перемотка на кадр к концу.
Ну что ж, выберем пункт Play и посмотрим, что получится...
Примечание
Модуль расширения помещается на Web-страницу с помощью парного тега <EMBED>. Этот тег содержит множество атрибутов; в частности, атрибут SRC задает интернет-адрес файла данных, атрибут PLUGINSPAGE — интернет-адрес дистрибутива модуля расширения, атрибут TYPE — тип MIME данных и т. д. Дополнительные параметры задаются внутри тега <EMBED> набором уже знакомых вам тегов <PARAM>.
Элементы 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). Увеличьте его размеры, как вы проделывали это с изображениями и модулем расширения,
Рис. 4.33. Кнопка ActiveX панели объектов
Заметьте, что запроса на открытие файла данных Dreamweaver при этом не выдает. Как привязать данные к элементу ActiveX, мы сейчас рассмотрим.
Взгляните на редактор свойств (рис. 4.35). В раскрывающемся списке ClassID выберите нужный элемент ActiveX. В нашем случае это будет известная программа мультимедийного проигрывателя RealPlayer — именно с ее помощью мы будем проигрывать MIDI-файл.
Рис. 4.34. Значок элемента ActiveX
Рис. 4.35. Редактор свойств при выделенном элементе ActiveX
Найдите в редакторе свойств кнопку 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-обозревателей. Но что делать тем, кто предпочитает пользоваться теми программами, которые как раз их не поддерживают? Выходит, те, кто помещают на свои Web-страницы элементы ActiveX, ограничивают свою аудиторию? Отчасти, да. Но Dreamweaver предлагает изящное решение этой проблемы.
Все дело в стандартах HTML, определяющих поведение Web-обозревателя, встретившего тег, которого он не "знает" (неизвестный тег). Web-обозреватель должен такой тег игнорировать. Тогда можно сделать так: в код Web-страницы помещается тег элемента ActiveX, а внутри него — тег модуля расширения. Поэтому "знакомая" с элементами ActiveX программа прочитает и обработает первый тег и проигнорирует второй, а "не знакомая", наоборот, проигнорирует первый, т. к. его не "знает", зато обработает второй. Как говорится, и овцы сыты, и волки целы...
Dreamweaver автоматически создает такой "двойной" тег, если в редакторе свойств был включен флажок Embed. В этом случае доступно поле ввода Src, где задается имя файла данных для модуля расширения. Это уже нам знакомо. И еще: если флажок Embed включен, то поле ввода Alt Img, где задается "альтернативное" изображение, выводимое, если элемент ActiveX почему-то не удается запустить, становится недоступным. (Фактически, "альтернативное" изображение задается точно так же, как модуль расширения — расположение внутри тега элемента ActiveX тега <IMG>.)
Выше мы рассмотрели, как можно поместить на Web-страницы изображения в формате Flash — надписи и кнопки. Dreamweaver при этом решал проблему совместимости точно так же, т. е. помещением модуля расширения внутри описания элемента ActiveX. Поэтому наши надпись и кнопка будут одинаково хорошо работать в обеих популярных программах Web-обозревателей.
Примечание
Элемент ActiveX задается уже знакомым вам тегом <OBJECT>. Этот тег мы рассмотрели, когда говорили о помещении на Web-страницы изображений Flash. Как видите, изображения формата Flash на самом деле обрабатываются элементом ActiveX.
Что дальше?
В этой главе мы рассмотрели помещение на Web-страницы различных нетекстовых элементов. Теперь наш Иван Иванович обзавелся лицом, правда, не бог весть каким. А страничка со сведениями об авторе украсилась его портретом.
Но, кроме рисунков, важным средством представления данных являются таблицы. В самом деле, таблица — лучший способ поместить максимальное количество данных на минимальной площади. И в следующей главе мы поговорим о таблицах. А заодно создадим страницы со списками увлечений нашего воображаемого героя и завершенных им проектов.
Что дальше?
Итак, мы создали первую, главную страницу нашего сайта. В процессе ее создания мы научились работать с текстом и гиперссылками, используя для этого стандартные инструменты Dreamweaver. Следующим шагом будет работа с графикой и мультимедийными файлами, иными словами, внедренными объектами.
В главе 4 мы научимся вставлять на страницы графические изображения, звуковые и видеоклипы. А заодно создадим страничку с более подробными сведениями о гипотетическом Иване Ивановиче и его портретом.
