В документе Dreamweaver поместите курсор вставки туда, где должно появиться изображение, и выполните одно из действий, описанных ниже.
Последнее обновление
25 апр. 2024 г.
Fireworks и Dreamweaver обеспечивают хорошо налаженный процесс редактирования, оптимизации и размещения графических веб-объектов на HTML-страницах.
Примечание
Функция не поддерживается в версиях Adobe Dreamweaver.
Добавление изображения Fireworks
Dreamweaver и Fireworks распознают и совместно используют многие процедуры редактирования файла, включая изменение ссылок, карты ссылок, фрагменты таблицы и многое другое. Вместе оба приложения обеспечивают хорошо налаженный процесс редактирования, оптимизации и размещения файлов веб-графики на HTML страницах.
Можно поместить экспортированную графику из Fireworks непосредственно в документ Dreamweaver с помощью команды «Вставить изображение» либо создать новое изображение Fireworks из шаблона изображения Dreamweaver.
Выберите «Вставка» > «Изображение».
В категории «Общие» панели «Вставка» нажмите кнопку «Изображение» или перетащите ее в пределы документа.
Перейдите к необходимому экспортируемому файлу Fireworks и нажмите кнопку «ОК» (Windows) или Open (Macintosh).
Примечание
Если файла Fireworks нет на текущем сайте Dreamweaver, то появляется запрос на копирование файла в корневую папку. Нажмите кнопку «Да».
Редактирование изображения Fireworks или таблицы из Dreamweaver
При открытии и редактировании изображения или фрагмента изображения, который является частью таблицы Fireworks, Dreamweaver запускает Fireworks, где открывается PNG-файл, из которого, в свою очередь, было экспортировано изображение или таблица.
Примечание
Для этого необходимо, чтобы Fireworks был установлен как основной внешний графический редактор для PNG файлов. Кроме того, Fireworks часто бывает редактором по умолчанию для JPEG- и GIF-файлов, хотя в качестве редактора по умолчанию для этих типов файлов можно задать Photoshop.
Если изображение является частью таблицы Fireworks, можно открыть всю таблицу Fireworks для редактирования, если комментарий <!--fw table--> присутствует в коде HTML.Если исходный PNG-файл был экспортирован из Fireworks на сайт Dreamweaver с помощью параметра Dreamweaver «Стиль HTML и изображений», то комментарии к таблице Fireworks автоматически добавляются в HTML-код.
В программе Dreamweaver откройте инспектор свойств («Окно» > «Свойства»), если он еще не открыт.
Чтобы выбрать изображение или фрагмент изображения, щелкните его.
При выборе изображения, которое было экспортировано из Fireworks, инспектор свойств определяет его как изображение или таблицу Fireworks и отображает имя исходного PNG-файла.
Чтобы запустить Fireworks для редактирования, выполните одно из действий, описанных ниже.
В инспекторе свойств нажмите кнопку «Изменить».
Дважды щелкните выбранное изображение, удерживая клавишу Control (Windows) или Command (Macintosh).
Щелкните выбранное изображение правой кнопкой мыши (Windows) или щелкните его, удерживая клавишу Control (Macintosh), и выберите в контекстном меню пункт «Изменить с помощью Fireworks».
Примечание
Если приложению Fireworks не удается определить расположение исходного PNG-файла, необходимо указать его. В процессе работы над исходным файлом Fireworks изменения сохраняются в исходном и экспортируемом файлах. В других случаях обновляется только экспортируемый файл.
Отредактируйте исходный PNG-файл в Fireworks и нажмите кнопку «Готово».
Fireworks сохраняет изменения в PNG-файле, экспортирует обновленное изображение (или HTML и изображения) и возвращает фокус приложению Dreamweaver. В Dreamweaver появляется обновленное изображение или таблица.
Руководство по интеграции Dreamweaver и Fireworks см. на веб-сайте www.adobe.com/go/vid0188_ru.
Оптимизация изображения Fireworks в Dreamweaver
С помощью Dreamweaver можно быстро внести изменения в изображения и анимацию Fireworks. В Dreamweaver можно изменять настройки оптимизации, параметры анимации, размер и область экспортируемого изображения.
В Dreamweaver выберите необходимое изображение и выполните одно из действий, описанных ниже.
Выберите меню «Команда» > «Оптимизировать изображение».
Нажмите кнопку Изменить параметры изображения в инспекторе свойств.
Укажите параметры в диалоговом окне «Предварительный просмотр изображений».
Для редактирования настроек оптимизации выберите вкладку «Параметры».
Для изменения размера и области экспортируемого изображения выберите вкладку «Файл».
По окончании нажмите кнопку «ОК».
Изменение заполнителей изображений Dreamweaver с помощью Fireworks
В документе Dreamweaver можно создать местозаполнитель изображения, запустить Fireworks и создать там изображение или таблицу, а затем заменить этот заполнитель.
Чтобы создать новое изображение из местозаполнителя, необходимо, чтобы были установлены оба приложения: как Dreamweaver, так и Fireworks.
Убедитесь, что Fireworks установлен в качестве графического редактора для PNG-файлов.
Чтобы выбрать местозаполнитель, щелкните его в окне «Документ».
Чтобы запустить Fireworks в режиме «Редактирование из программы Dreamweaver», выполните один из следующих шагов.
В инспекторе свойств нажмите кнопку «Создать».
Нажмите клавишу Control (Windows) или Command (Macintosh) и затем дважды щелкните местозаполнитель изображения.
Щелкните местозаполнитель правой кнопкой мыши (Windows) или щелкните его, удерживая клавишу Control (Macintosh), затем выберите «Создать изображение в Fireworks».
Использование параметров Fireworks при создании изображения.
Fireworks распознает следующие параметры местозаполнителя изображения, которые были установлены в Dreamweaver: размер изображения (которое соответствует размеру холста Fireworks), идентификатор изображения (который Fireworks использует как имя документа по умолчанию для создаваемых исходного и экспортируемого файлов) и выравнивание текста. Кроме того, Fireworks распознает ссылки и некоторые варианты поведения (такие как замена изображений, всплывающее меню и задание текста), которые присоединены к заполнителю изображения при работе в Dreamweaver.
Примечание
Хотя Fireworks не отображает ссылки, добавленные в местозаполнитель изображения, эти ссылки сохраняются. При рисовании активной области и добавлении ссылок в Fireworks, ссылки, добавленные в местозаполнитель изображения в Dreamweaver, не удаляются. Однако если вырезать фрагмент в Fireworks и вставить его в новое изображение, то ссылки в документе Dreamweaver будут удалены.
Fireworks не распознает следующие параметры заполнителя изображения: выравнивание изображения, цвет, вертикальный и горизонтальный отступы и карты. Они отключены в инспекторе свойств местозаполнителя изображения.
По завершении нажмите кнопку «Готово», чтобы отобразить диалоговое окно сохранения.
В текстовом поле «Сохранить в» выберите папку, указанную в качестве папки локального сайта Dreamweaver.
Если при вставке местозаполнителя изображения в документ Dreamweaver указано его имя, то Fireworks поместит его в поле «Имя файла». Это имя можно изменить.
Нажмите кнопку «Сохранить», чтобы сохранить PNG-файл.
Появится диалоговое окно «Экспорт». С помощью этого окна выполняется экспорт изображений в формат GIF, или JPEG, или, в случае фрагментированных изображений, в формат «HTML и изображения».
В поле «Сохранить в» укажите папку локального сайта Dreamweaver.
В поле «Имя» автоматически отобразится указанное имя PNG-файла. Это имя можно изменить.
В поле Сохранить как тип укажите тип файла или файлов, в который необходимо экспортировать: например, «Только изображения» или «HTML и изображения».
Для сохранения экспортированного файла нажмите кнопку «Сохранить».
Файл будет сохранен, фокус вернется к Dreamweaver. В документе Dreamweaver экспортируемый файл или таблица Fireworks заменяет местозаполнитель изображения.
О всплывающих меню Fireworks
Fireworks позволяет быстро и просто создать всплывающие меню на основе CSS.
В дополнение к расширяемости и быстрой загрузке всплывающие меню, созданные с помощью Fireworks, дают следующие преимущества:
Пункты меню доступны для индексации поисковым системам.
Пункты меню доступны для программ чтения с экрана, что обеспечивает странице специальные возможности.
Код, сформированный Fireworks, удовлетворяет стандартам, и его можно проверять.
Можно редактировать всплывающее меню Fireworks с помощью Dreamweaver или Fireworks, но не одновременно. Изменения, внесенные в Dreamweaver, не сохраняются в Fireworks.
Редактирование всплывающего меню Fireworks в Dreamweaver
Можно создать всплывающее меню в Fireworks 8 или более поздней версии и затем отредактировать его с помощью Dreamweaver или Fireworks (используя двунаправленное редактирование), но не одновременно. При редактировании меню в Dreamweaver, а затем в Fireworks, все предыдущие изменения будут потеряны, за исключением содержимого текста.
Если вы предпочитаете редактировать меню с помощью Dreamweaver, то можно создать его в Fireworks, а затем использовать Dreamweaver только для редактирования и настройки меню.
Если вы предпочитаете редактировать меню в Fireworks, то можно использовать возможность двунаправленного редактирования в Dreamweaver, но не редактировать его непосредственно в Dreamweaver.
В Dreamweaver выберите таблицу Fireworks, которая содержит всплывающее меню, и нажмите кнопку «Изменить» в инспекторе свойств.
Исходный PNG-файл откроется в Fireworks.
В Fireworks отредактируйте меню с помощью редактора всплывающих меню и нажмите кнопку «Готово» на панели инструментов Fireworks.
Fireworks отправляет отредактированное всплывающее меню обратно в Dreamweaver.
Если всплывающее меню создано в Fireworks MX 2004 или более ранней версии, то его можно редактировать в Dreamweaver с помощью диалогового окна «Отображение всплывающего меню», доступного на панели «Поведение».
Редактирование всплывающего меню, созданного в Fireworks MX 2004 или более ранней версии
В Dreamweaver выберите активную область или изображение, которое вызывает всплывающее меню.
На панели «Поведение» (Shift+F3) дважды щелкните «Показать всплывающее контекстное меню» в списке «Действия».
Внесите необходимые изменения в диалоговом окне «Всплывающее меню» и нажмите кнопку «ОК».
Настройка установок запуска и редактирования исходных файлов Fireworks
При использовании редактировании изображений в Fireworks графика на веб-страницах обычно экспортируется с помощью Fireworks из исходного PNG-файла. При открытии файла изображения для редактирования в Dreamweaver Fireworks автоматически открывает исходный PNG-файл или запрашивает его расположение, если он не найден. При необходимости можно установить параметры в Fireworks, чтобы вставленное изображение уже было открыто в Dreamweaver, либо приложение Fireworks предлагало выбрать варианты использования вставленного изображения или исходного файла Fireworks каждый раз при открытии изображения в Dreamweaver.
Примечание
Dreamweaver распознает установки запуска и редактирования Fireworks только в отдельных случаях. В частности, необходимо открыть и оптимизировать изображение, которое не является частью таблицы Fireworks и содержит верный путь в заметках разработчика к исходному PNG-файлу.
В Fireworks выберите пункт «Правка» > «Настройки» (Windows) или «Fireworks» > «Настройки» (Macintosh) и выберите вкладку «Запуск и редактирование» (Windows) или пункт «Запуск и редактирование» из всплывающего меню (Macintosh).
Установите параметры, которые будут использоваться при помещении редактируемых или оптимизируемых изображений Fireworks во внешние приложения.
Всегда использовать исходный PNG
Автоматически открывает PNG-файл Fireworks, указанный в заметках разработчика как источник помещаемого изображения. Обновления применяются к исходному PNG-файлу и соответствующему изображению.
Не использовать исходный PNG
Автоматически открывает помещенное изображение Fireworks независимо от того, существует ли исходный PNG-файл. Обновления применяются только к помещенным изображениям.
Спрашивать при запуске
Отображает сообщение, запрашивающее открытие исходного PNG-файла. Кроме того, в этом сообщении можно указать глобальные установки запуска и редактирования.
Вставка HTML-кода Fireworks в документ Dreamweaver
С помощью команды «Экспорт» в Fireworks можно экспортировать и сохранять оптимизированные изображения и HTML-файлы внутри папки сайта Dreamweaver. Затем можно добавить файл в Dreamweaver. Dreamweaver позволяет вставлять сформированный Fireworks HTML-код, включающий связанные изображения, фрагменты и сценарии JavaScript, в документ.
В документе Dreamweaver поместите курсор вставки в том месте, где следует вставить HTML-код Fireworks.
Выполните одно из действий, описанных ниже.
Выберите меню «Вставка» > «Объекты изображения» > «Fireworks HTML».
В категории «Общие» панели «Вставка» нажмите кнопку «Изображение» и выберите параметр «Вставить HTML Fireworks» из всплывающего меню.
Чтобы выбрать HTML-файл Fireworks, нажмите кнопку «Обзор».
Если файл в дальнейшем не понадобится, выберите меню «Удалить файл после вставки». Выбор этого параметра не оказывает никакого влияния на исходный PNG-файл, связанный с HTML-файлом.
Примечание
Если HTML-файл находится на сетевом диске, он будет безвозвратно удален без перемещения в Корзину или папку «Мусор».
Нажмите кнопку «ОК», чтобы вставить HTML-код, а также связанные с ним изображения, фрагменты и код JavaScript в документ Dreamweaver.
Вставка HTML-кода Fireworks в Dreamweaver
Быстрый способ поместить сформированные Fireworks изображения или таблицы в Dreamweaver — это копирование и вставка HTML-кода Fireworks непосредственно в документ Dreamweaver.
Копирование и вставка HTML-кода Fireworks в Dreamweaver
В Fireworks, выберите «Правка» > «Копировать код HTML».
Следуйте указаниям мастера, который поможет установить параметры для экспорта HTML и изображений. При запросе укажите папку сайта Dreamweaver в качестве целевой для экспортируемых изображений.
Мастер экспортирует изображения в указанное место назначения и копирует HTML-код в буфер обмена.
В документе Dreamweaver поместите курсор вставки в том месте, где следует вставить HTML-код, и выберите команды «Правка» > «Вставить Fireworks HTML».
Весь код HTML и JavaScript, связанный с экспортируемыми файлами Fireworks, копируется в документ Dreamweaver, все ссылки на изображения обновляются.
Экспорт и вставка HTML-кода Fireworks в Dreamweaver
В Fireworks выберите «Файл» > «Экспорт».
Укажите папку сайта Dreamweaver в качестве целевой для экспортируемых изображений.
Во всплывающем меню «Экспорт» выберите «HTML и изображения».
Во всплывающем меню HTML выберите пункт «Копировать в буфер обмена» и нажмите кнопку «Экспорт».
В документе Dreamweaver поместите курсор вставки в то место, куда следует вставить экспортируемый HTML-код, и выберите «Правка» > «Вставить Fireworks HTML».
Весь код HTML и JavaScript, связанный с экспортируемыми файлами Fireworks, копируется в документ Dreamweaver, все ссылки на изображения обновляются.
Обновление HTML-кода Fireworks, помещенного в Dreamweaver
В Fireworks команда «Файл» > «Обновить HTML» является альтернативой обновления файлов Fireworks, помещенных в Dreamweaver путем запуска и редактирования. С помощью команды «Обновить HTML» можно отредактировать исходное изображение формата PNG в Fireworks и затем автоматически обновить экспортируемые HTML-код и файлы изображений, помещенные в документ Dreamweaver. Эта команда позволяет обновить файлы Dreamweaver, даже когда Dreamweaver не запущен.
В Fireworks откройте исходный PNG-файл и внесите изменения.
Выберите «Файл» > «Сохранить».
В Fireworks выберите «Файл» > «Обновить HTML».
Выберите файл Dreamweaver, содержащий код HTML, который необходимо обновить, затем нажмите кнопку «Открыть».
Перейдите в целевую папку, в которую следует поместить обновленные файлы изображений, и нажмите кнопку «Выбрать» (Windows) или Choose (Macintosh).
Fireworks обновит HTML-код и код JavaScript в документе Dreamweaver. Кроме того, Fireworks экспортирует обновленные изображения, связанные с HTML-кодом, и поместит изображения в указанную целевую папку.
Если приложению Fireworks не удастся найти соответствующий HTML-код для обновления, то в документ Dreamweaver можно будет вставить новый HTML-код. Fireworks помещает JavaScript-фрагмент нового кода в начало документа, а таблицу HTML или ссылку на изображение — в конец.
Создание веб-фотоальбома
Начиная с Dreamweaver CS5, функция «Создать веб-альбом фотографий» устарела.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
