Вставка графического изображения
Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение слишком велико, чтобы быстро загрузиться. В частности, это подойдет, если вы делаете сайт с художественной графикой.
Dreamweaver предоставляет вам другую возможность задать имя файла "черновика". Для этого выберите пункт Low Source в контекстном меню и укажите нужный файл в появившемся на экране диалоговом окне Select Image Source.
Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет.
Поле ввода ALT задает так называемый "альтернативный текст". Это придумано опять же для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображений, помещенных на ней, отобразит пустые рамки соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель отобразит небольшую подсказку, содержащую этот самый "альтернативный текст". Поэтому мы рекомендуем вам всегда заполнять это поле ввода.
А теперь обратимся к раскрывающемуся списку Align. Оно позволяет вам задать выравнивание, а фактически – относительное местоположение изображения и обтекающего его текста. Но сначала поговорим о том, как графические изображения размещаются на Web-странице.
Дело в том, что изображение, вставленное в текст Web-страницы, ведет себя как обычный символ. Он находится в так называемом "потоке" текста, "льющемся" от начала до конца страницы и заполняющем ее целиком, и всецело подчиняется ему. В этом случае Web-дизайнер жестко ограничен "потоком" текста и не сможет переместить графический элемент туда, куда он хочет. И специально для такого случая был предусмотрен параметр относительного расположения графического изображения и обтекающего его текста.
Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты:
- Browser Default – расположение по умолчанию, обычно аналогично пункту Baseline;
- Baseline – низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);
- Top – верх изображения совпадает с верхом текста;
- Middle – середина изображения совпадает с базовой линией текста;
- Bottom – низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
- TextTop – верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Top);
- 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 исполняемый файл нужной программы и нажмите кнопку открытия. Изображение откроется в этой программе, и вы сможете сделать с ним все, что хотите.