Как сделать ссылку как кнопку: Используйте ссылки и кнопки правильно. Пожалуйста / Хабр

Содержание

Pop-up блоки

tilda help center

Настройка всплывающих окон

Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле, по времени или при закрытии страницы.

Появление блока при клике на ссылку

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

1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок. Подходящие блоки: BF501N, BF502N, BF503, BF504.

2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).

3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.

4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscription

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

Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.

Выделите слово, при клике на которое должен появляться pop-up.
Через появившееся контекстное меню задайте ссылку на всплывающее окно.
Добавьте pop-up блок (категория «Форма»).
В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword

Появление блока при скролле

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

В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).

2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.

Время, на которое запоминается посетитель

В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили pop-up блок.

Появление блока по времени

Добавьте pop-up блок, который будет появляться через определенное время. Например, форму подписки или важное напоминание.

В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).

2. Добавьте триггер, который будет вызывать появление блока по времени. Триггер находится в категории «Другое».
Нужен блок – T188.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.

В меню «Настройки» укажите время, через которое должен появиться блок – «Тайме (в секундах)».

Время, на которое запоминается посетитель

4. Опубликуйте страницу. Через заданное время на странице появится всплывающее окно.

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

Добавьте pop-up блок, который должен появляться, когда человек закрывает вкладку. Например, форму подписки или информацию о выгодном предложении.

В меню «Контент» пропишите ссылку вида #popup:subscription (слово может быть любым).

2. Добавьте триггер, который вызовет появление блока при закрытии вкладки. Триггер находится в категории «Другое».
Нужен блок – T723.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.

Время, на которое запоминается посетитель

4. Опубликуйте страницу. Поп-ап будет появляться при подведении курсора к верхней границе браузера.

Будьте осторожны, используя этот тип поп-апа – обычно их ненавидят.

Наложения гиперссылок и кнопок

Это именно та статья, которая вам нужна?

Эта статья о Digital Publishing Suite. Статью по AEM Mobile см. в разделе Гиперссылки.

Для создания ссылок, ведущих на веб-сайты или другие статьи, можно использовать палитру «Гиперссылки» или палитру «Кнопки». В фолио поддерживаются не все действия кнопок и типы гиперссылок.

Наложения «Гиперссылка» поддерживаются в прокручиваемых фреймах и слайд-шоу, но не поддерживаются в других наложениях.

Видеоруководство

Действия с гиперссылками

Колин Флеминг (Colin Fleming)

http://blog.colingrayfive.com/

Используйте палитру «Кнопки» для создания ссылок на веб-сайты, другую страницу или другую статью.

Для получения наилучших результатов используйте палитру «Кнопки» вместо палитры «Гиперссылки» для создания ссылок. Палитра «Кнопки» является более гибкой и стабильной.

В InDesign создайте объект, который будет использоваться в качестве кнопки.
Например, если кнопка должна выполнять переход на веб-сайт, создайте текстовый фрейм или поместите изображение.
Откройте палитру «Кнопки» (Окно > Интерактивные элементы > Кнопки), выберите объект, затем нажмите значок «Преобразовать объект в кнопку».
Выберите событие On Release (При отпускании).
Событие On Release (При отпускании) — единственное событие, поддерживаемое для кнопок.
Нажмите значок плюса рядом с полем «Действие» и выберите поддерживаемое действие.
Поддерживаемые действия для кнопок
A. Поддерживаемые действия для кнопок, представляющих собой гиперссылки B. Поддерживаемые действия для кнопок слайд-шоу
Поддерживаются следующие операции по гиперссылкам: «Перейти к первой странице», «Перейти к последней странице», «Перейти к следующей странице», «Перейти к предыдущей странице», «Перейти по URL-адресу», «Звук», «Видео» и «Перейти к странице». Для слайд-шоу поддерживаются следующие действия: перейти к следующему состоянию, перейти к предыдущему состоянию, перейти к состоянию.
Не используйте действие «Перейти к назначению» для перехода к другой статье. Вместо этого используйте действие «Перейти к URL-адресу» с гиперссылкой формата navto. См. соответствующий раздел далее в этой статье.
При необходимости свяжите с кнопкой дополнительные действия.

Действия выполняются поочередно. Например, если первым действием является воспроизведение видеоролика, а вторым — отображение другого слайда, сначала воспроизводится видеоролик, затем отображается слайд.
Чтобы изменить параметры гиперссылки, выберите объект кнопки, а затем укажите следующие настройки в палитре Folio Overlays:
Открыть в фолио.
Контент отображается на веб-странице в средстве просмотра. Снимите флажок с этого параметра при создании ссылок на такие URL-адреса, как itms://, mailto: и tel:.
Открыть в браузере устройства.
Контент отображается вне средства просмотра в браузере мобильного устройства, например в мобильном браузере Safari на iPad. Установите флажок «Спрашивать при открытии», чтобы при щелчке по гиперссылке отображалось соответствующее сообщение.

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

Выберите фрейм или текст, который нужно использовать в качестве гиперссылки.
Откройте палитру «Гиперссылки» (Окно > Интерактивные элементы > Гиперссылки).
В меню палитры «Гиперссылки» выберите «Новая гиперссылка».
Снимите флажок «Общее назначение».
Этот параметр позволяет именовать и повторно использовать гиперссылки, однако использовать эту функцию в проектах DPS не рекомендуется.
В меню «Ссылка на» укажите один из следующих параметров и нажмите «ОК».

URL-адрес.
Если щелкнуть по URL-гиперссылке, откроется веб-страница (http://), приложение интернет-магазина App Store (itms://), приложение интернет-магазина Amazon Appstore (amzn://) или другая статья (navto://).
Пример: http://www.adobe.com
При создании ссылок на веб-сайты указывайте URL-адрес полностью, включая префикс http://.
Примечание.
При создании ссылки на URL-адрес iTunes снимите флажок «Открыть в фолио» в палитре Folio Overlays. В противном случае, если щелкнуть по гиперссылке, появится сообщение об ошибке «Невозможно открыть страницу». Аналогичным образом при использовании формата ссылок itms:// или amzn:// для перехода в интернет-магазин необходимо отключить «Открыть в фолио».

Гиперссылка navto:// выполняет переход к другой статье или другой странице текущей статьи. Введите navto://, далее укажите имя статьи, которое отображается в палитре Folio Builder. Используйте значение «Имя статьи», а не «Заголовок». Чтобы добавить номер страницы, введите «#» и номер страницы. Необходимо иметь в виду, что нумерация страниц начинается с 0, поэтому значение «#2» обеспечивает переход на страницу 3.
Пример: navto://newsarticle
Пример: navto://newsarticle#2 (переход на страницу 3)
Электронная почта.
Если щелкнуть по гиперссылке, связанной с адресом электронной почты, откроется почтовое приложение с заполненным полем адресата.
Страница.
При щелчке по гиперссылке «Страница» выполняется переход на другую страницу в текущей статье. Не используйте эту гиперссылку для перехода к другой статье.

Гиперссылки, связанные с привязкой текста, не поддерживаются.
Чтобы изменить настройки гиперссылки, выберите объекты гиперссылки, затем укажите следующие настройки в палитре Folio Overlays.
Открыть в фолио.
Контент отображается на веб-странице в средстве просмотра. Снимите флажок с этого параметра при создании ссылок на такие URL-адреса, как itms://, mailto: и tel:.
Открыть в браузере устройств.
Контент отображается вне средства просмотра в браузере мобильного устройства, например в мобильном браузере Safari на iPad. Установите флажок «Спрашивать при открытии», если вы хотите, чтобы при щелчке по гиперссылке отображалось соответствующее сообщение. Данный параметр недоступен, если установлен флажок «Открыть в фолио».

Примечание.
Настройки палитры Folio Overlays недоступны для текстовых гиперссылок. Изменить параметры для текстовых гиперссылок невозможно, по умолчанию для них устанавливается параметр «Открыть в фолио». Однако средство просмотра содержит встроенные исключения для некоторых префиксов, таких как itms://, tel: и mailto:. Для этих URL-адресов по умолчанию открывается внешнее приложение.

Дополнительную информацию о создании гиперссылок см. в разделе Создание гиперссылок руководства пользователя InDesign CS5/CS5.5.

Создание ссылок на другие статьи, использование формата navto

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

При создании кнопки или гиперссылки можно заменить префикс http:// на navto:// в поле URL-адреса. Затем укажите имя целевой статьи, которое отображается в палитре Folio Builder. Используйте значение «Имя статьи», а не «Заголовок». Допустимые форматы navto: navto://[articlename] и navto://[articlename]#n. «#n» указывает на номер страницы. Нумерация страниц начинается с 0, поэтому значение «#2» обеспечивает переход на страницу 3.

Переход на страницу 3 другой статьи

Примеры ссылок Navto:

navto://biking

navto://biking#2 (переход на страницу 3 статьи biking)

Примечание.

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

Чтобы исправить ссылки navto, необходимо переименовать статью (ее имя, а не заголовок) или отредактировать ссылки navto таким образом, чтобы они содержали имя статьи, отображаемое в палитре Folio Creator.

В выпуске версии 30 были представлены новые относительные параметры для навигации по статьям и страницам. Обратите внимание, что относительные форматы navto поддерживаются только в приложениях версии 30 или более поздней, но можно использовать любой формат фолио (версии 20 или более поздней). Относительные ссылки navto поддерживаются в средствах просмотра для iOS, Android и Магазина Windows, но не поддерживаются в средствах просмотра для настольных ПК и веб-приложениях для просмотра.

Можно использовать различные форматы navto://relative для перехода к следующей, предыдущей, первой или последней статье, а также для сброса фолио. Например, кнопка с действием navto://relative/first позволяет перейти к первой статье в фолио. Допустимые форматы:

first, last, next, previous, current и reset.

Можно также перейти к определенной статье относительно ее положения в фолио, например к пятой статье.

Пример: navto://relative/last (переход к последней статье в фолио)

Пример: navto://relative/last#last (переход на последнюю страницу последней статьи в фолио)

Пример: navto://relative/4 (переход к пятой статье в фолио)

Пример: navto://relative/4#2 (переход к третьей странице пятой статьи в фолио)

Использование формата current особенно полезно для навигации по страницам. Можно использовать #previous, #next, #first, #last для выполнения перехода на определенную страницу, например используйте #3, чтобы перейти к странице 4 статьи.

Пример: navto://relative/current#previous (переход к предыдущей странице статьи)

Пример: navto://relative/current#last (переход на последнюю страницу статьи)

Пример: navto://relative/current#3 (переход к четвертой странице текущей статьи)

Используйте формат navto для создания кнопки, которая осуществляет сброс фолио.

Пример: navto://relative/reset (переход к первой статье и очистка всех положений чтения)

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

Пример: navto://myarticle#3.3 (переход к определенному месту статьи с плавной прокруткой, который отображает нижнюю часть страницы 4 и верхнюю часть страницы 5)

Пример: navto://myarticle#50% (переход к середине статьи с плавной прокруткой)

Чтобы расширить эти возможности относительной навигации navto, можно создать наложение «Веб-содержимое» или статью HTML, которые имеют доступ к Reading API. Например, можно запрашивать фолио для определения такой информации, как количество статей в фолио и количество страниц в статье. Затем можно отобразить эту информацию или использовать ее другим способом в наложении или статье HTML. Дополнительные сведения см. в разделе Новые API-интерфейсы и функции в выпуске версии 30 в центре разработчиков DPS.

Создание гиперссылок navto для статей HTML

При создании гиперссылки или кнопки на основе URL-адреса можно использовать формат navto:// для перехода к другой статье. Формат navto особенно эффективен для перехода к статьям HTML.

Переход к статье HTML.

Введите navto:// и далее укажите имя HTML-файла статьи (а не заголовок).

Пример: navto://newsarticle

Переход к привязке в статье HTML.

Вы не можете выполнить переход к определенной странице в статье HTML, но можете выполнить переход к привязке при помощи ссылки navto://[articlename]#[anchorname].

Пример: navto://newsarticle#part4

Примечание.

Чтобы задать привязку в файле HTML, откройте файл HTML в текстовом редакторе. Перейдите к тексту, который должен служить привязкой, и заключите его в тег привязки, например «Это часть 4 статьи».

Переход к статье InDesign из статьи HTML.

С помощью формата navto можно создать гиперссылку из статьи HTML на статью InDesign. Пример:

<a href=»navto://newsarticle»>См. статью с новостями</a>

Можно также добавить номер страницы после имени документа для навигации по страницам в статье InDesign. Номер первой страницы документа — 0, номер второй страницы — 1, и т. д. Пример:

<a href=»navto://Cycling#3″>Перейти к странице 4 циклической статьи</a>

Переход из статьи HTML к статье HTML.

С помощью формата navto можно перейти от одной статьи HTML к другой, используя имя папки. Пример:

<a href=»navto://newsarticle»>См. статью с новостями</a>

Можно создавать кнопки, которые выполняют переход к библиотеке, списку разделов или последнему представлению (кнопка «Назад»). Используйте любой из этих форматов goto:// в действии для кнопки:

goto://ApplicationViewState/library

goto://ApplicationViewState/sections

goto://FolioNavigation/lastview

Эти форматы goto:// не поддерживаются в средстве просмотра для Android прежних версий (на основе AIR). В настоящее время в собственном средстве просмотра для Android поддерживаются только форматы library и lastview.

При наличии учетной записи уровня Enterprise DPS можно использовать формат goto для создания ссылок из статей на содержимое HTML, связанное с пользовательскими значками. Например, можно использовать DPS App Builder, чтобы задать пользовательские значки для кнопок «Магазин», «Справка» и «Условия». Эти кнопки отображаются в библиотеке приложения Viewer. Чтобы создать кнопку в статье, открывающей содержимое HTML, для любого из этих пользовательских значков, используйте следующий формат:

goto://ApplicationViewState/[label]

Например, при использовании кнопки goto://ApplicationViewState/Store будет открываться магазин HTML — точно так же, как при нажатии пользовательского значка магазина в библиотеке.

Пользуйтесь DPS App Builder для создания пользовательских значков и определения меток. См. раздел Navigation Toolbar (Панель навигации) (только для версии Enterprise).

Эти форматы goto не работают при создании связи между библиотекой и пользовательским слотом или между двумя пользовательскими слотами. Вместо этого необходимо использовать API-интерфейс goToState. Дополнительные сведения см. в разделе SDK библиотеки и магазина.

Вы можете создать гиперссылку или кнопку для отображения локального файла HTML, изображения или PDF во встроенном браузере приложения Viewer.

Добавьте папку, содержащую локальный файл HTML, в папку HTMLResources.
Папка HTMLResources должна быть включена в фолио. См. Импорт папки HTMLResources.
Создайте ссылку для отображения файла HTML во встроенном браузере:
Исходный документ InDesign
В поле URL-адреса гиперссылки или кнопки введите путь (без http://, navto:// или другого префикса). Пример:
HTMLResources/Cartoons/train1.html
Статья HTML
В статье HTML укажите местоположение. Пример:
<a href=»../HTMLResources/Cartoons/train1.html»>Смотреть галерею мультфильмов про поезда</a>
Например, чтобы указать изображение PNG, выполните следующее:
<a href=»../HTMLResources/Cartoons/train2.png»>Смотреть изображение поезда</a>
Наложение «Веб-содержимое»
Наложения «Веб-содержимое» вкладываются на два уровня ниже, чем статья HTML. Пример:
<a href=»../../../HTMLResources/Cartoons/train1.html»>Смотреть галерею мультфильмов про поезда</a>
Примечание.
Для получения наилучших результатов не допускайте наличия пробелов и специальных символов в папках и файлах HTML. При включении пробела в папку или имя файла используйте соответствующий код HTML для символа пробела. Например, используйте «Cartoon%20Files» для папки с именем «Cartoon Files».

Вы можете создать ссылку для отправки электронного письма (mailto:), текстового сообщения (SMS) или вызова номера телефона (tel:) из статьи. Кроме того, можно создавать ссылки, которые открывают приложение YouTube, а также композицию или альбом iTunes. Дополнительные сведения о форматах, необходимых для использования на устройствах iOS, можно найти здесь: Apple URL Scheme Reference.

Информацию о создании расширенных ссылок для отправки писем электронной почты (mailto:) см. в статье Джеймса Локмана (James Lockman) Отправка писем электронной почты и вложений из публикаций DPS.

Если при создании приложения для устройств iOS с помощью DPS App Builder вы указываете дополнительную схему URL, то можно перейти к этому приложению по ссылке из другого приложения или со страницы мобильного браузера Safari. См. Панель Viewer Details.

Примечание.

При создании ссылки на внешнее приложение или службу щелкните по кнопке и выберите параметр «Открыть в браузере устройства» в палитре Folio Overlays.

Справки по другим продуктам

Обзор интерактивных наложений
Поддерживаемые интерактивные функции
Передовые методы создания наложений

Кнопка против Ссылки | Введение в специальные возможности

Основная идея Интернета — когда Тим Бернерс Ли изобрел HTML в 1989 году — заключалась в соединении документов. Мы используем гиперссылки для перехода от одного документа к другому. Мы уже говорили о важности хорошо написанной ссылки, а также о правильном контрасте. Теперь давайте посмотрим на общий вид.

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

В знаменитом Bootstrap есть селектор класса CSS, который называется btn. Вы можете применить этот селектор к кнопке и к ссылке. Это сделает оба похожими, хотя это разные элементы управления.

Вы можете видеть, что в каждом фреймворке вы можете применить что-то вроде .button или .btn и ваша ссылка будет замаскирована под кнопку. Может быть, это и не так уж плохо, но ссылка и кнопка — совершенно разные вещи. Они ведут себя по-разному. Так почему они должны выглядеть одинаково?

Простой набор правил

Ссылка является фокусируемой и может быть вызвана клавишей ввода. Ссылка перенаправит вас на новую страницу или в раздел на той же странице. В ротаторе VoiceOver он также будет собран в окне «Ссылки».

Кнопка также может быть сфокусирована и может быть вызвана клавишей пробела. Кнопка запускает действие, такое как открытие или закрытие чего-либо. Или отправить форму. В большинстве случаев для этого используется JavaScript. В ротаторе VoiceOver он будет собран в окне «Элементы управления формой». Одно это о чем-то говорит.

В чем проблема?

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

И, пожалуйста, объясните мне, с какой стати кто-то должен делать что-то вроде этого: Текст Есть отличная ссылка. Мы все их любим. Они являются «соком» Интернета. Но кто-то поместил на него .button только для того, чтобы добавить .is-text сверху, поэтому ссылка изменится с подчеркнутого текста на кнопку и снова будет выглядеть как подчеркнутая ссылка. Что происходит?!

Заключение

Не путайте пользователей. Ссылка должна выглядеть как ссылка, а не как какой-либо другой элемент, в данном случае как кнопка. Ссылки и кнопки могут «ощущаться» одинаковыми для обычных пользователей. Они будут использовать свою мышь, чтобы навести курсор на ссылку или кнопку и щелкнуть по ним своей мышью. А вот при использовании клавиатуры и маскировке ссылки под кнопку дело обречено закончиться плачевно (ну, не получится так, как планировалось, это точно.

Я понял. Вы хотите что-то продать. Вам нужно что-то, что кричит: «Нажми на меня!» Это нормально при нажатии на кнопку. Я ожидаю немедленных действий. Я не хочу, чтобы меня перенаправляли на новую страницу. Может быть, даже маркетинговая страница с большим количеством копий на ней. Это противоположно фразе «Купи меня сейчас!»

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

Пример видео

В этом видео показана разница между кнопкой, ссылкой и другой ссылкой, оформленной так, чтобы она выглядела как кнопка. Мы рассмотрим три примера в ChromeVox, VoiceOver и Экранном дикторе.

код электронной почты | Веб-сайт ресурсов кода электронной почты

Последнее обновление: 20 ^th Апрель 2023

Педантическая семантика: Просто небольшое замечание для начала, поскольку мне нравится быть педантом, это не кнопка. Здесь я назвал это Ссылка — кнопка так как это ссылка, то есть стилизованная под кнопку.