Использование Fireworks с Dreamweaver

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

Помещение изображений Fireworks в файлы Dreamweaver

При вставке файлов Fireworks JPEG в Dreamweaver автоматически производится расчет качества изображения в файле. Для некоторых файлов это значение может составлять 79.

Примечание.

Перед выполнением любых описанных ниже процедур убедитесь, что Dreamweaver настроен на тип файлов HTML (диалоговое окно «Настройка HTML»).

Вставка изображений Fireworks в Dreamweaver при помощи панели «Файлы»

  1. Экспортируйте изображение из Fireworks в локальную папку сайта, созданного в Dreamweaver.

  2. Откройте документ Dreamweaver, при необходимости перейдите в представление «Структура».

  3. Перетяните изображение с панели «Файлы» в документ Dreamweaver.

Вставка изображений Fireworks в Dreamweaver при помощи меню «Вставка»

  1. Поместите курсор вставки в ту часть окна документа Dreamweaver, в которую необходимо поместить изображение.

  2. Выполните одно из следующих действий:

    • Выберите «Вставка» > «Рисунок».

    • Нажмите «Изображения»: кнопка «Изображение» в области «Общие» панели «Вставка».

  3. Перейдите к экспортированному из Fireworks изображению и нажмите кнопку «OK».

Создание новых файлов Fireworks из местозаполнителей Dreamweaver

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

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

Примечание.

Все варианты поведения, добавленные при работе в Fireworks, сохраняются после экспорта обратно в Dreamweaver. Аналогичным образом, большинство вариантов поведения Dreamweaver, назначенных местозаполнителям изображений, сохраняются и при запуске Fireworks для редактирования изображения. Однако есть одно исключение: раздельные ролловеры, примененные к местозаполнителям изображений в Dreamweaver, не сохраняются при открытии и редактировании в Fireworks.

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

  1. В Dreamweaver сохраните имеющийся HTML-документ в одной из папок сайта Dreamweaver.

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

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

    • Нажмите «Изображения»: всплывающее меню «Изображение» в области «Общая» панели «Вставка», затем выберите из всплывающего меню «Местозаполнитель изображения».

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

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

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

  4. Выполните одно из следующих действий:

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

    • Дважды нажмите местозаполнитель изображения, удерживая нажатой клавишу Ctrl (для Windows) или Command (для Mac OS).

    • Нажмите правой кнопкой мыши (для Windows) или нажмите, удерживая клавишу Control (для Mac OS), затем выберите пункт контекстного меню «Создать изображение в Fireworks».

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

  5. Создайте изображение в Fireworks и нажмите кнопку «Готово».

  6. Задайте имя и расположение исходного файла PNG.

  7. Задайте имя для экспортированных файлов изображений.

    Это те файлы, которые появятся в Dreamweaver.

  8. Задайте расположение одного или нескольких экспортированных изображений относительно вашей папки с сайтом Dreamweaver, затем нажмите «Сохранить».

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

    Местозаполнитель изображения заменяется новым изображением Fireworks
    Местозаполнитель изображения заменяется новым изображением Fireworks

Помещение созданного Fireworks HTML-кода в Dreamweaver

Экспорт файлов Fireworks в Dreamweaver выполняется в два этапа. Из Fireworks файлы можно экспортировать непосредственно в папку сайта Dreamweaver. При этом HTML-файл и связанные с ним файлы изображений создаются в указанном расположении. Затем созданный HTML-код поместите в документ Dreamweaver, воспользовавшись функцией «Вставка HTML из Fireworks».

  1. Экспортируйте HTML-документ Fireworks в формат HTML.

  2. В Dreamweaver сохраните документ в определенном сайте.

  3. Поместите курсор вставки в части документа, в которой должна быть выполнена вставка HTML-кода.

  4. Выполните одно из следующих действий:

    • Выберите меню «Вставка» > «Объекты изображения» > «Fireworks HTML».

    • Нажмите изображения: «Изображение» в области «Общие» панели «Вставка» и выберите пункт меню «HTML-код Fireworks».

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

  6. (Необязательно) Выберите параметр «Удалить файл после вставки», чтобы переместить файл HTML в корзину (в Windows) или необратимо удалить его (в Mac OS) после завершения операции.

    Установка этого параметра не затрагивает исходный PNG-файл, на основании которого создается файл HTML.

  7. Нажмите кнопку «ОК», чтобы вставить HTML-код, а также связанные с ним изображения, фрагменты и код JavaScript в документ Dreamweaver.

Копирование HTML-кода Fireworks для использования в Dreamweaver

При копировании HTML-кода Fireworks в буфер обмена связанный с документом HTML-код и код JavaScript копируются в документ Dreamweaver, а изображения из документа экспортируются в указанное расположение, и Dreamweaver обновляет относительные ссылки в документе HTML на эти изображения.

Примечание.

Этот метод работает только в Dreamweaver. Он не годится для использования с другими HTML-редакторами.

  1. Скопируйте HTML-код в буфер обмена Fireworks, затем вставьте его в новый документ Dreamweaver.

Примечание.

Можно также открыть в Dreamweaver экспортированный из Fireworks файл HTML, а затем скопировать требуемые строки HTML-кода в другой документ Dreamweaver.

Обновление экспортированного в Dreamweaver HTML-кода Fireworks

Примечание.

Средство Roundtrip HTML обеспечивает множество преимуществ при работе с экспортированным в Dreamweaver HTML-кодом (см. раздел О средстве Roundtrip HTML).

  1. Внесите в Fireworks изменения в документ PNG.

  2. Выберите пункт меню «Файл» > «Обновить HTML».

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

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

    Fireworks обновит HTML-код и код JavaScript в документе Dreamweaver. Fireworks также выполнит экспорт обновленных изображений, связанных с HTML-документом, поместив их в указанной папке назначения.

    Примечание.

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

Экспорт файлов Fireworks в библиотеки Dreamweaver

Элемент библиотеки — это часть HTML-файла, расположенная в подпапке Library корневой папки сайта. Элементы библиотеки отображаются как категории на панели «Ресурсы» в Dreamweaver. В программе Dreamweaver элементы библиотеки упрощают правку и обновление часто используемых компонентов сайта. Предусмотрена возможность перетягивания элемента библиотеки (файла с расширением .lbi) из панели «Ресурсы» на любую страницу веб-сайта.

Изменить помещенный в документ Dreamweaver экземпляр элемента библиотеки нельзя; редактировать можно только эталонный элемент библиотеки. Затем Dreamweaver может автоматически обновлять каждую копию этого элемента, размещенную на страницах веб-сайта. Элементы библиотеки Dreamweaver во многом подобны символам Fireworks; изменения в документе эталонной библиотеки (LBI) отражаются во всех экземплярах библиотеки на сайте.

Примечание.

Элементы библиотеки Dreamweaver не поддерживают всплывающее меню.

  1. Выберите команду «Файл» > «Экспорт».

  2. Во всплывающем меню «Экспорт» выберите «Библиотека Dreamweaver».

    Выберите или создайте папку с именем Library внутри сайта Dreamweaver для размещения в ней файлов. Регистр букв имеет значение.

    Примечание.

    Dreamweaver не сможет распознать экспортируемый файл как элемент библиотеки, если файл не будет сохранен в папке Library.

  3. Введите имя файла.

  4. (Необязательно) Если изображение содержит фрагменты, задайте параметры фрагментирования.

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

  6. Нажмите кнопку «Сохранить».

Редактирование файлов Fireworks из Dreamweaver

Средство Roundtrip HTML обеспечивает тесную интеграцию Fireworks и Dreamweaver. Оно позволяет вносить изменения в любом из приложений, причем эти изменения немедленно отражаются и в другом приложении.

О средстве Roundtrip HTML

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

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

Примечание.

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

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

Примечание.

Перед редактированием графики Fireworks в Dreamweaver необходимо выполнить некоторые подготовительные действия. Дополнительную информацию см. в разделе Настройка параметров запуска и редактирования.

  1. В программе Dreamweaver выберите «Окно» > «Свойства» для открытия Инспектора свойств.

  2. Выполните одно из следующих действий:

    • Выберите изображение для редактирования. (Инспектор свойств обнаружит, что выбранный объект является изображением Fireworks, и отобразит имя известного исходного PNG-файла изображения.) Затем нажмите кнопку «Редактировать» в Инспекторе свойств.

    • При нажатой клавише Ctrl (для Windows) или Command (для Mac OS) дважды нажмите изображение, которое необходимо отредактировать.

    • Нажмите правой кнопкой мыши (для Windows) или нажмите, удерживая клавишу Control (для Mac OS), изображение, которое необходимо отредактировать, затем выберите пункт «Редактировать в Fireworks» в контекстном меню.

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

  4. Отредактируйте изображение в программе Fireworks.

    Сделанные вами изменения будут сохранены в Dreamweaver.

  5. Нажмите кнопку «Готово» для экспорта изображений с использованием текущих параметров оптимизации, сохраните используемые в Dreamweaver файлы GIF/JPEG, а затем сохраните исходный PNG-файл, если он был выбран.

    Примечание.

    При открытии изображения с панели «Сайт» в Dreamweaver для открытия файла используется выбранный в окне «Установки» Dreamweaver редактор для файлов данного типа по умолчанию. Когда изображения открываются таким образом, Fireworks не открывает исходный PNG-файл. Для задействования интеграции с Fireworks открывайте изображения из окна «Документ» в Dreamweaver.

Редактирование таблицы Fireworks в Dreamweaver

Примечание.

Перед редактированием таблиц Fireworks в Dreamweaver необходимо выполнить некоторые подготовительные действия для последующего запуска и редактирования. Дополнительную информацию см. в разделе Настройка параметров запуска и редактирования.

  1. В программе Dreamweaver выберите «Окно» > «Свойства» для открытия Инспектора свойств.

  2. Для открытия исходного PNG-файла в окне документа выполните один из следующих шагов:

    • Нажмите внутри таблицы, затем нажмите тег TABLE в строке состояния, чтобы выбрать всю таблицу (Инспектор свойств определит, что выделенный объект является таблицей Fireworks и отобразит имя известного исходного файла PNG для таблицы). Затем нажмите кнопку «Редактировать» в Инспекторе свойств.

    • Выберите изображение в таблице и нажмите кнопку «Редактировать» в Инспекторе свойств.

    • Нажмите изображение правой кнопкой мыши (для Windows) или нажмите изображение, удерживая клавишу Control (для Mac OS), затем выберите пункт «Редактировать в Fireworks» в контекстном меню.

  3. Выполните операции редактирования в Fireworks.

    Dreamweaver распознает и сохраняет результаты всех операций редактирования, выполненных над таблицей в Fireworks.

  4. После завершения редактирования таблицы нажмите кнопку «Готово» в окне документа.

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

    Примечание.

    При попытке отредактировать в Dreamweaver таблицу, вложенную внутрь созданной в Fireworks исходной таблицы, с помощью средства Roundtrip, может появиться сообщение об ошибке. Дополнительные сведения см. в документе TechNote 19231 на веб-сайте Adobe.

Сведения о поддерживаемых и неподдерживаемых вариантах поведения Dreamweaver

Если в документ Dreamweaver вставляется одно нефрагментированное изображение Fireworks, которому затем назначается вариант поведения Dreamweaver, то при открытии этого изображения в Fireworks для редактирования над ним будет расположен фрагмент. Первоначально этот фрагмент не будет отображаться, поскольку отображение фрагментов автоматически отключается при открытии и редактировании одного нефрагментированного графического объекта, которому назначены варианты поведения Dreamweaver. Фрагмент можно просмотреть, включив его отображение в веб-слое на панели «Слои».

При просмотре в Fireworks свойств фрагмента, которому назначен вариант поведения в Dreamweaver, в текстовом поле «Ссылка» Инспектора свойств может отобразиться строка javascript:;. Этот текст можно удалить. При необходимости можно ввести поверх него URL-ссылку, при этом назначенный вариант поведения сохранится после возврата в Dreamweaver.

При работе со средством Roundtrip HTML из Dreamweaver программа Fireworks поддерживает такие форматы серверных файлов, как CFM и PHP.

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

Примечание.

Элементы библиотеки Dreamweaver не поддерживают всплывающее меню.

Во время сеанса запуска и редактирования Fireworks поддерживает следующие варианты поведения Dreamweaver:

  • простой ролловер

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

  • восстановить замененное изображение

  • задать текст строки состояния

  • задать изображение панели навигации

  • всплывающее меню

Примечание.

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

Оптимизация изображений и анимации Fireworks, размещенных в документе Dreamweaver

Изменение параметров оптимизации изображения Fireworks, помещенного в документ Dreamweaver

  1. В Dreamweaver выберите изображение и выполните одно из следующих действий:

    • Выберите «Команды» > «Оптимизировать изображение».

    • В Инспекторе свойств нажмите кнопку «Оптимизировать».

    • Нажмите правой кнопкой мыши (для Windows) или нажмите, удерживая клавишу Control (для Mac OS), затем выберите пункт «Оптимизировать в Fireworks» во всплывающем меню.

  2. При появлении запроса укажите, следует ли открыть исходный файл Fireworks для помещенного изображения.

  3. Внесите изменения в диалоговом окне «Просмотр изображений».

    • Для изменения параметров оптимизации откройте вкладку «Параметры».

    • Для изменения размера и области экспортируемого изображения выберите вкладку «Файл». Если размеры изображения будут изменены в Fireworks, после возврата в Dreamweaver потребуется сбросить размеры изображения в Инспекторе свойств.

    • Для редактирования параметров анимации изображения, перейдите на вкладку «Анимация».

  4. После завершения редактирования нажмите кнопку «OK» для экспорта изображения, его обновления в Dreamweaver и сохранения файла PNG.

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

Изменение параметров анимации

При открытии и оптимизации анимированного файла GIF можно также изменить настройки анимации. Параметры анимации в диалоговом окне «Просмотр изображений» аналогичны доступным на панели «Состояния» в Fireworks.

Примечание.

Для редактирования графических элементов анимации необходимо открыть и отредактировать анимацию в Fireworks.

Установка параметров запуска и редактирования

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

Установка Fireworks как основного редактора изображений для Dreamweaver

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

Примечание.

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

  1. В Dreamweaver выберите пункт меню «Редактирование» > «Установки», затем выберите «Типы файлов/редакторы».

  2. В списке «Расширения» выберите расширение файла изображения для Интернета (.gif, .jpg или .png).

  3. В списке редакторов выберите Fireworks. Если Fireworks отсутствует в списке, нажмите кнопку «плюс» (+), найдите приложение Fireworks на жестком диске и нажмите кнопку «Открыть».

    Установки Dreamweaver
    Установки Dreamweaver

  4. Нажмите кнопку «Сделать основным».

  5. Повторите шаги 2–4, чтобы установить Fireworks в качестве основного редактора для других типов файлов веб-изображений.

Задание параметров запуска и редактирования для исходных файлов Fireworks

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

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

  1. В программе Fireworks выберите «Редактирование» > «Установки» (Windows) или «Fireworks» > «Установки» (Mac OS).

  2. Выберите категорию «Запуск и редактирование» и настройте параметры по своему усмотрению.

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

О заметках разработчика и исходных файлах

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

Перенос файлов сайта с помощью кнопки «Управление файлами»

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

Примечание.

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

Получить

Копирует удаленную версию файла на локальный сайт, перезаписывая при этом локальный вариант файла.

Извлечь

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

Поместить

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

Вернуть на сервер

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

Отменить извлечение с сервера

Отменяет выполненную команду «Извлечь с сервера» и повторно получает файл с удаленного сервера, перезаписывая локальный вариант файла удаленным вариантом.

Примечание.

В Fireworks команды меню «Управление файлами» доступны лишь тогда, когда документ находится в папке сайта Dreamweaver, для которого задан удаленный сервер. Команды «Управление файлами» Fireworks применяются для работы с файлами лишь тех сайтов, для которых установлены способы передачи данных «Локальный/Сетевой» или «FTP». Fireworks не может обмениваться файлами с сайтами, для которых используются альтернативные средства обмена файлами, такие как SourceSafe, WebDAV, RDS или SFTP.

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

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