在「設計」視圖中開啟主版頁面進行編輯的情況下,開啟「Widget 程式庫」。如果其尚未開啟,請選擇「視窗 > Widget 程式庫」。
瞭解如何為您的 Adobe Muse 網站新增並配置選單。瞭解如何建立行動選單、滑鼠指向效果狀態與編輯選單標籤。
在建立網站時,導覽應為最重要的區塊之一。在設計網站時,選擇網站導覽的樣式和位置非常重要。網站的用戶經驗會因為選單或網站導覽而獲得改善或毀於一旦。
Adobe Muse 讓您得以使用選單 Widget 快速建立網站導覽。儘管您可以手動建立頁面連結,選單 Widget 提供了方便且具有彈性的方法,可新增
導覽至您的網站。如同其他 Widget,您只要將選單 Widget 拖移至您的頁面,即可新增選單。如此一來,您會看到與頁面名稱相同的選單標籤自動填入網站。當您變更規劃視圖中的頁面名稱時,選單標籤會自動更新。
您可以新增垂直及水平選單。此外,Adobe Muse 讓您得以建立三合一選單以及選單項目的滑鼠指向效果狀態。繼續閱讀,瞭解如何使用 Adobe Muse 執行這些作業。
在「設計」視圖中開啟主版頁面進行編輯的情況下,開啟「Widget 程式庫」。如果其尚未開啟,請選擇「視窗 > Widget 程式庫」。
在「Widget 程式庫」面板中,按一下「選單」展開「選單」Widget 的清單。依照您的網站設計以及您要放置選單的位置,選取下列任一選項:
使用「選取」工具拖移 Widget 到您想要在版面中放置的地方。例如,您可以將水平選單 Widget 置於頁首區段。
請注意,此時選單即自動顯示您已建立的頁面名稱,且順序同網站地圖中顯示的順序。選單標籤會自動與頁面連結,且均屬動態。也就是說,如果您稍後決定重新命名或移動頁面,選單也會自動更新。連結會一如預期繼續運作。
按一下「控制」面板中的檢色器並設定選單顏色。接著使用「文字大小」欄位設定選單中的文字大小。
現在您已新增選單 Widget 至您的版面,您可以依照自己的需求自訂此 Widget。您可以使用「選項」面板配置選單。「選項」面板是一個環境面板,讓您套用變更並更新該 Widget 專屬的設定。使用此面板控制 Widget 的運作以及 Widget 內容的顯示方式。
選取選單 Widget,並按一下 Widget 右上方的藍色箭頭。系統會顯示「選項」面板。
使用「選項」面板配置選單 Widget。您可以設定下列選項:
以下的特定流程為如何更新在每個選單項目中顯示頁面名稱的文字標籤。請參考採用簡單文字連結之極基本設計的水平選單 Widget。在本範例中,讓我們假設所有狀態都使用了相同的字型格式。
連按兩下並選取您要編輯的選單標籤。
若要編輯選單項目內的文字,請開啟「文字」面板 (「視窗 > 文字」)。在選取標籤的狀態下,請選取所需的選項,使用「文字」面板將文字格式化:
使用「文字」面板配置選單標籤的邊界值。如果您已經有要套用至選單標籤的超連結樣式,請在「abc」旁邊的下拉式欄位中選取樣式。
若要套用段落樣式,請從「文字」面板中的「段落樣式」下拉式欄位選取樣式。
若要將「填色」和「線條」套用至選單標籤,請連按兩下並選取選單標籤。在頁面頂端的「工具列」選取填色顏色和線條顏色。
您也可以編輯「線條寬度」並從「工具列」為選單標籤設定圓角半徑。
使用「選取」工具選取您要建立滑鼠指向效果狀態的選單標籤。開啟「狀態」面板。請注意,按鈕的預設狀態已定義。按一下「狀態」面板中的「滑鼠指向效果」縮圖來編輯該狀態。
在仍選取選單標籤的狀態下,使用「填色」檢色器並按一下含有紅色對角線的白色色票來選擇無填色 (透明)。
按一下「文字」工具並使用「控制」面板中的檢色器來為「滑鼠指向效果」狀態選擇灰白色。
在「狀態」面板中,選取「滑鼠按下」狀態。在仍選取「文字」工具的狀態下,在「控制」面板的檢色器中選取色票,將「滑鼠按下」文字設定為較深的顏色。
在「狀態」面板中,選取「作用中」狀態。按一下「控制」面板中的「填色」連結,來開啟「填色」選單。
在「填色」選單中按一下檢色器,並將填色顏色設定為「無」。按一下「影像」區段旁的檔案夾圖示。在出現的「讀入」對話方塊中,瀏覽選取名為 top-nav-over.png 的背景影像檔案。按一下「選取」選擇該檔案。「讀入」對話方塊會自動關閉。
同樣在「填色」選單中,確認已將「符合」選項設為「原始大小」。然後,在「位置」區段按一下 9 個點的中心。這會使背景影像填色以原始大小置中顯示,且不會有填色顏色。按一下其他任何位置,關閉「填色」選單。
由於已在水平選單 Widget 中啟用預設的「一併編輯」選項,您對選單標籤執行的所有變更都已自動套用至導覽列中的所有按鈕。
選擇「檔案 > 儲存」儲存您的工作。按一下「A-主版」索引標籤中的 X,關閉「設計」視圖中的頁面,並返回「規劃」視圖。請注意,所有頁面縮圖都會更新為包含新增至主版頁面的內容。
頁首與頁尾區域參考線只能在您網站的主版頁面中編輯。當您想要編輯頁面的頁首或頁尾大小時,請連按兩下主版頁面,在「設計」視圖中開啟該頁面,並在該處重新放置參考線。
Adobe Muse 也可讓您建立三合一選單或行動選單。在您建立此類選單時,下拉式子選單會在您的游標移至主選單上方時顯示。若要建立此種樣式的選單,請參閱使用排版 Widget 建立子選單。
您每一次在規劃視圖中新增網站的頂層頁面時,Adobe Muse 都會自動將該頁面新增至選單。不過,您可能有時候會想要在讓訪客存取頁面之前進行測試,或是隱藏特定頁面。在這樣的情況下,Adobe Muse 可讓您將特定頁面排除在導覽之外,確保這些頁面不會列入選單 Widget 的選單項目中。
執行以下流程,從選單 Widget 排除頁面:
假設您已經建立網站的網站地圖,請前往 Adobe Muse 中的「規劃」視圖。在此程序中,我們假設您具有包含首頁、作品集、我的故事、聯絡資訊和產品等頁面的網站地圖。
如果您前往主版頁面並拖移選單 Widget,您會看到所有頁面都包含在選單當中。
若要排除特定頁面,請於「規劃」視圖中,在您要排除的頁面上按一下滑鼠右鍵。按一下「選單選項 > 從選單排除頁面」。
例如,若您想要排除產品頁面,請在「產品」上按一下滑鼠右鍵。然後選取「選單選項 > 從選單排除頁面」。
現在,當您回到主版頁面檢閱選單時,您可以看到產品頁面已經從選單 Widget 中移除。
若要刪除整個選單,請前往您已新增該選單 Widget 的頁面。選取 Widget 並按下「刪除」。
若是您不想讓選單項目出現連結,請在規劃視圖中的特定頁面上按一下滑鼠右鍵。選取「選單選項 > 包含頁面但不含超連結」。
在建立網站時,此選項適合各種用途。例如,若您有滑鼠指向效果產品頁面,且只讓網站訪客點選產品類別而非主要產品標籤,您就可以使用此選項。
登入您的帳戶