超連結與按鈕覆蓋

您正在檢視正確的文章嗎?

這篇文章指的是 Digital Publishing Suite。若為 AEM Mobile 文章,請參閱「超連結」。

您可以使用「超連結」面板或「按鈕」面板建立可跳至網站、其他文章等地方的連結。並非所有按鈕動作和超連結類型都可在對開本中受到支援。

可捲動影格和投影片中支援超連結覆蓋,但不支援其他覆蓋。

教學課程影片

超連結動作 (英文)

使用「按鈕」面板可建立網站、其他頁面或其他文章的連結。

為獲得最佳結果,請使用「按鈕」面板建立連結,而非「超連結」面板。「按鈕」面板更有彈性、更穩定。

  1. 在 InDesign 中,建立要當做按鈕使用的物件。

    例如,如果您要該按鈕跳至某個網站,請建立文字框或置入影像。

  2. 開啟「按鈕」面板 (「視窗 > 互動 > 按鈕」),選取該物件,並按一下「將物件轉換為按鈕」圖示。

  3. 對於「事件」,請選擇「放開滑鼠」。

    「放開滑鼠」是唯一支援的按鈕事件。

  4. 按一下「動作」旁邊的加號,並選取支援的動作。

    支援的按鈕動作

    A. 支援的超連結按鈕動作 B. 支援的投影片按鈕動作 

    支援的超連結動作包括「跳至第一頁」、「跳至最後一頁」、「跳至下一頁」、「跳至上一頁」、「跳至 URL」、「聲音」、「影片」及「跳至頁面」。投影片則支援「跳至下一個狀態」、「跳至上一個狀態」及「跳至狀態」動作。

    請勿使用「跳至目的地」動作跳至不同文章。請改為使用具有「navto」格式的「跳至 URL」動作。請參閱本文稍後的相關章節。

  5. 視需要加入其他按鈕動作。

    動作會依照順序播放。例如,假設第一個動作是播放影片,第二個動作是顯示另一張投影片,則會先播放影片再顯示投影片。

  6. 若要變更超連結設定,請選取按鈕物件,然後在「Folio Overlays」面板中指定這些設定:

    在對開本中開啟

    在檢視器內顯示 Web 檢視中的內容。當連結至 itms://、mailto: 和 tel: 等 URL 時,請取消選取此選項。

    在裝置瀏覽器中開啟

    在檢視器之外顯示行動裝置瀏覽器中的內容,例如 iPad 上的行動 Safari。如果您希望在用戶點選連結時出現提示,請選取「先詢問」。

在 InDesign,您可以使用「超連結」面板來加入超連結。超連結對於文字特別有用。如果您要將影格變成超連結,請考慮使用「按鈕」面板來取代「超連結」面板。按鈕的適用性較高,而且較穩定。

  1. 選取您要當做超連結使用的影格或文字。

  2. 開啟「超連結」面板 (「視窗 > 互動 > 超連結」)。

  3. 在「超連結」面板中,從面板選單中選擇「新增超連結」。

  4. 取消選取「共用目的地」。

    「共用目的地」可讓您命名及重複使用超連結,但是在 DPS 工作流程中,請最好避免使用此選項。

  5. 在「連結至」選單中,指定下列任一個選項,然後按一下「確定」:

    URL

    點選一個 URL 超連結顯示網頁 (http://)、App Store 應用程式 (itms://)、Amazon Appstore 應用程式 (amzn://) 或不同的文章 (navto://)。

    範例:http://www.adobe.com

    當連結至網站時,請輸入整個 URL,包括「http://」。

    註解:

    當連結至 iTunes URL 時,請取消選取 Folio Overlays 面板中的「在對開本中開啟」。否則,在點選該超連結時,便會顯示「無法開啟頁面」錯誤訊息。同樣地,如果使用 itms:// 或 amzn:// 格式連結到商店應用程式,請關閉「在對開本中開啟」。

    navto:// 超連結會跳至不同的文章或該文章中的不同頁面。輸入 navto://,並加上 Folio Builder 面板所顯示的文章名稱。使用「文章名稱」值,而不是文章的「標題」值。如果您想要包含頁碼,請加入 #,後面接著數字。但是請記住,第一頁是 0,因此加入 #2 會跳至第 3 頁。

    範例:navto://newsarticle

    範例:navto://newsarticle#2 (跳至第 3 頁)

    電子郵件

    點選「電子郵件」超連結會啟動「郵件」應用程式,同時「收件者」欄位已填入。

    頁面

    點選「頁面」超連結會跳至文章中的不同頁面。請勿使用這個選項跳至不同文章。

    「文字錨點」超連結不受支援。

  6. 若要變更超連結設定,請選取超連結物件,然後在「Folio Overlays」面板中指定這些設定:

    在對開本中開啟

    在檢視器內顯示 Web 檢視中的內容。當連結至 itms://、mailto: 和 tel: 等 URL 時,請取消選取此選項。

    在裝置瀏覽器中開啟

    在檢視器之外顯示行動裝置瀏覽器中的內容,例如 iPad 上的行動 Safari。如果您希望在使用者點選連結時出現提示,請選取「先詢問」。如果選取「在對開本中開啟」,此選項便會停用。

    註解:

    對於文字超連結,無法使用 Folio Overlays 面板的設定。您無法變更文字超連結的設定;依據預設,它們是設定為「在對開本中開啟」。不過,檢視器包含 itms://、tel: 和 mailto: 等特定字首的內建例外。針對這些 URL,預設會開啟外部應用程式。

如需建立超連結的其他詳細資訊,請參閱「InDesign CS5/CS5.5 說明」中的「建立超連結」。

對開本文章儲存在伺服器上,因此,任何指定 InDesign 檔案路徑的連結會在預覽時中斷。使用「navto」格式可以連結至其他文章。

當建立按鈕或超連結時,您可以在「URL」欄位中使用「navto://」來取代「http://」。接著,指定要顯示在 Folio Builder 面板中的目標文章名稱。使用「文章名稱」值,而不是文章的「標題」值。有效 navto 格式包括 navto://[文章名稱]navto://[文章名稱]#n。加入 #n 可指定頁碼。文件的第一頁是 0,因此指定 #2 會跳至第 3 頁。

跳至不同文章的第 3 頁

Navto 範例:

navto://biking

navto://biking#2 (跳至騎單車文章的第 3 頁)

註解:

如果您使用舊版工具建立 navto 連結,並且該連結採用不同於目標文章名稱的檔案夾名稱或文章名稱,您的連結就會中斷。若要修復 navto 連結,可以將文章重新命名 (更改名稱,而非標題),或者編輯 navto 連結,使其指向 Folio Creator 面板所顯示的文章名稱。

v30 版本為文章與頁面導覽導入了新的相對選項。請注意,只有 v30 或更新版本的應用程式才支援相對 navto 格式,不過,您可以使用任何對開本格式 (v20 或更新版本)。iOS、Android 與 Windows 市集檢視器皆支援相對 navto 連結,但 Desktop Viewer 或網頁檢視器則無法提供支援。

您可以使用各種 navto://relative 格式跳至下一個、前一個、第一個或最後一個文章,或重設對開本。舉例來說,具有 navto://relative/first 動作的按鈕會跳至對開本中的第一篇文章。有效的格式包括 firstlastnextpreviouscurrentreset。另外,您也可以依照相對於自身在對開本中的位置跳至特定文章,例如第五個文章。

範例: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 功能,您可以建立存取 Reading API 的網頁內容覆蓋或 HTML 文章。舉例來說,您可以查詢對開本以判斷各項資訊 (例如對開本的文章個數以及文章的頁數)。接著,您可以顯示這項資訊或透過其他方式將其運用在覆蓋或 HTML 文章中。如需詳細資訊,請參閱 DPS 開發人員中心的「R30 中的新 API 與功能」(英文)。

當建立 URL 基礎的超連結或按鈕時,您可以使用「navto://」URL 來跳至不同的文章。Navto 對於跳至 HTML 文章特別有用。 

跳至 HTML 文章

輸入 navto://,後面緊接著 HTML 文章名稱 (而非文章標題)。

範例:navto://newsarticle

跳至 HTML 文章中的錨點

您無法跳至 HTML 文章中的特定頁面,但是您可以輸入 navto://[文章名稱]#[錨點名稱] 來跳至錨點。

範例:navto://newsarticle#part4

註解:

若要定義 HTML 檔案中的錨點,請在文字編輯器中開啟 HTML 檔案。導覽您要當做錨點使用的文字,然後用錨點標記括住該文字,例如:“This is Part 4 of the Article”。

從 HTML 文章跳至 InDesign 文章

使用 navto 格式,建立從 HTML 文章到 InDesign 文章的超連結。範例:

<a href="navto://newsarticle">See the News Article</a>

您也可以在文件名稱的後面加入頁碼,以導覽至 InDesign 文章中的頁面。文件的第一頁是 0,而第二頁是 1,以此類推。範例:

<a href="navto://Cycling#3">Go to Page 4 of the Cycling Article</a>

從 HTML 跳至 HTML

使用 navto 格式,利用檔案夾名稱,從一個 HTML 文章跳至另一個。範例:

<a href="navto://newsarticle">See the News Article</a>

您可以建立連至資料庫的按鈕、連至章節清單的按鈕,或是連至上一個檢視的按鈕 (「返回」按鈕)。請在按鈕動作中使用下方任一 goto:// 格式:

goto://ApplicationViewState/library

goto://ApplicationViewState/sections

goto://FolioNavigation/lastview

舊版的 AIR 架構 Android 檢視器無法支援這些 goto:// 格式。原生 Android 檢視器目前僅支援「library」與「lastview」格式。

如果您有「企業版」DPS 帳戶,則可使用 goto 格式在文章中建立連結至與自訂圖示相關聯的 HTML 內容。例如,您可使用 DPS App Builder 以指定「商店」、「說明」及「條款」的自訂圖示。這些按鈕會顯示於檢視器資料庫。若要在文章中建立可針對任何這些自訂圖示開啟 HTML 內容的按鈕,請使用下列格式:

goto://ApplicationViewState/[label]

例如,goto://ApplicationViewState/Store 按鈕動作會開啟 HTML 商店—就如同在資料庫點選自訂的「商店」圖示。

使用 DPS App Builder 以建立自訂圖示並指定標籤。請參閱「Navigation Toolbar (導覽工具列) (僅限企業版)」。

如果是從資料庫或自訂位置連結到另一個自訂位置,這些 goto 格式便無效。請改用 goToState API。請參閱「資料庫與商店 SDK」(英文)。

您可以建立會在檢視器的應用程式內部瀏覽器中顯示本機 HTML、影像或 PDF 檔案的超連結或按鈕。

  1. 將包含本機 HTML 檔案的檔案夾加入「HTMLResources」檔案夾中。

    請確定「HTMLResources」檔案夾包含在對開本中。請參閱「匯入 HTMLResources 檔案夾」。

  2. 建立要在內部瀏覽器中顯示 HTML 檔案的連結:

    InDesign 來源文件

    在超連結或按鈕的「URL」欄位中,輸入不包含 http://、navto:// 或任何字首的路徑。範例:

    HTMLResources/Cartoons/train1.html

    HTML 文章

    從 HTML 文章,指定該位置。範例:

    <a href=”../HTMLResources/Cartoons/train1.html”>See Train Cartoon Gallery</a>

    假設,若要參照 PNG 影像,請這樣做:

    <a href=”../HTMLResources/Cartoons/train2.png”>See Train Image</a>

    網頁內容覆蓋

    「網頁內容」覆蓋位於 HTML 文章的下兩層。範例:

    <a href=”../../../HTMLResources/Cartoons/train1.html”>See Train Cartoon Gallery</a>

    註解:

    為獲得最佳效果,請避免在 HTML 檔案夾以及檔案中使用空格和特殊字元。如果檔案夾或檔案名稱中包含空格,請使用適當的 HTML 代碼表示空格字元。例如,使用「Cartoon%20Files」表示名為「Cartoon Files」的檔案夾。

您可以建立連結,從文章中傳送電子郵件訊息 (mailto:)、文字訊息 (SMS) 或撥號 (tel:),也可以建立連結以開啟 YouTube 應用程式、iTunes 歌曲或專輯。若要進一步了解用於 iOS 裝置的必要格式,請參閱「Apple URL 配置參考」(英文)。

如需有關建立進階電子郵件 (mailto:) 連結的資訊,請參閱 James Lockman 的文章「從 DPS 出版物傳送電子郵件和電子郵件附件」(英文)。

如果您在使用 DPS App Builder 建立 iOS 應用程式時,指定「Optional URL Scheme」(選擇性的 URL 配置),您就可以從另一個應用程式連至該應用程式,或是在從行動版 Safari 網頁上檢視時連至該應用程式。請參閱「Viewer Details (檢視器詳細資訊) 面板」。

註解:

每當您建立外部應用程式或服務的連結時,選取按鈕並選擇在 Folio Overlays 面板中的「在裝置瀏覽器中開啟」選項。

更快、更輕鬆地獲得協助

新的使用者?