如何建立 Adobe Muse 網站的超連結

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

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

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

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

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

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

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

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

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

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

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

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

1. 在頂端導覽區按一下「錨點」按鈕，以載入「錨點」工具。

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

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

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

1. 在「設計」視圖中編輯頁面時，請使用「文字」工具，在「Breakfast」(早餐) 菜單文字框的右上角附近建立新的文字框。輸入：Download Menu。
2. 在仍選取文字框的情況下，使用「文字」面板套用下列設定：
   • 網頁字體：Kaushan Script (或任選其他 script 字體)
   • 字體大小：14
   • 顏色：#EEE5C4 (在第 3 部分，您已重新命名此色票顏色為「cream-menu」(奶油色-菜單))
   • 行距：57%
   • 對齊方式：置中
3. 使用「填色」選單將填色顏色設定為「無」。按一下「影像」區段旁的檔案夾，然後瀏覽以選取樣本檔案檔案夾中 download-bg.png 的檔案，來設定背景影像。請確定「符合」選單是設定為「原始大小」，且「位置」為置中。

4. 在「填色」選單以外之處按一下將其關閉。如有需要，請使用「選取」工具重新調整文字框的大小並將其重新放置，使它位於「Breakfast」(早餐) 菜單文字框右上角的正中央。

5. 在仍選取文字框的情況下，使用「控制」面板中的「超連結」選單來選取「連結至檔案」選項。在顯示的「讀入」對話方塊中，瀏覽以選取檔案，然後按一下「開啟」加以選取

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

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

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

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

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

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

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

1. 按一下「超連結」選單的向下箭頭來顯示完整清單。

2. 「超連結」選單由數個區段構成。「最近使用的連結」會顯示所有加入網站的外部網站連結。您可在「超連結」欄位中直接輸入任何 URL，以連至外部網頁。
3. 「桌面」區段包含目前網站的頁面。請注意，您新增至「food」頁面的的錨點標籤，會照字母順序列在「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 預設如此運作)，前往其他外部網站網頁的連結，則在新視窗或新索引標籤開啟。

在 Adobe Muse 網站頁面加入連結之前需先準備連結；請用瀏覽器存取線上已上傳的檔案。請依照下列步驟進行。

1. 啟動您選用的瀏覽器。
2. 瀏覽至含有已上傳依存檔案的第三方網站或您的網站。您可以使用搜尋引擎如 Google，或是直接在瀏覽器網址列輸入網站的網域名稱。

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

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

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

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

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

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

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

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