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

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

• На панели Вставка выберите HTML из раскрывающегося списка. Нажмите кнопку Изображение. Дважды щелкните или перетащите значок в область окна «Документ» (или в окно «Представление кода», если вы работаете с кодом).

• Выберите пункт меню «Вставка» > «Изображение».

• Перетащите изображение с панели «Ресурсы» («Окно» > «Ресурсы») в нужное место области «Окно документа», а затем перейдите к шагу 3.

• Перетащите изображение с панели Файлы в требуемое место окна «Документ»; затем перейдите к шагу 3.

• Перетащите изображение с рабочего стола в нужное место области «Окно документа»; затем перейдите к шагу 3.

• В представлении «Интерактивный просмотр» перетащите изображение с панели Извлечение или вкладки Слои. Отпустите элемент сверху, снизу, справа или слева от элемента, основанного на интерактивных направляющих. Или переместите этот элемент в определенное место в структуре документа, нажав </> и воспользовавшись средством быстрого просмотра элемента.

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

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

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

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

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

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

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

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

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

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

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

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

• _blank — загрузка связанного файла в новом окне браузера без названия.
• _new — загрузка связанного файла в новом окне браузера.
•  _parent — загрузка связанного файла в родительском наборе фреймов или окне фрейма, содержащего ссылку. Если фрейм, содержащий ссылку, не является вложенным, связанный файл загружается в полном окне браузера.
• _self — загрузка связанного файла в том же фрейме или окне, что и ссылка. Данное назначение является назначением по умолчанию. Это значение не требуется указывать в явном виде.
•  _top — загрузка связанного файла в полном окне браузера с удалением всех фреймов.

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

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

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

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

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

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

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

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

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

• Редактируйте соответствующие атрибуты изображения в представлении кода.

• Измените атрибуты изображения в представлении «Интерактивный просмотр» с помощью быстрого инспектора свойств.

• Измените значение атрибута Alt в инспекторе свойств.

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

• Чтобы настроить ширину элемента, перетащите маркер выделения с правой стороны.

• Чтобы настроить высоту элемента, перетащите нижний маркер выделения.

• Чтобы одновременно настроить ширину и высоту элемента, перетащите угловой маркер выделения.

• Для сохранения пропорций элемента (соотношения ширины к длине) во время настройки размеров перетаскивайте угловой маркер выделения с нажатой клавишей «Shift».

• Чтобы задать конкретные значения для ширины и высоты элемента (например, 1 х 1 пиксел), используйте инспектор свойств. Введите числовые значения в поля W и H. Визуально можно изменить размеры элементов до размера 8 х 8 пикселей минимум.

Чтобы восстановить исходные размеры измененного элемента, удалите значения в полях W и H в инспекторе свойств. Также можно нажать кнопку Сбросить размер в инспекторе свойств изображения.

Измените размер изображения, как описано в разделе Изменение размера изображения.

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

Выберите «Правка» > «Изображение». Можно задать следующие функции редактирования изображений Dreamweaver.

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

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

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

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

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

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

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

• Нажмите на значок инструмента «Рамка» в инспекторе свойств изображения.

• Выберите меню Правка > Изображение > Кадрирование.

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

Диалоговое окно уведомит вас, что файл кадрируемого изображения будет изменен на диске. Нажмите кнопку ОК. 

Удаляется каждый пиксел выбранного растрового изображения, расположенный за пределами области обрезки, но другие объекты в изображении остаются.

Предварительно просмотрите изображение и убедитесь, что оно соответствует ожиданиям. Если это не так, выберите Редактирование > Отменить «Кадрирование», чтобы вернуться к исходному изображению.

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

• Нажмите кнопку Изменить параметры изображения в инспекторе свойств.

• Последовательно выберите Правка > Изображение > Оптимизировать.

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

• Нажмите кнопку Увеличить четкость в инспекторе свойств изображения.

• Выберите Правка > Изображение > Четкость.

Чтобы указать степень четкости, которая будет применена к изображению в Dreamweaver, перетащите ползунок элемента управления. Также можно ввести значение в диапазоне от 0 до 10 в текстовое поле. При настройке резкости изображения в диалоговом окне Увеличить четкость можно предварительно просматривать изменения в изображении.

Сохраните внесенные изменения командой меню Файл > Сохранить или вернитесь к исходному изображению командой Редактирование > Отменить «Увеличить четкость».

• Нажмите кнопку Яркость и контрастность в инспекторе свойств изображения.

• Выберите Правка > Изображение > Яркость/Контрастность.

• На панели Вставка выберите HTML из раскрывающегося списка. Выберите Изображение выделения из списка вариантов.

• Выберите Вставка > HTML > Изображение выделения.

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

Имя изображения выделения.

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

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

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

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

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

Для предварительного просмотра изображения выделения выберите Файл > Просмотр в реальном времени или нажмите клавишу F12.

Чтобы открыть внешний редактор, выполните одно из следующих действий.

• Дважды щелкните изображение, которое необходимо отредактировать.

• Щелкните правой кнопкой мыши (Windows) редактируемое изображение или нажмите для него клавишу Control (Macintosh). Затем последовательно нажмите Редактировать с помощью > Обзор и выберите редактор.

• Выделите изображение для редактирования и нажмите Правка в инспекторе свойств.

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

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

Выберите Правка > Настройки (Windows) или Dreamweaver > Настройки (macOS), затем выберите Типы файлов и редакторы из списка «Категории» на левой панели.

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

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

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

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

Выберите Правка > Настройки (Windows) или Dreamweaver > Настройки (macOS), затем выберите Типы файлов и редакторы из списка «Категории» на левой панели.

В диалоговом окне установок «Типы файлов и редакторы» нажмите кнопку «Добавить» (+) над списком «Расширения».

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

Выберите расширение типа файлов, которые будут открываться в редакторе.

Чтобы выбрать внешний редактор для типа файлов, нажмите кнопку «Добавить» (+) над списком «Редакторы».

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

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

Выберите Правка > Настройки (Windows) или Dreamweaver > Настройки (macOS), затем выберите Типы файлов и редакторы из списка «Категории» на левой панели.

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

В списке «Редакторы» выберите редактор, который следует изменить, затем выполните одно из следующих действий.

• Чтобы добавить или удалить редактор, нажмите соответственно кнопку Добавить (+) или Удалить (–) над списком «Редакторы».

• Чтобы изменить редактор, запускаемый по умолчанию, нажмите кнопку Сделать основным.