Якорные ссылки Adobe Muse

Якорные ссылки в Adobe Muse

Якорные ссылки в Adobe Muse

В этом уроке вы узнаете как установить якорные ссылки в Adobe Muse. Работа с якорными ссылками — это очень важная часть при создании сайтов, так как именно эта функция программы позволяет нам делать удобную навигацию по сайту с помощью создания и использования внутренних ссылок сайта.

Якорные ссылки. Введение.

Использование якорных ссылок на сайте — очень удобная функция. Якорные ссылки помогают осуществлять быструю навигацию по странице сайта и сразу находить нужную информацию, тем самым экономить время и увеличивать лояльность посетителей к сайту. Согласитесь, посетителю сайта гораздо удобнее один раз нажать на кнопку мыши, чем нервно прокручивать длинную страницу колесом мышки в поиске нужной информации.

Якорные ссылки. Что это такое?

Вообще, якорь на сайте представляет собой тег или маркер, который вставляется в html-код страницы и на который мы можем сделать ссылку. Зачем же нужны якоря и в каких случаях их использовать? Некоторые люди, например, как я, не любят читать длинные мотивационные лэндинг-страницы и их сразу же интересует цена продукта, которая расположена далеко внизу страницы и до которой нужно листать иногда порядка до 15 или 20 экранов. Это конечно же напрягает, и хочется переместиться к данной информации одним кликом мышки, что и позволяют сделать якоря, расположенные на странице.

Я уже немного подготовился и сделал для вас небольшой схематичный набросок страницы сайта, состоящий из пяти блоков разной длины и для наглядности разного цвета: желтый, красный, синий, зеленый и белый блоки. В шапке страницы у нас размещено меню навигации, состоящее так же из пяти обычных текстовых блоков. Как создавать и редактировать обычные текстовые блоки в Adobe Muse, вы можете посмотреть в предыдущих видеоуроках на этом канале, а сейчас наша задача — сделать быстрый доступ к любому из блоков страницы через меню навигации. Итак, приступим.

Якорные ссылки. Создание якоря.

Чтобы создать якорь в Adobe Muse, есть специальная кнопка, которая расположена в верхней панели инструментов программы. Так же создать якорь вы можете, нажав клавишу «А» на клавиатуре. Курсор мыши примет вид значка с якорем, который мы можем разместить в том месте, куда именно хотим получить быстрый доступ на странице. Я размещу его на первом желтом блоке. При этом перед нами появляется окно, в котором мы должны придумать и написать имя для данного якоря.

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

Вот и результат. Всего я создал 5 якорей: «Yellow», «Red», «Blue», «Green» и «White». Эти якоря соответствуют каждому из цветных блоков страницы. Я разместил каждый якорь в начале каждого из этих блоков. Обратите внимание, именно в самом начале блока. Хорошо.

Якорные ссылки. Назначение ссылок.

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

Аналогичным образом задаем ссылки в меню на остальные якоря. Для второй кнопки ссылку на якорь «Red», для третьей кнопки — на якорь «Blue», для четвертой — на якорь «Green» и для пятой — на якорь «White». Теперь на всякий случай проверим, поочередно выделяя каждую кнопку и наблюдая за надписью в окошке в верхней панели. Видим, что каждой кнопке присвоена ссылка на один из созданных якорей.

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

Якорные ссылки. Просмотр результата.

Давайте, наконец-то, посмотрим на результат проделанной работы. Переходим в режим «Просмотр» и проверяем. Нажимаем мышкой на первую кнопку меню и автоматически перемещаемся к началу желтого блока страницы.  Нажимаем на вторую (красную) кнопку и перемещаемся к началу второго — красного блока. Далее к третьему синему, четвертому зеленому и к последнему белому блоку, нажимая поочередно кнопки меню.

Мы можем перемещаться сразу к нужному блоку, минуя промежуточные блоки страницы, например, у меня сейчас показывается пятый белый блок, а я сразу нажму на первую кнопку меню и перескочу к начальному первому желтому блоку. Вот так быстро и удобно. Допустим, нужная и интересная мне информация находится на пятом белом блоке страницы. Чтобы добраться до нее обычным способом мне понадобится 6 или 7 раз прокрутить колесо мыши вниз, при этом постоянно внимательно смотреть, нее пропустил ли я нужный заголовок. Это совсем не так удобно, как если бы я сразу нажал на кнопку «5» в навигационном меню и, совершенно не напрягая свое зрение и внимание, быстро переместился к нужной информации. Просто отлично.

Якорные ссылки. Еще одна интересная особенность.

Еще одна фишка якорных ссылок в том, что вы можете переместиться не только в пределах страницы, но также открыть другую страницу сайта, причем сразу в нужное место на странице. Сейчас я вам это покажу. Давайте я создам вторую страницу и открою ее в режиме дизайна, и размещу в середине страницы блок, например, черного цвета. Далее создам в начале блока якорь и назову его «Block/2».

Это будет означать, что якорь будет указывать на черный блок, расположенный на второй странице сайта. Ссылку на данный якорь я размещу в меню на первой странице сайта. Для этого скопирую и создам еще один текстовый блок в навигационном меню, изменю его имя на «6 черный» и назначу черный цвет. Хотя вы можете выбрать любое другое имя или цвет. Назначу этой кнопке гиперссылку на якорь «Block/2», и давайте теперь посмотрим, куда приведет нас нажатие на данную кнопку.

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

Якорные ссылки. Просмотр результата.

На этом все, дорогие друзья. В этом уроке мы научились работать с якорными ссылками в программе. Если этот урок был для вас полезен, лайки, подписывайтесь на канал, обязательно пишите комментарии внизу и задавайте вопросы. Так же вы можете подписаться на мою рассылку, пройдя по ссылке под этим видео, и получить бесплатные шаблоны и виджеты для программы Adobe Muse. Всем пока. До встречи в следующих уроках.

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

2 комментария к “Якорные ссылки в Adobe Muse

  1. Когда выставляю якоря. При просмотре в браузере на точках остановки 760 и 485, при тапе по якорям, страница смещается немного в сторону. Назад не возвращается. Нижний бегунок отсутствует при этом.
    В чём может быть проблема?

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

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