Создание гиперссылок на веб-сайтах Adobe Muse

Из этой статьи вы узнаете, как работать с гиперссылками в Adobe Muse. С помощью гиперссылок можно подключаться к внешним веб-сайта, файлам для загрузки, адресам электронной почты и др. Файлами для загрузки могут быть PDF, DOC, PPT, TXT, мультимедиа и другие типы файлов, которыми бы вы хотели поделиться с посетителями, но вставка которых в интерфейс Adobe Muse еще не поддерживается. Ссылки можно создавать как на файлы, переданные в учетную запись хостинга Adobe Muse, так и на файлы, размещенные на сторонних веб-сайтах.

Видео | Создание гиперссылок

Добавление на страницу ссылок привязки

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

1. Нажмите в любом месте страницы, чтобы выбрать ее (в индикаторе выбора отобразится слово «Страница»). Затем дважды нажмите элемент меню виджета (контейнер виджета). При первом нажатии выделяется весь виджет «Меню» ручного типа, а при втором нажатии выделяется пункт меню. В индикаторе выбора отображаются слова «Пункт меню».
2. Нажмите меню «Гиперссылки», чтобы раскрыть весь список страниц и тегов привязки для сайта. В разделе «Компьютер» найдите необходимую страницу и обратите внимание на то, что ниже перечислены все созданные теги привязки. Выберите необходимый тег привязки, чтобы связать его с пунктом меню.

3. Повторите шаг 2, чтобы добавить дополнительные ссылки привязки.
4. Выберите Файл > Свойства сайта. На вкладке «Макет» убедитесь, что установлен флажок «Включить активное состояние для ссылок привязки». Это параметр включен по умолчанию для всех новых сайтов, однако при редактировании ранее созданного сайта может потребоваться установить этот флажок.
5. Выберите Файл > Предварительный просмотр страницы в браузере.

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

Также попробуйте прокручивать страницу вверх и вниз, обращая внимание на то, как код страницы определяет положение каждого тега привязки и обновляет активное состояние меню при переходе от одной области страницы к другой. Этот прием действует для страниц как с вертикальной, так и горизонтальной прокруткой.

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

6. Закройте браузер и вернитесь в приложение Adobe Muse.

В следующем разделе вы узнаете, как добавлять ссылки для загрузки, чтобы дать посетителям возможность загружать файлы в форматах PDF, DOC, MP3, MOV, PSD и файлы JPEG в высоком разрешении.

Совет. При совместной работе над проектом сайта с другими дизайнерами вы можете даже создавать ссылки на исходные файлы .Muse, позволяя коллегам загружать их прямо с веб-сайта.

Работа с областями тега привязки и активными состояниями

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

В готовом проекте веб-страница в идеале должна иметь ссылки привязки, которые позволяют посетителям переходить по вертикали к области необходимого меню. Добавление тегов привязки похоже на установку метки в каком-либо месте страницы. Когда посетители нажимают ссылку на эту привязку, страница прокручивается до того места, где установлена метка.

1. Нажмите кнопку «Привязка» в верхней области навигации для загрузки инструмента «Привязка».

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

4. Повторите шаги 1–3, чтобы определить области привязки и добавить дополнительные ссылки привязки.

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

Добавление ссылок на загружаемые файлы

1. При редактировании страницы в представлении «Дизайн», с помощью инструмента «Текст» создайте новый текстовый фрейм рядом с правым верхним углом текстового фрейма меню «Breakfast». Введите слова «Download Menu» (загрузить меню).
2. Не снимая выделения с текстового фрейма, задайте на панели «Текст» следующие настройки:
   • Веб-шрифт: Kaushan Script (или любой другой шрифт)
   • Размер шрифта: 14
   • Цвет: #EEE5C4 (в части 3 он был переименован в «cream-menu»)
   • Интерлиньяж: 57%
   • Выравнивание: по центру
3. Используя меню «Заливка», установите для цвета заливки значение «Нет». Нажмите значок папки рядом с разделом «Изображение» и выберите в папке с файлами образцов файл «download-bg.png», чтобы установить фоновое изображение. Убедитесь, что для параметра «Подгонка» установлено значение «Исходный размер» и выбрано положение по центру.

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

5. Не снимая выделения с текстового фрейма, перейдите в меню «Ссылки» на панели управления и выберите «Ссылка на файл». В диалоговом окне «Импорт» выберите файл и нажмите «Открыть».

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

Ссылка на файл PDF добавлена. Если вы откроете панель «Ресурсы», то заметите, что файл находится в списке как один из ресурсов сайта.

6. Выделите текстовый фрейм с помощью инструмента «Выделение». Скопируйте текстовый фрейм «Download Menu» и вставьте его поверх правого верхнего угла меню «Lunch». Повторите этот шаг еще два раза, чтобы создать копии текстового фрейма поверх правых верхних углов меню «Dinner» и «Dessert».

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

7. Выберите меню «Файл» > «Предварительный просмотр страницы в браузере». Нажмите один из пунктов горизонтального меню, чтобы перейти к этому меню на странице. Обратите внимание, что при пролистывании страницы вниз для просмотра меню «Dinner» и «Dessert» заголовок отображается вверху остального содержимого страницы. Это связано с тем, что для страницы «food» используется страница-шаблон «Передний план» и содержимое заголовка этой страницы перемещено на передний план.
8. Нажмите ссылку «Download Menu» и проверьте, как файл PDF загрузится на ваш компьютер.

В зависимости от используемого браузера и его настроек процесс загрузки может отличаться. Некоторые браузеры отображают файлы PDF в своем окне, тогда как другие загружают файл PDF на компьютер, где его можно открыть с помощью программы Acrobat Pro или Acrobat Reader.

Создание ссылок на адреса электронной почты

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

1. Нажмите стрелку вниз в меню «Ссылки», чтобы открыть весь список.

2. Меню «Ссылки» имеет несколько разделов. В разделе «Последние использованные ссылки» отображаются все ссылки на внешние веб-сайты, которые были добавлены на сайт. Для создания ссылок на внешние веб-страницы можно ввести любой URL-адрес прямо в поле «Ссылки».
3. Раздел «Компьютер» содержит страницы текущего сайта. Обратите внимание, что теги привязки, добавленные на страницу «food», перечисляются в алфавитном порядке ниже этой страницы. Это означает, что можно было создать привязки с одинаковыми именами на нескольких страницах сайта, но по-прежнему легко различать их при настройке ссылок. В этом образце сайта используется только макет «Компьютер», но если бы сайт содержал макеты для телефона или планшетного ПК, эти разделы отображались бы с соответствующим набором страниц.
4. Раздел «Файлы» внизу списка содержит функцию «Ссылка на файл» и все загружаемые файлы, добавленные на текущий сайт. Поскольку мы недавно добавили ссылку на файл «KatiesCafeMenu.pdf», имя этого файла содержится в этом разделе, упрощая процесс создания ссылки на общий ресурс с нескольких страниц сайта.
5. Чтобы добавить ссылку на адрес электронной почты (при нажатии которой открывается почтовый клиент посетителя с новым сообщением и введенным адресом в поле «Кому»), введите адрес электронной почты с префиксом «mailto:» в поле меню «Ссылки», как показано ниже:
   
   mailto:email@address.com
   
   
6. Иногда список элементов в меню «Ссылки» может становиться довольно большим и затруднять навигацию на больших веб-сайтах. Чтобы в этом случае найти определенную страницу, привязку, файл или внешний URL-файл для создания на него ссылки, введите несколько первых букв ссылки в поле меню «Ссылки» и совпадающие элементы будут отображены. Это позволяет быстро фильтровать список и находить необходимые элементы для создания ссылок.

Добавление ссылок на внешние веб-сайты

После размещения значков социальных сетей необходимо добавить внешние ссылки на сайт каждой социальной сети.

1. Выделите значок Facebook и введите (или скопируйте и вставьте) ссылку на страницу Katie's Cafe на Facebook в поле меню «Ссылка» следующим образом: http://www.facebook.com/KatiesCafeSF
2. Выделите значок Google+ и введите (или скопируйте и вставьте) следующую ссылку на страницу Katie's Cafe на Google+: https://plus.google.com/u/1/117800212967830061444/posts
3. Выделите значок Twitter и введите (или скопируйте и вставьте) следующую ссылку на страницу Katie's Cafe на Twitter: http://twitter.com/katiescafesf
4. Выделите значок Facebook, щелкнув его еще раз. Нажмите синее подчеркнутое слово «Ссылки» слева от меню «Ссылки». В открывшемся диалоговом окне установите флажок с подписью «Открывать ссылку в новом окне или новой вкладке».
5. Повторите шаг 4, чтобы ссылки Google+ и Twitter также открывались в новом окне браузера.

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

Определение URL-адреса файла при подготовке к добавлению ссылки

Чтобы создать ссылку для добавления на страницу сайта Adobe Muse, необходимо открыть переданный в Интернет файл в браузере. Выполните следующие действия.

1. Запустите любой браузер.
2. Перейдите на свой или сторонний сайт, содержащий переданный зависимый файл. Можно воспользоваться поисковой системой, например Google, или ввести доменное имя сайта в адресную строку браузера.

3. Открыв главную страницу сайта, используйте навигацию или введите полный URL-адрес в адресную строку браузера для доступа к конкретному зависимому файлу. По завершении этого шага браузер отобразит, воспроизведет или загрузит файл.
4. Убедившись в правильности введенного URL-адреса для доступа к переданному файлу, выделите все содержимое в адресной строке браузера и нажмите «Правка» > «Копировать». Или, используйте сочетание клавиш Command+C (Mac) или Control+C (Windows).

На данном этапе URL-адрес зависимого файла скопирован в буфер обмена. Не копируйте другие элементы, пока не вставите URL-адрес зависимого файла в поле «Гиперссылка», как описано в следующем разделе.

Создание ссылок на внешние файлы

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

1. Запустите Adobe Muse. Дважды нажмите миниатюру страницы, чтобы открыть страницу в представлении «Дизайн».
2. Выделите текст, помещенное изображение или прямоугольник, который будет использоваться в качестве кнопки, которую пользователи будут нажимать для загрузки или открытия зависимого файла.
3. Когда текст или другой элемент страницы выделен, нажмите раскрывающееся меню в поле «Гиперссылки» и вставьте ранее скопированный URL-адрес (абсолютный путь) зависимого файла.

Чтобы настроить открытие ссылки в новом окне браузера, нажмите подпись «Гиперссылка» слева от поля гиперссылки. В открывшемся диалоговом окне установите флажок рядом с параметром «Открывать ссылку в новом окне или новой вкладке», как показано ниже.

Сохраните страницу и опубликуйте изменения на сайте.

Откройте страницу в браузере. Нажмите связанный текст или кнопку и убедитесь, что ссылка работает должным образом.

Дополнительную информацию о работе с приложением Adobe Muse см. на странице Справка и учебные пособия Adobe Muse или на странице События Adobe Muse, содержащей записанные и онлайн-вебинары.