在 Adobe Muse 中使用排版 Widget

搜尋

上次更新時間 | 亦適用於 Adobe Muse

瞭解如何在 Adobe Muse 中新增排版 Widget。設定排版 Widget 以建立互動式網站。

Adobe Muse 中的排版 Widget 可讓您將複雜的互動功能新增至網站。無論是攝影網站或餐廳網站，排版 Widget 對於要顯示各種內容的任何網站而言簡直就是不可或缺的工具。您無需撰寫任何程式碼，即可使用這些 Widget 來建立獨有的導覽和瀏覽體。

Adobe Muse 提供數種「排版」Widget 類型，讓您新增和設計各式各樣的網站內容。例如，若您是要建立攝影網站的使用者，您可以選擇「影像預視燈箱顯示」Widget 來突顯網站的相片收藏館。此 Widget 會暫時使頁面其餘部分變暗，讓訪客注意力集中在作用中的顯示區域。

您也可以將 Widget 嵌套在排版 Widget 中，創造出有趣的網頁設計。例如，若您正在設計目錄，則可使用「空白排版」Widget 來建立漢堡菜單，並且將「幻燈片展示」Widget 嵌套於「空白排版」Widget 的「目標」區域。這類設計可為網站訪客提供獨特的使用者體驗。

請繼續閱讀，以瞭解 Adobe Muse 中可使用的排版 Widget 類型。

排版 Widget 類型

排版 Widget 包含兩個容器：觸發與目標。觸發區域為網站訪客點擊的區域，而目標區域則為顯示的對應區域。您可以連結觸發與目標區域，為網站增添複雜性與互動性。

Adobe Muse 提供下列類型的排版 Widget。您可以根據設計需求使用其中一種 Widget，或經由嵌套方式使用 Widget 組合。

含有小型縮圖的 Widget。依預設，此 Widget 並未填入任何項目。您可將其手動連結至目標容器。

此 Widget 的運作方式類似折疊式 Widget。您可為此 Widget 在容器區域新增文字和影像。

當您按一下觸發時，其內部目標區域中的內容會變為作用中的 Widget。當顯示目標時，頁面的其他區域會變暗。

此 Widget 含有數個連至目標簡報區域的小型縮圖。依預設，幻燈片在此 Widget 中會水平滑動。

此 Widget 內含工具提示文字。當使用者將游標暫留於觸發區域時，工具提示會立即顯示。

新增並設定排版 Widget

如要在 Adobe Muse 中新增和使用排版 Widget，請選取您要新增的排版 Widget，然後將其拖曳到「設計」視圖。由於這些 Widget 預設能自適應調整，因此您會看到Ｗidget 在不同的中斷點間流動。如果您想要變更排版 Widget 的位置或內容，可以針對特定中斷點，將個別 Widget 元素修改、調整大小及固定位置。

依照此程序操作，即可在版面中新增排版 Widget。

開啟 Adobe Muse。從歡迎畫面，按一下「新增」以建立新網站，或是開啟您要新增排版 Widget 的現有 Adobe Muse 網站。

從規劃視圖，連按兩下您要新增 Widget 的頁面，以開啟該頁面。

開啟「Widget 資料庫」(「視窗 > Widget 資料庫」)，然後按一下「排版」以展開選項。根據您的設計需求選擇其中一個排版 Widget。

例如，從 Widget 資料庫中選擇影像預視燈箱顯示。

註解：

若要移除 Widget 裡填入的所有預設內容，請對 Widget 按一下滑鼠右鍵，然後選取「清除 Widget 內容」。

從 Adobe Muse「Widget 資料庫」拖曳排版 Widget。 — 從「Widget 資料庫」拖曳排版 Widget。

「影像預視燈箱顯示」Widget 的預設版本擁有三個較小的灰色觸發方塊，其下則是較大的淺灰色目標容器。

當訪客按一下觸發容器後，「影像預視燈箱顯示」Widget 的目標容器隨即出現。您可以嵌入影像、文字、影片 (包括 YouTube 影片) 作為目標。

選取排版 Widget 中的容器或觸發。若要選取整個 Widget，請選取 Widget。應用程式左上角的選取指示器會顯示「排版」一詞。

若要選取觸發，連按兩下此 Widget 中的小方塊加以選取。「觸發」一詞會顯示於選取指示器內。小方塊為此 Widget 的觸發。其為回應使用者互動的按鈕。

查看 Adobe Muse 頁面左上角的選取指示器 — 查看頁面左上角的選取指示器

當左上角的選取指示器看到「頁面」一詞時，您就知道目前沒有選取任何元素。

選擇「檔案 > 置入」，開啟「讀入」對話方塊。瀏覽以選取您要放在此 Widget 中的檔案。按一下「開啟」選擇該檔案，然後關閉「讀入」對話方塊。

在頁面任一處按一下，將影像以完整大小置入。

在仍然選取影像的狀況下，以滑鼠右鍵按一下並從環境選單中選擇「剪下」。

您也可以使用鍵盤快速鍵剪下影像，將其從頁面移除並拷貝至剪貼簿。

在觸發按鈕內按一下滑鼠右鍵，然後選擇「貼上」。您也可以使用鍵盤快速鍵在觸發中貼上影像。請注意，觸發容器會自動放大為影像的尺寸。

在容器中貼上內容有點困難。有時您以為內容已經貼進去了，實際上卻貼在頁面上。

若需要確認影像確實位於觸發容器內，請按一次 Escape，查看選取指示器。若顯示「觸發」一詞，則表示影像位於觸發內。若選取指示器顯示「頁面」一詞，則您必須再將影像剪下，重新貼入觸發容器。

您也可以開啟「圖層」面板 (「視窗 > 圖層」) 以確認要貼上影像的位置。「圖層」面板會顯示頁面上的元素階層。

若要新增其他縮圖，請按一下觸發容器旁的加號 (+)。

在「設計」視圖置入 Widget 後，您便可繼續並設定 Widget。若要設定排版 Widget 的選項，請選取 Widget 並按一下 Widget 右上角的藍色箭頭。

使用「選項」選單設定排版 Widget — 使用「選項」面板設定排版 Widget

您可以從「選項」面板進行下列設定：

位置：指定目標區域位於頁面上的何處。若要讓目標重疊，請選取「堆疊」；若要將目標放在不同位置，請選取「散佈」。若要使頁面其餘部分變暗，請選取「影像預視燈箱」。
顯示目標：指定使用者按一下觸發時的目標行為設定。
隱藏目標：指定隱藏目標的設定。除非使用者按一下觸發，否則目標區域會維持隱藏。
轉變：指定當使用者按一下觸發或將游標指向觸發時，目標區域中的內容會如何變化。選擇「淡化」可使新目標淡入，「水平」會以水平滑動方式帶入目標，「垂直」則以垂直滑動方式帶入目標。
轉變速度：針對排版 Widget 指定轉變的速度。如果您希望立即轉變，請選取「無」。
自動播放：設定此選項後，即可在您的網站上建立幻燈片展示。如果您選取此選項，幻燈片不需要使用者互動就會自動播放。
隨機排列：如果您想要依隨機順序顯示目標，則可選取此選項。
將觸發置頂：選取此選項後，即可將觸發放置在目標容器之上。您也可以在「圖層」面板上看到相同的階層。
啟用撥動：選取此選項後，即可為觸控裝置啟用撥動動作移至下一個目標的功能。
最初全部隱藏：如果您想要在網站最初載入時隱藏所有目標選項，則可選取此選項。若要查看目標，使用者必須按一下相應的觸發。
自動預視燈箱：如果您想要在網站載入時自動顯示影像預視燈箱，則可選取此選項。
組件：選取「上一個」、「下一個」或「關閉按鈕」選項，即可為您的 Widget 新增額外的互動功能。使用者可以按一下網站上的「上一個」、「下一個」及「關閉」選項。
編輯：選取「編輯時顯示影像預視燈箱組件」，即可在您編輯Ｗidget 時於「設計」視圖中顯示目標區域。選取「在設計模式中全部顯示」，即可在「設計」視圖中同時檢視所有目標容器。

在 Adobe Muse 中進行排版 Widget 的設定 — 進行排版 Widget 的設定

註解：

您從「位置」下拉式清單中選擇「散佈」或「堆疊」當作選項後，「編輯時顯示影像預視燈箱組件」選項即會停用。

如果您選取「自動預視燈箱」選項，「最初全部隱藏」選項即會停用。

如要移除不需要的觸發，請連按兩下選取您要刪除的觸發。按下 Delete (Mac) 或 Backspace (Windows) 移除選取的觸發。

按一下觸發容器內的主體影像，以觸發影像預視燈箱效果。

按下 Escape 關閉影像預視燈箱視窗，然後返回「設計」視圖以繼續編輯 Adobe Muse 頁面。

在您依自己的設計設定並放置了排版 Widget 後，請在「預視」視圖測試 Widget。

如果您是在自適應版面中使用排版 Widget，請參閱下節。請確認在所有中斷點測試及預視您的 Widget。

在自適應版面中使用排版 Widget

排版 Widget 依預設為流動或自適應。若要在自適應版面中新增及使用排版 Widget，請執行下列任一步驟：

若您是使用最新版 Adobe Muse 建立新的自適應網站，請從「Widget 資料庫」面板將排版 Widget 拖移到「設計」視圖中。
若您使用的是 Adobe Muse 2017.0.3 或較舊版本，則排版 Widget 不是自適應。在這種情況下，請使用最新版 Adobe Muse 開啟您的 .muse 檔案。選取 Widget 內部的元素，然後選擇「調整大小」選項當作「自適應寬度」或「自適應寬度和高度」(視何者適用而定)。

註解：

您無法選取整個 Widget 以及變更「調整大小」屬性。選取 Widget 中的個別元素或多個元素，使其成為自適應。

遵循新增並設定排版 Widget 中提及的步驟設定您的 Widget。設定 Widget 以及為其設定樣式之後，您即可在瀏覽器中預視 Widget 或使用定位桿及調整大小。您將發現 Widget 會依據螢幕尺寸自動調整大小。

註解：

當您在自適應版面中新增排版 Widget 時，建議您先在最大的中斷點配置您的設計。完成在最大的中斷點放置及設定 Widget 之後，即可在所需的任意位置新增其他中斷點。

若要深入瞭解針對自適應版面設計您的網站，請參閱在自適應設計中配置物件。

將排版 Widget 與其他 Widget 結合

排版 Widget 最獨特的其中一項功能即是支援在排版 Widget 中嵌套其他 Widget。也就是說，您可以在排版 Widget 內部新增表單、幻燈片展示或選單項目等 Widget。

例如，您可以在烹飪網站上於專題新聞 Widget 的目標容器內部新增幻燈片展示 Widget。當網站訪客按一下選單標籤 (專題新聞 Widget) 時，內含收藏館的目標區域即會以幻燈片展示顯示。

您也可以將聯絡表單新增為目標，如此當使用者按一下聯絡標籤時，便會立即來到聯絡表單。

您可以藉由嵌套方式實現更多組合及設計的可能性。但是當您在自適應版面中設計嵌套 Widget 時，請注意下列幾個層面：

「固定」不適用於非自適應容器內部嵌套的自適應元素。
當您將物件置入非自適應容器時，這些物件將不會是自適應設計。

註解：

當您在排版 Widget 內部嵌套 Widget 時，建議您不要使用超過三層的嵌套。

下節會告訴您如何使用排版 Widget 來建立子選單。請閱讀以瞭解針對網站導覽建立隱藏式子選單的這個範例案例。

使用排版 Widget 建立子選單

您可以設定排版 Widget 來建立有子選單的網站導覽。您可以建立選單項目，此選單項目將在訪客將游標指向作用中區域時顯示子選單，並在游標移開觸發子選單開啟之作用中區域時，隱藏同一個子選單。您也可以設定 Widget，在訪客未按下子選單中的任何連結而直接將游標移開子選單的情況下，隱藏子選單。當您為含有許多不同子區段的網站建置導覽列時，建立這些類型互動式子選單的功能相當便利。

「顯示目標」和「隱藏目標」選單在您想重複網站中的常見選單行為時非常實用。訪客可選擇按一下連結，或者將游標指向視窗區域以外的位置，以隱藏視窗。當此選項啟用時，不需要按一下「關閉」按鈕也能隱藏子選單。

此功能可在使用下列「排版」Widget 時使用：

空白
專題新聞
工具提示

「選項」面板提供兩種設定來顯示目標容器：

按下滑鼠：當使用者按一下時顯示目標
滑鼠指向效果：當使用者將游標指向觸發時顯示目標

您也可以選擇在排版 Widget 中隱藏目標容器。下列是隱藏目標容器的四個選項：

無
按下滑鼠
滑鼠移開時
滑鼠移開觸發和目標時

在下節中，您將瞭解如何使用滑鼠指向效果行為來顯示目標容器，以及在滑鼠移開觸發容器和目標容器時隱藏目標容器。

請依照下列步驟來瞭解如何啟用「排版」Widget 的「滑鼠移開時隱藏」設定，以建立依訪客互動隱藏和顯示子選單連結的選單列：

在「設計」視圖中，從「Widget 資料庫」拖曳「影像預視燈箱排版」Widget，以將其新增到頁面。

選取觸發容器。使用「選取」工具將 3 個觸發容器全部移到頂端 (在較大的目標容器之上)，並使他們保持相同間距。

使用「選取工具」拖移每個觸發容器的側邊控制點。展開寬度以延著頂端建立 3 個「索引標籤」，此與「標籤面板」Widget 的操作類似。

分別新增所需內容到 3 個觸發區域。觸發內容可以包括文字、連結、影像、矩形、嵌入式 HTML 等。例如，您可以使用「文字」工具新增文字到每個觸發：連結 1、連結 2 和連結 3。

現在，在第 2 個目標內容區域內建立連結。

按一下觸發容器，然後選取較大的相應目標容器。新增連結到第 2 個目標內容區域。然後按一下「控制」面板右側「超連結」標籤旁的下拉式清單。在網址列新增想要的連結。

選擇「檔案 > 在瀏覽器中預視網頁」來測試「排版」Widget 的顯示結果。
按一下標記為「連結 1」、「連結 2」和「連結 3」的觸發容器，以跟 Widget 進行互動。

請注意，目標容器預設為永遠顯示且永不隱藏。您可以按一下 3 個觸發按鈕來顯示對應的目標容器，但 3 個目標容器中一定有一個會顯示。

如要設定「滑鼠移開時隱藏」，請選取排版 Widget。按一下藍色箭頭以存取「選項」面板，並編輯 Widget 的設定選項。

請確認已啟用下列設定：

位置：堆疊 (預設)
顯示目標：滑鼠指向效果
隱藏目標：滑鼠移開觸發和目標時
切換效果：淡化 (預設)
轉變速度：0.5 秒 (預設)
自動播放：停用 (預設)
隨機排列：停用 (預設)
最初全部隱藏：啟用

控制隱藏/顯示功能的關鍵設定為「顯示目標」選單、「隱藏目標」選單，以及啟用「最初全部隱藏」選項。

再次選擇「檔案 > 在瀏覽器中預視網頁」，以測試 Widget 的最新變更。

現在，第一次載入排版 Widget 時，所有目標區域皆預設為隱藏。

再次與 Widget 互動。請注意，當您將滑鼠指向觸發區域時，會顯示對應的目標區域。如果游標留在 Widget 區域內，您可以跟目標區域內的內容互動 (例如按一下中間目標容器內的網站連結)。

但是，如果您將游標從觸發或目標區域移開，目標區域就會隱藏，直到您再次將游標指向另一個觸發區域為止。

此功能可讓您設定更加複雜的互動網站導覽，以回應訪客的滑鼠動作。