Как определит ID элемента на Adobe Muse сайте?

Всем привет!

Сегодня я пишу урок о том как определить Id любого элемента на любом сайте созданном в Adobe Muse!
Но перед этим мне следует рассказать зачем и почему это нужно знать и уметь.

Дело в том, что многие виджеты для Muse (или при вставке своего CSS кода) требуют знать ID элемента. Когда Вы создаете сайт в Muse то для Вас все эти Id не видны, Вы даже не задумываетесь о такой штуке. И это в принципе правильно, так как id появляется только при просмотре сайта в браузере.

Когда Вы создаете например два прямоугольника (не важно какие у них свойства) то Adobe Muse автоматически "придумает" для каждого из них свой уникальное имя. От сюда следует что id - это уникальное имя каждого объекта который Вы создаете в Muse.

От сюда получается, что когда в каком либо виджете Вас просят указать id элемента, это значит что виджету нужно знать "точный адрес" элемента. Ему нужно знать "имя" элемента. Когда Вы добавляете свой CSS код то для всех свойств обязательно нужно указывать к чему их применять, и тут опять нужны id. В общем, вещь архиважная.

И так, вот как определить ID элемента:

• Вам нужно открыть страницу (сайт) в браузере. Есть три варианта:
  • Файл - Предварительный просмотр страницы в браузере
  • Файл - Экспортировать как HTML - Открыть получившийся файл
  • Файл - Публикация на Bussines Catalyst
• Какой бы путь Вы не выбрали, в любом случае Вы увидите сайт в браузере, это нам и нужно
• Представим что у нас есть два прямоугольника на странице: красный и синий:
  
  
   
• Чтобы узнать id красного, надо:
  • Находясь в браузере (я использую Google Chrome), кликнуть правой кнопкой мыши:
    
    
     
  • Выбираем последний пункт (Просмотр кода элемента)
  • Появляется инспектор кода, где в HTML коде страницы уже выделена нужна Вам строка:
    
    
     
  • Осталось найти параметр id= и посмотреть что там написано. В случае с примером на скриншоте, вот строчка кода которая относится к красному прямоугольнику:

    <div class="grpelem" id="u97"><!-- simple frame --></div>

    Из нее мы можем узнать что id красного прямоугольника - u97.

Вот и все. Таким не хитрым способом Вы можете определить id любого элемента.

Тоже самое Вы можете проделать в любом другом популярном браузере (Mozilla, Safari, Opera). Схема точно такая же. Кликаете на нужный элемент правой кнопкой мыши и смотрите код.

Вопросы по уроку задавайте в комментариях ниже.