Из этой статьи вы узнаете, как добавлять виджеты «Композиция» в Adobe Muse. Настройка виджетов «Композиция» для создания интерактивных сайтов.

Примечание.

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

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

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

Также можно создавать интересные веб-дизайны с помощью вложенных виджетов в виджет «Композиция». Например, при создании каталога можно использовать виджет «Пустая», чтобы добавлять меню «гамбургер» (значок с тремя горизонтальными линиями) и вкладывать виджет «Слайд-шоу» в целевую область виджета «Пустая». Такой дизайн обеспечивает уникальность вашим веб-сайтам и удобство для пользователей.

Узнайте обо всех типах виджетов «Композиция», доступных в Adobe Muse.

Типы виджетов «Композиция»

Виджет «Композиция» состоит из двух контейнеров: «Триггер» и «Целевая область». Область триггера — это область, где пользователь щелкает мышкой, а целевая область — это область, соответствующая отображаемой области. Для добавления сложных функций интерактивности свяжите область триггера и целевую область.

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

Пустая

Виджет «Пустая» в Adobe Muse
Виджет «Пустая» в Adobe Muse

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

Специальные новости

Виджет «Специальные новости» в Adobe Muse
Виджет «Специальные новости» в Adobe Muse

Виджет, функции которого схожи с виджетом «Раздвижная панель». Для этого виджета в области контейнера можно добавить текст и изображения.

Лайтбокс

Виджет «Лайтбокс» в Adobe Muse
Виджет «Лайтбокс» в Adobe Muse

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

Презентация

Виджет «Презентация» в Adobe Muse
Виджет «Презентация» в Adobe Muse

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

Подсказка

Виджет «Подсказка» в Adobe Muse
Виджет «Подсказка» в Adobe Muse

Этот виджет содержит текст подсказки. При наведении курсора на область триггера сразу же отображается подсказка.

Добавление и настройка виджетов «Композиция»

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

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

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

  2. В режиме «План» дважды нажмите и откройте страницу, на которую вы хотите поместить виджет.

  3. Откройте библиотеку виджетов («Окно» > «Библиотека виджетов») и нажмите «Композиция», чтобы раскрыть меню с параметрами. Выберите один из виджетов «Композиция» в зависимости от вашего дизайна.

    Например, выберите «Лайтбокс» в библиотеке виджетов.

    Примечание.

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

    Перетаскивание виджета «Композиция» из библиотеки виджетов в Adobe Muse
    Перетащите виджет «Композиция» из библиотеки виджетов.

    По умолчанию виджет «Лайтбокс» имеет три небольших серых окна триггера над более крупным целевым контейнером светло-серого цвета.

    Когда пользователь нажимает контейнер триггера, отображается целевой контейнер виджета «Лайтбокс». В качестве целевого объекта можно вставлять изображения, текст, видеоролики (в том числе видеоролики YouTube).

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

    Чтобы выбрать триггер, дважды нажмите и выберите небольшие прямоугольники в этом виджете. В индикаторе выбора будет отображаться слово «Триггер». Небольшие прямоугольники являются триггерами для этого виджета. Это кнопки, реагирующие на действия пользователя.

    Индикатор выбора в левом верхнем углу страницы Adobe Muse
    Индикатор выбора в левом верхнем углу страницы

    Когда ни один из элементов не выбран, в индикаторе выбора в левом верхнем углу отображается слово «Страница».

  5. Выберите «Файл» > «Поместить», чтобы открыть диалоговое окно «Импорт». Выберите файлы, которые требуется разместить в этом виджете. Нажмите кнопку «Открыть», чтобы выбрать файл и закрыть диалоговое окно «Импорт».

    Нажмите один раз в любом месте страницы, чтобы поместить на нее изображение в полном размере.

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

    Чтобы вырезать изображение со страницы и скопировать в буфер обмена, можно также использовать комбинацию клавиш.

  7. Нажмите правой кнопкой мыши внутри триггер-кнопки и выберите «Вставить». Можно также использовать комбинацию клавиш, чтобы вставить изображение в триггер. Обратите внимание, что контейнер триггера автоматически увеличивается до размера изображения.

    Вставка содержимого в контейнер может вызвать трудности. Иногда контент размещается не в контейнере, а на странице.

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

    Также можно открыть панель «Слои» (Окно > Слои), чтобы проверить, куда вставлено изображение. Панель «Слои» отображает иерархию элементов на странице.

  8. Чтобы добавить дополнительные миниатюры, нажмите значок плюса (+) рядом с контейнерами триггера.

    Нажмите «+» для добавления миниатюр в «Лайтбокс»
    Нажмите «+» для добавления миниатюр
  9. После размещения виджета в режиме «Дизайн» можно продолжить работу с ним и настроить его. Чтобы изменить параметры виджета «Композиция», выберите виджет и нажмите синюю стрелку в правом верхнем углу виджета.

    Изменение параметров виджета «Композиция» с помощью меню «Параметры»
    Изменение параметров виджета «Композиция» с помощью панели «Параметры»

    На панели «Параметры» можно изменить следующие настройки:

    • Расположение: указывает, где на странице расположена целевая область. Для перекрытия целевых объектов выберите «Каскадно». Чтобы расположить объекты в разных местах, выберите «Рассредоточено». Выберите «Лайтбокс» для затемнения других областей страницы.
    • Показать целевой объект: указывает поведение целевого объекта при нажатии триггера пользователем. 
    • Скрыть целевой объект: указывает настройки для скрытия целевого объекта. Если пользователь не нажимает триггер, целевая область остается скрытой. 
    • Переход: указывает, как содержимое целевой области изменяется при нажатии или наведении курсора на триггер. Выберите «Затухание», чтобы применить затухание к новому целевому объекту, «Горизонтально», чтобы слайды сменялись горизонтально, «Вертикально», чтобы слайды сменялись вертикально. 
    • Скорость перехода: указывает скорость перехода для вашего виджета «Композиция». Чтобы выбрать моментальный переход, выберите «Нет».
    • Автозапуск: настройте этот параметр, чтобы создать слайд-шоу на веб-сайте. При выборе этого параметра слайды запускаются автоматически (действие пользователя не требуется).
    • Перемешать: выберите этот параметр, чтобы целевые объекты отображались в случайном порядке.
    • Триггеры сверху: выберите этот параметр, чтобы разместить триггер над целевым контейнером. Такая же иерархия отображается на панели «Слои».
    • Разрешить перелистывание: выберите этот параметр, чтобы разрешить перелистывание при переходе к следующему целевому объекту (на устройствах с сенсорным управлением).
    • Изначально скрыть все: выберите этот параметр, чтобы скрыть все параметры целевого объекта при начальной загрузке веб-сайта. Чтобы просмотреть целевой объект, пользователю необходимо нажать соответствующий триггер.
    • Лайтбоксы с автоматической активацией: выберите этот параметр, чтобы лайтбокс отображался автоматически при загрузке веб-сайта.
    • Составные элементы: выберите «Назад», «Далее» или «Кнопка "Закрыть"» для добавления дополнительных интерактивных элементов в виджет. На вашем веб-сайте пользователи смогут переходить далее и назад, а также закрывать страницы.
    • Редактирование: выберите «Показать элементы лайтбокса при редактировании», чтобы отобразить целевую область в режиме «Дизайн» при редактировании виджета. Выберите «Показать все в представлении "Дизайн"», чтобы отобразить все целевые контейнеры одновременно в режиме «Дизайн».
    Настройка параметров виджетов «Композиция» в Adobe Muse
    Настройка параметров виджетов «Композиция»

    Примечание.

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

    Функция «Изначально скрыть все» отключается, если выбран параметр «Автолайтбокс».

  10. Чтобы удалить ненужные триггеры, дважды нажмите и выберите соответствующие триггеры. Нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить выделенный триггер.

  11. Нажмите главное изображение в контейнере триггера, чтобы вызвать эффект лайтбокса.

    Нажмите изображение слева (триггер), чтобы просмотреть «Лайтбокс».
    Нажмите изображение слева (триггер), чтобы просмотреть «Лайтбокс» (как показано справа)

    Нажмите клавишу Escape, чтобы закрыть окно лайтбокса, вернуться в режим «Дизайн» и продолжить редактировать страницу Adobe Muse.

  12. После завершения настройки и размещения виджета «Композиция» в макете проверьте работу виджета в режиме «Предварительный просмотр». 

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

Использование виджетов «Композиция» в адаптивных макетах

Виджеты «Композиция» по умолчанию адаптивны. Для добавления виджетов «Композиция» в адаптивные макеты и работы с ними выполните следующее:

  • Если вы создаете адаптивный сайт в Adobe Muse последней версии, перейдите на панель «Библиотека виджетов» и перетащите виджет «Композиция» в режим «Дизайн».
  • Если вы использовали Adobe Muse 2017.0.3 или более ранние версии, виджет «Композиция» не адаптивен. В таком случае откройте файл .muse в Adobe Muse последней версии. Выберите элементы в виджете, затем параметр «Изменить размер» в качестве параметров «Адаптивная ширина», «Адаптивная высота» и «Ширина» (любой подходящий).
Преобразование неадаптивных виджетов «Композиция» в адаптивные
Преобразование неадаптивных виджетов «Композиция» в адаптивные

Примечание.

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

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

Адаптивный виджет «Композиция» в Adobe Muse
Адаптивный виджет «Композиция» в Adobe Muse

Примечание.

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

Подробнее о создании веб-сайта для адаптивного макета см. в разделе Создание макетов объектов в адаптивном дизайне.

Сочетание виджета «Композиция» с другими виджетами

Один из наиболее уникальных аспектов виджета «Композиция» — это поддержка вложенных виджетов. Это значит, что вы можете добавлять такие виджеты, как «Формы», «Слайд-шоу», или элементы меню в виджет «Композиция».

Например, вы можете добавить виджет «Слайд-шоу» в целевой контейнер виджета «Специальные новости» на веб-сайте, посвященном кулинарии. Когда посетитель сайта нажимает на подпись в меню (виджет «Специальные новости»), целевая область, содержащая галерею, отображается как слайд-шоу.

Также можно добавить форму обратной связи как целевой объект. Когда пользователь нажмет кнопку Связаться, он будет перенаправлен на страницу формы обратной связи.

Существует большое количество сочетаний и возможностей благодаря вложению одного виджета в другой. Однако обратите внимание на следующие аспекты при создании вложенных виджетов в адаптивных макетах:

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

Примечание.

Если вы вкладываете виджеты в виджеты «Композиция», рекомендуется не создавать более трех уровней вложения.

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

Создание подменю с помощью виджетов «Композиция»

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

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

Эта функция доступна при работе со следующими виджета раздела «Композиции»:

  • Пустая
  • Специальные новости
  • Подсказка

Панель «Параметры» содержит два параметра для отображения целевого контейнера:

  • При нажатии: целевые объекты отображаются при нажатии на них пользователем
  • При наведении курсора: целевые объекты отображаются при наведении на них курсора пользователем

Вы также можете скрыть целевой контейнер в виджете «Композиция». Далее представлено четыре способа скрыть целевой контейнер:

  • Нет
  • Кнопка нажата
  • После перемещения курсора за пределы области
  • После перемещения курсора за пределы триггера и целевого объекта

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

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

  1. В режиме «Дизайн» добавьте на страницу виджет «Композиция с лайтбоксом», перетащив его из библиотеки виджетов.

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

    Расположение контейнеров триггера
    Расположение контейнеров триггера над главным изображением

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

    Перетаскивание манипуляторов с помощью инструмента «Выделение»
    Перетаскивание маркеров ограничительной рамки для увеличения ширины трех кнопок триггера

  4. Добавьте в каждую из трех областей триггера необходимое содержимое. Содержимое триггера может включать в себя текст, ссылки, изображения, прямоугольники, встроенный HTML и т. д. Например, с помощью инструмента «Текст» добавьте в каждый триггер текст: «Первая ссылка», «Вторая ссылка» и «Третья ссылка».

    Затем создайте ссылку в области содержимого второго целевого объекта.

  5. Нажмите контейнер триггера и выберите соответствующий целевой контейнер большего размера. Добавьте ссылку на область содержимого второго целевого объекта. Затем нажмите раскрывающийся список рядом с подписью «Гиперссылки» в правой части панели управления. Добавьте ссылку на соответствующий веб-адрес.

  6. Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы проверить отображение виджета «Композиция».
    Проверьте работу виджета, нажимая контейнеры триггера с подписями «Первая ссылка», «Вторая ссылка» и «Третья ссылка».

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

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

    Убедитесь, что включены следующие параметры:

    • Положение: каскадно (по умолчанию)
    • Показать целевой объект: при наведении курсора
    • Скрыть целевой объект: после перемещения курсора за пределы триггера и целевого объекта
    • Переход: затухание (по умолчанию)
    • Скорость перехода: 0,5 секунды (по умолчанию)
    • Автоматическое воспроизведение: отключено (по умолчанию)
    • Перемешать: отключено (по умолчанию)
    • Изначально скрыть все: включено
    Панель параметров композиций
    Изменение настроек на панели «Параметры» для управления работой виджета.

    К основным настройкам, позволяющим управлять скрытием и отображением, относятся: меню «Показать целевой объект», меню «Скрыть целевой объект» и параметр «Изначально скрыть все».

  8. Выберите меню «Файл» > «Предварительный просмотр страницы в браузере», чтобы проверить последние изменения, внесенные в виджет.

    Теперь при первой загрузке виджета «Композиция» все целевые области скрыты по умолчанию.

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

    Однако при отведении курсора с области триггера или целевого объекта, целевая область скроется и не отобразится, пока вы снова не наведете курсор на другой триггер.

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

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

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