Использование виджетов «Раздвижная панель» и «Панель с вкладками» в Adobe Muse
Узнайте, как отобразить и изменить оформление содержимого с помощью виджетов «Панель с вкладками» и «Раздвижная панель» в Adobe Muse.
Добавление виджета «Панель с вкладками»
Откройте библиотеку виджетов, выбрав «Окно» > «Библиотека виджетов». Разверните палитры и выберите виджет «Панель с вкладками». Перетащите виджет из библиотеки на панель «Дизайн».
Нажмите верхнюю вкладку справа три раза. При первом нажатии выделяется вся панель с вкладками, при втором нажатии выделяется контейнер вкладки, а при третьем нажатии выделяется вкладка с правой стороны.
Узнать, какой подчиненный элемент выбран в данный момент, можно в области индикатора выбора. Нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить третью вкладку. После этого останется только две вкладки. Нажмите в другом месте страницы.
Нажмите виджет еще раз, чтобы выбрать панель с вкладками целиком. Перетащите маркеры виджета так, чтобы его ширина стала 840 пикселей, а высота — 645. Определить необходимый размер помогают измерения, отображающиеся при перетаскивании маркеров.
Можно также просмотреть значения в полях «Ш» (ширина) и «В» (высота) на панели «Перспектива».
С помощью инструмента «Выделение» расположите виджет «Панель с вкладками» ближе к верхней части страницы и выровняйте его по центру по вертикали.
Используя инструмент «Закрепить» на панели элементов управления, нажмите в центре вверху страницы, чтобы закрепить положение виджета «Панель с вкладками». Дополнительные сведения о том, как закрепить объекты, чтобы не допустить их прокручивания, см. по этой ссылке.
Не снимая выделения с виджета «Панель с вкладками», нажмите левую вкладку для выбора контейнера вкладки (элемента, в котором находятся обе верхние вкладки). С помощью инструмента «Выделение» перетащите центральный маркер вниз до получения высоты приблизительно 98 пикселей.
На панели «Интервалы» задайте значения, как показано на рисунке ниже:
- Слева: 220
- Справа: 220
- Снизу: 2
- Высота средника: 10
После внесения этих изменений используйте инструмент «Выделение», чтобы перетащить весь виджет «Панель с вкладками» на самый верх страницы так, чтобы верхняя часть панели с вкладками располагалась впритык с нижней частью прямоугольника с заголовком, не образуя между ними пустого пространства.
При необходимости страницу можно увеличить, чтобы проверить выравнивание элементов. По окончании верните значение масштаба 100%.
Оформление виджета «Панель с вкладками»
Следующим шагом после добавления виджета «Панель с вкладками» будет обновление стилей оформления обеих вкладок.
Нажмите левую вкладку три раза, чтобы выделить ее. Откройте панель «Состояния» и выберите стандартное состояние. Используя меню «Заливка», установите цвет заливки. Установите для ширины обводки значение 0.
Выберите на панели состояний «Состояние при наведении курсора». Установите цвет 571E00 для заливки вкладки в состоянии «Курсор над кнопкой». Обратите внимание, что при настройке цвета заливки для состояния при наведении курсора состояние при удержании кнопки мыши обновляется автоматически.
Выберите «Активное состояние» и примените для вкладки в активном состоянии такой же цвет заливки. Теперь вкладка в состоянии «Стандартное» имеет цвет заливки, выбранный на предыдущем этапе, а в остальных трех состояниях вкладка будет иметь заливку 571E00.
Нажмите левую вкладку еще раз, чтобы выбрать подпись. При этом в индикаторе выбора отобразится слово «Подпись». На панели «Состояния» выберите состояние «Стандартное», затем на панели «Текст» настройте атрибуты, как показано на рисунке ниже:
- Веб-шрифт: Kaushan Script (или любой другой шрифт)
- Размер шрифта: 26Color: #70909D (название цвета можно изменить, например, на «меню-голубой цвет»)
- Интерлиньяж: 120%
- Выравнивание: по центру
Не снимая выделения с подписи, нажмите кнопку «Новый стиль» в нижней части панели «Стили абзаца». Чтобы применить это форматирование в другом месте одним щелчком мыши, переименуйте новый стиль абзаца. Например, «главные вкладки».
Если вы посмотрите на панель состояний, то заметите, что форматирование, примененное к подписи в нормальном состоянии, также применено к обоим состояниям — при наведении курсора и при удержании кнопки мыши. Выберите активное состояние и нажмите стиль абзаца «Заголовки вкладок» еще раз, чтобы применить форматирование к активному состоянию. Теперь оформление обеих вкладок в любых состояниях изменен.
Выберите стандартное состояние еще раз.
С помощью инструмента «Текст» выберите текст подписи на всех вкладках и введите для подписей соответствующие имена.
При выборе вкладки слева на панели «Состояния» отобразится конечное форматирование, примененное к каждой вкладке и подписи. Нажмите правую вкладку и обратите внимание, что ее состояния имеют такое же оформление. Исключение составляет текстовое содержимое каждой вкладки.
Добавление текстовых фреймов в область содержимого виджета «Панель с вкладками»
Попробуйте переключиться между двумя вкладками с разными подписями. Замещающий текст обеих вкладок отличается, поэтому можно заметить, что один контейнер отображается, а другой — скрыт.
Нажмите на правую вкладку виджета. При выборе правой вкладки соответствующая область содержимого отображается под вкладкой. Это действие происходит как при редактировании страницы в представлении «Дизайн», так и при просмотре веб-сайта в Интернете. С помощью виджетов «Панель с вкладками» можно отображать больший объем содержимого на одной странице.
Выберите область содержимого для вкладок. При этом в индикаторе выбора отобразятся слова «Область содержимого». Выберите файл изображения заполнителя и нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить его.
С помощью инструмента «Текст» выберите существующий заголовок текста заполнителя. Выберите текст заголовка, выделенный полужирным шрифтом (Mauris sit amet), и удалите его.
Временно перейдите из приложения Adobe Muse на рабочий стол. Откройте папку с файлами образцов и найдите файл с именем «text-about-ourstory.txt». Дважды нажмите файл, чтобы открыть его в текстовом редакторе. Скопируйте первую часть страницы до слов. crafted through years of baking for friends and family.
Вернитесь в приложение Muse. С помощью инструмента «Текст» выберите существующий текст заполнителя. Вставьте скопированное содержимое в текстовый фрейм. Оставьте одну дополнительную строку и вернитесь в верхнюю часть текстового фрейма.
Не снимая выделения с текстового фрейма, выберите на панели «Текст» параметры форматирования. Например, можно задать следующие настройки:
- Шрифт: Droid Serif
- Размер шрифта: 14
- Цвет: #222222
- Выравнивание: слева
- Интерлиньяж: 120%
Не снимая выделения с текста, нажмите кнопку «Новый стиль» в нижней части панели «Стили абзаца». Дважды нажмите новый стиль абзаца и переименуйте его. Например, «основной текст». Это упростит повторное применение данного форматирования к другому текстовому содержимому.
На панели «Образцы» дважды нажмите цвет #222222 и переименуйте его. Например, katieblack.
На панели управления установите для текстового поля цвет обводки #222222 (katieblack) и ширину обводки 5 пикселей.
В меню «Заливка» выберите для заливки текстового поля светло-бежевый цвет (#F8F3E2). Нажмите значок папки рядом с разделом «Изображение» и выберите в папке с файлами образцов файл «bg-texture.png». Задайте для параметра «Подгонка» значение «Мозаика».
На панели «Интервалы» задайте значения для интервалов слева и справа. Например, для интервала слева можно задать значение 24, справа — 15.
Далее добавим содержимое в контейнеры области содержимого, соответствующие каждой из вкладок.
С помощью инструмента «Выделение» измените размер текстового поля. Перетащите его в левую часть контейнера, а затем с помощью маркеров увеличьте ширину поля приблизительно до половины доступной области содержимого (приблизительно 390 пикселей в ширину и 381 пикселей в высоту).
Дублирование текстовых фреймов в виджете «Панель с вкладками»
Затем необходимо дублировать существующий текстовый фрейм, чтобы создать второй текстовый фрейм в правой части области содержимого.
При помощи инструмента «Выделение» выделите текстовый фрейм. Нажмите и удерживайте клавишу Option (Mac) или Alt (Windows) при перетаскивании дублируемого текстового фрейма в правую часть области содержимого (см. рис. ниже).
С помощью направляющих выравнивания убедитесь, что правый текстовый фрейм выровнен по горизонтали с левым текстовым фреймом.
Временно перейдите из приложения Muse в текстовый редактор с содержимым для виджета «Панель с вкладками». Скопируйте содержимое, которое необходимо поместить на дублируемую вкладку.
Вернитесь в приложение Muse. Удалите весь существующий текст в дублируемом правом текстовом фрейме. Вставьте скопированное текстовое содержимое из буфера обмена.
При необходимости выровняйте текстовые фреймы по центру области содержимого с помощью инструмента «Выделение».
Не снимая выделения с текстового фрейма, один раз нажмите клавишу Escape для выбора области содержимого дублируемой вкладки. Установите для ширины обводки значение 0 и значение «Нет» для цвета заливки.
Копирование текстовых фреймов почти завершено. На последнем этапе необходимо добавить небольшое обтекаемое текстом изображение в левый текстовый фрейм.
Работа с виджетами «Раздвижная панель»
Виджеты «Раздвижная панель» используются, когда необходимо уместить большой объем содержимого в небольшую область экрана. Функции сворачивания и разворачивания позволяют посетителям нажимать панели с подписями и просматривать появляющееся содержимое. Помимо сайтов для настольных ПК, виджеты «Раздвижная панель» часто используются для отображения содержимого на экранах мобильных устройств.
В этом разделе представлены сведения о добавлении содержимого на отдельные страницы сайта. Также мы рассмотрим использование виджетов другого типа — Раздвижная панель . Виджеты Панель ( Раздвижная панель и Панель с вкладками ) помогают при создании сайтов. Используя виджеты, можно отображать больше содержимого страницы на небольших экранах.
Откройте проект в представлении «Дизайн» и начните редактирование.
Выберите Файл > Поместить . В диалоговом окне Импорт перейдите в папку, в которой хранятся ваши ресурсы, и выберите необходимый файл изображения. Нажмите кнопку Выбрать , затем нажмите один раз в верхней части страницы, чтобы поместить на страницу изображение в исходном размере и использовать его в качестве текста верхнего колонтитула. Виджет Раздвижная панель будет размещено под верхним колонтитулом.
Добавление виджета «Раздвижная панель» на веб-страницу
Откройте библиотеку виджетов . (Для этого выберите Окно > Библиотека виджетов . Если библиотека виджетов уже открыта, активизируйте ее в наборе закрепленных панелей, щелкнув соответствующую верхнюю вкладку.)
Выберите Панели , чтобы развернуть список виджетов, представленных в виде панелей. Выберите виджет Раздвижная панель . Перетащите виджет Раздвижная панель на страницу и поместите его в верхней левой части области содержимого страницы.
С помощью инструмента Выделение выберите различные компоненты виджета. При выборе всего виджета на индикаторе выбора в левом верхнем углу панели управления отображается слово «Виджет». При повторном щелчке обратите внимание на информацию о выборе контейнера или текстового фрейма, отображаемую на индикаторе выбора . Индикатор выбора указывает выбранную на данный момент часть виджета.
Если требуется отменить выбор элемента виджета, нажмите клавишу Escape один раз для возврата на предыдущий уровень относительно выбранного элемента или несколько раз для возврата в состояние, предшествовавшее выбору вложенных элементов. Тот же результат достигается при щелчке в любом месте страницы за пределами виджета.
По умолчанию виджет Раздвижная панель имеет две панели. На верхней панели отображается замещающее имя вкладки «Lorem 1», а на нижней — замещающее имя вкладки «Ipsum 2».
Нажмите круглый синий значок со стрелкой для открытия диалогового окна параметров виджета . Убедитесь в том, что режим Редактировать вместе включен. В этом режиме все изменения, внесенные на одной из вкладок виджета Раздвижная панель , применяются ко всем вкладкам.
С помощью инструмента Выделение выберите виджет одним щелчком мыши, а затем, перетаскивая правый маркер вправо, увеличьте ширину виджета до ширины двух столбцов, как показано на рис. ниже.
Нажмите значок «плюс» (+) в нижней части виджета под панелью «Ipsum 2» для добавления третьей панели. На верхней панели отображается замещающее имя вкладки «Ipsum 3».
В следующем разделе приведены инструкции по заполнению панели виджета Раздвижная панель текстовыми материалами. Однако сначала следует обновить имя верхней вкладки, отображаемое над первой панелью в виджете Раздвижная панель .
Добавление текста в виджет «Раздвижная панель»
С помощью инструмента Выделение выберите текстовый фрейм верхней вкладки, в данный момент содержащий имя «Lorem 1». нажмите текст «Lorem 1» для выбора всего виджета и развертывания контейнера, соответствующего верхней вкладке, затем нажмите текст «Lorem 1» еще раз для выбора текстового фрейма. При выборе текстового фрейма на индикаторе выбора отображаются слова Текстовый фрейм .
Дважды нажмите замещающий текст «Lorem 1» для его редактирования, затем введите новый текст.
Выберите светло-серый контейнер большего размера под первой вкладкой. С помощью инструмента Текст перетащите текстовый фрейм, заполнив им контейнер большего размера.