Узнайте, как отобразить и изменить оформление содержимого с помощью виджетов «Панель с вкладками» и «Раздвижная панель» в Adobe Muse.

Примечание.

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

Добавление виджета «Панель с вкладками»

  1. Откройте библиотеку виджетов, выбрав «Окно» > «Библиотека виджетов». Разверните палитры и выберите виджет «Панель с вкладками». Перетащите виджет из библиотеки на панель «Дизайн».

    При перетаскивании виджета «Панель с вкладками» на страницу он имеет форматирование по умолчанию.
    При перетаскивании виджета «Панель с вкладками» на страницу он имеет форматирование по умолчанию.

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

    Узнать, какой подчиненный элемент выбран в данный момент, можно в области индикатора выбора. Нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить третью вкладку. После этого останется только две вкладки. Нажмите в другом месте страницы.

  3. Нажмите виджет еще раз, чтобы выбрать панель с вкладками целиком. Перетащите маркеры виджета так, чтобы его ширина стала 840 пикселей, а высота — 645. Определить необходимый размер помогают измерения, отображающиеся при перетаскивании маркеров.

    Можно также просмотреть значения в полях «Ш» (ширина) и «В» (высота) на панели «Перспектива».

    Просмотр значений ширины и высоты для проверки нового размера виджета.
    Просмотр значений ширины и высоты для проверки нового размера виджета.

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

  5. Используя инструмент «Закрепить» на панели элементов управления, нажмите в центре вверху страницы, чтобы закрепить положение виджета «Панель с вкладками». Дополнительные сведения о том, как закрепить объекты, чтобы не допустить их прокручивания, см. по этой ссылке.

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

    На панели «Интервалы» задайте значения, как показано на рисунке ниже:

    • Слева: 220
    • Справа: 220
    • Снизу: 2
    • Высота средника: 10
    Настройка значений интервала для контейнера вкладки на панели «Интервалы».
    Настройка значений интервала для контейнера вкладки на панели «Интервалы».

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

    При необходимости страницу можно увеличить, чтобы проверить выравнивание элементов. По окончании верните значение масштаба 100%.

Оформление виджета «Панель с вкладками»

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

  1. Нажмите левую вкладку три раза, чтобы выделить ее. Откройте панель «Состояния» и выберите стандартное состояние. Используя меню «Заливка», установите цвет заливки. Установите для ширины обводки значение 0.

  2. Выберите на панели состояний «Состояние при наведении курсора». Установите цвет 571E00 для заливки вкладки в состоянии «Курсор над кнопкой». Обратите внимание, что при настройке цвета заливки для состояния при наведении курсора состояние при удержании кнопки мыши обновляется автоматически.

    Выберите «Активное состояние» и примените для вкладки в активном состоянии такой же цвет заливки. Теперь вкладка в состоянии «Стандартное» имеет цвет заливки, выбранный на предыдущем этапе, а в остальных трех состояниях вкладка будет иметь заливку 571E00.

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

    • Веб-шрифт: Kaushan Script (или любой другой шрифт)
    • Размер шрифта: 26Color: #70909D (название цвета можно изменить, например, на «меню-голубой цвет»)
    • Интерлиньяж: 120%
    • Выравнивание: по центру
    Оформление текста подписи путем изменения настроек на панели «Текст».
    Оформление текста подписи путем изменения настроек на панели «Текст».

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

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

    Выберите стандартное состояние еще раз.

  6. С помощью инструмента «Текст» выберите текст подписи на всех вкладках и введите для подписей соответствующие имена.

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

    Проверка форматирования вкладок на панели состояний в Adobe Muse.
    Проверка форматирования вкладок на панели состояний.

Добавление текстовых фреймов в область содержимого виджета «Панель с вкладками»

  1. Попробуйте переключиться между двумя вкладками с разными подписями. Замещающий текст обеих вкладок отличается, поэтому можно заметить, что один контейнер отображается, а другой — скрыт.

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

  3. Выберите область содержимого для вкладок. При этом в индикаторе выбора отобразятся слова «Область содержимого». Выберите файл изображения заполнителя и нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить его.

  4. С помощью инструмента «Текст» выберите существующий заголовок текста заполнителя. Выберите текст заголовка, выделенный полужирным шрифтом (Mauris sit amet), и удалите его.

  5. Временно перейдите из приложения Adobe Muse на рабочий стол. Откройте папку с файлами образцов и найдите файл с именем «text-about-ourstory.txt». Дважды нажмите файл, чтобы открыть его в текстовом редакторе. Скопируйте первую часть страницы до слов:... crafted through years of baking for friends and family.

  6. Вернитесь в приложение Muse. С помощью инструмента «Текст» выберите существующий текст заполнителя. Вставьте скопированное содержимое в текстовый фрейм. Оставьте одну дополнительную строку и вернитесь в верхнюю часть текстового фрейма.

  7. Не снимая выделения с текстового фрейма, выберите на панели «Текст» параметры форматирования. Например, можно задать следующие настройки:

    • Шрифт: Droid Serif
    • Размер шрифта: 14
    • Цвет: #222222
    • Выравнивание: слева
    • Интерлиньяж: 120%
  8. Не снимая выделения с текста, нажмите кнопку «Новый стиль» в нижней части панели «Стили абзаца». Дважды нажмите новый стиль абзаца и переименуйте его. Например, «основной текст». Это упростит повторное применение данного форматирования к другому текстовому содержимому.

  9. На панели «Образцы» дважды нажмите цвет #222222 и переименуйте его. Например, katieblack.

  10. На панели управления установите для текстового поля цвет обводки #222222 (katieblack) и ширину обводки 5 пикселей.

  11. В меню «Заливка» выберите для заливки текстового поля светло-бежевый цвет (#F8F3E2). Нажмите значок папки рядом с разделом «Изображение» и выберите в папке с файлами образцов файл «bg-texture.png». Задайте для параметра «Подгонка» значение «Мозаика».

  12. На панели «Интервалы» задайте значения для интервалов слева и справа. Например, для интервала слева можно задать значение 24, справа — 15.

    Настройка значений интервалов для создания визуального пространства вокруг вставленного текста.
    Настройка значений интервалов для создания визуального пространства вокруг вставленного текста.

  13. Далее добавим содержимое в контейнеры области содержимого, соответствующие каждой из вкладок.

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

Дублирование текстовых фреймов в виджете «Панель с вкладками»

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

  1. При помощи инструмента «Выделение» выделите текстовый фрейм. Нажмите и удерживайте клавишу Option (Mac) или Alt (Windows) при перетаскивании дублируемого текстового фрейма в правую часть области содержимого (см. рис. ниже).

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

    Дублирование существующего текстового фрейма для создания второй колонки справа.
    Дублирование существующего текстового фрейма для создания второй колонки справа.

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

  3. Вернитесь в приложение Muse. Удалите весь существующий текст в дублируемом правом текстовом фрейме. Вставьте скопированное текстовое содержимое из буфера обмена.

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

  5. Не снимая выделения с текстового фрейма, один раз нажмите клавишу Escape для выбора области содержимого дублируемой вкладки. Установите для ширины обводки значение 0 и значение «Нет» для цвета заливки.

Копирование текстовых фреймов почти завершено. На последнем этапе необходимо добавить небольшое обтекаемое текстом изображение в левый текстовый фрейм.

Работа с виджетами «Раздвижная панель»

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

В этом разделе представлены сведения о добавлении содержимого на отдельные страницы сайта. Также мы рассмотрим использование виджетов другого типа — Раздвижная панель. Виджеты Панель (Раздвижная панель и Панель с вкладками) помогают при создании сайтов. Используя виджеты, можно отображать больше содержимого страницы на небольших экранах.

  1. Откройте проект в представлении «Дизайн» и начните редактирование.

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

Добавление виджета «Раздвижная панель» на веб-страницу

  1. Откройте библиотеку виджетов. (Для этого выберите Окно > Библиотека виджетов. Если библиотека виджетов уже открыта, активизируйте ее в наборе закрепленных панелей, щелкнув соответствующую верхнюю вкладку.)

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

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

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

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

    По умолчанию виджет Раздвижная панель имеет две панели. На верхней панели отображается замещающее имя вкладки «Lorem 1», а на нижней — замещающее имя вкладки «Ipsum 2».

  4. Нажмите круглый синий значок со стрелкой для открытия диалогового окна параметров виджета. Убедитесь в том, что режим Редактировать вместе включен. В этом режиме все изменения, внесенные на одной из вкладок виджета Раздвижная панель, применяются ко всем вкладкам.

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

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

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

  6. Нажмите значок «плюс» (+) в нижней части виджета под панелью «Ipsum 2» для добавления третьей панели. На верхней панели отображается замещающее имя вкладки «Ipsum 3».

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

Добавление текста в виджет «Раздвижная панель»

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

  2. Дважды нажмите замещающий текст «Lorem 1» для его редактирования, затем введите новый текст.

  3. Выберите светло-серый контейнер большего размера под первой вкладкой. С помощью инструмента Текст перетащите текстовый фрейм, заполнив им контейнер большего размера.

  4. В новом текстовом фрейме введите текст заголовка.

Заполнение верхних вкладок виджета «Раздвижная панель» фоновыми изображениями

  1. Выберите верхнюю вкладку виджета Раздвижная панель, на которой отображается заголовок.

  2. Нажмите круглую синюю кнопку со стрелкой для открытия меню Параметры. Отключите режим Редактировать вместе. Нажмите за пределами меню Параметры для его закрытия.

  3. Нажмите верхнюю вкладку два раза. На индикаторе выбора отображаются слова «Текстовый фрейм». При выбранном текстовом фрейме верхней вкладки нажмите ссылку Заливка на панели управления для открытия меню Заливка. Нажмите палитру цветов и в качестве цвета заливки фона панели выберите «без заливки» вместо используемого по умолчанию темно-серого цвета.

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

  5. Откройте панель Интервалы. В разделе Отступ нажмите стрелку вверх в поле «L» (слева) для увеличения свободного пространства перед заголовком и удерживайте ее нажатой до тех пор, пока текст не будет выровнен по центру фонового изображения на вкладке.

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

Первая вкладка виджета Раздвижная панель готова.

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

Поворот виджета «Раздвижная панель»

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

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

Для горизонтального расположения виджета «Раздвижная панель» выполните следующие действия:

  1. В представлении «Дизайн» откройте библиотеку виджетов и разверните раздел «Панели».

  2. В разделе «Панели» выберите виджет «Раздвижная панель» и перетащите его на страницу.

  3. Используя инструмент «Выделение», нажмите кнопку мыши один раз для выбора всего виджета. В индикаторе выбора в левом верхнем углу панели управления отобразится слово «Раздвижная панель».

  4. Удержание клавиши Shift во время вращения сохраняет соотношение сторон виджета, позволяя перемещать его шагами по 45 градусов. Во время вращения виджета отображается подсказка, содержащая текущее значение поворота.

    Поверните виджет на -90° или +90° в зависимости от желаемого положения раздвижной панели.
    Поверните виджет на -90° или +90° в зависимости от желаемого положения раздвижной панели.

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

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

    Чтобы отобразить текст в области содержимого, выполните следующие действия. Для поворота текстового поля в контейнере содержимого используется метод, описанный выше.

     

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

  7. Еще раз нажмите в выделенной области содержимого, чтобы выбрать внутри нее текстовый фрейм. Наведите указатель мыши на область рядом с одним из углов текстового фрейма, чтобы курсор принял вид инструмента вращения. Удерживая клавишу Shift, поверните текстовый фрейм на 90 градусов в ту же сторону, что и внешний виджет.

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

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

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

Обновление текста в контейнерах подписей

Изменить текст в контейнерах подписей можно несколькими способами.

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

Редактирование текста подписи с помощью инструмента «Текст» для виджетов «Раздвижная панель».
Редактирование текста подписи с помощью инструмента «Текст» для виджетов «Раздвижная панель».

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

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

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

Вставка изображений с вертикально расположенным текстом в контейнеры подписей.
Вставка изображений с вертикально расположенным текстом в контейнеры подписей.

Добавление ссылок привязки на раздвижные панели

Любой элемент страницы можно связать с виджетами «Раздвижная панель», добавив ссылки привязки на раздвижные панели. Вот как добавить ссылки привязки к виджетам «Раздвижная панель»:

  1. Выберите виджет «Раздвижная панель», к которому нужно добавить ссылку привязки. Нажмите на вкладку, на которую нужно добавить ссылку привязки.

  2. Выберите инструмент «Привязка», чтобы загрузить ссылку привязки в Place Gun.

    Выберите инструмент «Привязка» на панели «Инструменты».
    Выберите инструмент «Привязка» на панели «Инструменты».

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

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

    Размещение ссылки привязки в виджете «Раздвижная панель»
    Размещение ссылки привязки в виджете «Раздвижная панель»

    Теперь эту привязку можно связать с любым элементом на любой странице веб-сайта.

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

    Теперь на вашем веб-сайте при нажатии на этот элемент страницы будет отображаться та раздвижная панель, с которой связан данный элемент.

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

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