Где найти ID для виджета в Adobe Muse

Где найти ID для виджета в Adobe Muse?

Из этого видео Вы узнаете как и где найти ID любого элемента, созданного или размещенного в проекте сайта в Adobe Muse.

Поиск ID бывает обязательным для некоторых платных и бесплатных виджетов, которые требуют для правильной работы осуществить привязку к тем или иным элементам сайта по их ID. В этом видео Вы также узнаете как и где найти ID элемента сайта, используя самые популярные браузеры операционной системы Windows: Google Chrome, Mozilla FireFox, Opera, Edge. Что касается системы Mac OS и браузера Safari – этот вопрос в силу некоторых технических обстоятельств остается открытым.

Смотрите видеоурок:

(Виджет из этого урока: Скачать)

Где найти ID для виджета Adobe Muse

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

Для примера я взял бесплатный виджет «Adipoli» (скачал его вот здесь: Скачать виджет Adipoli). Этот виджет содержит несколько эффектов для затемнения картинок и работает только с изображениями. Я разместил на странице сайта изображение – это картинка, размещенная с помощью инструмента «Прямоугольный фрейм» либо через функцию «Поместить». В меню «Файл» выбираем «Поместить» или нажимаем «Ctr + D».

Сейчас, если мы зайдем в режим «Просмотр», то мы увидим просто данную картинку, и ничего на ней не происходит. Для того, чтобы данный виджет сработал с этой картинкой, нам необходимо в настройках данного виджета указать ID этой картинки. Для того чтобы найти ID данной картинки нам необходимо зайти в просмотр данной страницы в браузере. Я нажимаю сочетание клавиш «Ctrl+Shift+E». У меня по умолчанию открывается браузер Chrome.

Где найти ID – Google Chrome

И в этом браузере для того, чтобы узнать ID картинки, нам необходимо нажать клавишу «F12». Вылезет вот такое дополнительное меню. Здесь есть инструмент «Выделение». Выглядит он вот таким образом. Необходимо на него нажать и затем навести курсор мыши на картинку. Уже просто наведя курсор мыши на картинку, мы можем увидеть, что на ней сверху появилась надпись, где, в принципе, уже содержится ID данной картинки. Но если мы нажмем на данную картинку, то у нас в правой панели выделится код, который отвечает за размещение данной картинки. И здесь вот в этом коде как раз прописан ID данного элемента – ID картинки. Написано: «ID=«u185_img»», где «u185_img» и есть нужное нам ID. Необходимо скопировать данный ID и просто вставить в программе Adobe Muse в настройках данного виджета – вот сюда нажимаем «Вставить».

Теперь данный виджет будет применяться к данной картинке. Давайте посмотрим, как это будет выглядеть. Я захожу в просмотр и теперь мы видим, что наша картинка стала черно-белой, и при наведении курсора мыши, она становится цветной и немного приближается. Таким образом, можно искать ID элемента для виджетов в программе Adobe Muse.

Давайте я удалю сейчас данный ID и покажу, как искать этот ID в других браузерах.

Где найти ID – Mozilla FireFox

Я снова нажимаю сочетание клавиш «Ctr + Shift + E», чтобы просмотреть страницу в браузере. У меня открывается Google Chrome. Я копирую просто вот этот код, данный адрес, и зайду теперь в браузер Mozilla Firefox. Здесь в адресной строке я вставляю адрес, который только что скопировал, нажимаю «Вставить» и «Enter». У меня появляется та же самая картинка в браузере. Находимся мы сейчас в браузере Mozilla Firefox.

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

Где найти ID – Edge

Следующий браузер – это браузер от компании Microsoft, браузер называется «Edge».Вставляем в адресной строке адрес, который скопировали. Открывается страничка для просмотра. Здесь точно также нажимаем клавишу «F12», и у нас появляется вот такое меню. Здесь инструмент «Выделение» находится в нижней панели «Выбор элемента». Берем его и выделяем точно также картинку.

Далее в коде отыскиваем ID данной картинки. Копируем ID и вставляем в настройке виджета в программе Adobe Muse.

Где найти ID – Opera

Следующий браузер – браузер Opera. Вставляем в адресную строку адрес нашей странички для просмотра. И в этом браузере клавиша «F12» почему-то не работает. Нажимаем сочетание клавиш «Ctr + Shift +C» для того, чтобы выйти опять в то же самое меню с дополнительными инструментами. По умолчанию, когда мы нажимаем клавиши «Ctr +Shift +C», у нас уже автоматически выбран инструмент «Выделение». Нам необходимо только навести курсор мыши на картинку, посмотреть ее ID либо кликнуть на картинку и посмотреть ID картинки в коде страницы. Выделяем ID, копируем его, нажав клавиши «Ctr+C» либо в контекстном меню по правой кнопке мыши нажимаем «Копировать» и вставляем в настройке виджетов в программе Adobe Muse – «Ctr+V».

Здесь вы также можете выбирать начальные и конечные эффекты для картинки. Есть несколько вариантов, но у большинства была самая загвоздка с поиском этого ID.

Где найти ID – Safari

Браузер, в котором я не смог проверить – это браузер Safari, поскольку у меня нет системы с Mac OS. Если у кого-то из вас есть компьютер с установленной системой Mac OS и браузером Safari, пишите в комментариях, как это можно сделать в браузере Safari. Я с удовольствием прочитаю ваш комментарий, и это будет полезно также всем тем, кто будет просматривать данное видео, и у кого установлена система Mac OS.

На этом я заканчиваю данный видеоурок. Оставляйте Ваши комментарии внизу на этой странице. Делитесь статьей в социальных сетях. Следите за обновлениями.

Смотрите также:

Виджеты Adobe Muse

Защита контента от копирования

 

Автор видеоуроков и курсов Adobe Muse
Дмитрий Шаповалов

Оставьте комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: