Обзор Adobe Muse 2017.1 с гибкими виджетами
22 августа 2017 года вышла новая версия программы Adobe Muse.
Так повелось, что я всегда записываю подробный видео-обзор о новых версиях программы. И сегодня я подготовил для вас очередной интересный обзор.
Выдержка с официального сайта Adobe:
«Адаптивные виджеты
Виджеты «Слайд-шоу», «Композиция» и «Форма обратной связи» теперь полностью адаптивные. Виджеты адаптивны теперь не только при экспорте, но и в процессе создания сайта при их изменении или редактировании. Просто перетащите новые виджеты на холст — они уже будут адаптивными. Или сделайте виджеты в ваших предыдущих проектах адаптивными, настроив для виджета адаптивные опции изменения размера и закрепления.
Повышение уровня стабильности и производительности
В этой версии Muse повышен уровень стабильности для безотказной работы приложения Muse. Увеличение производительности упрощает работу с приложением и сокращает время создания проектов.
Например, файлы, а в особенности файлы с несколькими страницами и большим количеством точек остановки, теперь мгновенно открываются в Muse. Кроме того, усовершенствованный процесс экспорта позволяет экономить время и публиковать готовый сайт в максимально короткие сроки.
Высокая продуктивность
В Muse CC 2017.1 введены различные новшества для удобства использования приложения. Среди главных улучшений:
Выбор подчиненного элемента в группе. Теперь, чтобы в иерархии вложенных групп виджетов или элементов выбрать подчиненный элемент и перейти к его свойствам, необходимо просто дважды нажать нужный элемент. Ранее, чтобы дойти до нужного подчиненного элемента, требовалось последовательно выбирать каждый родительский элемент.
Изменение масштаба «щипком». Теперь для изменения масштаба при добавлении и размещении объектов можно использовать сенсорную панель или устройство с сенсорным экраном.
Устранены известные неполадки
В этом обновлении также устранены различные неполадки, о которых сообщали пользователи. Среди улучшений: повышено удобство использования, а также устранены неполадки, приводившие к аварийному завершению работы или непредвиденным действиям приложения.
Список известных проблем этого выпуска Muse представлен в статье базы данных Известные проблемы.«
Теперь можно посмотреть и само видео.
Также, хочу напомнить, что сейчас идет набор на 2-х дневный интенсив «Реклама Вконтакте — Быстрый Старт». Условия участия и более подробно о мероприятии вы узнаете из этой статьи.
На этом всё. С уважением, Владимир Гынгазов.
Не забывайте оставлять комментарии!
Как добавить фоновое видео с помощью Adobe Muse
Автор Глеб Захаров На чтение 5 мин.
Просмотров 207 Опубликовано
Содержание
- Добавление видео в Adobe Muse
- Как подготовить страницу для фонового видео в Adobe Muse CC
- Как использовать полноэкранный фоновый виджет видео в Adobe Muse CC
- Как добавить видео и проверить страницу в Adobe Muse CC
- Как добавить рамку для постера в Adobe Muse CC
Добавление видео в Adobe Muse
Действительно интересный аспект Adobe Muse заключается в том, что он позволяет создавать веб-страницы, используя рабочий процесс, аналогичный тому, который использовался для размещения публикаций. Вам не нужно глубокое понимание кода, который создает сайт или страницу, но знакомство с HTML5, CSS и JavaScript не повредит.
В этом упражнении мы собираемся использовать виджет, который вы можете бесплатно скачать с Muse Resources. Когда загрузится виджет, все, что вам нужно сделать, это открыть файл .zip и дважды щелкнуть файл .mulib в папке «Полноэкранное видео». Это установит его в вашу копию Adobe Muse.
Как подготовить страницу для фонового видео в Adobe Muse CC
С установленным виджетом вы можете создать страницу, которая будет использовать видео.
Прежде чем начать, создайте папку для вашего сайта Muse. Внутри этой папки создайте другую папку – мы используем « media » – и переместим ваши mp4 и webm версии видео в эту папку.
При запуске Muse выберите Файл> Новый сайт . Когда откроется диалоговое окно «Макет», выберите Рабочий стол в качестве Начального макета и измените значения Ширина страницы и Высота страницы на 1200 и 900 .
Дважды щелкните мастер-страницу в представлении «План», чтобы открыть мастер-страницу. Когда главная страница откроется, переместите направляющие верхнего и нижнего колонтитула вверх и вниз страницы. Вам действительно не нужны верхний и нижний колонтитулы для этого примера.
Как использовать полноэкранный фоновый виджет видео в Adobe Muse CC
Использование виджета очень просто. Первое, что вам нужно сделать, это вернуться в вид в плане, выбрав Вид> Режим плана . Когда откроется вид в плане, дважды нажмите Домашнюю страницу , чтобы открыть его.
Откройте панель «Библиотека» – если она не открыта в правой части интерфейса, выберите Окно> Библиотека – и откройте папку [MR] Полноэкранное фоновое видео . Перетащите виджет в папку на страницу.
Вы заметите, что Параметры попросят вас ввести названия версий видео для mp4 и webm.
Введите имена точно так, как они написаны в папке, в которую вы их поместили. Чтобы избежать ошибок, скопируйте название видео в формате mp4 и вставьте его в области MP4 и WEBM в параметрах . меню
Еще одна хитрость: все, что делает этот виджет – это написание кода HTML 5 для вас. Вы можете сказать это, потому что вы видите в виджете. В этом случае вы можете разместить виджет с веб-страницы на монтажном столе, и он все равно будет работать. Таким образом, это не мешает содержанию, которое вы разместите на странице.
Как добавить видео и проверить страницу в Adobe Muse CC
Несмотря на то, что вы добавили код для воспроизведения видео, Muse по-прежнему не имеет ни малейшего представления о том, где находятся эти видео. Чтобы это исправить, выберите Файл> Добавить файлы для загрузки . Когда откроется диалоговое окно загрузки
Чтобы убедиться, что они были загружены, откройте Панель активов , и вы увидите два видео. Просто оставьте их в панели. Их не нужно размещать на странице.Чтобы протестировать проект, выберите Файл> Предварительный просмотр страницы в браузере или, поскольку это одна страница, Файл> Предварительный просмотр сайта в браузере . Откроется ваш браузер по умолчанию, и видео – в моем случае тропический дождь – начнет воспроизводиться.
На этом этапе вы можете рассматривать файл Muse как обычную веб-страницу и добавлять контент на домашнюю страницу, и видео будет воспроизводиться под ним.
Как добавить рамку для постера в Adobe Muse CC
Это сеть, о которой мы здесь говорим, и, в зависимости от скорости соединения, есть хороший шанс, что ваш пользователь может открыть страницу и смотреть на пустой экран во время загрузки видео. Это не хорошая вещь. Вот как справиться с этой неприятностью.
«Лучшая практика» – включать рамку постера в видео, которое будет отображаться во время загрузки видео.
Чтобы добавить рамку для постера, нажмите один раз на Заполнить браузер в верхней части страницы. Нажмите Ссылка на изображение и перейдите к нужному изображению. В области Подгонка выберите Масштаб для заполнения и нажмите Центральная точка в области Положение . Это гарантирует, что изображение всегда будет масштабироваться от центра изображения при изменении размера области просмотра браузера. Вы также увидите изображение на странице.
Еще один маленький трюк заключается в том, чтобы, по крайней мере, иметь сплошной, а не белый цвет заливки на тот случай, если для появления рамки плаката потребуется некоторое время. Для этого щелкните Цветной чип, чтобы открыть палитру цветов Muse. Выберите инструмент «Пипетка» и нажмите на преобладающий цвет на изображении. Когда закончите, нажмите на страницу, чтобы закрыть диалоговое окно Заполнение браузера.
На этом этапе вы можете сохранить проект или опубликовать его.
В последней части этой серии статей показано, как написать код HTML5, который вставляет видео в фон веб-страницы.
Как создать адаптивные элементы веб-сайта
Трейлер класса
Введение в класс
02:39 2Изучение виджетов в Muse
11:43 3Создать эффекты прокрутки
11:48 4Включение сторонних виджетов
11:10 5Работа с изображениями Retina/High DPI
13:26 6Как продать что-нибудь с вашего сайта
13:12 7Включение контента из других приложений Adobe
16:45Информация об уроке
Изучение виджетов в Muse
Что я собираюсь сделать, так это открыть существующий файл сайта, который у меня есть, потому что мы будем работать с существующим файлом.
nt, видео и тому подобное. У нас есть композиции. Композиции похожи на слайд-шоу, но вы можете поместить в них все, что захотите. У нас есть кнопки. Кнопки позволяют нам использовать переключатель с высоким разрешением, о котором мы поговорим чуть позже, а также просто обычную кнопку, если мы хотим работать таким образом.
Если они собираются щелкнуть, как это выглядит? Но что мне в них нравится, так это то, что, например, в состоянии прокрутки вы можете перейти к переходу и настроить затухание. По сути, это анимированный ролловер, если хотите. Итак, мы можем войти и затемнить, и сказать, давайте установим задержку, продолжительность, сколько времени это займет. Вы можете добавить то, что называется замедлением, так что, может быть, оно начинается медленно, затем плавно, а заканчивается медленно, плавно, что-то в этом роде, или вы можете сделать и то, и другое. И это позволяет нам, когда мы войдем, позвольте мне на самом деле проверить это. Чтобы протестировать в Muse, мы можем нажать Command P, чтобы распечатать, технически, и выполнить внутреннюю проверку, или мы можем перейти в «Файл», «Предварительный просмотр в браузере», если мы хотим это сделать, например, просмотреть страницу в браузере, и если я выберу предварительный просмотр, что мы нужно сделать, мы собираемся взглянуть и посмотреть, что это делает для нас.
Так что, если я сделаю ролловер, вы увидите это анимированное состояние прямо здесь. И он вернется в нормальное состояние, но все, что нам нужно сделать, это установить переход, а затем вернуться в это нормальное состояние. Итак, позвольте мне вернуться к Muse. Если я зайду в верхний левый угол и перейду в обычное состояние, я могу настроить там переход на затухание и делать все, что мне нужно. И таким образом, для всех различных состояний объекта, это не обязательно должна быть кнопка, для объекта я могу заставить его анимироваться. Итак, у нас есть много вещей, с которыми мы можем работать в отношении виджетов. Я хочу показать вам пару, которые мне очень нравятся, так что позвольте мне вернуться. Я собираюсь открыть другую страницу, которая у меня есть, или, скорее, другой сайт, так что позвольте мне перейти в «Файл», «Открыть», и мы начнем добавлять еще несколько различных типов виджетов композиции и работать. оттуда. Так что я собираюсь открыть эту страницу прямо здесь. Я дважды щелкну.
А если вы заглянете в панель библиотеки виджетов, то увидите композиции. Для меня это одни из лучших вещей, с которыми мы можем работать, потому что мы можем делать что-то подобное. На самом деле у нас есть то, что называется виджетом всплывающей подсказки. Теперь все виджеты композиции работают одинаково, просто они настроены немного по-другому, хорошо? Я собираюсь вытащить подсказку. И предположим, что у нас есть это изображение, и я хотел бы сделать так, чтобы при наведении курсора на часть изображения на самом деле отображалась подсказка как часть композиции. Ну, это именно то, что есть, если я немного перенесу это. Когда мы будем работать с виджетами композиции, вы увидите, что фактическая цель или то, что появляется, может содержать что угодно. Я могу вставить картинку, текст, видео, все что угодно, вы можете поставить слайд-шоу, вы можете вставить сюда все что угодно. Но то, как работают эти виджеты композиции, заключается в том, что у вас на самом деле есть то, что называется триггером, который, скажем, похож на этот маленький кружок прямо здесь, и триггер, на который кто-то нажимает, переворачивается, что бы вы ни установили, покажет это.
вещь, это содержание. Как я уже сказал, контент может быть абсолютно любым. Итак, что я могу сделать, так это взять эти маленькие триггеры и поместить их в разные места. Позвольте мне перетащить это сюда, например. И мы можем войти и, как всегда, мы можем установить такие вещи, как наши состояния, если захотим. Нормальное состояние, активное, ролловер и т. д. И часто мне нравится делать для них цвета и границы и, возможно, что-то, что заставит их выглядеть немного по-другому. Таким образом, вы можете видеть, возможно, границу, цель или объект. Позвольте мне добавить немного цвета, чтобы вы могли видеть это. Ну вот. Теперь с каждым из них вы на самом деле связываете это с каждым триггером, если хотите, так что это целевая область. Мы можем поставить практически все, что захотим. Как я уже сказал, если вы идете сюда, вы должны думать о виджетах композиции, когда вы перетаскиваете один из них, как о группе объектов. Так как мы склонны работать с ними, вы заметите, что я просто много нажимаю.
Если я нажму на все это, вы выберете всю композицию. Если я нажму еще раз, я на самом деле выберу одну из частей этого виджета композиции. Затем я могу щелкнуть еще раз, и вы можете щелкнуть быстро или дважды, тройным щелчком, перейти к объекту, вы можете выбрать его и, например, удалить. Я могу удалить этот контент и поместить туда все, что захочу. Так что, если я хочу добавить, позвольте мне перейти к виджетам. Я пойду в Социальные сети, и вы увидите, что у нас есть много социальных виджетов, которые мы можем использовать, и это вещи, которые мы собираемся использовать в достаточном количестве. Я мог бы снять видео, например. Это может быть что угодно. Все, что я хочу связать с этим, я могу просто перетащить, и вы можете вставить, если хотите, и вы заметите, что если я перетащу что-то туда, оно будет расширяться, чтобы соответствовать этому содержанию, хорошо? Теперь я мог установить параметры. Я мог бы выйти, и если бы я хотел, для каждой из этих целей прямо здесь, этих парней, я мог бы нажать Escape, чтобы не выбирать содержимое внутри, а выбирать реальную цель, объект.
Затем я могу настроить цвета, всевозможные вещи, если захочу. Итак, я на самом деле установил этот объект как белый. Я мог установить его без заполнения, делать все что угодно. Чтобы мы могли проверить это, позвольте мне войти и выбрать это снова. Я возьму этот предмет здесь. Я хватаю все это, позвольте мне вернуться немного здесь. Ну вот. Я вставлю это. Позвольте мне положить это здесь, чтобы мы могли видеть все это. Хорошо, поехали. Это должно ассоциироваться с ним. Теперь, что мы можем сделать, так это начать переходить к каждому из этих триггеров, если мы хотим сделать что-то подобное, и показать или скрыть различный контент, хорошо? Таким образом, каждый из виджетов композиции, с которыми мы работаем, позволит нам, и похоже, что я не совсем понял это по какой-то причине. Это не положить его туда. Позвольте мне попробовать это снова. Я добавлю это. Вы должны увидеть, как появляются блики. На самом деле он покажет синий контур. Ну вот. А теперь будет показывать и прятать. Таким образом, вы должны убедиться, что у вас есть этот контент.
Это на самом деле происходит изрядное количество. И затем мы можем перейти к каждой из этих целей, если захотим, и переместить их рядом с ними или расположить их так, как мы хотим. Итак, ваш взгляд на дизайн — это то, как вы хотите это настроить. Вы можете делать практически все, что захотите. Так что это довольно удивительно, что мы собираемся установить и создать их. Композиция, как я уже сказал, все это настроено, они работают одинаково, но у нас есть эта триггерная цель, и они просто выглядят по-разному, и у них разные значения по умолчанию. Теперь самое замечательное в виджетах композиции то, что если вы выберете все это, как и большинство виджетов на панели библиотеки виджетов, вы увидите эту синюю опцию, этот синий кружок здесь. Это все параметры виджета композиции, которые мы можем установить. Так что у нас есть много вещей, которые мы можем сделать здесь. Теперь, для начала, мы просто настроили его с этими кругами, с этими триггерами и целями. Если мы хотим сделать так, чтобы мы настроили разные переходы, у нас есть это вместо затухания или ролловера, мы можем сделать это там, где они щелкают, или делать разные подобные вещи.
Есть много способов, которыми вы можете поиграть с этим, чтобы получить то, что вы хотите. Сейчас мы не собираемся тестировать это прямо здесь, на странице, как большую часть нашего контента, который мы настроили как виджеты. Мы собираемся войти и либо протестировать его в Muse, вы можете нажать Command P, если хотите, это похоже на команду печати, но мы собираемся просмотреть ее. Он просматривает его в движке браузера, но вы действительно можете видеть, что у нас есть наш контент, вот и все. Таким образом, мы можем показать каждый из этих триггеров и целей. Но мы хотим убедиться, что это выглядит хорошо. Мы также хотим убедиться, что мы получаем эти вещи, чтобы они на самом деле не перекрывались, потому что эти триггеры, вы увидите, что они на самом деле будут работать поверх всего контента. Ты это видишь. Ладно, позвольте мне вернуться. Итак, у нас есть много различных типов виджетов, с которыми мы можем работать, и еще одна вещь, которую я хотел показать вам в связи с этим, позвольте мне перейти на эту страницу.
Если мы захотим, мы действительно можем сделать так, чтобы поместить их друг в друга. И вот тут-то и начинает проявляться реальная мощь. У нас могла бы быть система панелей с вкладками или какая-то композиция, может быть, что-то вроде этого. Позвольте мне на самом деле выпустить пустую композицию, вот и все, что-то в этом роде. И вы еще раз увидите, что у нас есть триггеры внизу, и у нас есть цель для каждого. Мы можем перемещать их, если захотим, если выберем их независимо. Я могу изменить их размер. Все виджеты композиции в наши дни, как вы обнаружите, адаптивны. Все слайд-шоу, виджеты композиции, формы — все адаптивные, и это означает, что если мы изменим здесь размер и просмотрим его на другом экране, вы точно увидите, что он делает, и это здорово. Теперь, если мы хотим, как я уже сказал, мы можем вложить их друг в друга. Итак, если у меня есть слайд-шоу, и у меня есть каждое из них, которые я хочу настроить, что-то вроде этого, я мог бы на самом деле перейти к слайд-шоу, например, поэтому я беру пустое слайд-шоу и могу на самом деле поместите виджет внутри виджета.
Теперь вы увидите, что здесь произойдет то, что мои триггеры здесь будут скрыты. Так что я могу войти и выбрать один. Я могу выйти и попытаться немного их передвинуть. Позвольте мне получить все это в линию. Умные направляющие помогают мне совместить все это. Я просто щелкаю. Вот и все, выглядит неплохо. И теперь, когда я перейду к каждому из них, вы увидите, что я действительно могу вставить слайд-шоу в композицию. Итак, как я уже говорил ранее, когда мы войдем и начнем работать здесь, мы, возможно, захотим иметь что-то вроде сайта-портфолио, мы хотим показать контент, мы можем начать помещать их друг в друга, просто чтобы сделать это так много. более могущественный. Теперь вам нужно быть осторожным, когда вы делаете такие вещи, из-за отзывчивого характера. Иногда становится немного сложнее убедиться, что это будет выглядеть правильно, когда у нас будет меньший размер экрана, поэтому вы всегда, всегда, всегда, когда делаете что-либо с виджетами, как и все остальное в Muse, если вы создаете отзывчивый веб-сайт, вы хотите убедиться, что вы тестируете вещи.
Итак, я просто хотел немного рассказать вам о работе с различными типами виджетов, которые у нас есть. Их много, и это большая игровая площадка, и это то, над чем вы действительно можете работать, тестировать и пробовать, и если вы увидите веб-сайт, вы увидите, что есть много способов работать с этим.Блог | Виджеты Adobe Muse
Последние сообщения
Как включить единую подписку с помощью Mailchimp в Adobe Muse
Включение единой подписки в виджете MailChimp позволит пользователям подписываться на ваш список без необходимости подтверждения своего адреса электронной почты. В этом посте объясняется, как включить единую подписку в Adobe Muse.
Продолжить чтение — mailchimpmarketingКак включить чистые URL-адреса в вашем магазине Эквида
Эквид теперь предлагает возможность генерировать чистые URL-адреса в вашем магазине Эквида. В этом посте вы узнаете, как включить эту функцию в своем магазине.
Продолжить чтение — ecwidseohtaccessredirectscanonicalКак удалить index.
html с домашней страницы в Adobe MuseКогда вы публикуете свой веб-сайт в Adobe Muse, Muse устанавливает URL-адрес своей домашней страницы в версию index.html. Так как версия без index.html чище, согласованнее и ее легче запомнить, вы можете убедиться, что чистая версия будет единственной версией.
Читать далее — seohtaccessredirectscanonicalУскорьте свой сайт с помощью кэширования и сжатия
Ускорить свой сайт на удивление просто. В этом посте вы узнаете, как мгновенно ускорить работу любого веб-сайта Adobe Muse.
Продолжить чтение — seospeedhtaccessРуководство из 5 шагов для индексации вашего сайта Adobe Muse
Вы создали прекрасный сайт в Muse и теперь хотите, чтобы люди могли легко его найти. В этом руководстве вы узнаете, как проиндексировать свой сайт за 24–48 часов.
Продолжить чтение — SEO-индексацияКак перенаправить на www и http(s) или с них
В SEO очень важна канонизация URL-адресов. Один из первых шагов в этом процессе — убедиться, что все ваши страницы включают (или исключают) www в вашем домене.
Этот краткий пост покажет вам, как легко это сделать.
Как создать SEO-дружественную переадресацию
Создать SEO-дружественную переадресацию очень легко. Все, что вам нужно, это доступ к вашему веб-серверу. Если вам нужен простой способ сгенерировать код перенаправления, взгляните на 301 Redirect Generator.
Продолжить чтение — seohtaccessredirectsВведение в техническое SEO в Adobe Muse
В этом посте будут рассмотрены современные передовые методы SEO и способы их простого внедрения на веб-сайт Adobe Muse.
Продолжить чтение — seoschema5 лучших SEO-виджетов, созданных для Adobe Muse
Целью этого поста было найти самые эффективные SEO-виджеты, созданные для Adobe Muse. Последний раз он обновлялся 30 мая 2016 г. Пожалуйста, прокомментируйте ниже или свяжитесь со мной, если у вас есть какие-либо вопросы или вы считаете, что виджет получил несправедливую оценку. Если вы хотите сразу перейти к результатам, нажмите здесь.
Размещение вашего местного бизнеса в Интернете
Размещение вашего бизнеса в списке — одна из самых важных частей для того, чтобы вашу компанию и/или веб-сайт нашли в Интернете. Я проделал всю работу над любым бизнесом, который я начал, будь то веб-дизайн, маркетинг в социальных сетях или публичные списки компаний. Это большая работа, но, надеюсь, это ускорит процесс для вас.
Продолжить чтение — seomarketinglocalbusinessДобавление локального SEO в Adobe Muse
Добавление информации о местном бизнесе важно для графа знаний Google, и это очень легко сделать в Muse благодаря этим замечательным виджетам. Узнайте, какие варианты доступны и как они работают.
Продолжить чтение — selocalschemaКак Musers могут вести блог в Adobe Muse
Этот пост предназначен для дизайнеров Adobe Muse, которые хотят создать блог на своем веб-сайте Adobe Muse. Это не то, как вы можете встроить блог или разместить блог в Muse с помощью iframe.
