Якорные ссылки в 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. Всем пока. До встречи в следующих уроках.

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