註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

在本文中,您將學習如何在 Adobe Muse 中使用超連結。您可以使用超連結來連結至外部網站、可下載的檔案、電子郵件地址等。這些您想要與網站訪客分享,但是 Adobe Muse 介面尚不支援插入的可下載檔案,類型可以是 PDF、DOC、PPT、TXT、豐富多媒體,或是其他類型。您可以連結至目前已上傳至 Adobe Muse 主機帳戶的檔案,以及儲存於第三方網站的檔案。

視訊 | 如何建立超連結

視訊 | 如何建立超連結
Adobe Press

在頁面中新增錨點連結

在本節中,您將學習如何連接「選單」項目與「錨點區域」這 2 個元素,以新增錨點連結到手動選單。請依照下列步驟操作:

  1. 按一下頁面上任一處以選擇該頁面 (「選取指示器」會顯示「頁面」一詞)。然後按兩下 Widget 選單項目 (Widget 容器)。第一次按下按鈕會選取整個手動「選單」Widget,第二次則會選取選單項目。「選取指示器」會顯示「選單項目」一詞。
  2. 按一下「超連結」選單來查看網站的頁面完整清單及錨點標籤。在「桌上型電腦」區段找到右側頁面,您會發現您建立的錨點標籤就列在該頁面正下方。選取適合的錨點標籤,將其連結至選單項目。
連結至錨點
使用「超連結」選單將「Breakfast」(早餐) 錨點連結套用至「Breakfast」(早餐) 按鈕。

  1. 重複步驟 2 以新增更多錨點連結。
  2. 選擇「檔案 > 網站屬性」。在「版面」標籤中,確認已核取「啟用錨點連結的作用中狀態」核取方塊。依預設,此選項在所有新網站中皆為啟用,但若您正在編輯較舊的網站,您可能需要核取該核取方塊。
  3. 選擇「檔案 > 在瀏覽器中預視網頁」。

當您按一下連結以檢視不同的頁面區域時,請注意導覽選單中所顯示的對應作用中狀態。此網站功能可協助引導訪客,讓他們瞭解正在檢視哪個區段。結束瀏覽器並回到 Adobe Muse。

您也可嘗試上下捲動頁面,以查看頁面中的程式碼如何在頁面在每個頁面區域間移動時,偵測每個錨點標籤的位置,並更新手動選單的作用中狀態。此技巧適用於能垂直和水平捲動的頁面。

注意:頁面必須要有足夠的高度與寬度,才能讓錨點標籤有跳至各區域的空間。若頁面區域間距太小,使得內容不必捲動即可完全顯示在一個瀏覽視窗內,使用錨點標籤看起來就不會有跳到下一個區域的效果。

  1. 結束瀏覽器並回到 Adobe Muse。

在下一節,您將瞭解如何新增下載連結,讓訪客可以下載如 PDF、DOC、MP3、MOV、PSD 等檔案格式,以及高畫質 JPEG 檔案。

秘訣:如果您和其他的設計師一起製作網站專案,您甚至可以連結至 .Muse 來源檔,這樣其他團隊成員就可以直接從您的網站下載來源檔案。

使用錨點標記區域和作用中狀態

在網頁上建立錨點區域是視覺上區隔頁面不同區段的簡易方法。每一個區段皆可透過專為方便導覽頁面所設計的「錨點連結」輕鬆存取。

在設計成品中,網頁最好包含錨點連結,讓訪客垂直跳至顯示對應菜單的區域。想像一下,當您加入錨點標籤時,就像是在頁面上貼標記。當訪客按下該錨點的連結時,連結會捲動較長頁面,跳至標記所在的特定區段。

  1. 在頂端導覽區按一下「錨點」按鈕,以載入「錨點」工具。
按一下「錨點」按鈕
按一下工作區頂端的「錨點」按鈕,載入第一個錨點的「置入噴槍」。

  1. 在頁面的最頂端,也就是在頂層網站導覽的頁首區域上方按一下。如果需要,可以先暫時移開頁首矩形。如果有移動頁首內容,請務必在之後將其移回原始位置。
  2. 在顯示的「重新命名錨點」對話方塊中,輸入錨點名稱。
輸入錨點名稱
命名頁面頂端「breakfast」(早餐) 菜單的錨點。

  1. 重複步驟 1 至 3,以定義錨點區域並新增更多「錨點連結」。

註解:

第一個錨點 (位於頁面頂端) 和第一個連結內容實例 (您將在下個區段中新增的手動「選單」Widget) 之間的間距量 (以像素為單位) 將會設定「作用中區域」,造成每個區域中的作用中狀態產生變化。例如,如果第一個錨點置於頁面最頂端,而「選單」Widget 置於其下方 120 像素,當訪客向下捲動頁面時,其後續區域選單項目的作用中狀態也會在更新 120 像素後,再出現選單。

您在下個步驟新增手動「選單」Widget 後,請將這些按鈕連結至錨點標籤以建立導覽,讓訪客可在頁面向下跳至每組菜單來閱讀。

新增可下載檔案的連結

  1. 在「設計」視圖中編輯頁面時,請使用「文字」工具,在「Breakfast」(早餐) 菜單文字框的右上角附近建立新的文字框。輸入:Download Menu。
  2. 在仍選取文字框的情況下,使用「文字」面板套用下列設定:
    • 網頁字體:Kaushan Script (或任選其他 script 字體)
    • 字體大小:14
    • 顏色:#EEE5C4 (在第 3 部分,您已重新命名此色票顏色為「cream-menu」(奶油色-菜單))
    • 行距:57%
    • 對齊方式:置中
  3. 使用「填色」選單將填色顏色設定為「無」。按一下「影像」區段旁的檔案夾,然後瀏覽以選取樣本檔案檔案夾中 download-bg.png 的檔案,來設定背景影像。請確定「符合」選單是設定為「原始大小」,且「位置」為置中。
  1. 在「填色」選單以外之處按一下將其關閉。如有需要,請使用「選取」工具重新調整文字框的大小並將其重新放置,使它位於「Breakfast」(早餐) 菜單文字框右上角的正中央。
  1. 在仍選取文字框的情況下,使用「控制」面板中的「超連結」選單來選取「連結至檔案」選項。在顯示的「讀入」對話方塊中,瀏覽以選取檔案,然後按一下「開啟」加以選取

注意:當您使用「連結至檔案」功能瀏覽以選取檔案時,檔案會變成網站資源的一部分,並在網站發佈時上傳,或是在轉存網站時包含在網站檔案中。當您要拷貝從網站連結至站內任何本機檔案夾的檔案時,這是最好的做法,而且能一併拷貝網站使用的其他影像檔。

現在已新增 PDF 檔案連結。若您查看「資源」面板,會發現檔案現已列為網站資源之一。

  1. 使用「選取」工具選取文字框。複製「Download Menu」文字框並將其貼上,把文字框放在「Lunch」菜單的右上角。另外再重複此步驟兩次,建立「Dinner」和「Dessert」菜單右上角的複本。

在實際的專案中,您可以連結至 4 個分開的菜單檔案,以提供訪客 4 份不一樣的可下載 PDF 檔,讓他們檢視及列印菜單。為了進行本教學課程,各頁面區域中的「下載」按鈕都會連結至相同的 PDF 檔。

  1. 選擇「檔案 > 在瀏覽器中預視網頁」。按一下「水平」選單內其中一個選單項目,以跳到頁面中對應的菜單。請注意,當您往下捲動查看「Dinner」和「Dessert」菜單時,其他頁面內容的頂端會顯示頁首。這是因為「food」頁面使用「前景」主版頁面,而該頁面的頁首內容已經移至前景。
  2. 按一下「Download Menu」(下載菜單) 連結,查看 PDF 檔案如何下載至您電腦。

依據您使用的瀏覽器和瀏覽器偏好設定而定,您會看到不同的行為。有些瀏覽器會在瀏覽器視窗內顯示 PDF,有些則只會將 PDF 檔下載至您的桌面,讓您使用 Acrobat Pro 或 Acrobat Reader 開啟檔案。

建立電子郵件地址的連結

如果您已經使用 Adobe Muse 一段時間,應該會注意到「超連結」選單最近已重新組織為數個區段,讓您更容易找到可以連結的頁面名稱與項目。在本節中,您將進一步瞭解「超連結」選單的結構,以及其篩選選單清單項目的方式。您也會瞭解如何新增電子郵件地址連結。

  1. 按一下「超連結」選單的向下箭頭來顯示完整清單。
連結至電子郵件地址
展開的視圖會顯示「超連結」選單中的清單。

  1. 「超連結」選單由數個區段構成。「最近使用的連結」會顯示所有加入網站的外部網站連結。您可在「超連結」欄位中直接輸入任何 URL,以連至外部網頁。
  2. 「桌面」區段包含目前網站的頁面。請注意,您新增至「food」頁面的的錨點標籤,會照字母順序列在「food」頁面下方。這表示您可在網站的多個頁面上建立相同名稱的錨點,且在設定連結時仍可輕易地辨識它們。在此樣本網站中,只有一個「桌面」版面,但如果網站包含適用於手機或平板電腦的其他版面,這些區段就會顯示對應的頁面集。
  3. 尾端的「檔案」區段包括「連結至檔案」功能,以及所有新增至目前網站的可下載檔案。由於您不久前加入了 KatiesCafeMenu.pdf 檔案的連結,該檔案名稱會列在此區段,以便輕易地重新連結至網站中多個頁面的通用資源。
  4. 如果您想要新增電子郵件連結 (亦即,按下連結時,訪客的電子郵件用戶端會開啟並進入撰寫新郵件狀態,郵件的「收件者」欄位會自動填入電子郵件地址),請在「連結」選單欄位中輸入電子郵件地址,並在地址前面加上「mailto:」,例如:

    mailto:email@address.com

  5. 有時候,「超連結」選單中的項目清單會變得很長,在網站較大時很難瀏覽。如果您正在尋找特定網頁、錨點、檔案或要連結的外部 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,或是直接在瀏覽器網址列輸入網站的網域名稱。
瀏覽器網址列
您可以直接在瀏覽器網址列輸入網站的網域名稱。

  1. 存取目標網站的首頁後,循連結存取要使用的依存檔案,或是直接在瀏覽器的網址列輸入完整 URL。完成此步驟後,您的瀏覽器即會顯示、播放或下載您要存取的檔案。
  2. 一旦確定您存取已上傳檔案的 URL 正確無誤,請選取瀏覽器網址列完整內容,再選擇「編輯 > 複製」。或者,您也可以使用鍵盤熱鍵 Command+C (Mac) 或 Ctrl+C (Windows)。
從瀏覽器網址列複製地址
從瀏覽器網址列複製 URL

此時,依存檔案的 URL 已複製於剪貼簿。請小心勿再複製其他項目,直到依下一節說明將此依存檔案的 URL 貼上至「超連結」欄位為止。

建立外部檔案的連結

成功上傳依存檔案、透過瀏覽器存取,並複製檔案 URL 後,最後的步驟即是在您的 Adobe Muse 網站頁面中建立連結。請依照下列步驟操作:

  1. 啟動 Adobe Muse。按兩下頁面縮圖,以「設計」視圖開啟頁面。
  2. 選取一些文字、置入的影像,或是矩形區域作為訪客下載或存取依存檔案時要點選的「按鈕」。
  3. 在選取文字或頁面元素的狀態下,按一下「超連結」欄位的下拉式選單,再貼上您之前複製的依存檔案 URL (絕對路徑)。

若要設定連結開啟於新的瀏覽器視窗,請按一下「超連結」視窗左方的「超連結」標籤。在畫面顯示的對話方塊中,啟用「在新視窗或標籤中開啟連結」選項旁的核取方塊,如下圖所示。

「超連結」選項
選取「在新視窗或標籤中開啟連結」

儲存頁面並發佈網站的變更。

以瀏覽器造訪該頁面。按一下連結的文字或按鈕,以確認連結如預期運作。

註解:

您可以嘗試以多種瀏覽器造訪網站 (如 Chrome、Safari、Firefox 等),測試以不同的瀏覽器在線上網站按下連結存取依存檔案時,是否能正常運作。

若要瞭解更多關於使用 Adobe Muse 的秘訣,請務必造訪 Adobe Muse 說明和教學課程頁面,或 Adobe Muse 活動頁面的即時網路研討會和影片。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策