Узнайте, как создавать прототипы или каркасы для сайтов в Adobe Muse.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Помимо интуитивно понятного пользовательского интерфейса, приложение Adobe Muse позволяет быстро создавать прототипы веб-проектов, доступные для просмотра онлайн. Эти функциональные возможности включают в себя предоставление потенциальным клиентам доступа к ссылкам, позволяющим просматривать пробные версии по сети в тех же браузерах, в которых будет отображаться окончательная версия сайта. Таким образом, клиенты заранее получают представление о внешнем виде готового сайта.

fig01.wireframe.b720
В состав каркасов входят замещающие объекты, указывающие местоположение элементов страницы.

Узнайте, как проектировать каркасы, формировать структурированное представление «План», а также создавать элементы заполнителей для веб-сайта. Можно заменить элементы заполнителей фактическими элементами страницы после завершения работы над содержимым.

Работа с каркасами

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

Для изучения процесса создания каркасов загрузите файлы примера (ZIP; 4,5 МБ). Распакуйте файл ZIP, откройте папку и найдите файл KevinsKoffeeKartWire.muse. Дважды нажмите его, чтобы открыть каркасы в Adobe Muse. В виде «План» рассмотрите организацию страниц по ярусам, позволяющую сформировать карту сайта. Двойным щелчком мыши откройте отдельные страницы в виде «Дизайн» и изучите их оформление.

Для создания каркасов в приложении Adobe Muse предусмотрены разнообразные функции.

  • Вид «Дизайн» содержит дополнительную сетку столбцов для выравнивания элементов макета.
  • Универсальные инструменты рисования упрощают создание замещающих фигур для графических объектов.
  • Панель «Ресурсы» обеспечивает доступ к функциям обновления замещающих изображений.
  • При публикации или экспорте сайта с помощью приложения Adobe Muse все файлы изображений оптимизируются, разделяются на фрагменты и экспортируются.
  • Текстовые заголовки и стили абзацев упрощают создание структурированных страниц и изменение формата текста.
  • Команда «Поместить» позволяет сохранить логотип клиента непосредственно из браузера, а затем поместить его в файл Adobe Muse.
fig02.wireframe.b720
Для быстрого добавления к каркасам элементов фирменного стиля выберите «Файл» > «Поместить».

Проектирование каркасов для утверждения клиентом

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

Ниже указаны преимущества каркасов.

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

Приложение Adobe Muse — это не только инструмент оформления веб-страниц, но и эффективное средство для создания прототипов проектов. Для упрощения процедуры утверждения можно быстро создавать действующие адреса URL пробных версий и передавать их клиентам по электронной почте. Однако создание макетов в виде каркасов с помощью приложения Adobe Muse — не единственное преимущество этого приложения.

Эффективность работы с каркасами в приложении Adobe Muse выше по сравнению с другими средствами разработки, поскольку функции редактирования изображений с возможностью поэтапного утверждения и редактируемые стили абзацев позволяют разработчикам веб-страниц быстро обновлять файл .muse и преобразовывать утвержденные каркасы в окончательную рабочую версию. Получив утверждение клиента, не требуется начинать разработку проекта сначала: окончательная версия сайта создается путем добавления содержимого к утвержденным каркасам. На протяжении этого процесса можно публиковать любое количество пробных версий сайта, документально оформлять этапы разработки и на каждом этапе передавать клиенту соответствующие ссылки.

Ниже приведен типовой рабочий процесс создания сайтов с применением каркасов.

  • Разработчик конструирует каркасы и публикует пробную версию.
  • Клиент проверяет работу сайта, щелкая элементы на страницах.
  • Клиент запрашивает изменения или задает уточняющие вопросы по оформлению.
  • После внесения всех необходимых изменений клиент утверждает каркасы.
  • Разработчик обновляет сайт, состоящий из каркасов, добавляя графические элементы и цвета.
  • Он также форматирует размещенные текстовые материалы путем обновления стилей абзацев.
  • Клиент проверяет обновленную версию сайта и запрашивает дополнительные изменения.
  • Разработчик вносит запрашиваемые изменения.
  • Клиент утверждает окончательную версию.
  • Разработчик обновляет сайт, настраивает домен и запускает готовый сайт.

Изучение структуры сайта с помощью вида «План» в приложении Adobe Muse

Для просмотра расположения страниц в иерархии, определяющей верхний и нижележащий ярусы ссылок для перехода, откройте в приложении Adobe Muse файл каркасов .muse и проанализируйте его. При открытии проекта отображается вид «План», в котором представлены все страницы сайта.

fig03.wireframe.b720
Страницы каркасов отображаются на виде «План».

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

Для создания страниц выполните следующее:

  1. нажмите значок «плюс» (+) справа или снизу от существующих страниц, затем нажмите в поле имени страницы и введите имя. 

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

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

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

  3. В процессе дальнейшего изучения можно попробовать изменять карту сайта, добавляя страницы, изменяя их местоположение и удаляя их. Если требуется восстановить прежнее состояние сайта, состоящего из каркасов, выберите «Редактировать» > «Отменить».

    Интерфейс вида «План» интуитивно понятен; в приложении Adobe Muse отслеживаются все имена страниц и поддерживается работоспособность всех ссылок, отображаемых в виджетах меню. Для обеспечения правильной работы ссылок при внесении любых изменений выполняется автоматическое обновление.

Применение стилей графики для создания замещающих элементов с общими атрибутами

В приложении Adobe Muse, как и в программном обеспечении Adobe Illustrator и Adobe Photoshop, вы можете создавать графические стили для разработки унифицированного дизайна и применения к наборам элементов. Это удобно при работе с каркасами (и при оформлении страниц), поскольку позволяет быстро обновить все элементы страницы, к которым применен существующий стиль графики, путем изменения этого стиля. Можно также создавать разновидности существующих стилей посредством копирования.

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

  1. С помощью инструмента «Прямоугольник» нарисуйте на странице в виде «Дизайн» три прямоугольника.

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

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

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

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

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

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

Построение структурированных веб-страниц и структурирование текста с помощью стилей абзацев

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

Стили абзацев позволяют структурировать текстовые материалы на странице путем определения тегов для текста заголовков и для абзацев.

  1. В виде «Дизайн» с помощью инструмента «Текст» перетащите на страницу текстовый фрейм. Заполните текстовый фрейм путем ввода или вставки текста.

  2. На панели «Текст» или панели управления вверху окна рабочей среды вида «Дизайн» задайте параметры форматирования, выбрав шрифт, размер и цвет шрифта и другие свойства.

  3. Нажмите элемент «Новый стиль абзаца» внизу панели «Стили абзацев» для создания нового стиля абзаца. Дважды нажмите имя нового стиля и замените его информативным именем.

  4. Нажмите стиль правой кнопкой мыши и выберите «Параметры стиля». С помощью меню «Тег абзаца» свяжите стиль абзаца с конкретным тегом HTML, например P, H1, H2 или H3.

    fig04.wireframe.b720
    На панели «Стили абзацев» нажмите имя стиля правой кнопкой мыши, затем в диалоговом окне «Параметры стиля» определите стиль для данного тега заголовка или абзаца.

  5. Создайте еще несколько текстовых фреймов с текстом. Следует учитывать, что щелчок на имени стиля абзаца при выбранном текстовом фрейме приводит к форматированию выбранного текстового фрейма в соответствии с данным стилем абзаца. Если позднее выбрать один из текстовых фреймов, к которым применен стиль абзаца, и изменить его, рядом с именем этого стиля на панели «Стили абзацев» появляется знак «плюс» (+). Как и при работе со стилями графики, этот знак указывает на изменение стиля.

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

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

Примечание.

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

Замена замещающих изображений графикой для окончательной версии сайта

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

  1. Выберите на странице замещающее изображение.

  2. Откройте панель «Ресурсы» и найдите выбранный элемент страницы.

  3. Нажмите элемент страницы правой кнопкой мыши. В появившемся меню представлено два варианта обновления файла изображения, выбор которых определяется способом сборки сайта из каркасов.

    Если файл создан в программном обеспечении Adobe Photoshop и Adobe Fireworks и помещен на страницу, можно выбрать команду «Редактировать оригинал» для изменения исходного файла в том приложении, в котором он создан. После сохранения основного файла и возврата в приложение Adobe Muse размещенные на сайте экземпляры этого файла автоматически обновляются.

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

    fig05.wireframe.b720
    Нажмите имя ресурса правой кнопкой мыши имя ресурса и выберите «Редактировать оригинал» для открытия исходного замещающего файла в той программе редактирования изображений, в которой он создан.

  4. Для замены всех замещающих изображений файлами изображений для окончательной версии повторите эти действия.

    Примечание.

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

Доступ к оптимизированным файлам изображений, сформированным в приложении Adobe Muse

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

  1. Выберите «Файл» > «Экспортировать как HTML».

    Открывается диалоговое окно «Экспортировать как HTML».

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

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

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

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