Перейти к содержимому
  • Работа с якорными ссылками

       (20 отзывов)

    Евгений Зубов
    • 43 4,25,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_01/3.7.4_Rabota_s_yakornyimi_ssyilkami.mp4.d83602b54b225cd6429b373d7ccde254.mp4 6 До 10 минут display: none; https://creatura.club/uploads/ Низкая сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

      В этом видеоуроке мы рассмотрим работу с якорными ссылками в программе Adobe Muse. Заходим в программу, здесь уже подготовлен небольшой проект. Это несколько прямоугольников, залитых разным цветом, и несколько текстовых блоков на каждом из этих прямоугольников. Сверху есть меню из трех кнопок 1, 2, 3. Сейчас на кнопках нет никаких ссылок. Есть также вставленный в виде картинки логотип. Для того, чтобы нам понять, что такое якорные ссылки, мы создали этот небольшой проект. Создание якорных ссылок осуществляется в программе с помощью выбора значка в левой части программы, который выглядит в виде якоря. Иногда этот значок размещается вверху в старых версиях программы. Выбираем этот значок, и у нас появляется вместо курсора мыши значок якоря.

      Для размещения якорной ссылки нужно нажать в том месте страницы, где вы хотите разместить ссылку и нажимаем левую кнопку мыши. Сразу появляется небольшой объект и всплывающее окно" Переименование привязки", здесь вы можете задать имя якорной привязки. Причем, если вы начнете создавать имя с цифр и нажмете ОК, то появится предупреждение программы "Недопустимое имя привязки". Здесь же вы можете прочитать "Имя привязки должно начинаться с букв A-Z нижнего регистра или верхнего регистра". Затем должны быть допустимые символы, то есть буквы латинского алфавита, цифры от 0 до 9, двоеточие, нижнее подчеркивание, тире и точка. Давайте напишем имя по всем правилам "nachalo", нажимаем Ок, и на панели слева рядом с якорем появилось это название. 

      Этот якорь вы можете перемещать на любое место страницы, поэтому к якорю будет доступна ссылка, которая будет вести на то место страницы, где стоит этот якорь. То есть, проще говоря, у вас будет некая ссылка на странице, на которую вы можете быстро перейти. Верхняя граница данного якоря будет означать верхнюю границу окна браузера. Выставим этот якорь в самое начало, поскольку он так и называется, и создадим еще 2 якоря. Второй якорь разместим возле блока зеленого цвета с надписью 2. Нажимаем на данный значок якоря, нажимаем левой кнопкой мыши, пишем здесь "dva", нажимаем Ок. И теперь у нас есть такой якорь с именем "dva" .Оставим на границе с зеленым блоком. Также еще создадим якорь с именем "tri",  нажимаем Ок, и разместим его возле синего блока.

      Верхняя граница якоря совпадает с верхней границей блока синего цвета. Теперь идем снова в самый верх, и здесь есть 3 кнопки. Назначим ссылки этих якорей на эти три кнопки. Выбираем первую кнопку, далее "Добавить или фильтровать", и далее вы видите, что в макете компьютера имеется еще 3 внутренние ссылки. "nachalo" - это самая первая ссылка, которую мы и назначим на первую кнопку. Выбираем эту ссылку левой кнопкой мыши. На вторую кнопку назначим ссылку "dva", а на третью кнопку назначим ссылку на якорь "tri". Теперь, чтобы посмотреть, что у нас получилось и как все работает, переходим в режим "Просмотра". Мы видим 3 кнопки, а также 3 экрана разного цвета, обозначенные цифрами 1, 2, 3.

      Теперь если мы последовательно будем нажимать на эти кнопки, то вы увидите, что страница автоматически прокручивается до определенного блока. Если нажмем на кнопку 3, то верхняя граница синего блока будет совпадать с верхней границей просмотра в браузере. Таким образом работают якорные ссылки в программе Adobe Muse. Перейдем в режим "Дизайн", и посмотрим, как это все выглядит в браузере, поскольку в режиме "Просмотра" есть некоторое мерцание при прокрутке страниц. Заходим в "Файл" - "Предварительный просмотр страницы в браузере". И последовательно начнем нажимать на кнопки. Если нажимаем на кнопку 1, то ничего не происходит, поскольку верхняя граница первой страницы сразу совпадает с верхней границей браузера.

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

    Вы узнаете что такое якорные ссылки и как они работают. Почему нужно их использовать. Увидите примеры применения. Познакомитесь с правилами и особенностями управления "якорями".


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Все понятно

    Поделиться отзывом


    Ссылка на отзыв
    Даниил Князев

    Все понятно, спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Юлия+Коваль

    +1

    Поделиться отзывом


    Ссылка на отзыв
    Zhanibek_jez

    Ок

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Не знаю что писать, все хорошо)

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Толково!

    Поделиться отзывом


    Ссылка на отзыв
    Артем Литвин

    все понятно, спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    Алексей

    Остались неясности.

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Интересно, все усвоил.

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Понятно. Спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    ievseev09

    Всё понятно!

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Всё понятно. Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    понятно! спасибо)

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Посмотрела урок. Повторила все действия. Все получилось. 

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Спасибо.

    Поделиться отзывом


    Ссылка на отзыв

×