Кнопка Наверх – в Adobe Muse

Кнопка Наверх в Adobe Muse

Кнопка Наверх используется на сайте для быстрого перемещения в начало страницы.

В этом видео мы рассмотрим 2 способа создания такой кнопки для сайта в Adobe Muse. Первый способ – стандартными средствами Adobe Muse. Второй – с использованием бесплатного виджета. Оба способа хороши и могут быть использованы в тех или иных случаях. У каждого из них есть свои нюансы по настройке и использованию, как плюсы, так и минусы.

Смотрите это видео:

Виджет о котором говорится в этом видео можно посмотреть и скачать здесь:
https://5108.ru/topscroll

---

Кнопка Наверх. 2 способа.

В этом видеоуроке мы научимся делать кнопку «Наверх» на сайте в программе Adobe Muse. Сделаем мы это двумя способами. Первый способ у нас будет использовать стандартные возможности программы. А во втором способе мы используем один бесплатный виджет. Смотрите этот урок до конца и вы все увидите.

Кнопка Наверх. Способ№1 – стандартными инструментами Adobe Muse.

Приступим к первому способу. Я буду использовать все тот же пример, который я создал в прошлом уроке. Здесь у меня размещены некоторые элементы, меню.

Кнопка наверх – создание кнопки-текста.

И я создал дополнительно еще один элемент – это обычный текстовый фрейм, т. е. обычный текстовый блок, созданный с помощью инструмента «Текст». У него есть заливка красным цветом и отредактировано положение текста внутри этого блока, т. е. я немного сдвинул к центру и выставил цвет текста белым.  Все, ничего сложно в этом нет, это обычный текстовый блок. Данный способ будет работать как на гибком макете, так и на макете с постоянной шириной.

Кнопка наверх – размещение на странице.

Нам нужно разместить данный текстовый блок в самом внизу страницы. Я беру данный блок, нажму «Вырезать» и иду в самый низ страницы, и здесь его вставлю. Нажимаю «Вставить» и размещаю данный блок в самом низу страницы. Для того чтобы разместить его ниже, мне нужно сделать небольшое дополнение. Я иду в «Объект» и включаю здесь функцию «Элемент нижнего колонтитула». Теперь данный блок я смогу разместить ниже, в футере моего сайта. Размещаю его примерно на одинаковом расстоянии справа и снизу. Или как хотите, тут его можно разместить, как вам будет удобнее. Размещаю в самом низу. Иду в настройки перспективы и закрепляю его в браузере снизу, в правом нижнем углу. Таким образом, я закрепил данный блок на вот таком расстоянии от нижней границы и от правой границы браузера. Можно сдвинуть его чуть ближе вот сюда.

И теперь на данный блок мы должны сделать якорную ссылку. Идем вверх, берем инструмент «Якорь» и ставим якорь в самом верху страницы. Я напишу название якоря «Up», т. е. вверх и нажму «ОК». Иду теперь в самый вниз и на данную кнопку мою в разделе «Гиперссылки» устанавливаю «Up».

Кнопка наверх – просмотр результата

Давайте посмотрим, что у нас получилось. Нажимаем сочетание “ctrl+shift+E”, чтобы просмотреть страницу в браузере. И вы видите, что после загрузки страницы в правом нижнем углу у нас появилась кнопка «Up». Если мы сейчас прокрутим данную страницу до самого низа, то данная кнопка остается на своем месте, во-первых, а во-вторых, при нажатии на него (видите, появляется рука с пальчиком?) страница прокручивается до нашего якоря. Данная кнопка перенаправляет нас в начало страницы, т. е. вот так она работает. Если мы будем сейчас изменять ширину данной страницы, то данная кнопка тоже подползает и, в принципе, сохраняет свое место на странице. Как бы мы сейчас не уменьшили данное окно браузера, наша кнопка остается на месте и работает, т. е. если мы сейчас прокрутим, нажмем «Up», то она возвращает нас к началу страницы.

Это был первый способ, как вы сможете создать кнопку «Наверх» на своем сайте. Минусом данного способа является то, что данная кнопка находится постоянно на виду. Плюсом данного способа является то, что мы можем использовать его даже на макете с гибкой шириной. Если мы будем использовать для такой кнопки эффекты прокрутки, то мы сможем использовать способ с эффектами прокрутки только на макетах с постоянной шириной сайта.

Кнопка Наверх. Способ№2 – использование бесплатного виджета.

Второй способ с использованием специального виджета гораздо проще. Давайте я сейчас удалю данный якорь. Пойду вниз и удалю у данной кнопки все привязки, т. е. я сейчас выбираю «Перспектива» и удаляю ей эту привязку к нижней границе браузера. Теперь я могу размещать данную кнопку, где захочу, и она не будет привязана к границам браузера. Теперь это обычный текстовый элемент, который у нас точно такой же, как и все остальные тестовые элементы сайта. Давайте я нажму ctrl+X, чтобы вырезать его отсюда и вставлю его здесь, нажимая ctrl+V. Все, я разместил его снова на свое место. Все обнулил, убрал якорь.

Кнопка наверх – установка виджета на страницу.

И теперь мы рассмотрим второй способ с помощью виджета. Виджет я уже скачал и установил в библиотеку. Виджет называется «Scroll to Top». Виджет этот также работает на макетах с гибкой шириной и с постоянной шириной, но у него есть одна приятная особенность. Размещаем данный виджет на странице. И мы сразу видим вот такие настройки у него. Здесь у нас указан стиль графики, расположение кнопки – можем выбрать «Слева» или «Справа». Дальше мы можем выбрать появление кнопки через некоторое время. Эта, кстати, та особенность, о которой я говорил. В предыдущем способе мы не могли сделать так, чтобы наша кнопка появлялась при прокрутке, она сразу была видна на первом экране сайта. Дальше мы выбираем скорость прокрутки и отступы. Это отступы от границ браузера.

Кнопка наверх – назначение стилей графики.

Чтобы привязать кнопку к данному виджету нам необходимо назначить нашей кнопки  стиль графики. Стиль графики назначается в опциях «Стиль графики». Чтобы включить данную опцию мы идем в «Окно» и включаем здесь «Стили графики» либо нажимаем сочетание клавиш ctrl+F7. После того, как мы добавили в опции стили графики, у нас автоматически открывается окошко со стилями графики, либо мы открываем его сами.

Давайте создам стиль графики для нашей кнопки. Я нажимаю на кнопку создания стиля. У нас появляется новая запись «Стиль» и мы выбираем ее, нажимаем два раза и даем ей имя, например – «Up», чтобы было быстрее и короче. Нажимаю «ОК». Таким образом, у нас к данной кнопке теперь назначен стиль графики «Up». Все, больше нам ничего не нужно, кроме того, как в настройках данного виджета надпись «.button» заменить на нашу запись «Up». Таким образом, мы привязали наш объект кнопку к нашему виджету. Используя различные настройки, мы можем манипулировать различными эффектами.

Кнопка наверх – размещение виджета в проекте.

Данный виджет можно разместить за пределами сайта, чтобы он нам не мешал. В принципе, расположение данной кнопки тоже теперь не важно. Мы можем разместить ее хоть здесь, за пределами сайта, она все равно будет работать.

Кнопка наверх – просмотр результата

Давайте теперь перейдем в режим «Просмотр», даже можем просмотреть прямо здесь в программе. Мы начинаем прокручивать нашу страницу сайта, и в какой-то момент появляется кнопка «Up». Вот таким чудесным образом она у нас выползает. Согласитесь, это намного интереснее. И теперь до конца прокрутки страницы она будет находиться на данном месте. Если мы на нее нажмем сейчас, то мы переместимся к начальному экрану нашей страницы.

Кнопка наверх – плюсы использования виджета.

Еще одним плюсом использования данного виджета является то, что мы не создавали сейчас никаких дополнительных якорей. Виджет все сделал все. Теперь в настройках данного виджета вы можете устанавливать через сколько пикселей после прокрутки будет появляться данная кнопка. Можете устанавливать скорость ее появления и также поставить, например, ее появление слева. И расположение кнопки вот это значение «50» теперь будет отчитываться не справа, как у нас было в прошлом примере, а слева. Если мы еще раз просмотрим в режиме «Просмотр», то кнопка теперь будет выскакивать при прокрутке слева. И при нажатии на данную кнопку мы возвращаемся в начало нашей страницы.

Вот такие два способа есть по созданию кнопки на сайте в программе Adobe Muse. По этой ссылке вы можете – скачать данный виджет. А на этом я заканчиваю урок, ставьте лайк к этому видео, пишите комментарии внизу, делитесь этим видео со своими друзьями, знакомыми, кому это также будет интересно.

С вами был Дмитрий Шаповалов, до встречи в следующих видеоуроках на канале!

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