В этом уроке будет рассмотрена работа с изображениями в редакторе Dreamweaver. Вы узнаете, какие средства для работы с изображениями имеются в Dreamweaver, а также научитесь вставлять, редактировать и позиционировать изображение.

Вначале давайте разберемся со вставкой изображения в html страницу.

За вставку изображения отвечает специальная кнопка Image расположенная на панели Insert (Панель объектов), во вкладке Common. Смотрите рисунок:

Для вставки изображения поставьте курсор в то место вашей страницы, куда бы вы хотели вставить ваше изображение. Затем нажмите на кнопку () вставки изображения.

В результате появится окно Select Image Source:

При помощи данного окна вы можете выбрать необходимое вам изображение и вставить его, нажав на кнопку “ok”.

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

После того как Вы нажали на кнопку “ok” появится окно Image Tag Accessibility Attributes (Атрибуты доступности тега изображения):

Здесь имеются два параметра. Первый это Alternate text (Альтернативный текст) при помощи данного параметра вы можете добавить альтернативный текст к изображению. Данный текст будет показываться в том случае если на вашу страницу зайдет посетитель, у которого в браузере будет отключен показ графики. При этом вместо картинки отобразится рамка по размеру равная изображению, в которой и будет отображаться данный текст.

В поле Alternate text (Альтернативный текст) вы можете ввести краткий альтернативный текст. Он должен быть не более 50 символов.

В случае если вам понадобится ввести более длинный текст, можете воспользоваться вторым параметром Long description (Длинное описание). Здесь вам необходимо указать путь к отдельному файлу, в который вы поместили свой альтернативный текст. Указать путь к данному файлу вы можете, вписав ссылку на данный файл в соответствующем поле, либо щелкнув по значку папки выбрать данный файл.

После чего нажимаете на кнопку “ok” и ваше изображение вставляется на вашу страницу. Если Вы выделите изображение, то увидите, что вокруг него появится рамка с маркерами изменения размера. Перетаскивая эти маркеры, Вы можете изменять ширину и высоту изображения.

Если Вы хотите изменить размер изображения пропорционально, чтобы изображение не искажалось, то при перетаскивании маркеров нажмите и держите клавишу Shift. Смотрите изображение:

Теперь выделите изображение, и мы рассмотрим какие параметры, Вы можете ему присвоить при помощи инструментов расположенных на панели Properties (Редактор свойств):

При помощи полей W и H вы можете присвоить изображению необходимую ширину и высоту, так же как и при помощи маркеров изменения размера.

При помощи поля Src вы можете указать ссылку на файл изображения.

При помощи выпадающего списка Class вы можете придать необходимое стилевое оформление вашему изображению, если вы используете CSS для оформления страницы.

Далее мы обратимся к группе инструментов Edit (Правка). Данные инструменты предназначены для редактирования изображения. Рассмотрим их по порядку:

Инструмент Edit (Правка) ( ) предназначен для редактирования изображения, в каком либо стороннем графическом редакторе. По началу в нем не определен графический редактор, который мы будем применять для редактирования изображений. Поэтому для того чтобы его определить вам необходимо пройти в пункт меню Edit (Правка) - Preferences (Предпочтение) или нажать сочетание клавиш Ctrl+U.

В результате откроется окно Preferences (Предпочтение). Из списка категорий выберите пункт File Types/Editors (Типы файлов/Редакторы). В результате в низу вашего окна появится два небольших окошка. Смотрите рисунок:

Шаг 1. Вам нужно будет выбрать расширение файлов, которые вы хотите редактировать. В данном случае это будут расширения .jpg .jpe .jpeg. Кроме того вы можете выбрать графический редактор и для файлов с такими расширениями как .gif и .png. они очень часто используются при создании веб страниц.

Шаг 2. Вам необходимо выбрать графический редактор, с помощью которого вы хотите редактировать изображения. Для этого кликните по значку “+” и выберите на своем диске запускной файл того редактора, которым Вы хотите редактировать изображение. В данном случае я выбрал графический редактор Photoshop.

Шаг 3. После выбора графического редактора нажмите на кнопку Make Primary (Сделать по умолчанию). Затем нажмите “ok”. Теперь все изображения с выбранными Вами расширениями будут открываться в этом графическом редакторе.

Можете попробовать нажать на кнопку Edit (Правка) и если вы все сделали правильно, то изображение откроется в вашем текстовом редакторе.

При помощи инструмента Optimize in Fireworks () вы можете оптимизировать свое изображение.

Инструментом Crop ( ) вы можете вырезать необходимую вам часть изображения. Для этого выберите этот инструмент, в результате на изображении появятся уже знакомые вам маркеры перемещения, с помощью которых вы можете выделить необходимую часть изображения, после чего нажмите Enter и часть изображения будет вырезанна.

При помощи инструмента Resample (Преобразование) ( ) вы можете сделать изображение более четким.

Инструментом Brightness and Contrast (Яркость и Контрастность) ( ) вы можете изменять яркость и контрастность изображения перетягивая ползунки.

Инструментом Sharpen (Резкость) () вы можете изменять резкость изображения.

При помощи поля Border Вы можете задать рамку вокруг изображения, в пикселях. Например, можете поставить в это поле значение “2” и нажать Enter. В результате вокруг изображения появится рамка размером 2 пикселя.

Ну и наконец, выпадающий список Align, с помощью которого Вы можете задать местоположение изображения. Он содержит следующие параметры:

Default (По умолчанию) – в этом случае местоположение будет зависеть от настроек браузера пользователя.

Baseline (Базовая линия) – изображение будет совпадать с базовой линией текста.

Top (В верху) – выравнивание изображения по верхнему краю.

Middle (Середина) – выравнивание изображения по середине, базовой линии текста.

Bottom (Внизу) – положение изображения в низу, относительно элемента в котором оно находится.

Text Top (В верху текста) – положение изображения при котором его верх совпадает с верхом самого высокого символа текста.

Absolute Middle – середина изображения будет совпадать с центральной линией текста.

Absolute Bottom – низ изображения будет совпадать с низом самого нижнего символа в тексте.

Right (Право) – изображение прижимается к правому краю страницы, при этом текст будет обтекать его слева.

Left (Лево) – изображение прижимается к левому краю страницы, а текст будет обтекать его с права.

Вот это и есть основные инструменты, предназначенные для работы с изображениями в Dreamweaver. Здесь мы еще не рассмотрели, каким образом можно сделать изображение-ссылку, и изображение-карту, но этому мы обязательно посвятим отдельный урок.