Работа со слоями в Adobe Muse.
Тема данного видеоурока – работа со слоями. Мы рассмотрим как изменять расположение элементов “по оси z” в проекте сайта в Adobe Muse, чтобы одни элементы не перекрывали другие в пределах одного слоя и как перемещать целые группы элементов, организованные в слои так, чтобы одна группа элементов не перекрывала другую.
Использование слоев полезно например при размещении на сайте меню. Меню всегда нужно располагать в самом верхнем слое, чтобы контент сайта при прокрутке не перекрывал его. Смотрите это видео:
Работа со слоями. Сразу к делу.
Давайте сразу откроем проект. Я создал новый проект. И создадим здесь пару прямоугольников разного цвета. Например, создам зеленый и оранжевый прямоугольники. Вы видите, что первый прямоугольник, который я создал, он расположен как бы за вторым прямоугольником, который расположен у меня спереди, т.е. оранжевый прямоугольник перекрывает зеленый.
Работа со слоями. Изменение расположения элементов в пределах слоя.
Для того чтобы нам поменять это расположение, нам необходимо нажать правой кнопкой мыши и упорядочить первый прямоугольник на передний план. Таким образом, мы поменяли их позиционирование по, так называемой, оси Z, по глубине расположения. Если мы рассматриваем плоскость нашей страницы, как X и Y, то по оси Z, которая смотрит на нас, мы можем менять расположение элементов.
Для того чтобы нам снова вернуть оранжевый прямоугольник на передний план мы снова нажимаем правой кнопкой мыши на данном прямоугольнике, выбираем «Упорядочить» и выбираем либо «Переложить вперед», либо «На передний план» сразу.
Когда мы нажимаем на «Передний план», мы перемещаем элемент поверх всех элементов, которые у нас расположены на сайте либо в пределах одного слоя.
Работа со слоями. Раздел “Слои”.
В программе есть специальный раздел «Слои». По умолчанию все элементы у нас располагаются в «Слое 1». Если мы раскроем данный слой, мы увидим здесь два прямоугольника. Выделить один из прямоугольников мы можем, нажав на данный квадратик. Таким образом, мы выделяем необходимый элемент на сайте.
Отключить видимость прямоугольника мы можем с помощью данных точек. Если мы уберем точку, прямоугольник исчезнет с сайта. Точно также мы можем отключить оранжевый прямоугольник.
Менять расположение прямоугольников относительно друг друга мы можем также в этой панели. Если мы сейчас перетащим вот этот нижний прямоугольник вверх, то мы поменяем их местами. Теперь наш зеленый прямоугольник будет располагаться поверх оранжевого.
Работа со слоями. Добавление, удаление, переименование слоёв.
Эти два прямоугольника расположены у нас в «Слое 1». Мы можем создать еще один слой. Для этого нам необходимо будет нажать на данный квадратик, и автоматически у нас создается «Слой 2».
Также мы можем менять названия данных слоев. Например, я могу нажать правой кнопкой мыши на данном слое и переименовать его. Сейчас я не буду этого делать, но вы здесь можете написать любое имя слоя.
Что еще мы можем сделать с данными слоями? Мы можем добавить слой, удалить слой, сдублировать данный слой – слой будет дублироваться со всеми элементами, которые он содержит. Давайте я его удалю. Программа спрашивает, действительно, мы хотим это сделать? Нажимаем «ОК».
Давайте посмотрим, что еще мы можем сделать со слоями. Мы можем удалить неиспользуемые слои, т.е. такие слои, в которых нет элементов, которые мы используем на данной странице. Если я сейчас нажму «Удалить неиспользуемые слои», то «Слой 2» у меня удалится.
Работа со слоями. Изменение параметров слоя.
Мы можем зайти также в свойства данного слоя. Эта функция называется «Параметры слоя». Здесь мы можем изменить цвет, которым будут выделяться элементы слоя, выбрать из предложенных. Например, если я выберу красный, то все элементы, расположенные внутри данного слоя, будут выделяться красной рамкой.
Я могу заблокировать слой от перемещения. Таким образом, я больше ничего не смогу изменить на данном слое. А также могу убрать флажок «Показать слой» и, таким образом, слой на сайте не будет вообще отображаться и все его элементы будут невидимыми. Сейчас я ставлю эту галочку включенной и уберу галочку «Заблокировать слой». Нажимаю «ОК». вот здесь у нас появилась красная полоска и теперь при выделении элементов данного слоя, у нас будет красная рамка вокруг этих элементов.
Горячая клавиша “Alt” для быстрого доступа к параметрам слоя.
Для того, чтобы создать новый слой и войти сразу в режим редактирования его параметров, мы зажимаем кнопку «Alt» и нажимаем на данный значок. Таким образом, мы создаем сразу «Слой 2» и сразу открываются параметры слоя. Нажимаю «ОК».
Работа со слоями. Изменение порядка расположения слоёв.
Давайте я сдублирую данный слой, нажимаю «Дублировать слой», появился «Слой 1 копия». Находясь в текущем данном слое (он выделен жирным цветом), я могу выделить эти два элемента и переместить их, например, вниз. Давай я поменяю цвет данных элементов, например, сделаю синий и желтый прямоугольник. Таким образом, «Слой 1 копия» содержит у меня теперь синий и желтый прямоугольники.
Мы можем менять слои местами, точно также как и элементы внутри слоев.
Таким образом, мы можем сразу изменять расположение целых слоев, содержащих множество элементов относительно друг друга, сможем выбирать, какой из них будет располагаться выше, а какой будет располагаться ниже, т.е. какой из них будет располагаться ближе к нам и какой из них будет располагаться дальше от нас.
Таким образом, если мы сейчас выделим все элементы «Слоя 1 копия» и начнем перемещать его вверх, то мы увидим, что элементы «Слоя 1 копия» перекрывают элементы «Слоя 1». В «Слое 1» у нас расположен и оранжевый прямоугольники.
Стоит нам только поменять эти слои местами, как у нас вся ситуация измениться. Теперь желтый и синий прямоугольники у нас расположены ниже, т. е. дальше от нас, а элементы, которые расположены в «Слое 1» – это зеленый и оранжевый прямоугольники, теперь расположены ближе к нам и при перемещении их перекрывают синий и желтый прямоугольники.
Работа со слоями. Пример – создание слоя для Меню.
Таким образом, при использовании слоев, вы, например, можете сделать слой, переименовать его и назвать «Меню». И расположить в данном слое мини-приложение «Меню», например, по вертикали. Давайте я поставлю «Вручную», добавлю несколько пунктов меню.
Допустим, у нас есть на сайте боковое меню, которое должно располагаться всегда поверх всех элементов сайта. Таким образом, в разделе «Слои» это «Меню» должно быть всегда в верхнем слое. Если наше «Меню» окажется, где-нибудь в нижнем слое, то все элементы сайта при прокрутке будут перекрывать данное меню. Поэтому меню всегда должно располагаться в верхнем слое страницы сайта. Удалить слой мы также можем, выделив его и нажав на значок «Корзинки» внизу.
Работа со слоями. Функция “Найти объект”.
Также можем воспользоваться функцией «Найти объект». Если, например, мы выделим прямоугольник и нажмем на значок «Найти объект», то у нас в данном слое раскрывается данный слой, и сразу выделяется прямоугольник, который мы хотим найти. Это удобно, если у нас много элементов на сайте расположено, и нам необходимо найти в данном списке объект, который расположен у нас на сайте.
Вот так осуществляется работа со слоями на сайте в программе Adobe Muse. Надеюсь, данный урок был для вас полезен. Ставьте лайки и пишите комментарии к данному видео. Следите за обновлениями видеоканала. До встречи в следующих видеоуроках!
Автор видеоурока
Дмитрий Шаповалов