在 Adobe Muse 中使用 Widget

瞭解如何使用 Widget 新增表單、選單、幻燈片展示及社交媒體按鈕等至您的網頁。

註解:

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

您可以在 Adobe Muse 中使用 Widget 來新增互動式網站功能與動態產生的內容。Widget 是預先建構的可設定物件,提供常用的網頁功能,例如選單、表單、幻燈片展示等。Adobe Muse 提供一系列 Widget,讓複雜的網頁設計變得簡單。

您可依據自己的網站設計,在 Adobe Muse 內設定 Widget 的樣式,以便將 Widget 完美地與網頁中的其餘元素融合。 「Widget 程式庫」包含所有預先建立的網站功能 (Widget),您可以將其拖移到頁面上、設定以控制其行為,以及設定樣式以修改其外觀。

Widget 類型

Adobe Muse 提供下列幾種 Widget:

  • 排版 Widget:此類 Widget 可讓您與網頁上的某區域進行互動,以變更在其他區域內顯示的內容。變更的項目會套用淡化或滑動動畫效果。
  • 表單 Widget:新增表單,以便網站訪客與您聯絡。視您選擇的「表單」Widget 而定,可用的表單欄位會有所不同。
  • 選單 Widget:建立包含每個選單項目狀態的動態填入式或手動填入式選單列。在每個頁面上,適當的選單連結會自動變成「作用中」狀態,以顯示其為目前的頁面。
  • 面板 Widget:一次只顯示一個內容面板,其中具有直覺化的導覽連結,可用於切換可見的面板。您可選擇以滑動動畫顯示的折疊式結構,或是一般標籤式外觀。
  • 幻燈片展示 Widget:此類 Widget 能讓您以順暢的動畫,輕鬆展示收藏館中的影像。此類 Widget 最適合用於以影像組成的基本幻燈片展示;針對較複雜的應用,選用「排版」Widget 可獲得較佳效果。
  • 社交 Widget:社交 Widget 可讓您輕鬆設定自訂 HTML,並將其嵌入 Adobe Muse 頁面。多數「網頁」Widget 提供的功能也可透過嵌入第三方網站 HTML 取得。與其在應用程式外產生程式碼,再將其作為嵌入式 HTML 貼入 Adobe Muse,您可以節省時間,從 Adobe Muse 內新增和設定網頁內容。

新增 Widget 至 Adobe Muse 網頁

您可以從「Widget 資料庫」選取並新增 Widget 至您的 Adobe Muse 網頁。若要新增 Widget,請執行下列操作:

  1. 在 Adobe Muse 中,選取「視窗 > Widget 資料庫」。

    「Widget 資料庫」面板即會顯示。

  2. 在「Widget 資料庫」面板中,選取該 Widget 並將其拖曳至 Adobe Muse 網頁。

  3. 若要進一步設定 Widget,請按一下  按鈕以開啟「選項」面板。

    如需詳細資訊,請參閱設定與自訂 Widget

設定與自訂 Widget

Adobe Muse 可讓您在將 Widget 置入網頁後,透過「選項」面板加以設定。「選項」面板是一個內容面板,讓您套用變更並更新 Widget 專屬的設定。「選項」面板包含有助於決定內容外觀的設定。

「填色」與「線條」選項可讓您大幅加強 Widget 的外觀。如果 Widget 內含文字,您可以使用「文字」面板 (「視窗 > 文字」或控制面板上的文字選項),依據您的設計需求對文字進行修改和設定樣式。

若要設定 Widget,請執行下列操作:

  1. 在 Adobe Muse 中,將任一 Widget 拖移曳網頁。

    註解:

    使用「清除 Widget 內容」(以滑鼠右鍵按一下 Widget,然後從環境選單選擇「清除 Widget 內容」) 選項,移除在 Widget 中填入的所有預設內容。

  2. 在選取 Widget 的情況下,按一下 按鈕以顯示「選項」面板。

  3. 在「選項」面板上,視需要修改或更新設定。

  4. 按一下頁面的其他任何位置,以關閉「選項」面板。

    圖中顯示的是「水平選單」Widget 的「選項」面板。

    「水平選單」Widget 的「選項」面板。

選取 Widget 內的嵌套元素

當您將 Widget 從「Widget 資料庫」拖移到頁面上時,您實際上是在置入嵌套的容器集合。這些容器可根據其階層加以選取並編輯。

使用 Widget 時,瞭解選取 Widget 及其容器的方法相當重要。Adobe Muse 會使用選取指示器來顯示您目前的選取項目。選取指示器位於 Adobe Muse 的左上角,會連同一個下拉式選單顯示您目前的選取項目,讓您可以依狀態預視物件。

在以下範例中,選取指示器顯示了「頁面」(未選取網頁上的任何物件)、「選單」Widget (選取了「選單」Widget),以及「選單項目」(「選單」Widget 中的容器) 等選取項目。

未選取任何頁面元素。

選取了「選單」Widget。

選取了容器,在本例中為「選單」Widget 中的「選單項目」。

當您按一下整個 Widget 時,選取指示器會顯示「Widget」這個字。如果您再按一下,則可以選取 Widget 內的容器,且選取指示器會顯示「容器」一詞。您可以繼續重複按一下,來選取嵌套在容器內的元素 (例如文字框)。

在選取文字框的情況下,選取指示器會顯示「文字框」一詞。當您按一下 Widget 來在嵌套元素內「深入瞭解」時,最好能注意選取指示器中的字詞以瞭解選取的嵌套元素為何。您會選取不同的容器 (例如選單導覽的個別按鈕) 來更新按鈕的狀態,這可讓您選擇性地控制按鈕在第一次載入頁面時、訪客將游標置於按鈕之上時,以及訪客按一下按鈕時的外觀。此操作也可讓您定義「作用中」狀態,進而以視覺方式指出與訪客目前正在檢視之頁面對應的按鈕,來引導訪客。

若要在 Widget 中的嵌套容器中按一下,您可以在要編輯的項目上多次執行按一下操作。請注意選取指示器以及「狀態」面板中的選項,以瞭解是否已選取想要變更之嵌套元素。

在您完成更新 Widget 之後,可以按一下 (頁面上的其他位置) 來取消選取 Widget,或重複按下 Esc 鍵來跳到 Widget 階層的上一層。

使用「選項」面板設定 Widget

將 Widget 從「Widget 資料庫」拖移到頁面上之後,若選取 Widget,會看到一個藍色箭頭圖示出現在 Widget 的右上角。按一下這個藍色箭頭圖示可開啟「選項」選單。

每個 Widget 都有不同的可用選項,因此您可以在「選項」選單介面中設定的選項會有所不同。這些設定可以控制 Widget 的行為 (例如選擇幻燈片展示是否會自動播放,或者訪客是否必須按一下縮圖才能看到較大的影像) 與 Widget 的顯示方式 (例如指定顯示每個新影像時要執行的轉變動畫類型)。

在您設計網站時,將有機會進行這些設定,並與客戶一起合作找出適合特定專案的最佳選擇。請記住,即使已經線上發佈網站,您仍然可以隨時回到 .muse 檔案,選取 Widget,按一下它的藍色箭頭圖示來存取「選項」選單,並進行新設定來變更 Widget。再次發佈網站之後,您所做的變更會在實際上線網站上反映出來。

您可以使用「選單」Widget 讓 Widget 動態顯示網站的頁面名稱,並自動建立這些頁面的連結。如此可讓您根據「規劃」視圖中的網站地圖輕鬆將網站導覽新增至頁面,而且根本不用擔心會建立損壞的連結。您也可以使用滑鼠右鍵按一下「規劃」視圖中的頁面縮圖並取消選取「將頁面包含在導覽中」選項,來停用特定頁面,使其不會動態顯示在「選單」Widget 中。此選項預設為啟用 (啟用時,會顯示核取標記)。

或者,如果您想要自行命名按鈕並新增特定頁面的連結,而不是讓 Adobe Muse 來建立選單項目,您也可以選擇手動設定選單 Widget。在「選項」選單內名為「選單類型」的區段中,您可以選擇「手動」選項。

如果您想要手動建立自訂選單,而不要動態產生頁面名稱與連結,請在「選單類型」設定中選擇「手動」選項。

Adobe 標誌

登入您的帳戶