Как сделать счетчик adobe muse
Яндекс Метрика для Adobe Muse
Всем привет и добро пожаловать! Вы находитесь на нашем блоге, который посвящен вопросам веб-дизайна и разработки сайтов. В данной статье я затрону процесс интеграции сторонних скриптов и HTML-кодов сбора статистики посещаемости сайта. Я научу вас взаимодействовать с одним из наиболее популярных сервисов Рунета. Вы уже, наверное, догадались, что речь пойдет о том, как добавить Яндекс Метрику в Adobe Muse. Сервис Метрики бесплатный и общедоступный, функционирует он с 2009 года, помогая оценивать конверсию веб-проектов.
Как вставить Яндекс Метрику на сайт Muse?
Перейдем на страничку Метрики Яндекс
, чтобы создать новый счетчик и привязать его к вашему веб-сайту. Разумеется, для этого нужно быть залогиненным в своём Яндекс-аккаунте. На момент написания статьи (сентябрь 2016 г.) панель управления Яндекс-Метрики выглядит следующим образом:
(Кликните по картинке для увеличения)
Как вы видите, у меня уже есть несколько счетчиков, собирающих статистику с лендинг пейдж, интернет магазинов и прочих проектов, которые я разработал. Если у вас нет опыта работы с Метрикой, то давайте сделаем всё поэтапно. Нажмите кнопку добавить счетчик, после чего вы попадете на вторую страницу:
(Кликните по картинке для увеличения)
Укажите имя счетчика, а также адрес сайта, на который он будет вставлен. Будьте внимательны при указании домена! После принятия соглашения пользователя подтвердите данные, и вы окажетесь на следующей странице:
(Кликните по картинке для увеличения)
Поздравляю! Теперь, когда вы добавили счетчик Метрики на свой сайт, вы можете заходить в панель управления и получать подробные срезы посещаемости и источников трафика.
Настройка Яндекс Метрики в Adobe Muse.
Выше я описал простейший способ добавления кода счетчика. Однако опытные пользователи интернета знают, что у Яндекс Метрики есть ещё и так называемый информер. Выглядит он примерно так, предоставляя открытый доступ любому посетителю к трём параметрам (просмотры, визиты, посещения):
Как настроить Яндекс Метрику в Adobe Muse, чтобы появился информер? Вернёмся опять к этапу, на котором мы копировали код Метрики из панели управления, и установим галочку Информер. Как вы заметили, к коду добавилось ещё несколько строк, обрамленных комментариями Yandex.Metrika informer. Скопируйте этот фрагмент кода, перед этим настроив внешний вид информера на свой вкус. Вы уже знаете, как вставить скрипт Метрики в страницы вашего проекта в Muse. Теперь вам нужно вставить HTML-фрагмент Яндекс-Информера (не забудьте перед этим вставить и основной код Метрики через свойства страницы). Вставьте скопированный код в произвольное место страницы документа Muse, и вы увидите примерно следующее:
Информер Яндекс Метрики вы можете поместить в любую область страницы на ваше усмотрение, обычно их помещают в самый низ – в футер (подвал) странички. Обратите внимание на то, что визуальное отображение кода информера в Мьюзе гораздо больше его истинного размера. Это может вызвать проблемы при работе с сайтом, так как фрейм его кода может “заехать” на другие элементы, и, к примеру, сделать рядом расположенную ссылку некликабельной, а текст невыделяемым. Чтобы этого избежать, рекомендую мышкой уменьшить размеры фрейма кода информера до минимальных размеров. Это никак не скажется на его внешнем виде и функциональности, при этом он не будет перекрывать соседние участки вашего веб-сайта своим невидимым кодом.
Спустя сутки, после того как вы вставили Яндекс Информер на каждую страницу своего проекта и опубликовали его в сети, он начнет собирать и выводить статистику посещений, визитов и просмотров.
Спасибо за внимание! Надеюсь, вы нашли в статье массу полезного и интересного. Если у вас возникли вопросы по Adobe Muse, пишите нам на электронную почту:
Использование виджетов «Композиция» в Adobe Muse
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.
Виджеты «Композиция» в Adobe Muse позволяют добавлять сложные интерактивные функции на ваши веб-сайты. Виджеты «Композиция» практически незаменимы для отображения различного контента на любых сайтах: сайт художественных фотографий или сайт ресторана. Можно использовать эти виджеты для создания веб-сайтов с уникальными возможностями навигации и просмотра без написания кода.
Adobe Muse предлагает несколько типов виджетов «Композиция», которые позволяют добавлять и создавать разные виды контента для вашего веб-сайта. Например, пользователь, создающий сайт художественных фотографий, может выбрать виджет «Лайтбокс», чтобы добавить фотогалерею для своего веб-сайта. Этот виджет затемняет все области страницы, привлекая таким образом внимание посетителей сайта к активной области экрана.
Также можно создавать интересные веб-дизайны с помощью вложенных виджетов в виджет «Композиция». Например, при создании каталога можно использовать виджет «Пустая», чтобы добавлять меню «гамбургер» (значок с тремя горизонтальными линиями) и вкладывать виджет «Слайд-шоу» в целевую область виджета «Пустая». Такой дизайн обеспечивает уникальность вашим веб-сайтам и удобство для пользователей.
Узнайте обо всех типах виджетов «Композиция», доступных в Adobe Muse.
Типы виджетов «Композиция»
Виджет «Композиция» состоит из двух контейнеров: «Триггер» и «Целевая область». Область триггера — это область, где пользователь щелкает мышкой, а целевая область — это область, соответствующая отображаемой области. Для добавления сложных функций интерактивности свяжите область триггера и целевую область.
Adobe Muse предлагает следующие типы виджетов «Композиция»: В зависимости от требований к дизайну можно использовать один из этих виджетов или комбинацию виджетов, вкладывая один в другой.
Пустая
Виджет с небольшими миниатюрами. По умолчанию этот виджет не содержит встроенных виджетов. Его можно вручную связать с целевым контейнером.
Специальные новости
Виджет, функции которого схожи с виджетом «Раздвижная панель». Для этого виджета в области контейнера можно добавить текст и изображения.
Лайтбокс
Виджет, в котором содержимое целевой области становится активным при нажатии триггера. Остальная часть страницы затемняется при отображении целевого объекта.
Презентация
Этот виджет содержит небольшие миниатюры, связанные с целевой областью презентации. По умолчанию в этом виджете слайды сменяются в горизонтальном порядке.
Подсказка
Этот виджет содержит текст подсказки. При наведении курсора на область триггера сразу же отображается подсказка.
Добавление и настройка виджетов «Композиция»
Чтобы добавить и использовать виджет «Композиция» в Adobe Muse, выберите нужный виджет «Композиция» и перетащите его в режим «Дизайн». Поскольку эти виджеты являются адаптивными по умолчанию, они гибко настраиваются в соответствии с разными точками остановки. Чтобы изменить расположение или содержимое виджета «Композиция», можно отредактировать виджет, изменить его размер и прикрепить его отдельные элементы к определенной точке остановки.
Следуйте этим инструкциям, чтобы добавить виджет «Композиция» в макет.
Откройте Adobe Muse. На экране приветствия нажмите «Создать новый», чтобы создать сайт, или откройте уже существующий сайт Adobe Muse, в который вы ходите добавить виджет «Композиция».
В режиме «План» дважды нажмите и откройте страницу, на которую вы хотите поместить виджет.
Откройте библиотеку виджетов («Окно» > «Библиотека виджетов») и нажмите «Композиция», чтобы раскрыть меню с параметрами. Выберите один из виджетов «Композиция» в зависимости от вашего дизайна.
Например, выберите «Лайтбокс» в библиотеке виджетов.
Для удаления содержимого по умолчанию, которое подставилось в виджете, нажмите виджет правой кнопкой мыши и выберите «Удалить содержимое виджета».
По умолчанию виджет «Лайтбокс» имеет три небольших серых окна триггера над более крупным целевым контейнером светло-серого цвета.
Когда пользователь нажимает контейнер триггера, отображается целевой контейнер виджета «Лайтбокс». В качестве целевого объекта можно вставлять изображения, текст, видеоролики (в том числе видеоролики YouTube).
Выберите контейнер или триггер в виджете «Композиция». Чтобы выделить весь виджет, выберите его. В индикаторе выбора в левом верхнем углу приложения отобразится слово «Композиция».
Чтобы выбрать триггер, дважды нажмите и выберите небольшие прямоугольники в этом виджете. В индикаторе выбора будет отображаться слово «Триггер». Небольшие прямоугольники являются триггерами для этого виджета. Это кнопки, реагирующие на действия пользователя.
Когда ни один из элементов не выбран, в индикаторе выбора в левом верхнем углу отображается слово «Страница».
Выберите «Файл» > «Поместить», чтобы открыть диалоговое окно «Импорт». Выберите файлы, которые требуется разместить в этом виджете. Нажмите кнопку «Открыть», чтобы выбрать файл и закрыть диалоговое окно «Импорт».
Нажмите один раз в любом месте страницы, чтобы поместить на нее изображение в полном размере.
Выбрав изображение, нажмите правой кнопкой мыши для выбора функции «Вырезать» в контекстном меню.
Чтобы вырезать изображение со страницы и скопировать в буфер обмена, можно также использовать комбинацию клавиш.
Нажмите правой кнопкой мыши внутри триггер-кнопки и выберите «Вставить». Можно также использовать комбинацию клавиш, чтобы вставить изображение в триггер. Обратите внимание, что контейнер триггера автоматически увеличивается до размера изображения.
Вставка содержимого в контейнер может вызвать трудности. Иногда контент размещается не в контейнере, а на странице.
Чтобы проверить, что изображение находится внутри контейнера триггера, нажмите один раз клавишу Escape и посмотрите на индикатор выбора. Если в нем отображается слово «Триггер», значит, изображение вставлено в триггер. Если в индикаторе выбора отображается слово «Страница», то необходимо вырезать и вставить изображение в контейнер триггера еще раз.
Также можно открыть панель «Слои» (Окно > Слои), чтобы проверить, куда вставлено изображение. Панель «Слои» отображает иерархию элементов на странице.
Чтобы добавить дополнительные миниатюры, нажмите значок плюса (+) рядом с контейнерами триггера.
После размещения виджета в режиме «Дизайн» можно продолжить работу с ним и настроить его. Чтобы изменить параметры виджета «Композиция», выберите виджет и нажмите синюю стрелку в правом верхнем углу виджета.
На панели «Параметры» можно изменить следующие настройки:
Функция «Показать элементы лайтбокса при редактировании» отключается, если в раскрывающемся списке выбраны параметры «Рассредоточено» или «Каскадно».
Функция «Изначально скрыть все» отключается, если выбран параметр «Автолайтбокс».
Чтобы удалить ненужные триггеры, дважды нажмите и выберите соответствующие триггеры. Нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить выделенный триггер.
Нажмите главное изображение в контейнере триггера, чтобы вызвать эффект лайтбокса.
Нажмите клавишу Escape, чтобы закрыть окно лайтбокса, вернуться в режим «Дизайн» и продолжить редактировать страницу Adobe Muse.
После завершения настройки и размещения виджета «Композиция» в макете проверьте работу виджета в режиме «Предварительный просмотр».
Если вы используете виджет «Композиция» в адаптивном макете, ознакомьтесь со следующим разделом. Тестируйте и выполняйте предпросмотр ваших виджетов на всех точках остановки.
Использование виджетов «Композиция» в адаптивных макетах
Виджеты «Композиция» по умолчанию адаптивны. Для добавления виджетов «Композиция» в адаптивные макеты и работы с ними выполните следующее:
Нельзя выбрать весь виджет и изменить настройки параметра «Изменить размер». Выберите элемент или несколько элементов виджета для преобразования в адаптивные элементы.
Настройте виджет с помощью инструкций, указанных в разделе Добавление и настройка виджетов «Композиция». После настройки и оформления виджета можно выполнить предпросмотр виджета в браузере или использовать указатель для изменения размера. Виджеты будут автоматически изменять размер в соответствии с размером экрана.
При добавлении виджета «Композиция» в адаптивный макет рекомендуется создавать макеты в наиболее крупных точках остановки. После окончательного размещения и настройки виджета в наиболее крупной точке остановки добавьте дополнительные точки остановки там, где необходимо.
Подробнее о создании веб-сайта для адаптивного макета см. в разделе Создание макетов объектов в адаптивном дизайне.
Сочетание виджета «Композиция» с другими виджетами
Один из наиболее уникальных аспектов виджета «Композиция» — это поддержка вложенных виджетов. Это значит, что вы можете добавлять такие виджеты, как «Формы», «Слайд-шоу», или элементы меню в виджет «Композиция».
Например, вы можете добавить виджет «Слайд-шоу» в целевой контейнер виджета «Специальные новости» на веб-сайте, посвященном кулинарии. Когда посетитель сайта нажимает на подпись в меню (виджет «Специальные новости»), целевая область, содержащая галерею, отображается как слайд-шоу.
Также можно добавить форму обратной связи как целевой объект. Когда пользователь нажмет кнопку Связаться, он будет перенаправлен на страницу формы обратной связи.
Существует большое количество сочетаний и возможностей благодаря вложению одного виджета в другой. Однако обратите внимание на следующие аспекты при создании вложенных виджетов в адаптивных макетах:
Если вы вкладываете виджеты в виджеты «Композиция», рекомендуется не создавать более трех уровней вложения.
В следующем разделе рассказывается о том, как создавать подменю с помощью виджета «Композиция». Ознакомьтесь с образцом сценария для создания скрытых подменю для навигации по вашему сайту.
Создание подменю с помощью виджетов «Композиция»
Путем настройки виджетов «Композиция» можно создавать подменю для навигации по сайту. Можно создать пункт меню, в котором будет отображаться подменю при наведении посетителем курсора на активную область. При отведении посетителем курсора с активной области это подменю будет скрываться. Можно также настроить виджет таким образом, чтобы подменю скрывалось, если посетитель решит не нажимать ни одну из ссылок этого подменю и просто отведет с него курсор. Такие интерактивные подменю крайне удобны при построении навигационной панели сайта с множеством различных подразделов.
Можно использовать меню «Показать целевой объект» и «Скрыть целевой объект», когда необходимо реплицировать общую работу меню веб-сайта. Посетитель может нажать любую из ссылок или отвести курсор за пределы окна, чтобы скрыть его. Когда этот параметр включен, не нужно нажимать кнопку «Закрыть», чтобы скрыть подменю.
Эта функция доступна при работе со следующими виджета раздела «Композиции»:
Панель «Параметры» содержит два параметра для отображения целевого контейнера:
Вы также можете скрыть целевой контейнер в виджете «Композиция». Далее представлено четыре способа скрыть целевой контейнер:
Из следующего раздела вы узнаете, как использовать действие «При наведении курсора» для отображения целевого контейнера и действие при перемещении курсора за пределы контейнеров триггера и целевого объекта, чтобы скрыть целевой контейнер.
Выполните следующие действия, чтобы включить для виджета раздела «Композиции» параметр «Скрывать после отведения курсора» для создания строки меню, подменю которой отображаются и скрываются в зависимости от действий посетителя.
Админ-панель. CMS для Muse
CMS для Muse
Из этого видеоурока вы узнаете об одном из способов использования админ-панели на сайтах, созданных в Adobe Muse. Обычно админ панель необходима на некоторых сайтах, которые требуют постоянного внесения изменений, добавления текста, картинок и других элементов. Вот мы и рассмотрим как выкрутилась компания Adobe, для того чтобы хоть как-нибудь оправдать в этом плане свой продукт для создания сайтов – программу Adobe Muse. Итак, смотрим этот видеоурок про админ-панель – CMS для Muse.
Вступление.
Одним из актуальных вопросов в последнее время является вопрос передачи сайта заказчику и последующего внесения им изменений на страницах сайта, сделанных в Adobe Muse. В этом видеоуроке речь пойдет об одном самом простом и стандартном способе (сервисе), который предлагает сама компания Adobe – простая CMS для Muse.
Пример и добавление картинок.
Публикация на хостинге.
Вход в CMS для Muse
Все, файлы загрузились на сервер и доступны теперь по адресу моего сайта. Я заранее создал поддомен и загрузил туда на хостинг файлы вот этой странички для того, чтобы показать вам, как работать в дальнейшем, как изменять эти графические текстовые элементы прямо в браузере с помощью стандартной утилиты компании Adobe. Для того, чтобы это все сделать, мы должны перейти на сайт inbrowserediting.adobe.com и перед вами выскочит вот такая нехитрая страничка, где есть только одно окошко – кнопка “Начать редактирование”. Так же вы видите здесь написано: “Редактируйте сайт прямо в браузере”. Это и есть вход в админ панель – CMS для Muse.
Этот сервис компании Adobe позволяет вам редактировать сайт прямо в браузере. Здесь мы должны что сделать? Мы должны взять вот эту нашу ссылку, скопировать ее и поместить ее в это окошко. “Вставить” и нажать клавишу “Начать редактирование”. Здесь вы должны ввести данные доступа к ftp-аккаунту того хостинга, на который вы заливали ваш сайт. У меня уже здесь введены мои данные, я нажимаю кнопку “Вход” и меня перебрасывает в админку Adobe Muse CC inbrowserediting. Мы видим, что вся моя страничка подгрузилась здесь в том виде, в котором она есть и отображается на сайте. И что я здесь могу сделать?
CMS для Muse. Возможности стандартной CMS
При наведении мышки на графические или текстовые блоки у нас появляется вот такое выделение и под блоком кнопка “Редактировать”. Как я уже говорил в самом начале, редактировать задний фон мы не можем, так как мы его создавали с помощью инструмента “Прямоугольник” и осуществляли заливку картинкой. То же самое у нас в футере: мы создавали прямоугольник и заливали его каким-то цветом, редактировать его мы не можем. Мы можем редактировать тексты и все элементы, которые мы создавали другим способом. Вот эти вот картинки я создавал с помощью функции “Поместить” в программе Adobe Muse.
CMS для Muse. Внесение изменений на сайт
Итак, давайте попробуем что-нибудь изменить. Допустим, нам хочется поменять вот это название “Урок 1” на какое-нибудь другое. Давайте нажмем “Редактировать”, перед нами выскакивает вот такое окошко, где мы можем изменить текст. Запишем, например, “Занятие1”, нажимаем “Обновить” и видим, что наш текст поменялся на “Занятие1”. То же самое можем сделать с этим текстом, нажав на “Редактировать” и поменять здесь все, что мы хотим.
Ссылки
Еще одна функция здесь есть – это добавление ссылки. Мы можем выделить любое слово и поместить на него ссылку. Нажимаем вот на этот значок, нажимаем “Вставить ссылку” и ссылку мы можем вставить на страницы, на внешний url. Здесь можно ставить внешнюю ссылку и подсказку. Можем так же указать номер телефона, либо выбрать какой-либо файл, который разместится так же на нашей странице и люди смогут его скачать по этой ссылке. Либо мы можем вставить адрес электронной почты, и, нажав на эту ссылку, люди смогут написать нам письмо. Вставляю здесь ссылку, делаю небольшой комментарий, ставлю галочку “Открыть в новом окне”, если мне надо, и нажимаю “Вставить ссылку”. Мы видим, что ссылка вставилась и доступна так же подсказка при наведении мышки. Нажимаем “Обновить”. Мы можем так же выделить весь текст и удалить ссылку. Выделяем весь текст, “Удалить ссылку”, и у нас все ссылки удаляются. Нажимаем “Обновить” и все ссылки у нас здесь пропали, ничего больше нету. То есть вот так мы можем легко редактировать текст.
Картинки
Так же мы можем изменить любую картинку, например, нажав “Редактировать” под картинкой. У нас сразу выскакивают все картинки, которые есть на данном сайте. Либо мы можем выбрать картинку с компьютера, нажав клавишу “С компьютера”. Выбрав меню “С компьютера” мы можем выбрать здесь любой файл с нашего компьютера, допустим, вот такой, нажимаем “Обновить”, идет передача этого файла на сервер в папку с картинками и по окончании передачи эта картинка у нас разместилась как раз там, где мы и хотели ее поменять. Нажимаем еще раз “Редактировать”. Мне, например, не нравится эта картинка, и я могу выбрать ту же самую, которая вот здесь стояла – с компьютера. Нажимаю “Обновить”, происходит обновление, и картинка встала на место. Точно таким же образом можно поменять любой текст, даже можно щелкнуть, если это у вас кнопка. Можно по кнопке щелкнуть и перейти на другую страницу. В общем, так легко и просто можно редактировать сайт прямо в браузере.
CMS для Muse. Сохранение и обновление проекта
Для того, чтобы все изменения изменились и по нашему адресу на страницу все наши изменения сохранились, мы нажимаем кнопку “Опубликовать”. После того, как мы это сделали, мы можем перейти назад по адресу нашей страницы и, например, обновить. Я нажимаю F5 и видим, что наш заголовок поменялся на “Занятие1”. Вот таким вот образом можно редактировать созданные в Adobe Muse сайты прямо в браузере с помощью Adobe Muse CC inbrowserediting. Такая вот простенькая админка, позволяющая нам поменять тексты и картинки, не пользуясь самой программой Adobe Muse. Это удобно при передаче файлов заказчику, то есть заказчику мы передаем данные от его ftp-аккаунта и ссылку из браузера, на котором размещена его страница, и он сможет легко поменять на нем картинки и тексты.
Альтернативные CMS
Существуют, конечно, и более сложные методы использования админ панели – CMS для Muse. Это прикручивается, например, админка вордпресса или используются дополнительные модули, которые нужно очень умело встраивать. Есть специальные сервисы, я вам сейчас не буду их показывать, поскольку я еще пока их не исследовал. В будущем, думаю Adobe Muse сделает более полноценную админку, где можно будет двигать эти блоки, менять местами и сделает свой сервис более гибким.
На этом я заканчиваю данный урок. В нем мы узнали, как передать сайт заказчику и сделать так, чтобы он сам мог поменять в нем какие-либо тексты или картинки. Надеюсь, этот урок был для вас полезен. Пишите комментарии внизу к этому видео, ставьте лайки, подписывайтесь на канал. Жду вас в следующих видеоуроках. До встречи, пока.
Альтернативный способ создания CMS для Muse можете посмотреть по этой ссылке: