Macromedia Dreamweaver MX

Вставка графического изображения

Ну вот, теория закончена. Пора переходить к практике.

Прежде всего, запасемся портретом, который впоследствии поместим на нашу страницу. Только вот откуда его взять? Ведь нашего Ивана Ивановича Иванова не существует в природе. Автор нашел выход... хоть художник из него не бог весть какой. Готовый "портрет", если можно так выразиться, сохранен в файле Ivanov. gif.

Посмотрим на страницу сведений об авторе. Портрет мы вставим сразу же после слова "Фотография". Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов — там находится кнопка Image (рис. 4.2). Вы также можете воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш <Ctrl>+<Shift>+<I>.

Да-а-а... Взглянуть страшно. Но вас предупреждали, что автор не дружит с живописью!

В общем, здесь описывать особо нечего. Раскрывающийся список папок и список файлов позволят вам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или вы можете вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, ка­кой тип файлов вы хотите найти. Все это знакомо вам по стандартным диа­логовым окнам открытия и сохранения файлов Windows. Единственное от­личие — справа находится панель предварительного просмотра, где вы в данный момент видите физиономию Ивана Ивановича. А если она вам на­столько противна, что вы хотите убрать ее с глаз долой, просто отключите флажок Preview Images.

Итак, вы выбрали файл, где находится портрет нашего героя. Осталось на­жать кнопку ОК. После этого наша страница примет такой вид, как на рис. 4.4.

Ну вот! Мало того, что этот портрет страшен, как семь смертных грехов, так он еще и занял почти все окно! Давайте его уменьшим, а то пользователь испугается.

Обратите внимание, что на правой и нижней границе портрета имеются не­большие черные квадратики. Это так называемые маркеры изменения разме­ра. Вы можете "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изо­бражения. А если вы хотите, чтобы оба размера изменялись пропорцио­нально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише <Shift>. Вот так стало лучше (рис. 4.5).

Теперь сохраним получившуюся страницу и посмотрим на редактор свойств. Проверьте, выделен ли портрет: признаком этого служат маркеры изменения размеров. Если их не видно, щелкните мышью по портрету — и они появятся. То, что вы увидите после этого, показано на рис. 4.6.

Поля ввода W и Н позволяют вам ввести вручную соответственно ширину и высоту изображения. Это может быть полезно, если выделенное изображе­ние — часть оформления сайта и должно плотно "прилегать" к другим та­ким же элементам оформления. В остальных случаях удобнее задавать раз­меры изображения, перетаскивая мышью маркеры размера.

При вставке графического изображения Dreamweaver сам заполняет эти по­ля. Мы рекомендуем вам не удалять эти значения. Дело в том, что Web - обозреватель после загрузки страницы отобразит еще не загруженные изо­

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

Поля ввода У Space и Н Space задают соответственно вертикальное и гори­зонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода Src задает имя файла, где хранится графическое изображение. Справа от него вы видите уже знакомые вам две кнопки. Нажав на правую из них (с изображением папки), вы откроете диалоговое окно Select Image Source, показанное на рис. 4.3.

Вы также можете изменить имя файла изображения, выбрав пункт 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-обозревателя он виден не будет.

Афия -'J

Рис. 4.7. Маркер "плавающего" изображения

Задать выравнивание изображения вы также можете в подменю Align кон­текстного меню.

Итак, с редактором свойств мы разобрались. Теперь давайте зададим свой­ства портрета нашего героя. Таким образом, расстояния от текста — 5 пик­селов с обеих сторон, выравнивание — по левому краю, альтернативный текст — "Это я, Иван Иванович Иванов". Сохраним страницу.

( Примечание )

Изображение вставляется в текст с помощью одинарного тега <img>. Имя фай­ла задается посредством атрибута SRC. Кроме него, этот тег имеет множество других атрибутов, соответствующих описанным нами параметрам. Получить подробное описание каждого из них вы можете, воспользовавшись поставляе­мым с Dreamweaver руководством по HTML.

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

Кнопка Reset Size редактора свойств и одноименный пункт контекстного меню позволят вам сбросить размеры изображения в их значения по умол­чанию. Это полезно, если вы сильно исказили размеры изображения и хо­тите начать все сначала.

Кнопка Edit редактора свойств и пункт Edit With <имя программы> контек­стного меню позволят вам открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне Проводника. Вполне возможно, вам от этой функции не будет особой пользы (у автора, например, некоторые изо­бражения открываются в Internet Explorer, в котором много не наредактиру - ешь). В этом случае воспользуйтесь подменю Edit With контекстного меню; выберите в нем пункт Browse, затем выберите в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной про­граммы и нажмите кнопку открытия. Изображение откроется в этой про­грамме, и вы сможете сделать с ним все, что хотите.

Изображения-гиперссылки

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

Сделать изображение-гиперссылку очень просто, так же просто, как и ги­перссылку текстовую. Вам необходимо только выделить нужное изображе­ние и ввести в поле ввода Unk редактора свойств нужный адрес.

Давайте, чтобы проиллюстрировать вышесказанное, вставим на нашу стра­ницу со сведениями об авторе еще одно изображение. И преобразуем его в почтовую гиперссылку.

Но, прежде всего, заготовим само изображение. Это будет значок "коммер­ческое эт", часто использующийся в качестве символа электронной почты.

Создайте его в графическом редакторе или найдите готовый. Назовите файл с этим изображением 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-код, использующийся для вставки изображения гиперссылки, имеет вид:

<А НЕЕГ="<1'1нтернет-адрес>"х1М6 SRC="<Anpec файла изображения>"х/А>.

Активные изображения

Изображение-гиперссылка при наведении на нее курсора мыши никак не проявляет себя. Конечно, можно выставить параметр Border равным пяти

Или десяти, но это во многих случаях будет не совсем эстетично. Вот сде­лать бы так, чтобы изображение менялось при наведении на него курсора мыши, чтобы пользователь сразу видел, что это гиперссылка...

Оказывается, это можно сделать. Такие изображения, реагирующие на дей­ствия пользователя, называются активными. И Dreamweaver позволяет де­лать их несколькими щелчками мыши. Единственное, о чем вам нужно по­заботиться, так это о втором изображении, которое будет появляться на месте исходного, когда пользователь наведет на него курсор мыши (так на­зываемое перекрывающее изображение).

Давайте рассмотрим, как поместить на страницу активное изображение. Для этого используем страницу сведений об авторе 4.l. htm, куда мы уже встави­ли изображение-гиперссылку. Согласитесь, она выглядит не очень эстетич­но. Давайте заменим ее активным изображением. Создадим в графическом редакторе два изображения со значком "коммерческое эт": одно — обычное, а второе — инвертированное, которое будет перекрывать первое. Первое изображение сохраним в файле Email. gif, а второе — в файле Email2.gif. И, конечно, сотрем всю строку с адресом электронной почты так, чтобы на ее месте остался пустой параграф. Текстовый курсор оставим на получив­шемся пустом параграфе.

Активное изображение вставляется с помощью кнопки Rollover Image (рис. 4.9) вкладки Common панели объектов или пункта Rollover Image под­меню Interactive Images меню Insert. При этом на экране появляется диало­говое окно Insert Rollover Image, показанное на рис. 4.10.

В поле ввода Image Name вводится уникальное имя вставляемого активного изображения. Имя должно содержать только латинские буквы, цифры и знаки подчеркивания, причем начинаться должно с буквы. Проверьте толь­ко, действительно ли это имя уникально.

В поле ввода Original Image вводится имя файла оригинального изображе­ние. Если вы не хотите вводить его вручную, нажмите кнопку Browse справа от этого поля ввода. После этого на экране появится диалоговое окно Select Image Source (см. рис. 4.3), где вы сможете выбрать нужный файл.

В поле ввода Rollover Image вводится имя файла перекрывающего изобра­жения. Также, если вам неохота водить его вручную, на помощь всегда при­дет кнопка Browse.

Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок вклю­чен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши.

В поле ввода Alternate Text вводится "альтернативный текст". Лучше его ввести.

Последнее поле ввода When Clicked, Go То URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении. Спасительная кнопка Browse придет на помощь тем, кто не любит стучать по клавиатуре.

На рис. 4.10 в соответствующие поля ввода подставлены все нужные значе­ния. Вам остается ввести их и нажать кнопку ОК, после чего активное изо­бражение будет создано. Измените его размер, если хотите.

Теперь остается проверить созданное нами активное изображение в дейст­вии. Для этого выведите его в Web-обозревателе для предварительного про­смотра и поместите курсор мыши над активным изображением. Вы увидите, как оно изменится. Если вы щелкнете по нему, откроется пснтовый клиент.