Изображения

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

GIF (Graphic Interchange Format — формат обмена графикой)

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

JPEG (Joint Photographic Experts Group — объединенная группа экспертов по фотографии)

Формат файлов JPEG отлично подходит для фотографий и изображений с плавными переходами тонов, так как файлы JPEG могут содержать миллионы цветов. С повышением качества файла JPEG возрастает его размер и время загрузки. Часто хорошего баланса между качеством изображения и размером файла можно достичь путем сжатия файла JPEG.

PNG (Portable Network Graphics — переносимая сетевая графика)

Формат файлов PNG — это свободная от патентов замена для GIF, которая поддерживает индексированные цвета, оттенки серого и полноцветные изображения, а также альфа-канал для прозрачности. PNG — «родной» формат файлов Adobe® Fireworks®. В файлах PNG сохраняется вся исходная информацию о слоях, векторах, цветах и эффектах (вроде отбрасываемых теней), а все элементы в любое время полностью доступны для изменения. Для распознавания в Dreamweaver файлы PNG должны иметь расширение .png.

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

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

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

После вставки изображения можно настроить атрибуты специальных возможностей в его теге для восприятия средствами чтения с экрана для пользователей с ослабленным зрением. Эти атрибуты можно редактировать в коде HTML.

Руководство по вставке изображений см. в разделе Добавление изображений.

  1. Установите курсор в том месте области «Окно документа», где следует вставить изображение, и выполните одно из следующих действий.

    • В категории «Общие» на панели «Вставка» щелкните значок «Изображения» .
    • В категории «Общие» на панели «Вставка» нажмите кнопку «Изображения» и выберите значок «Изображение». Когда значок «Изображение» находится на панели «Вставка», его можно перетащить в область «Окно документа» (или в окно представления «Код», если вы работаете с кодом).
    • Выберите пункт меню Вставка > Изображение.
    • Перетащите изображение с панели «Ресурсы» («Окно» > «Ресурсы») в нужное место области «Окно документа», а затем перейдите к шагу 3.
    • Перетащите изображение с панели «Файлы» в нужное место области «Окно документа»; затем перейдите к шагу 3.
    • Перетащите изображение с рабочего стола в нужное место области «Окно документа»; затем перейдите к шагу 3.
  2. В появившемся диалоговом окне выполните одно из следующих действий.
    • Чтобы выбрать файл изображения, выберите пункт «Файловая система».
    • Чтобы выбрать динамический источник изображения, выберите пункт «Источники данных».
    • Чтобы выбрать файл изображения из удаленной папки на одном из ваших сайтов Dreamweaver, выберите пункт «Сайты и серверы».
  3. Перейдите к нужному изображению или источнику содержимого, чтобы его выбрать.

    При работе в несохраненном документе Dreamweaver создает ссылку на файл изображения в виде file://. При сохранении документа в любом месте сайта Dreamweaver преобразует эту ссылку в относительный для документа путь.

    Примечание.

    При вставке изображений можно также указать абсолютный путь к изображению на удаленном сервере (например, если изображение отсутствует на локальном жестком диске). В случае проблем с производительностью во время работы может потребоваться отключение просмотра изображений в представлении «Дизайн», для чего достаточно отменить выбор пункта «Команды» > «Отобразить внешние файлы».

  4. Нажмите кнопку «ОК». Откроется диалоговое окно «Атрибуты специальных возможностей тега Image», если оно было активировано в установках («Редактирование» > «Установки»).

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

    Примечание.

    Можно заполнить как одно, так и оба поля, в зависимости от потребностей. Средство чтения с экрана считывает атрибут изображения Alt.

    Примечание.

    Если нажать кнопку «Отмена», изображение появится в документе, но Dreamweaver не свяжет с ним каких-либо специальных тегов или атрибутов.

  6. В инспекторе свойств («Окно» > «Свойства») задайте свойства изображения.

Задание свойств изображения

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

Свойства изображения в инспекторе свойств.
  1. Чтобы просмотреть инспектор свойств для выбранного изображения, выберите пункт меню «Окно» > «Свойства».

  2. В текстовом поле под изображением эскиза введите имя, по которому можно будет ссылаться на изображение как в вариантах поведения Dreamweaver (например, «Замена изображений»), так и при использовании языка сценариев типа JavaScript или VBScript.
  3. Задайте любой из параметров изображения.

    W и H (ширина и высота)

    Ширина и высота изображения в пикселах. Dreamweaver автоматически обновляет значение этих полей по исходным размерам изображения при вставке его в страницу.

    Если заданные значения «Ш» и «В» не соответствуют фактической ширине и высоте изображения, оно может неправильно отображаться в браузере. (Чтобы восстановить исходные значения, щелкните метки текстовых полей «Ш» и «В» или нажмите кнопку сброса размера изображения, отображаемую справа от полей «Ш» и «В» при вводе нового значения.)

    Примечание.

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

    Источник

    Указывает исходный файл изображения. Щелкните значок папки, чтобы перейти к исходному файлу, или введите путь.

    Ссылка

    Указывает гиперссылку на изображение. Перетащите значок «Указать файл» на файл на панели «Файлы», щелкните значок папки для перехода к документу на сайте или введите URL-адрес вручную.

    Alt

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

    Средства «Имя карты» и «Активная область»

    Позволяют разметить и создать клиентскую карту ссылок.

    Назначение

    Указывает фрейм или окно, в котором будет загружена связанная страница. (Этот пункт недоступен, если изображение не привязано к другому файлу.) В списке «Целевой объект» отображаются имена всех фреймов из текущего набора. Можно также выбрать одно из зарезервированных имен целевых объектов:

    • _blank означает загрузку связанного файла в новом окне браузера без имени.

    • _parent — загрузка связанного файла в родительском наборе фреймов или окне фрейма, содержащего ссылку. Если фрейм, содержащий ссылку, не является вложенным, связанный файл загружается в полном окне браузера.

    • _self — загрузка связанного файла в том же фрейме или окне, что и ссылка. Этот целевой объект установлен по умолчанию, поэтому обычно ее не требуется указывать.

    • _top — загрузка связанного файла в полном окне браузера с удалением всех фреймов.

    Изменить

    Запускает редактор изображений, указанный в установках «Внешние редакторы», и открывает выбранное изображение.

    Обновить из оригинала

    Если веб-изображение (т. е. изображение на странице Dreamweaver) не соответствует исходному файлу Photoshop, Dreamweaver обнаруживает обновление исходного файла и отображает один из значков смарт-объекта красным цветом. Если выбрать веб-изображение в представлении «Дизайн» и нажать кнопку «Обновить из оригинала» в инспекторе свойств, то изображение обновится автоматически с учетом всех изменений, внесенных в исходный файл Photoshop.

    Изменение параметров изображения

     Открывает диалоговое окно «Оптимизация изображения» и позволяет оптимизировать изображение.

    Обрезать

     Урезает размер изображения, удаляя нежелательные области из выделенного изображения.

    Повторная выборка

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

    Яркость и контраст

     Регулирует параметры яркости и контрастности изображения.

    Увеличить четкость

     Регулирует четкость изображения.

Редактирование атрибутов специальных возможностей изображений в коде

Если для изображения вставлены атрибуты специальных возможностей, их значения можно редактировать в HTML-коде.

  1. В окне документа выберите изображение.
  2. Выполните одно из следующих действий.
    • Редактируйте соответствующие атрибуты изображения в представлении кода.
    • Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу Control (Macintosh), затем выберите команду «Изменить тег».
    • Измените значение атрибута Alt в инспекторе свойств.

Визуальное изменение размера изображения

Dreamweaver дает возможность визуально изменять размер элементов (изображений, внешних модулей, файлов Shockwave и SWF, апплетов и элементов ActiveX).

Визуальное изменение размера изображения помогает увидеть, как изображение влияет на макет при различном масштабе, но не масштабирует сам файл изображения до указанных пропорций. Если визуально изменить размер изображения в Dreamweaver без масштабирования его файла до нужного размера в программе для редактирования изображений (например Adobe Fireworks), в браузере пользователя при загрузке страницы изображение будет масштабироваться. Это может увеличить время загрузки страницы и привести к неправильному отображению изображения в пользовательском браузере. Для уменьшения времени загрузки и гарантии того, что все экземпляры изображения будут отображены в одинаковом размере, воспользуйтесь графическим редактором для масштабирования изображений.

При изменении размера изображения в Dreamweaver его можно интерполировать для адаптации к новым размерам. При интерполяции добавляются или вычитаются пикселы из файлов изображений JPEG или GIF с измененным размером для как можно более близкого соответствия оригиналу. При этом уменьшается размер файла и улучшается скорость загрузки.

Визуальное изменение размера элемента

  1. Выберите элемент (например, изображение или файл SWF) в области «Окно документа».

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

  2. Измените размеры элемента, выполнив одно из следующих действий.
    • Чтобы настроить ширину элемента, перетащите маркер выделения с правой стороны.
    • Чтобы настроить высоту элемента, перетащите нижний маркер выделения.
    • Чтобы одновременно настроить ширину и высоту элемента, перетащите угловой маркер выделения.
    • Для сохранения пропорций элемента (соотношения ширины к длине) во время настройки размеров перетаскивайте угловой маркер выделения с нажатой клавишей «Shift».
    • Чтобы задать для ширины и высоты элемента конкретный размер (например, 1 х 1 пиксел), введите числовое значение в инспекторе свойств. Визуально можно изменить элементы минимум до размера 8 х 8 пикселов.
  3. Чтобы вернуть исходные размеры измененного элемента, удалите значения в полях «Ш» и «В» инспектора свойств или нажмите кнопку «Сбросить размер» в инспекторе свойств изображения.

Возврат к исходному размеру изображения

  1. Нажмите кнопку «Сбросить размер» в инспекторе свойств изображения.

Интерполяция изображения с измененным размером

  1. Измените размер изображения, как описано выше.
  2. Нажмите кнопку «Повторная выборка» в инспекторе свойств изображения.

    Примечание.

    Интерполировать местозаполнители изображений или отличные от растровых изображений элементы невозможно.

Вставка местозаполнителя изображения

Местозаполнитель изображения — это рисунок, используемый до тех пор, пока не будет готова финальная графика для добавления на веб-страницу. Можно задать размер и цвет местозаполнителя, а также указать для него текстовую метку.

  1. В области «Окно документа» установите курсор в то место, куда необходимо вставить рисунок местозаполнителя.
  2. Выберите пункт меню «Вставка» > «Объекты изображения» > «Местозаполнитель изображения».

  3. В поле «Имя» (необязательно) введите текст, который должен отображаться в местозаполнителе изображения как метка. Если метка не требуется, оставьте данное поле пустым. Имя должно начинаться с буквы и может содержать только буквы и цифры; пробелы и символы верхней части ASCII использовать запрещено.
  4. В полях «Ширина» и «Высота» (обязательно) введите число для задания размера изображения в пикселах.
  5. В поле «Цвет» (необязательно) выполните одно из следующих действий для применения цвета.
    • Выберите цвет с помощью палитры цветов.
    • Введите шестнадцатеричное значение цвета (например, #FF0000).
    • Введите имя веб-цвета (например, red).
  6. В поле «Замещающий текст» (необязательно) введите текст, описывающий изображение для пользователей текстовых браузеров.

    Примечание.

    В HTML-код автоматически вставляется тег изображения с пустым атрибутом src.

  7. Нажмите кнопку «ОК».

    Цвет, атрибуты размера и метка местозаполнителя отображаются следующим образом.

    Местозаполнитель изображения с атрибутами.

    При просмотре в браузере метка и размер текста не отображаются.

Замена местозаполнителя изображения

Местозаполнитель изображения не отображается в браузере как изображение. Перед публикацией сайта следует заменить все добавленные местозаполнители изображений файлами в веб-формате, например GIF или JPEG.

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

  1. Выполните в области «Окно документа» одно из следующих действий.
    • Дважды щелкните местозаполнитель изображения.
    • Щелкните местозаполнитель изображения, чтобы его выделить, затем в инспекторе свойств (Окно > Свойства) щелкните значок папки рядом с текстовым полем «Источник».
  2. В диалоговом окне «Выбрать исходный файл изображения» перейдите к изображению, которым следует заменить местозаполнитель, и нажмите кнопку «ОК».

Задание свойств местозаполнителя изображения

Чтобы задать свойства для местозаполнителя изображения, выберите местозаполнитель в области «Окно документа», после чего выберите «Окно» > «Свойства», чтобы отобразить инспектор свойств. Для просмотра всех свойств щелкните стрелку разворачивания в правом нижнем углу.

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

Местозаполнитель изображения в инспекторе свойств.

В инспекторе свойств местозаполнителя серое текстовое поле и поле «Выровнять» отключаются. Эти свойства можно задать в инспекторе свойств изображения при замене им местозаполнителя.

  1. Задайте любой из следующих параметров.

    W и H (ширина и высота)

    Задают ширину и высоту местозаполнителя изображения в пикселах.

    Источник

    Указывает исходный файл изображения. Для местозаполнителя изображения это поле остается пустым. Нажмите кнопку «Обзор», чтобы выбрать изображение для замены рисунка местозаполнителя.

    Ссылка

    Указывает гиперссылку на местозаполнитель изображения. Перетащите значок «Указать файл» на файл на панели «Файлы», щелкните значок папки для перехода к документу на сайте или введите URL-адрес вручную.

    Alt

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

    Создать

    Запускает Fireworks для создания изображения для замены. Если на компьютере не установлено приложение Fireworks, кнопка «Создать» будет неактивна.

    Обновить из оригинала

    Если веб-изображение (т. е. изображение на странице Dreamweaver) не соответствует исходному файлу Photoshop, Dreamweaver обнаруживает обновление исходного файла и отображает один из значков смарт-объекта красным цветом. Если выбрать веб-изображение в представлении «Дизайн» и нажать кнопку «Обновить из оригинала» в инспекторе свойств, то изображение обновится автоматически с учетом всех изменений, внесенных в исходный файл Photoshop.

    Цвет

    Указывает цвет местозаполнителя изображения.

Редактирование изображений в Dreamweaver

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

Функции редактирования изображений

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

Примечание.

Для работы функций редактирования изображений Dreamweaver не требуется наличие установленного приложения Fireworks или других редакторов изображений.

  1. Выберите меню «Изменение» > «Изображение». Выберите любые из следующих функций Dreamweaver по обработке изображений.

    Повторная выборка

    Добавление или вычитание пикселов из файлов изображений JPEG или GIF с измененным размером для как можно более близкого соответствия оригиналу. При этом уменьшается размер файла и улучшается скорость загрузки.

    При изменении размера изображения в Dreamweaver его можно интерполировать для адаптации к новым размерам. При интерполяции растрового объекта к нему добавляются или из него удаляются пикселы для увеличения или уменьшения размера. При интерполяции изображения к более высокому разрешению обычно происходит незначительная потеря качества. При интерполяции к более низкому разрешению, однако, всегда происходит потеря данных и обычно — снижение качества.

    Обрезать

    Редактирование изображений путем уменьшения их площади. Обычно требуется кадрировать изображение для усиления акцента на объекте съемки и для удаления нежелательных элементов, окружающих центр внимания в изображении.

    Яркость и контраст

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

    Увеличить четкость

    Регулировка фокуса изображения путем увеличения контрастности обнаруженных в нем краев. При сканировании изображения или съемке цифрового фото по умолчанию в большинстве программ захвата изображений выполняется сглаживание краев изображенных объектов. Это предотвращает потерю очень мелких деталей в пикселах, из которых составляются цифровые изображения. Однако чтобы акцентировать детали в файлах цифровых изображений, часто необходимо увеличить их четкость, усилив контрастность краев и увеличив резкость изображения.

    Примечание.

    Функции редактирования изображений Dreamweaver можно использовать только для изображений в формате JPEG, GIF и PNG. Другие форматы файлов растровых изображений с помощью данных функций редактировать нельзя.

Кадрирование изображения

Dreamweaver позволяет кадрировать (обрезать) изображения из файлов растровых рисунков.

Примечание.

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

  1. Откройте страницу, содержащую кадрируемое изображение, выделите его и выполните одно из следующих действий.
    • Щелкните значок «Кадрировать»  в инспекторе свойств изображения.
    • Выберите меню Изменение > Изображение > Кадрирование.
    • Вокруг выделенного изображения появятся маркеры кадрирования.
  2. Отрегулируйте маркеры так, чтобы окружить ими область изображения, которую требуется оставить.
  3. Дважды щелкните в области кадрирования или нажмите клавишу «Enter», чтобы кадрировать выделенное изображение.
  4. Диалоговое окно уведомит вас, что файл кадрируемого изображения будет изменен на диске. Нажмите кнопку «ОК». Удаляется каждый пиксел выбранного растрового изображения, расположенный за пределами области обрезки, но другие объекты в изображении остаются.
  5. Предварительно просмотрите изображение и убедитесь, что оно соответствует ожиданиям. Если это не так, выберите «Редактирование» > «Отменить "Кадрирование"», чтобы вернуться к исходному изображению.

    Примечание.

    Эффект команды «Кадрирование» можно отменить (и вернуться к исходному файлу изображения) до выхода из программы Dreamweaver или при изменении файла во внешней программе для редактирования изображений.

Оптимизация изображения

Можно оптимизировать изображения на веб-страницах в Dreamweaver.

  1. Откройте страницу, содержащую оптимизируемое изображение, выделите его и выполните одно из следующих действий.
    • Нажмите кнопку «Изменить параметры изображения»  в инспекторе свойств.
    • Выберите меню Изменение > Изображение > Оптимизировать.
  2. Произведите необходимые изменения в диалоговом окне «Оптимизация изображения» и нажмите кнопку «ОК».

Увеличение четкости изображения

При увеличении четкости изображения усиливается контрастность пикселов вокруг краев объектов, что увеличивает резкость или четкость изображения.

  1. Откройте страницу, содержащую изображение, в котором нужно увеличить четкость, выделите его и выполните одно из следующих действий.
    • Нажмите кнопку «Увеличить четкость»  в инспекторе свойств изображения.
    • Выберите меню Изменение > Изображение > Четкость.
  2. Можно указать степень четкости, которая будет применена к изображению в Dreamweaver, путем перетаскивания ползунка или ввода значения от 0 до 10 в текстовом поле. При настройке четкости изображения в диалоговом окне «Увеличить четкость» можно предварительно просматривать изменения в изображении.
  3. Получив требуемый результат, нажмите кнопку «ОК».
  4. Сохраните внесенные изменения командой меню «Файл» > «Сохранить» или вернитесь к исходному изображению командой «Редактирование» > «Отменить "Увеличить четкость"».

    Примечание.

    Отменить эффект команды «Увеличить четкость» (и вернуться к исходному файлу изображения) можно только до сохранения страницы, содержащей изображение. После сохранения страницы внесенные в изображения изменения окончательно сохраняются.

Настройка яркости и контрастности изображения

Средство «Яркость/Контрастность» изменяет контрастность или яркость пикселов в изображении. Это влияет на подсветку, тени и средние тона изображения. Средство «Яркость/контраст» обычно используется для коррекции чрезмерно темных или светлых изображений.

  1. Откройте страницу, содержащую настраиваемое изображение, выделите его и выполните одно из следующих действий.
    • Нажмите кнопку «Яркость и контраст»  в инспекторе свойств изображения.
    • Выберите Изменение > Изображение > Яркость/Контрастность.
  2. Перетащите ползунки «Яркость» и «Контрастность» для регулировки параметров. Значения изменяются в диапазоне от -100 до 100.
  3. Нажмите кнопку «ОК».

Создание замещающего изображения

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

Для создания изображения выделения необходимы два изображения: основное (отображаемое при первой загрузке страницы) и вспомогательное (изображение, которое появляется при перемещении указателя по основному изображению). Оба изображения должны иметь одинаковый размер, в противном случае Dreamweaver изменит размеры второго изображения в соответствии с первым.

Замещающие изображения автоматически настраиваются на реакцию на событие onMouseOver. Можно задать изображение для реакции на другое событие (например, щелчок мышью) или изменить замещающее изображение.

  1. В области «Окно документа» установите курсор в том месте, где необходимо вставить изображение выделения.
  2. Вставьте изображение выделения одним из следующих способов.
    • В категории «Общие» на панели «Вставка» нажмите кнопку «Изображения» и выберите значок «Замещающее изображение». Когда значок «Замещающее изображение» находится на панели вставка, его можно перетащить в область «Окно документа».
    • Выберите меню Вставка > Объекты изображения > Замещающее изображение.
  3. Задайте параметры и нажмите кнопку «ОК».

    Имя изображения

    Имя заменяющего изображения.

    Исходное изображение

    Изображение, которое должно отображаться при загрузке страницы. Введите путь в текстовое поле или нажмите кнопку «Обзор», чтобы выбрать изображение.

    Замещающее изображение

    Изображение, которое должно отображаться при наведении указателя на исходное изображение. Введите путь или нажмите кнопку «Обзор» и выберите изображение.

    Загрузка замещающего изображения

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

    Замещающий текст

    Текст, описывающий изображение для пользователей текстового браузера (необязательно).

    При нажатии перейти по URL-адресу

    Файл, который следует открывать по щелчку на замещающем изображении. Введите путь или нажмите кнопку «Обзор» и выберите файл.

    Примечание.

    Если не задать ссылку для изображения, Dreamweaver вставит в исходный HTML-код пустую ссылку (#), активируемую по наведению указателя мыши. Если удалить пустую ссылку, замещающее изображение перестанет работать.

  4. Выберите меню Файл > Просмотреть в браузере или нажмите клавишу F12.

  5. В браузере перемещайте указатель по исходному изображению, чтобы отобразить заменяющее.

    Примечание.

    Эффект заменяющего изображения в представлении «Дизайн» недоступен.

Использование внешнего графического редактора

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

В качестве основного внешнего редактора можно установить Fireworks. Можно также задать типы файлов, которые будут открываться в редакторе, а также задать несколько редакторов изображений. Например, можно настроить запуск Fireworks для редактирования файлов GIF, а для файлов JPG или JPEG установить другой редактор изображений.

Запуск внешнего графического редактора

  1. Выполните одно из следующих действий.
    • Дважды щелкните изображение, которое необходимо изменить.
    • Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу «Control» (Macintosh), изображение, которое необходимо изменить, затем выберите Изменить с помощью > Обзор и выберите редактор.
    • Выделите изображение, которое необходимо изменить, и выберите «Изменить» в редакторе свойств.
    • Дважды щелкните файл изображения на панели «Файлы», чтобы запустить основной редактор изображений. Если редактор изображений не указан, Dreamweaver запускает редактор по умолчанию для данного типа файлов.

    Примечание.

    При открытии изображения с панели «Файлы» функции интеграции с Fireworks не задействованы; в Fireworks не открывается исходный файл PNG. Для использования функций интеграции с Fireworks следует открывать изображения из области «Окно документа».

    Если после возврата в окно Dreamweaver изображение не обновилось, выделите его и нажмите кнопку «Обновить» в инспекторе свойств.

Задание внешнего графического редактора для существующего типа файлов

Можно выбрать редактор изображений, в котором будут открываться и редактироваться графические файлы.

  1. Откройте диалоговое окно установок «Типы файлов и редакторы», выполнив одно из следующих действий.
    • Выберите меню «Редактирование» > «Установки» (Windows) или Dreamweaver > «Установки» (Macintosh), после чего в списке категорий слева выберите категорию «Типы файлов и редакторы».
    • Выберите Редактирование > Изменить с помощью: Внешний редактор, после чего выберите категорию Типы файлов и редакторы.
  2. В списке «Extensions» выберите расширение, для которого следует назначить внешний редактор.
  3. Нажмите кнопку «Добавить» (+) над списком «Редакторы».
  4. В диалоговом окне «Выбрать внешний редактор» перейдите к приложению, которое следует запускать как редактор для указанного типа файлов.

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

  6. Чтобы установить для этого типа файлов дополнительный редактор, повторите шаги 3 и 4.

    Dreamweaver будет автоматически открывать основной редактор для изменения изображений указанного типа. Другие перечисленные редакторы можно выбрать из контекстного меню изображения в области «Окно документа».

Добавление нового типа файлов в список «Расширения»

  1. Откройте диалоговое окно установок «Типы файлов и редакторы», выполнив одно из следующих действий.

    • Выберите меню Редактирование > Установки (Windows) или Dreamweaver > Установки (Macintosh), после чего в списке категорий слева выберите категорию Типы файлов и редакторы.
    • Выберите Редактирование > Изменить с помощью: Внешний редактор, после чего выберите категорию Типы файлов и редакторы.
  2. В диалоговом окне установок «Типы файлов и редакторы» нажмите кнопку «Добавить» (+) над списком «Расширения».

    В списке «Расширения» появится текстовое поле.

  3. Введите расширение типа файлов, которое следует открывать в данном редакторе.
  4. Чтобы выбрать внешний редактор для типа файлов, нажмите кнопку «Добавить» (+) над списком «Редакторы».
  5. В открывшемся диалоговом окне выберите приложение, в котором нужно редактировать изображения данного типа.
  6. Чтобы сделать этот редактор основным для изображений данного типа, нажмите кнопку «Сделать главным».

Изменение существующей настройки редактора

  1. Откройте диалоговое окно установок «Типы файлов и редакторы», выполнив одно из следующих действий.

    • Выберите меню Редактирование > Установки (Windows) или Dreamweaver > Установки (Macintosh), после чего в списке категорий слева выберите категорию Типы файлов и редакторы.
    • Выберите Редактирование > Изменить с помощью: Внешний редактор, после чего выберите категорию Типы файлов и редакторы.
  2. В диалоговом окне установок «Типы файлов и редакторы» из списка «Расширения» выберите изменяемый тип файлов, чтобы просмотреть существующие редакторы.

  3. В списке «Редакторы» выберите редактор, который следует затронуть, затем выполните одно из следующих действий.
    • Чтобы добавить или удалить редактор, нажмите соответственно кнопку «Добавить» (+) или «Удалить» (–) над списком «Редакторы».
    • Чтобы изменить редактор, запускаемый по умолчанию, нажмите кнопку «Сделать главным».

Применение вариантов поведения к изображениям

Любой из доступных вариантов поведения можно применить к изображению или его активной области. При применении поведения к активной области Dreamweaver вставляет исходный код HTML в тег area. Три варианта поведения применяются исключительно к изображениям: «Предварительная загрузка изображения», «Замена изображений» и «Восстановление замененных изображений».

Предварительная загрузка изображений

Предварительно загружает в кэш браузера изображения, не отображаемые на странице в данный момент (например, предназначенные для замены посредством вариантов поведения, элементов AP или JavaScript). Это предотвращает задержки, вызванные загрузкой изображений в то время, когда они показываются.

Замена изображений

Заменяет одно изображение другим путем изменения атрибута SRC тега img. С помощью данного действия можно создавать заменяющие изображения для кнопок и другие эффекты изображений (включая замену более одного изображений одновременно).

Восстановление замененных изображений

Восстанавливает последний набор замененных изображений из предыдущих исходных файлов. Это действие автоматически добавляется по умолчанию при присоединении к объекту действия «Замена изображений»; таким образом, потребности в его вводе вручную не должно возникать.

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

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет