瞭解如何為您的 Adobe Muse 網站新增並配置選單。瞭解如何建立行動選單、滑鼠指向效果狀態與編輯選單標籤。

註解:

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

在建立網站時,導覽應為最重要的區塊之一。在設計網站時,選擇網站導覽的樣式和位置非常重要。網站的用戶經驗會因為選單或網站導覽而獲得改善或毀於一旦。

Adobe Muse 讓您得以使用選單 Widget 快速建立網站導覽。儘管您可以手動建立頁面連結,選單 Widget 提供了方便且具有彈性的方法,可新增
導覽至您的網站。如同其他 Widget,您只要將選單 Widget 拖移至您的頁面,即可新增選單。如此一來,您會看到與頁面名稱相同的選單標籤自動填入網站。當您變更規劃視圖中的頁面名稱時,選單標籤會自動更新。

您可以新增垂直及水平選單。此外,Adobe Muse 讓您得以建立三合一選單以及選單項目的滑鼠指向效果狀態。繼續閱讀,瞭解如何使用 Adobe Muse 執行這些作業。

 

新增選單 Widget

  1. 在「設計」視圖中開啟主版頁面進行編輯的情況下,開啟「Widget 程式庫」。如果其尚未開啟,請選擇「視窗 > Widget 程式庫」。

  2. 在「Widget 程式庫」面板中,按一下「選單」展開「選單」Widget 的清單。依照您的網站設計以及您要放置選單的位置,選取下列任一選項:

    • 水平」可新增水平選單。
    • 垂直」可新增垂直選單。
    在 Adobe Muse 中選取垂直或水平選單 Widget
    選取垂直或水平選單 Widget
  3. 使用「選取」工具拖移 Widget 到您想要在版面中放置的地方。例如,您可以將水平選單 Widget 置於頁首區段。

    將「選單」Widget 放在頁首中的棕色長條 (功能區) 背景影像上方。
    將「選單」Widget 放在頁首中的棕色長條 (功能區) 背景影像上方。

    請注意,此時選單即自動顯示您已建立的頁面名稱,且順序同網站地圖中顯示的順序。選單標籤會自動與頁面連結,且均屬動態。也就是說,如果您稍後決定重新命名或移動頁面,選單也會自動更新。連結會一如預期繼續運作。

  4. 按一下「控制」面板中的檢色器並設定選單顏色。接著使用「文字大小」欄位設定選單中的文字大小。

    選擇文字大小和顏色
    設定字體顏色與點大小,來控制「水平選單」Widget 中的文字按鈕。

配置與自訂選單 Widget

現在您已新增選單 Widget 至您的版面,您可以依照自己的需求自訂此 Widget。您可以使用「選項」面板配置選單。「選項」面板是一個環境面板,讓您套用變更並更新該 Widget 專屬的設定。使用此面板控制 Widget 的運作以及 Widget 內容的顯示方式。

  1. 選取選單 Widget,並按一下 Widget 右上方的藍色箭頭。系統會顯示「選項」面板。

    從「選項」面板配置選單 Widget
    從「選項」面板配置選單 Widget
  2. 使用「選項」面板配置選單 Widget。您可以設定下列選項:

    • 選單樣式」:指定包含在網站導覽中的頁面。選取「頂端頁面」,僅包含第一層或是父頁面。選取「所有頁面」,將子頁面也都納入導覽當中。子頁面會以子選單樣式呈現。選取「手動」,手動選擇想要在選單 Widget 中顯示的頁面。
    • 方向」:指定您想要新增水平或垂直選單。
    • 一併編輯」:如果您想要一併更新所有選單項目,請選取此核取方塊。依預設,此核取方塊已選取。如果您不選取此核取方塊,您所選擇的設定只會套用至已選取的選單項目。
    • 項目大小」:指定選單項目應依照寬度或大小統一發佈。
    • 顯示左圖示」:依預設,此核准方塊並未選取。如果您想要在每個選單項目的左側新增圖示,請選取此選項。
    • 顯示標籤」:依預設,此核准方塊已選取。取消選取此核取方塊,系統就不會再顯示選單標籤。
    • 顯示右圖示」:如果您想停用右圖示,請選取「關閉」。如果您想要在選單項目的右側配置圖示,請選取「開啟」。當您想要新增箭頭表示該選單項目含有子選單,右圖示則為實用的選項。您也可以選擇「僅子選單」選項,僅為那些含有子選單的選單項目配置右圖示。
    • 組件定位」:指定每個索引標籤內部組件的起點。
    使用「選項」面板配置選單 Widget
    使用「選項」面板配置選單 Widget

編輯並設定選單標籤樣式

以下的特定流程為如何更新在每個選單項目中顯示頁面名稱的文字標籤。請參考採用簡單文字連結之極基本設計的水平選單 Widget。在本範例中,讓我們假設所有狀態都使用了相同的字型格式。

  1. 連按兩下並選取您要編輯的選單標籤。

  2. 若要編輯選單項目內的文字,請開啟「文字」面板 (「視窗 > 文字」)。在選取標籤的狀態下,請選取所需的選項,使用「文字」面板將文字格式化:

    • 字型」:選取您要套用至選單標籤的所需字型。
    • 字型樣式」:如有需要,可為選單標籤選取斜體或粗體。
    • 大小」:為選單標籤選取字型大小。
    • 顏色」:在「顏色」下拉式欄位中輸入您要套用的顏色的 16 進位碼。或是使用滴管選擇您要的顏色。
    在選單 Widget 中編輯選單標籤
    在選單 Widget 中編輯選單標籤
  3. 使用「文字」面板配置選單標籤的邊界值。如果您已經有要套用至選單標籤的超連結樣式,請在「abc」旁邊的下拉式欄位中選取樣式。

    若要套用段落樣式,請從「文字」面板中的「段落樣式」下拉式欄位選取樣式。

  4. 若要將「填色」和「線條」套用至選單標籤,請連按兩下並選取選單標籤。在頁面頂端的「工具列」選取填色顏色和線條顏色。

    您也可以編輯「線條寬度」並從「工具列」為選單標籤設定圓角半徑。

    套用「填色」和「線條」設定至選單標籤
    套用「填色」和「線條」設定至選單標籤

為選單項目建立滑鼠指向效果狀態

  1. 使用「選取」工具選取您要建立滑鼠指向效果狀態的選單標籤。開啟「狀態」面板。請注意,按鈕的預設狀態已定義。按一下「狀態」面板中的「滑鼠指向效果」縮圖來編輯該狀態。

  2. 在仍選取選單標籤的狀態下,使用「填色」檢色器並按一下含有紅色對角線的白色色票來選擇無填色 (透明)。

  3. 按一下「文字」工具並使用「控制」面板中的檢色器來為「滑鼠指向效果」狀態選擇灰白色。

  4. 在「狀態」面板中,選取「滑鼠按下」狀態。在仍選取「文字」工具的狀態下,在「控制」面板的檢色器中選取色票,將「滑鼠按下」文字設定為較深的顏色。

  5. 在「狀態」面板中,選取「作用中」狀態。按一下「控制」面板中的「填色」連結,來開啟「填色」選單。

  6. 在「填色」選單中按一下檢色器,並將填色顏色設定為「」。按一下「影像」區段旁的檔案夾圖示。在出現的「讀入」對話方塊中,瀏覽選取名為 top-nav-over.png 的背景影像檔案。按一下「選取」選擇該檔案。「讀入」對話方塊會自動關閉。

  7. 同樣在「填色」選單中,確認已將「符合」選項設為「原始大小」。然後,在「位置」區段按一下 9 個點的中心。這會使背景影像填色以原始大小置中顯示,且不會有填色顏色。按一下其他任何位置,關閉「填色」選單。

    定義按鈕狀態
    定義選單項目的作用中狀態。

    由於已在水平選單 Widget 中啟用預設的「一併編輯」選項,您對選單標籤執行的所有變更都已自動套用至導覽列中的所有按鈕。

  8. 選擇「檔案 > 儲存」儲存您的工作。按一下「A-主版」索引標籤中的 X,關閉「設計」視圖中的頁面,並返回「規劃」視圖。請注意,所有頁面縮圖都會更新為包含新增至主版頁面的內容。

    註解:

    頁首與頁尾區域參考線只能在您網站的主版頁面中編輯。當您想要編輯頁面的頁首或頁尾大小時,請連按兩下主版頁面,在「設計」視圖中開啟該頁面,並在該處重新放置參考線。

建立行動選單

Adobe Muse 也可讓您建立三合一選單或行動選單。在您建立此類選單時,下拉式子選單會在您的游標移至主選單上方時顯示。若要建立此種樣式的選單,請參閱使用排版 Widget 建立子選單

從選單排除頁面

您每一次在規劃視圖中新增網站的頂層頁面時,Adobe Muse 都會自動將該頁面新增至選單。不過,您可能有時候會想要在讓訪客存取頁面之前進行測試,或是隱藏特定頁面。在這樣的情況下,Adobe Muse 可讓您將特定頁面排除在導覽之外,確保這些頁面不會列入選單 Widget 的選單項目中。

執行以下流程,從選單 Widget 排除頁面:

  1. 假設您已經建立網站的網站地圖,請前往 Adobe Muse 中的「規劃」視圖。在此程序中,我們假設您具有包含首頁、作品集、我的故事、聯絡資訊和產品等頁面的網站地圖。

    在規劃視圖中檢閱網站地圖
    在規劃視圖中檢閱網站地圖

    如果您前往主版頁面並拖移選單 Widget,您會看到所有頁面都包含在選單當中。

  2. 若要排除特定頁面,請於「規劃」視圖中,在您要排除的頁面上按一下滑鼠右鍵。按一下「選單選項 > 從選單排除頁面」。

    例如,若您想要排除產品頁面,請在「產品」上按一下滑鼠右鍵。然後選取「選單選項 > 從選單排除頁面」。

    從選單 Widget 排除特定頁面
    從選單 Widget 排除特定頁面

    現在,當您回到主版頁面檢閱選單時,您可以看到產品頁面已經從選單 Widget 中移除。

    註解:

    若要刪除整個選單,請前往您已新增該選單 Widget 的頁面。選取 Widget 並按下「刪除」。

    若是您不想讓選單項目出現連結,請在規劃視圖中的特定頁面上按一下滑鼠右鍵。選取「選單選項 > 包含頁面但不含超連結」。

    在建立網站時,此選項適合各種用途。例如,若您有滑鼠指向效果產品頁面,且只讓網站訪客點選產品類別而非主要產品標籤,您就可以使用此選項。

使用「選單」Widget

使用「選單」Widget
在本段由 Brian Wood 講解的視訊中,您將學習如何將「選單」Widget 插入至您的頁面。
Adobe Press - Peachpit

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

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