Используя панель «Страницы» и другие мощные функции Fireworks, можно быстро создавать интерактивные прототипы веб-сайтов и приложений. Чтобы преобразовать завершенный прототип в работающий сайт, просто экспортируйте его в программу Adobe Flash®, Adobe Flex®, Adobe AIR™ или Adobe Dreamweaver®.
Общие советы по созданию прототипов см. в следующих статьях на сайте Центра разработчиков Fireworks (на англ. языке).
Статья Ника Майерса (Nick Myers) о проектировании интерактивных продуктов при помощи Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_ru
Статья Дейва Кронина (Dave Cronin) о новых веяниях в области создания прототипов: http://www.adobe.com/go/learn_fw_prototypingtrends_ru
Статья Мэтта Стоу (Matt Stow) об использовании встроенных шаблонов CSS в Fireworks: Встроенные шаблоны CSS в Fireworks CS4.
Статья Джима Баббиджа (Jim Babbage) Подборка практических рекомендаций по работе с Fireworks CS4: импорт, экспорт, символы, прототипы, масштабирование.
Видеопособие Дейва Хога (Dave Hogue) по использованию Fireworks для проектирования взаимодействия и быстрого создания прототипов:
Использование Fireworks для информационного и интерактивного дизайна: http://www.adobe.com/go/learn_fw_infointeract_ru
Создание интерактивных прототипов при помощи Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_ru
Быстрое создание прототипов при помощи Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_ru
Fireworks в составе комплексного процесса проектирования: http://www.adobe.com/go/learn_fw_completedesignpro_ru
Статья о дизайне приложений для веб-сайтов при помощи Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_en
Статья Кумара Вивека (Kumar Vivek) о дизайне содержимого для мобильных устройств при помощи Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_ru
Видеопособие по созданию прототипов интерфейсов приложений см. на странице www.adobe.com/go/lrvid4034_fw.
На панели «Страницы» создайте нужное количество страниц или окон для начального проекта. По мере развития проекта можно при необходимости добавлять или удалять страницы.
Расположите на холсте элементы, например, панели навигации и фоновые изображения, которые будут являться общими для страниц проекта. Чтобы выровнять элементы, используйте «быстрые» направляющие. Чтобы обеспечить максимальную гибкость, структурируйте макет с помощью CSS (см. разделы «Быстрые» направляющие и Создание макетов на основе CSS).
При общем использовании изменение одного элемента приводит к автоматическому обновлению всех соответствующих страниц. Используйте главную страницу для общего использования всех элементов, содержащихся на ней, либо сделайте общими слои для копирования подмножеств элементов (см. Использование главной страницы и Общие слои).
Добавляйте на страницы уникальные элементы дизайна, навигации и форм. На панели «Общая библиотека» находится множество кнопок, текстовых полей и всплывающих меню, ускоряющих процесс разработки. Составные символы в папках «Компоненты Flex», «HTML», «Mac», «Win», «Интернет и приложение» и «Строки меню» содержат свойства, которые можно настраивать для отдельных экземпляров символов (см. раздел Создание и использование составных символов).
Установите ссылки на различные страницы прототипа для веб-объектов, таких как фрагменты, активные области или кнопки навигации (см. раздел Ссылки на страницы в документе Fireworks).
Fireworks поддерживает различные выходные форматы прототипов, все эти форматы позволяют сохранить гипертекстовые ссылки для навигации по страницам. См. следующие статьи.
Дополнительную информацию об обеспечении для клиентов совместного доступа к гибкому прототипу на основе CSS и о продолжении редактирования в программе Adobe Dreamweaver см. в разделе Экспорт макета CSS.
Дополнительную информацию о создании обычных прототипов на основе таблиц см. в разделе Экспорт Fireworks HTML.
Дополнительную информацию о распространении PDF-версии для обсуждения или печати см. в разделе Экспорт файлов Adobe PDF.
Дополнительную информацию о создании прототипа приложения Flex см. в разделе Создание прототипов приложений Flex. Дополнительную информацию о создании приложения Adobe AIR см. в разделе Создание приложения Adobe AIR.
Можно создавать макеты на основе CSS в документе Fireworks, а затем преобразовать их в HTML-страницы с правилами CSS, моделирующими макеты. Макеты на основе CSS обеспечивают стандартизованный подход и поддерживают код, совместимый с различными браузерами.
Видеопособие по созданию макетов HTML-страниц на основе CSS см. на странице www.adobe.com/go/lrvid4035_fw_ru. См. также следующие ресурсы.
Пособие по экспорту CSS и изображений из Fireworks, приведенное по адресу: http://www.adobe.com/go/learn_fw_exportcssimages_ru.
Пособие по разработке дизайна веб-страниц с поддержкой стандартов в Fireworks, приведенное по адресу: http://www.adobe.com/go/learn_fw_standardscompliantdesign_ru.
Fireworks предоставляет возможность проектирования страниц и одновременного экспорта их в HTML и CSS-код путем использования механизма экспорта, анализирующего расположение объектов. Кроме того, можно устанавливать выравнивание страницы и задавать повторяющееся фоновое изображение.
Можно использовать элементы HTML, находящиеся в папке HTML панели «Общая библиотека». В папке HTML содержатся такие элементы HTML, как кнопки, объекты выпадающего списка и текстовые поля. Свойства этих элементов можно отредактировать посредством панели «Свойства символа». При перетаскивании любого элемента формы на страницу механизм экспорта вставляет теги <form> во время экспорта макета на основе CSS.
Любой текст, на который помещен фрагмент, отображается как изображение в экспортированном HTML. При необходимости отображения текста как обычного текста используйте компоненты HTML панели «Общая библиотека». Компоненты HTML включают заголовки 1-6 и элементы связи.
Для достижения необходимых результатов при создании макетов на основе CSS следует ознакомиться с несколькими правилами.
Правило 1: Для экспорта текста используйте прямоугольники, для экспорта изображений — фрагменты
Механизм экспорта экспортирует текст, помещенный в прямоугольники. При необходимости экспорта изображений помещайте поверх них фрагменты, поскольку экспортируются только те изображения, на которые наложены прямоугольные фрагменты. Такие фрагменты «сообщают» механизму экспорта о наличии изображений.
Правило 2: Избегайте наложения объектов
Механизм экспорта рассматривает текст, изображения и прямоугольники в виде прямоугольных блоков. Он оценивает размер и расположение этих объектов, чтобы определить логические ряды и столбцы для размещения объектов в макете. Размещайте объекты таким образом, чтобы их границы не пересекались.
Правило 3: Планируйте положение рядов и столбцов
Механизм экспорта ведет поиск логических секций, в которых четко видна граница между объектами или группами объектов. Поместите столбец в прямоугольник, чтобы предотвратить вставку механизмом экспорта логического ряда, нарушающего положение столбца.
Правило 4: Рассматривайте документ как двухмерный
При разработке страницы используйте прямоугольники для помещения объектов, которые необходимо рассматривать как дочерние элементы прямоугольника. Механизм экспорта распознает такие элементы. Он проверяет дочерние элементы на наличие логических рядов и столбцов, как описано в правиле 3.
В дополнение к этим правилам, примите во внимание следующее:
Механизм экспорта экспортирует только примитивные прямоугольники. Для экспорта скругленных углов прямоугольников поместите поверх них прямоугольные фрагменты.
Для экспорта обводки прямоугольников поместите поверх таких прямоугольников прямоугольные фрагменты.
Для экспорта символов поместите поверх них прямоугольные фрагменты.
Для экспорта фильтров, примененных к тексту или прямоугольникам, поместите поверх них прямоугольные фрагменты.
Приложение Fireworks позволяет экспортировать макеты, созданные как файлы на основе CSS. Далее можно открыть и редактировать эти файлы в приложении Dreamweaver или другом редакторе, поддерживающем CSS.
-
Чтобы задать фоновое изображение и мозаичное размещение фонового изображения, нажмите кнопку «Обзор»
Выберите «Не повторять», чтобы однократно вывести изображение на экран.
Выберите «Повторять», чтобы повторять (или расположить мозаичным способом) изображение по горизонтали и вертикали.
Выберите «Повторять-x», чтобы расположить изображение мозаичным способом по горизонтали.
Выберите «Повторять-y», чтобы расположить изображение мозаичным способом по вертикали.
Можно создать демонстрационную версию документа Fireworks, с которым вы работаете. Она открывается в браузере для демонстрации функций и позволяет перемещаться по страницам.
Выберите «Команды» > «Демоверсия текущего документа».
Выберите страницы, для которых нужно создать демонстрационный файл, и нажмите «Создать демо».
Выберите папку и нажмите кнопку «Открыть».
Процесс создания прототипа для приложения Flex похож на рабочий процесс создания веб-сайтов и интерфейсов приложений (см. раздел Рабочий процесс создания прототипов). В приложении Fireworks можно перетаскивать компоненты Flex на холст, указывать их свойства и экспортировать получившийся пользовательский интерфейс в MXML. Можно дополнительно отредактировать этот пользовательский интерфейс в приложении Flex Builder.
Вставьте на холст компоненты Flex из папки Flex панели «Общая библиотека». Эти составные символы ведут себя определенным образом при экспорте в MXML, обеспечивая необходимый результат. При экспорте документа в MXML каждый из этих символов преобразуется в соответствующий тег MXML. Объекты, не распознанные как компоненты Flex, экспортируются как растровые изображения, связанные с MXML посредством тега <mx:Image> (см. раздел Создание и использование составных символов).
Примечание.
При редактировании компонента проекта Flex в Fireworks можно скопировать измененный код XML в проект Flex. Это позволяет сэкономить время, если необходимо воспроизвести поведение измененного компонента в проекте.
Символы курсора, полосы прокрутки, вкладки и подсказки игнорируются при выводе MXML, так как для этих компонентов прямые переводы из Fireworks в MXML отсутствуют. Например, символ полосы прокрутки автоматически появляется в экземплярах контейнера Flex, если их содержимое может прокручиваться. В Fireworks эти символы просто показывают, как функционируют части проекта интерфейса.
Примечание.
Фрагменты изображений, ролловеры и активные области применяются только к прототипам на основе HTML. При создании прототипов Flex следует избегать использования этих веб-объектов.
Если один компонент Flex располагается на нескольких страницах, одно изменение приводит к автоматическому обновлению всех соответствующих страниц (или окон). Можно использовать главную страницу для совместного использования всех компонентов Flex, которые на ней содержатся, или совместно использовать слои для копирования подмножеств компонентов (см. Использование главной страницы и Общие слои).
На панели «Свойства символа» («Окно» > «Свойства символа») укажите свойства и события для каждого компонента Flex, вставленного на холст.
Экспортируйте макет пользовательского интерфейса Flex и откройте получившийся файл MXML в приложении Flex. Программа Fireworks экспортирует необходимые данные MXML с сохранением стилей и абсолютного позиционирования. Разработчики Flex могут использовать этот интерфейс без необходимости повторного создания макета в приложении Flex.
Приложение Fireworks упрощает создание макетов многофункциональных интернет-приложений (RIA), обеспечивая экспорт ресурсов из общей библиотеки в виде известных компонентов для использования в Adobe Flex Builder. Программа Fireworks экспортирует необходимый код Flex (MXML) с сохранением стилей и абсолютного позиционирования.
Завершив создание прототипа приложения Flex, экспортируйте его в MXML для дальнейшего редактирования в программе Flex Builder. В представлении Design прототип выглядит так же, как в Fireworks, за исключением таких компонентов, как курсоры и полосы прокрутки, которые не экспортируются.
-
Нажмите кнопку «Сохранить», чтобы завершить процесс экспорта.
Все связанные с прототипом изображения экспортируются в папку изображений. Кроме того, вместе с другими файлами изображений также создаются изображения полных страниц MXML. Страницы MXML не требуют наличия этих изображений для предварительного просмотра, и их можно удалить.
Можно создавать для компонентов Flex обложки в приложении Fireworks, а затем экспортировать их для последующего использования при создании веб-сайтов и интерфейсов приложений на основе Flex.
Обложки можно создавать для самых разных компонентов Flex с помощью шаблонов обложек Flex и редактировать их в Fireworks.
Выберите «Команды» > «Использование обложек Flex» > «Новая обложка Flex».
Выполните одно из следующих действий:
Чтобы создать обложки Flex для всех имеющихся компонентов, выберите «Несколько компонентов».
Fireworks создаст один документ со всем доступными компонентами Flex.
Чтобы указать компоненты, для которых требуется создать обложки, выберите «Определенные компоненты».
Выберите только компоненты с прикрепленным определенным стилем или выберите все экземпляры компонента.
Нажмите кнопку «ОК».
Прежде чем пользоваться функцией экспорта в Flex MXML, важно знать о ее возможностях и ограничениях:
Экспорт MXML не поддерживает компоненты обложек
При экспорте в MXML обложки для компонентов Flex не создаются, даже если они были отредактированы в Fireworks. Функция экспорта MXML просто создает документы MXML, которые можно использовать в среде Flex. Эти документы также могут включать связанные изображения для объектов Fireworks, которые нельзя преобразовать в теги MXML. Эти изображения добавляются в документ MXML с помощью тегов <mx:Image>.
Функция MXML игнорирует фрагменты
Поскольку функция экспорта в MXML служит для создания документов с тегами, которые можно использовать в среде Flex, фрагменты не учитываются при создании изображений или ячеек таблиц. Когда функция экспорта в MXML создает изображения, она использует параметры оптимизации документа для определения формата изображения и метода сжатия.
Свойства MXML ограничены свойствами расширенных символов
Функция экспорта в MXML создает свойства тега MXML на основе компонента Flex в Fireworks. Приложение Fireworks предоставляет набор компонентов Flex с ограниченным количеством свойств.
Стили внедряются
Свойства, распознаваемые как стили, отделяются от создаваемых тегов MXML, но сохраняются в том же документе MXML в тегах <mx:Style>. Приложение Fireworks не определяет стили как внешний файл CSS.
Кадры не поддерживаются
При создании оформлений и макетов для вывода в формате MXML не используйте кадры. Если в одном документе должны присутствовать различные оформления, используйте страницы.
Adobe® AIR™ для Fireworks позволяет преобразовывать прототипы Fireworks в приложения для настольных компьютеров. Например, некоторые страницы прототипа взаимодействуют между собой для отображения данных. Можно с помощью Adobe AIR упаковать этот набор страниц в небольшое приложение, устанавливаемое на пользовательский компьютер. Когда пользователь запускает приложение со своего настольного компьютера, приложение загружает и отображает прототип в собственном окне приложения, независимом от браузера. Пользователи могут просматривать прототипы локально, на своих собственных компьютерах, без подключения к Интернету.
См. статью Этана Айсманна (Ethan Eismann) об Adobe AIR и создании фирменных моделей взаимодействия: http://www.adobe.com/go/learn_fw_airexperiencebrand_ru.
Имеется возможность добавления предустановленных событий Adobe AIR, связанных с мышью, к объектам в документе. Fireworks поддерживает четыре предустановленных события, связанных с мышью: закрыть окно, перетащить окно, развернуть окно и свернуть окно.
Выберите на холсте объекты, к которым необходимо применить поведение события, связанного с мышью.
Выберите «Команды» > «События AIR, связанные с мышью» и выберите событие.
-
Имя приложения
Укажите имя, которое будет отображаться в окнах установки приложения. Расширение указывает имя узла Fireworks по умолчанию.
Идентификатор приложения
Введите уникальный идентификатор приложения. В идентификаторе нельзя использовать пробелы или специальные символы. Допустимы только символы 0-9, a-z, A-Z, . (точка) и - (дефис). Этот параметр является обязательным.
Папка меню «Программы»
Укажите папку меню «Пуск» в Windows, в которой требуется разместить ярлык приложения (неприменимо для Mac OS).
Авторские права
Информация об авторских правах, которая отображается в диалоговом окне «О программе» в приложениях Adobe AIR, устанавливаемых в Mac OS. Эти сведения не используются для приложений, устанавливаемых на компьютерах Windows.
Содержимое пакета
Нажмите «Текущий документ» для автоматического выбора папки с используемыми файлами.
Корневое содержимое
Нажмите кнопку «Обзор», чтобы выбрать страницу, которая будет отображаться как корневое содержимое. Если вы выбрали параметр «Текущий документ», корневое содержимое устанавливается автоматически.
Включаемые файлы
Укажите, какие файлы и папки должны быть включены в приложение. Можно добавлять файлы HTML и CSS, файлы изображений и библиотек JavaScript. Для добавления файлов нажмите кнопку с плюсом (+), а для добавления каталогов — значок папки. Чтобы удалить файл или папку из списка, выделите этот элемент и нажмите кнопку со значком минус (-). Файлы и папки, которые выбираются для включения в пакет Adobe AIR, должны находиться в папке с корневым содержимым.
Системный хром и прозрачность
Укажите стиль окна (или хром), который будет использоваться при запуске приложения на компьютерах пользователей. Системный хром заключает приложение в стандартное системное окно операционной системы. Прозрачный хром позволяет отказаться от стандартного системного хрома, создав свой собственный хром для приложения. Прозрачность позволяет создавать окна приложения не только прямоугольной формы.
Выбрать изображения значков
Выбор пользовательских изображений для значков приложения. Выберите папку для размера значка и изображение, которое хотите использовать. Изображения значков приложения могут иметь только формат PNG.
Примечание.
Выбранные изображения должны находиться на узле приложения, пути к ним должны указываться относительно корня узла.
Цифровая подпись
Нажмите кнопку «Задать», чтобы добавить в приложение цифровую подпись. Этот параметр является обязательным. Дополнительную информацию см. в следующем разделе.
Файл пакета
Укажите папку для сохранения установочного файла нового приложения (файл .air). По умолчанию используется корень узла. Чтобы выбрать другое расположение, нажмите кнопку «Обзор». В качестве имени файла по умолчанию используется название сайта с расширением .air. Этот параметр является обязательным.
Цифровая подпись гарантирует, что код приложения не был изменен или поврежден после создания автором программного обеспечения. Все приложения Adobe AIR требуют цифровой подписи и без нее не устанавливаются.
-
Чтобы подписать приложение с помощью приобретенного ранее цифрового сертификата, нажмите кнопку «Обзор», выберите сертификат, введите соответствующий пароль и нажмите кнопку «ОК».
Чтобы создать собственный автоматический цифровой сертификат, нажмите кнопку «Создать» и заполните поля в диалоговом окне. Параметр сертификата «Тип ключа» указывает на уровень безопасности сертификата: для «1024-RSA» используется 1024-разрядный ключ (менее безопасный), для «2048-RSA» — 2048-разрядный ключ (более безопасный). После завершения нажмите кнопку «Создать». Затем введите соответствующий пароль в диалоговом окне «Цифровая подпись» и нажмите «ОК».
Примечание. На компьютере должна быть установлена среда выполнения Java® Runtime Environment (JRE).
На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.
Правовые уведомления | Политика конфиденциальности в сети Интернет