Рисунки. 
Основные принципы работы с Dreamweaver

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

Прежде всего, вставим готовый рисунок, который впоследствии поместим в страницу. Готовый рисунок, сохраним в файле Ivanov.gif.

Рисунок можно вставить сразу же после слова «Фотография». Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов — там находится кнопка Image (рисунок 44). Также можно воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш ++[24].

Рисунок44 Кнопка Image панели объектов.

dreamweaver сайт документ редактор Нажав эту кнопку. На экране появится диалоговое окно Select Image Source, показанное на рисунок 45.

Рисунок 45 Диалоговое окно Select Image Source.

Раскрывающийся список папок и список файлов позволят выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или можно вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов можно найти. Все это знакомо по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предварительного просмотра, где в данный момент видите физиономию Ивана Ивановича. Выбрали файл, где находится рисунок, и нажимаем кнопку ОК. После этого страница примет такой вид, как на рисунке 46[23].

Рисунок 46 Страница сведений с рисунком Обратите внимание, что на правой и нижней границе портрета имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Любой маркер можно захватить мышью и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если нужно, чтобы оба размера изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише. Результат показан на рисунке 47[27].

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

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

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

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

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

Рисунок 47 Страница сведений после изменения размера рисунка.

Рисунок 48 Вид редактора свойств, при выделенном изображении Также можно изменить имя файла изображения, выбрав пункт Source File в контекстном меню или просто дважды щелкнув по изображению мышью. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое черновое изображение. Черновое изображение имеет меньший размер, как правило, за счет большего сжатия и низкого качества. Когда пользователь соединяется с Интернетом по низкоскоростному каналу, Web-обозреватель первым делом загружает «черновик», т. к. он имеет значительно меньший размер, и выводит его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается полноценное изображение и подменяет собой «черновик» [3].

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

Dreamweaver предоставляет другую возможность задать имя файла «черновика». Для этого нужно выбрать пункт Low Source в контекстном меню и указать нужный файл в появившемся на экране диалоговом окне Select Image Source.

Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет.

Поле ввода Alt задает так называемый «альтернативный текст». Это придумано опять же для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображений, помещенных на ней, отобразит пустые рамки соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель отобразит небольшую подсказку, содержащую этот самый «альтернативный текст» [8].

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

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

Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты[13]:

• · Browser Default — расположение по умолчанию, обычно аналогично пункту Baseline;
• · Baseline — низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);
• · Тор — верх изображения совпадает с верхом текста;
• · Middle — середина изображения совпадает с базовой линией текста;
• · Bottom — низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
• · TextTop — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);
• · Absolute Middle — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);
• · Absolute Bottom — низ изображения совпадает с низом самого низко сидящего символа текста;
• · Left — изображение «прижимается» к левому краю страницы;
• · Right — изображение «прижимается» к правому краю страницы;
• · Default — расположение по умолчанию, обычно аналогично пункту Baseline.

В раскрывающимся списке, поля Right и Default делают изображение «плавающим», т. е. не привязанным жестко к «потоку» текста. «Плавающее» изображение может быть смещено Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, может быть раздвинут. А в точке, где оно было вставлено, Dreamweaver отображает специальный маркер «плавающего» изображения, показанный на рисунке 49. Этот маркер выводится только для удобства Web-дизайнера; в окне Web-обозревателя он виден не будет[18].

Рисунок 49 Маркер «плавающего» изображения Задать выравнивание изображения также можно в подменю Align контекстного меню.

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

Примечание:

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

Можно описать еще несколько возможностей, предлагаемых Dreamweaver для работы с изображениями.

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

Кнопка Edit редактора свойств и пункт Edit With контекстного меню позволят открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне проводника. Вполне возможно, от этой функции не будет особой пользы В этом случае можно воспользоваться подменю Edit With контекстного меню; выбрав в нем пункт Browse, затем в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной программы и нажать кнопку открытия. Изображение откроется в этой программе, и можно сделать с ним все, что хотите[25].