Adobe Press
在本文中,您將學習如何在 Adobe Muse 中使用超連結。您可以使用超連結來連結至外部網站、可下載的檔案、電子郵件地址等。這些您想要與網站訪客分享,但是 Adobe Muse 介面尚不支援插入的可下載檔案,類型可以是 PDF、DOC、PPT、TXT、豐富多媒體,或是其他類型。您可以連結至目前已上傳至 Adobe Muse 主機帳戶的檔案,以及儲存於第三方網站的檔案。
在本節中,您將學習如何連接「選單」項目與「錨點區域」這 2 個元素,以新增錨點連結到手動選單。請依照下列步驟操作:
當您按一下連結以檢視不同的頁面區域時,請注意導覽選單中所顯示的對應作用中狀態。此網站功能可協助引導訪客,讓他們瞭解正在檢視哪個區段。結束瀏覽器並回到 Adobe Muse。
您也可嘗試上下捲動頁面,以查看頁面中的程式碼如何在頁面在每個頁面區域間移動時,偵測每個錨點標籤的位置,並更新手動選單的作用中狀態。此技巧適用於能垂直和水平捲動的頁面。
注意:頁面必須要有足夠的高度與寬度,才能讓錨點標籤有跳至各區域的空間。若頁面區域間距太小,使得內容不必捲動即可完全顯示在一個瀏覽視窗內,使用錨點標籤看起來就不會有跳到下一個區域的效果。
在下一節,您將瞭解如何新增下載連結,讓訪客可以下載如 PDF、DOC、MP3、MOV、PSD 等檔案格式,以及高畫質 JPEG 檔案。
秘訣:如果您和其他的設計師一起製作網站專案,您甚至可以連結至 .Muse 來源檔,這樣其他團隊成員就可以直接從您的網站下載來源檔案。
在網頁上建立錨點區域是視覺上區隔頁面不同區段的簡易方法。每一個區段皆可透過專為方便導覽頁面所設計的「錨點連結」輕鬆存取。
在設計成品中,網頁最好包含錨點連結,讓訪客垂直跳至顯示對應菜單的區域。想像一下,當您加入錨點標籤時,就像是在頁面上貼標記。當訪客按下該錨點的連結時,連結會捲動較長頁面,跳至標記所在的特定區段。
第一個錨點 (位於頁面頂端) 和第一個連結內容實例 (您將在下個區段中新增的手動「選單」Widget) 之間的間距量 (以像素為單位) 將會設定「作用中區域」,造成每個區域中的作用中狀態產生變化。例如,如果第一個錨點置於頁面最頂端,而「選單」Widget 置於其下方 120 像素,當訪客向下捲動頁面時,其後續區域選單項目的作用中狀態也會在更新 120 像素後,再出現選單。
您在下個步驟新增手動「選單」Widget 後,請將這些按鈕連結至錨點標籤以建立導覽,讓訪客可在頁面向下跳至每組菜單來閱讀。
注意:當您使用「連結至檔案」功能瀏覽以選取檔案時,檔案會變成網站資源的一部分,並在網站發佈時上傳,或是在轉存網站時包含在網站檔案中。當您要拷貝從網站連結至站內任何本機檔案夾的檔案時,這是最好的做法,而且能一併拷貝網站使用的其他影像檔。
現在已新增 PDF 檔案連結。若您查看「資源」面板,會發現檔案現已列為網站資源之一。
在實際的專案中,您可以連結至 4 個分開的菜單檔案,以提供訪客 4 份不一樣的可下載 PDF 檔,讓他們檢視及列印菜單。為了進行本教學課程,各頁面區域中的「下載」按鈕都會連結至相同的 PDF 檔。
依據您使用的瀏覽器和瀏覽器偏好設定而定,您會看到不同的行為。有些瀏覽器會在瀏覽器視窗內顯示 PDF,有些則只會將 PDF 檔下載至您的桌面,讓您使用 Acrobat Pro 或 Acrobat Reader 開啟檔案。
如果您已經使用 Adobe Muse 一段時間,應該會注意到「超連結」選單最近已重新組織為數個區段,讓您更容易找到可以連結的頁面名稱與項目。在本節中,您將進一步瞭解「超連結」選單的結構,以及其篩選選單清單項目的方式。您也會瞭解如何新增電子郵件地址連結。
現在社交媒體圖示按鈕都已就位,您接下來要新增每個社交網站的外部連結。
這是一般網頁設計的習慣,亦即前往同一網站其他網頁的連結,將在同一瀏覽器視窗中開啟 (Adobe Muse 預設如此運作),前往其他外部網站網頁的連結,則在新視窗或新索引標籤開啟。
在 Adobe Muse 網站頁面加入連結之前需先準備連結;請用瀏覽器存取線上已上傳的檔案。請依照下列步驟進行。
此時,依存檔案的 URL 已複製於剪貼簿。請小心勿再複製其他項目,直到依下一節說明將此依存檔案的 URL 貼上至「超連結」欄位為止。
成功上傳依存檔案、透過瀏覽器存取,並複製檔案 URL 後,最後的步驟即是在您的 Adobe Muse 網站頁面中建立連結。請依照下列步驟操作:
若要設定連結開啟於新的瀏覽器視窗,請按一下「超連結」視窗左方的「超連結」標籤。在畫面顯示的對話方塊中,啟用「在新視窗或標籤中開啟連結」選項旁的核取方塊,如下圖所示。
儲存頁面並發佈網站的變更。
以瀏覽器造訪該頁面。按一下連結的文字或按鈕,以確認連結如預期運作。
您可以嘗試以多種瀏覽器造訪網站 (如 Chrome、Safari、Firefox 等),測試以不同的瀏覽器在線上網站按下連結存取依存檔案時,是否能正常運作。
若要瞭解更多關於使用 Adobe Muse 的秘訣,請務必造訪 Adobe Muse 說明和教學課程頁面,或 Adobe Muse 活動頁面的即時網路研討會和影片。
登入您的帳戶