Создание прототипов веб-сайтов и интерфейсов с помощью страниц Fireworks

Один файл Fireworks PNG может содержать несколько страниц, что облегчает создание прототипов веб-сайтов и интерфейсов приложений. Каждая страница содержит уникальные параметры размера и цвета холста, разрешения изображения и направляющих. Эти параметры устанавливаются постранично или для всех страниц документа. Кроме веб-слоя, каждая страница содержит также уникальный набор слоев. Однако для общих элементов можно использовать главную страницу или общие слои в разных страницах (cм. раздел Общие слои).

Примечание.

Если никакие страницы не создаются, все элементы документа содержатся на одной странице.

Просмотр страниц осуществляется на панели «Страницы», где объекты на каждой странице отображаются в виде миниатюр рядом с названием страницы. Активная страница выделяется на панели и отображается во всплывающем меню страниц над активным документом.

Дополнительную информацию об экспорте страниц см. в разделе Экспорт из рабочего пространства.

Видео

Создание высококачественных прототипов в Fireworks или Photoshop (00:01:17)

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

Автор: Джим Баббадж (Jim Babbage)

Добавление, удаление и навигация по страницам

Панель «Страницы» позволяет добавлять, удалять и копировать страницы. При добавлении, удалении и перемещении страниц Fireworks автоматически обновляет номер слева от заголовков страниц. Эта автонумерация облегчает и ускоряет навигацию по конкретным страницам в больших многостраничных проектах.

Добавление страницы

Пустая страница вставляется в конец списка страниц и становится активной страницей.

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

    • На панели «Страницы» щелкните кнопку «Создать/Дублировать страницу» .

    • Щелкните правой кнопкой на панели и выберите «Создать страницу» во всплывающем меню.

    • Выберите меню «Редактирование» > «Вставить» > «Страница».

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

    • На панели «Страницы» выберите страницу.

    • Нажмите кнопки Page Up и Page Down на клавиатуре.

    • Выберите страницу во всплывающем меню страниц в верхней части окна документа или в правой нижней части панели «Страницы».

    Примечание.

    Звездочка рядом с именем страницы во всплывающем меню указывает на то, что это главная страница.

Создание дубликата страницы

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

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

    • Перетяните страницу на кнопку «Создать/Дублировать страницу».

    • Щелкните правой кнопкой мыши на странице и выберите во всплывающем меню «Дублировать страницу».

Перемещение одной или нескольких страниц

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

  1. (Необязательно) При перемещении нескольких страниц выполните одно из следующих действий:

    • Щелкните на них, удерживая клавишу Shift, чтобы выделить группу смежных страниц.

    • Щелкните, удерживая нажатой клавишу Ctrl (Windows) или клавишу Command (Mac OS), чтобы выбрать несколько отдельных страниц.

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

Удаление страницы

Страница над удаленной становится активной страницей.

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

    • В панели «Страницы» перетащите страницу на значок корзины .

    • Щелкните правой кнопкой мыши на странице и выберите во всплывающем меню «Удалить страницу».

Редактирование холста страницы

Каждая страница имеет уникальный холст с независимым размером/цветом и разрешением изображения.

  1. Выделите страницу на панели «Страницы» или во всплывающем меню в верхней части окна документа.

  2. Выберите меню «Изменение» > «Холст» > «Размер изображения», «Изменение» > «Холст» > «Цвет холста» или «Изменение» > «Холст» > «Размер холста».

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

  4. Чтобы применить изменения только к выбранной странице, оставьте флажок возле параметра «Только текущая страница». Чтобы применить изменения ко всем страницам, снимите флажок.

Использование главной страницы

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

Создание главной страницы

  1. На панели «Страницы» щелкните правой кнопкой на существующей странице и выберите во всплывающем меню «Задать в качестве главной страницы».

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

После создания главной страницы все новые страницы автоматически наследуют настройки главной страницы. Существующие страницы не наследуют эти настройки, если отсутствуют ссылки на главную страницу. Если в дальнейшем главная страница будет изменена, все связанные страницы обновятся автоматически.

При наследовании страницами объектов и поведения главной страницы применяются следующие ограничения.

  • Страницы наследуют только текущее состояние всех объектов на главной странице. Для наследования всех состояний всех объектов на каждой странице добавьте равное или большее число состояний к объекту с наибольшим количеством состояний. Все объекты на этой странице унаследуют все состояния главной страницы.

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

  • Только связанные страницы наследуют изменения цвета холста главной страницы.

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

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

    • На панели «Страницы» щелкните столбец, расположенный слева от миниатюры страницы. Значок ссылки указывает на то, что данная страница связана с главной страницей.

      Примечание:  В случае изменения настройки на странице, имеющей ссылку на главную страницу, новая настройка имеет приоритет, но нарушает связь с главной страницей.

Отображение и скрытие слоя главной страницы

Изменение видимости отражается на всех страницах.

  1. В панели «Слои» щелкните на значке с изображением глаза слева от слоя главной страницы.

Удаление слоев главной страницы

  1. Щелкните правой кнопкой мыши на панели и выберите во всплывающем меню «Создать страницу».

Чтобы вернуть слой главной страницы, щелкните правой кнопкой мыши на панели «Слои» и выберите во всплывающем меню «Добавить слой главной страницы».

Преобразование главной страницы в обычную страницу

  1. Щелкните правой кнопкой на панели «Страницы» и выберите во всплывающем меню «Восстановить главную страницу».

Экспорт выделенных страниц

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

  1. На панели «Страницы» выделите страницы, которые необходимо экспортировать.

  2. Щелкните их правой кнопкой мыши и выберите пункт «Экспортировать выбранные страницы».

  3. В выпадающем списке «Экспорт» диалогового окна «Экспорт» выберите один из следующих параметров.

    Слои в файлы

    Экспорт слоев выбранных страниц в отдельные файлы.

    Состояния в файлы

    Экспорт состояний выбранных страниц в отдельные файлы.

    Страницы в файлы

    Экспорт выбранных страниц в отдельные файлы.

Настройка имен файлов при экспорте страниц

  1. На панели «Страницы» выделите страницы, которые необходимо экспортировать.

  2. Щелкните их правой кнопкой мыши и выберите пункт «Экспортировать выбранные страницы».

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

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

    doc.name

    В качестве префикса или суффикса добавляется имя исходного файла. Например, при экспорте страницы с именем Index из исходного файла sites.png с включенным параметром «Добавить префикс» будет создан файл с именем Sites_Index.gif.

    Числовой («1, 2, 3...» или «01, 02, 03...»)

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

  5. Параметры меню «Тип файла» позволяют установить настройки экспортированного файла.

Экспорт фрагментов выделенных страниц

При экспорте файла фрагменты исходного файла игнорируются. Чтобы экспортировать фрагменты, установите в диалоговом окне «Экспорт» следующие настройки.

  1. В меню «Экспорт» установите параметр «HTML и изображения» или «Только изображения».

  2. В меню «HTML» установите параметр «Экспорт HTML-файла».

  3. В меню «Фрагменты» установите параметр «Экспорт фрагментов».

  4. Выберите один из следующих вариантов.

    Только выделенные фрагменты

    Экспортируются области, отмеченные как фрагменты.

    Включить области без фрагментов

    Также экспортируются области, не отмеченные как фрагменты.

Предварительный просмотр нескольких страниц

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

При вставке страницы с объектами, которые находятся на слое главной страницы, сначала выполняется преобразование главной страницы в обычный слой, а затем импорт.

Включение предварительного просмотра нескольких страниц

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

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

  1. В диалоговом окне «Установки» перейдите на вкладку «Общие».

  2. Чтобы иметь возможность просматривать несколько страниц одновременно, установите параметр «Сохранить отдельные миниатюры страниц». Если этот параметр отключен, имена страниц сохраняются, однако миниатюры страниц не создаются.

Просмотр страниц перед их открытием или импортом

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

  • В ОС Mac в диалоговых окнах «Импорт» и «Открытие» нужно нажать кнопку «Просмотр». Кроме того, для перехода в режим «Предварительный просмотр» можно дважды щелкнуть файл в диалоговом окне «Импорт».

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

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн