Перейти к содержимому
  • Блок 3.6 - Работа со ссылками

    Ссылки - это фундамент сайта. В этом блоке Вы узнаете о нем все. Как управлять, как изменять. Каких типов бывают ссылки.

    4 занятий в этой категории

    1. Создание ссылок и их типы

      40 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.7.1_Sozdanie_ssyilok_i_ih_tipyi.mp4.904fa94da6d80493c0583e280b90527c.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      В этом видеоуроке мы рассмотрим создание ссылок и их типы в программе Adobe Muse. Для того, чтобы создать ссылку, давайте сразу создадим какой-либо объект. Например, это будет текст "muse.digitalmakers.ru" Допустим, у нас есть такой текстовый блок: выравнивание посередине, жирный шрифт, заливка желтым. Вся работа с ссылками осуществляется через панель" Гиперссылки" и окошко рядом "Добавить или фильтровать". Закроем панель "Текст", чтобы она не мешала. При выделенном объекте или тексте у нас доступна данная панель и настройки гиперссылок. Если мы нажмем "Добавить или фильтровать", то у нас появится окно, где мы можем вставить любую ссылку. Также можем вставить ссылку на саму страницу "Домашняя", которую мы сейчас редактируем, либо добавить ссылку на файл.

      Если мы нажмем на надпись "Гиперссылка", то нам станет доступна панель, где мы можем указать "Открывать ли ссылку в новом окне или вкладке", можем добавить подсказку для ссылки (при наведении курсора пользователю будет выводиться подсказка). Здесь же вы можете назначить стиль текста ссылки, если он заранее сформирован, а также можете нажать на кнопку "Редактировать стили ссылок". Ссылки бывают 2 видов: внутренние и внешние. Внутренние ссылки вы можете добавить через Добавить или фильтровать ссылок. Давайте зайдем через браузер на форум muse.digitalmakers.ru .Скопируем адрес ссылки с этой страницы: нажимаем "Копировать", идем назад в программу, "Добавить или фильтровать ссылки" и вставляем сюда данную ссылку. Ссылка появилась, нажимаем Enter и теперь ссылка отображается в окошке "Гиперссылки".

      Если мы зайдем в режим "Просмотр", то при наведении курсора мыши на данный текстовый фрейм, то курсор будет меняться на значок руки. И если мы сейчас нажмем на данный текстовый фрейм, то просто перейдем на сайт. Закрываем режим просмотра. Вот так работают "Внешние ссылки". Если бы тут стоял флажок "Открывать в новом окне или вкладке", то эта ссылка открылась бы в новой вкладке браузере. Также можем поставить подсказку, вставляя тот же самый текст, только убрав http, либо вы можете написать здесь совершенно любой текст. Например, русским текстом " Сайт muse.digitalmakers.ru ", перейдем в режим "Просмотр", видим, что при наведении мыши всплывает подсказка. 

      Внутренние ссылки - ссылки, которые ведут на страницы вашего сайта. Например, у нас есть еще одна страница "Страница 2", зайдем в редактирование данной страницы, создадим прямоугольник. Заливку сделаем зеленого цвета, перейдем в режим "Редактирование домашней страницы" и изменим данную ссылку на внутреннюю. При выделенном данном тестовом фрейме мы заходим в" Гиперссылки" и выбираем ссылка на "Страница 2". И теперь "Гиперссылка" будет вести на "Страница 2". В режиме просмотра при наведении курсора мыши опять же появляется рука и подсказка, а если мы нажимаем на данную ссылку, то мы переходим на страницу 2, где мы только что сделали зеленый прямоугольник.

      Давайте теперь снова перейдем в режим редактирование домашней страницы и я расскажу, как удалить ссылку. Чтобы удалить ссылку, нужно выделить объект, на который назначена ссылка, и рядом с полем "Гиперссылка" есть крестик. Нажав эту кнопку, вы удалите гиперссылку к данному объъекту. Затем на месте ссылки появится надпись "Добавить или фильтровать". То есть к текстовому фрейму теперь не применена ни одна из ссылок. На этом урок закончен. В нем вы узнали, что такое ссылки, какие они бывают и где расположена панель управления ссылками в программе. Ответьте на вопросы, вполните задание к данному уроку и переходите к дальнейшему обучению.

      • 0 комментариев
      • 469 просмотров
    2. Создание ссылок на скачивание файлов

      41 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.7.2_Sozdanie_ssyilki_na_skachivanie_fayla.mp4.2564445b2d2076e262f8542c733e02f0.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      В этом видеоуроке мы рассмотрим создание ссылок на скачивание файлов в программе Adobe Muse. Допустим, у нас есть некий текст в программе, некая кнопка, на которой написано "Скачать данный файл". Отредактируем его немного, сделав его жирным, выравним по центру. Далее берем инструмент "Выделение", чтобы выделить текстовый фрейм. И теперь делаем небольшую заливку данному текстовому фрейму, например, оранжевую. Не будем делать никаких состояний данной кнопке, чтобы не затягивать время. Что мы можем дальше сделать? 

      Мы можем добавить в программу ссылку на скачивание файла. Это делается с помощью кнопки в верхнем меню "Добавить и фильтровать" в закладке "Ссылка на файл". Если мы сейчас нажмем на данную надпись, то программа предложит выбрать то, где будет находиться файл. Например, выберем логотип digitalmakers.ru, нажимаем "Открыть". Теперь в "Гиперссылке" у нас стоит название именно этой картинки. Заходим в режим "Просмотр", нажимаем на данную кнопку, и у нас появляется изображение, которое мы выбрали при добавлении на скачивание файла. Заходим снова в режим "Дизайн".

      Если мы сейчас захотим просмотреть данную страницу в браузере, то заходим в "Файл" - "Предварительный просмотр страницы в браузере". Затем открывается страница с нашей кнопкой "Скачать данный файл". Нажимаем на эту кнопку, и у нас также появляется логотип. Закрываем браузер.
      Допустим, у нас есть некий файл архива, который мы хотим предоставить для скачивания. Тогда мы точно также нажимаем на верхней панели меню кнопку "Добавить и фильтровать", в появившемся окне выбираем "Ссылка на файл", затем выбираем архив, нажимаем "Открыть". И теперь у нас появилась гиперссылка на архив muse.digitalmakers.ru2.rar

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

      • 2 комментария
      • 482 просмотра
    3. Работа со стилями ссылок

      42 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_01/3.7.3_Rabota_so_stilyami_ssyilok.mp4.29a2850b2038fc1b86dac23828cbc987.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видеоуроке мы рассмотрим работу со стилями ссылок в программе Adobe Muse. Заходим в программу, создадим здесь прямоугольник, сделаем ему синюю заливку для того, чтобы поработать с гиперссылками. Выберем инструмент "Выделение", выделим данный прямоугольник, и нам становятся доступными настройки гиперссылок. Настройки стилей ссылок открываются после нажатия на надпись "Гиперссылки". Тут же есть кнопка "Редактировать стили ссылок", перед нами появляется окно. Что оно из себя представляет?

      Данное окно представляет собой настройки свойств сайта. Здесь же есть специальный раздел "Стили гиперссылок". Работа в данном разделе не представляет собой ничего сложного. Данные настройки нужны нам для того, чтобы показать, как будут реагировать наши ссылки при наведении курсора мыши, как будут выглядеть те ссылки, по которым уже были переходы, как будет выглядеть активное и стандартное состояние ссылки. По умолчанию в программе стоит синий цвет в состояниях "Стандартное" и "Наведение мыши", а "После перехода" - фиолетовый цвет, "Активное состояние" - красный цвет. Также для каждого состояния мы можем настроить жирность текста, курсив, подчеркивание.

      По умолчанию стоит для всех состояний ссылок подчеркивание. Мы можем создать свой собственный стиль для ссылки, нажав на значок в нижней части данных настроек. Нажимаем на него, получаем стиль по умолчанию "Копия". Здесь мы можем написать "Мой собственный стиль". И теперь мы можем этот стиль изменить. Давайте изменим цвет в состояниях "Стандартное" и "Наведение мыши" на оранжевый. Состояние "После перехода" по этим ссылкам будет зеленым, а в "Активном" состоянии ссылка будет черной. Может это и не самое лучшее сочетание цветов, но для наглядности оставим так.

      Для всех состояний также поставим начертание жирное. Для этого 2 раза кликаем на каждом из квадратов, поскольку они имеют 3 значения: 1) Гиперссылка всегда отображается полужирным шрифтом в состоянии Стандартное
      2) Гиперссылка будет использовать локальное свойство в состоянии Стандартное
      3)Гиперссылка никогда не отображается полужирным в состоянии Стандартное. выставим все эти значки и нажмем Ок.

      Далее создадим некоторый текст, например, напишем muse.digitalmakers.ru Не будем его никак редактировать. Выделяем текст, заходим в "Гиперссылки", поставим гиперссылку на данный сайт, нажимаем Enter. Таким образом данная гиперссылка применилась к тексту. Теперь выберем инструмент "Выделение", немного уменьшим и продублируем текстовый фрейм. Заходим в меню "Редактировать", "Дублировать" и перенесем его несколько ниже. Теперь выделим текст у только что созданной ссылки, создадим собственный стиль, и теперь вы видите сразу, как поменялось состояние "Стандартное" у данной ссылки. У нашей первой ссылки стиль текста стоял "По умолчанию".

      Теперь перейдем в режим "Просмотр", и вы увидите, что для первой гиперссылки у нас настройки "По умолчанию". Поскольку мы уже переходили по данной ссылке, поэтому она фиолетовая,  при наведении она синяя. При нажатии ссылки она красная. Вторая же ссылка у нас выглядит зеленой, а при наведении курсора мыши цвет становится оранжевым, при нажатии - черным. Все получилось точно так же, как мы указали в настройках. Переходим снова в режим "Дизайн" домашней страницы, затем в настройки "Гиперссылки" - "Редактировать стили ссылок".

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

      • 2 комментария
      • 469 просмотров
    4. Работа с якорными ссылками

      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 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      В этом видеоуроке мы рассмотрим работу с якорными ссылками в программе 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. Вам необходимо выполнить задание к этому уроку, ответить на вопросы и переходить к следующему уроку.

      • 2 комментария
      • 422 просмотра
×