Danielle Beaumont
閱讀本文以瞭解如何在 Adobe Muse 中新增、設定及測試「全螢幕幻燈片展示」與「縮圖幻燈片展示」Widget。
Adobe Muse 中的幻燈片展示 Widget 是互動式 Widget,專門用於處理影像。它與「標籤面板」Widget 類似,使用者按一下縮圖容器,對應的主體影像版本即會顯示在頁面上另一個較大的容器中。
Adobe Muse 支援下列類型的幻燈片展示 Widget:
在下文中,我們要建置一個相片收藏館,沿頂端顯示數個縮圖影像,下方則顯示單一的較大影像。使用「選項」面板即可控制相片收藏館的運作與顯示方式。套用「控制」面板中的設定則可設定幻燈片展示的外觀樣式。
幻燈片展示也可以直接加入頁面,但是在本範例中,您將在「標籤面板」Widget 的內容區域中,嵌套一個「縮圖幻燈片展示」Widget。若要直接新增幻燈片展示,請依照下列步驟進行:
開啟 Adobe Muse。在「歡迎」畫面上執行下列任一項作業:
開啟「Widget 資料庫」面板 (視窗 > Widget 資料庫)。並展開幻燈片展示選單。從清單中選取所需的 Widget。例如:從清單中選取縮圖幻燈片展示 Widget,並將 Widget 拖移至「設計」視圖。
請注意,左側有一個縮圖容器專供主體影像使用,影像下方還有註解容器。
若要移除 Widget 裡填入的預設內容,請對 Widget 按一下滑鼠右鍵,然後選取「清除 Widget 內容」。
若要移除縮圖,請選取預留位置內容 (內容區域內的影像框及文字框),並將其刪除。
您可以使用 Widget 相關聯的「選項」面板,進行幻燈片展示 Widget 設定。請繼續閱讀,瞭解如何啟用自動播放、轉變效果、觸控裝置專用的滑動功能等。
選取 Widget,按一下藍色箭頭圖示進入「選項」面板。在這個例子當中,您不需要「下一個」和「上一個」箭頭按鈕。所以,請取消核取「下一個」和「上一個」選項以將其停用。請注意,取消選取核取方塊後,按鈕會隨即消失。
取消核取「註解」及「計數器」選項,僅保留縮圖觸發按鈕及較大目標容器。瀏覽選項並更新,使其符合下列設定:
不同 Widget 提供不同選項,有些較為複雜。請花點時間檢閱「選單」選項,瞭解可用的設定。以下略作概覽:
新增影像:按一下檔案夾圖示,即可瀏覽及選取要顯示的影像。
新主體:定義較大的相片內容於目標容器中的顯示方式。
新縮圖:定義較小的縮圖相片內容於觸發容器中的顯示方式。
轉變效果:將目標容器中的內容以另一個目標容器取代時,所使用的動畫方式。此功能也已針對觸控螢幕啟用,因此若您為行動裝置建立網站,訪客即可撥動螢幕觸發轉變動畫,並看到下一個內容項目。
轉變速度:播放動畫使用的秒數。
自動播放:此設定啟用時,幻燈片展示將自動播放,而非採取互動式模式 (互動式模式需要訪客按下每個觸發按鈕才能依序檢視相應的目標)。設定每個影像轉變至下一個影像前所顯示的秒數。
隨機排列:啟用時,影像將以隨機順序顯示,而不依序循環顯示縮圖。
影像預視燈箱:啟用此選項後,當顯示目標容器中的內容時,幻燈片展示會以覆蓋層使頁面它處變暗。 關閉影像預視燈箱後,會再顯示完整頁面。
啟用撥動:啟用此選項且網站含有平板電腦或手機版面以在行動裝置顯示網頁內容時,Widget 的互動式組件將支援觸控螢幕手勢。
「組件」區段:
縮圖:啟用此選項時,將顯示縮圖觸發按鈕。
「編輯」區段:
請注意,「編輯時顯示影像預視燈箱組件」選項只在您選擇「影像預視燈箱幻燈片展示」Widget 時才能啟用。
檢閱可用設定後,按一下「選項」選單之外的任何頁面位置,將其關閉。
「影像預視燈箱」和「全螢幕」選項在「全螢幕幻燈片展示」時會停用。
您在全螢幕時無法就任何幻燈片展示 Widget 啟用「全螢幕」選項。
按一下幻燈片展示 Widget 加以選取。使用「選取」工具來拖移它的控制點,調整整個「縮圖幻燈片展示」Widget 的大小,直到大約寬 790 像素、高 490 像素。您可以查看「變形」面板或「控制」面板中的「變形」欄位來檢查尺寸。
在仍然選取「幻燈片展示」的情況下,再按一下縮圖容器,以選取內含 3 張縮圖的容器。使用側邊的變形控制點將其拉寬,再使用「選取」工具向上拖移縮圖,直到縮圖位於較大主體影像容器的上方,且與其中央垂直對齊。
拖移元素時,畫面會暫時顯示藍色智慧型參考線,指出縮圖容器是否已對齊主體影像容器的正中央。
請依此步驟,將圖像新增至相片收藏館,同時產生相應的縮圖與主體容器:
按一下藍色箭頭按鈕開啟「選項」選單。按一下「新增影像...」文字旁的檔案夾圖示,然後瀏覽至內有儲存檔案的檔案夾。
選取所需的影像檔。按一下「開啟」以關閉「讀入」對話方塊。
選取多個影像檔案時,同時也在「縮圖幻燈片展示」Widget 載入內容。此方法讓您可以選取多個影像檔案,並為主體影像容器中每一個較大的新影像檔案產生對應的縮圖容器按鈕。
新影像將會新增至現有的縮圖按鈕中。
首次新增幻燈片展示時,請對畫面上預設顯示的縮圖影像連按兩下加以選取。選取縮圖的同時按下 Delete 鍵 (Mac) 或 Backspace 鍵 (Windows),即可逐一移除縮圖,直到僅剩下新縮圖。
請小心勿刪除整組縮圖;若發生此情況,可選擇「編輯 > 還原」還原前一次的操作,然後務必先按一下個別縮圖加以選取 (「選取指示器」會顯示「縮圖」一詞) 後,才能按下 Backspace 或 Delete。
選取含有整組五張縮圖影像的容器。使用變形控制點調整其大小,使剩餘的縮圖置中於主體影像容器上方。
依預設,幻燈片展示為自適應或流動式。若要在您的 Adobe Muse 網站中使用自適應幻燈片展示 Widget,請執行下列任一動作:
如果要將幻燈片展示 Widget 新增至自適應網站,請透過所有中斷點查看 Widget 的位置與大小。您可以修改幻燈片展示 Widget 中個別元素的內容和大小。您也可以為不同中斷點之間的個別元素啟用自適應設定,諸如「上一個」按鈕、「下一個」按鈕、「註解」等。
重新放置幻燈片展示元素並移除預留位置縮圖影像之後,即可測試幻燈片展示,查看其會如何顯示。
首先,在「設計」視圖測試相片收藏館。按一下頂端的縮圖按鈕,會看到下方較大容器中顯示相應的主體影像。
按一下「預視」,查看收藏館在瀏覽器中會如何顯示。與幻燈片展示進行互動,看看按一下縮圖時,相應的較大影像會如何顯示。
選擇「檔案 > 在瀏覽器中預視網頁」,以您的預設瀏覽器查看「about」(簡介) 頁面的顯示結果。
調整瀏覽器大小,預視幻燈片展示 Widget 在大小不同的畫面中的顯示結果。依預設,幻燈片展示 Widget 會自適應調整。也就是說,它們會調整大小,以便順應畫面大小。
亦可使用「設計」視圖中的定位桿,來預視 Widget。如果您隨時想要對 Widget 加以修改或調整位置,請新增中斷點並重新對齊 Widget。
測試「標籤面板」Widget 的功能。按一下各標籤,查看在內容區域容器中顯示的相應內容。接著,測試「Gallery」(收藏館) 索引標籤中的幻燈片展示。按一下各個縮圖按鈕,確認會顯示相應的較大主體影像。
「幻燈片展示」Widget 是您可以新增至頁面的另一個網站功能。您可以將幻燈片展示設定為需要訪客按一下縮圖來查看較大版本的相片,或您可以建立在頁面載入時自動播放的幻燈片展示。若要透過展示一系列相片,將引人注目的內容新增至網站,那麼自動播放幻燈片展示是個絕佳方法。您可以透過設定轉變的類型來控制幻燈片展示的播放方式,以指定幻燈片的動畫展示方式。
在以下小節中,您要將自動播放的幻燈片展示新增至網站的首頁。
在「規劃」視圖中,按兩下「規劃」視圖中的「Home」(首頁) 縮圖來將其開啟,以在「設計」視圖中進行編輯。
請依照下列步驟來建立在一組影像之間循環播放的簡報:
在「Widget 資料庫」中,按一下「幻燈片展示」。
選取基本 Widget 並將其拖移到頁面上。
依照預設,「基本幻燈片展示」Widget 中含有一個深灰色矩形 (影像預留位置)、預留位置註解、影像號碼 (1 - 1) 與訪客可以按一下來在一組影像之間導覽的兩個箭頭按鈕 (下一個與上一個)。
按一下藍色箭頭來存取「選項」選單。確認並設定下列選項:
當頁面載入而沒有任何訪客互動時,此幻燈片展示會自動播放。如果您要建立的幻燈片展示是由訪客的滑鼠點選控制,請將「自動播放」設定為「無」,並在「選項」選單的「組件」區段中保持選取「下一個」與「上一個」的核取標記。
在「選項」選單以外之處按一下將其關閉。請注意,在進行這些變更之後,只有深灰色矩形仍然可見。您隨時可以透過變更「選項」選單中的設定來變更 Widget 的設定。
連按兩下「影像框」(深灰色矩形) 加以選取,然後拖移側邊控制點,將幻燈片展示展開為整個頁寬。
使用頂端與底部箭頭來延伸影像框的高度,以填滿「首頁」的完整尺寸。在底部伸展影像框,直到其剛好在鋸齒狀並排顯示的影像 (顯示在頁尾頂端) 上方停止為止。現在深灰色預留位置覆蓋住導覽列右側的棕色滴水影像也沒關係。
按一下藍色箭頭來再次存取「選項」選單。這次,按一下頂端的檔案夾圖示,就在「新增影像」文字旁邊。
在「讀入」對話方塊中,導覽至您的資源檔案夾,開啟資源。按一下「選取」來將影像新增至幻燈片展示。
按一下「預視」來觀看幻燈片展示的播放。播放設定為緩慢自動播放速度,但是如果您想要讓影像更快速地循環,則可以變更「選項」選單中的該設定。請注意,當最後一張相片顯示之後,幻燈片展示會返回開始播放影像集中的第一張影像。啟用自動播放時,幻燈片展示會不停地重複。
此時,幻燈片展示即已完成。但是,如果您想要修正導覽列右側的滴水,則還需要做一件事。
在「規劃」視圖中,按兩下「A-主版」縮圖來在「設計」視圖中將其開啟。
使用「選取」工具來選取導覽圖形右上部分的棕色滴水。
以滑鼠右鍵按一下滴水影像並在出現的環境選單中選擇「排列順序 > 移至最前」。
按一下「A-主版」索引標籤的 X 來將其關閉。開啟您新增之基本 Widget 的所在頁面。按一下「預視」並注意現在滴水影像顯示在自動播放幻燈片展示的上方。檢閱幻燈片展示後,返回「設計」視圖。
因為導覽列是在「A-主版」頁面上建立的,所以您對控制導覽 (與其他通用元素) 所進行的任何變更都需要在「設計」視圖中開啟「A-主版」頁面以對其進行編輯。雖然您可以在正在編輯的頁面上查看主版頁面的元素,但是無法編輯其他網站頁面上的頁首與頁尾內容。
您可以使用「全螢幕幻燈片展示」Widget,設定以全螢幕顯示的幻燈片展示。當訪客按一下「全螢幕幻燈片展示」時,會縮放內容以填滿電腦或裝置螢幕的整個瀏覽器視窗,暫時遮蔽其他的網站內容。如有需要,幻燈片展示可設定為自動播放,以在頁面載入時開始循環播放所有影像。訪客可按下 Escape 退出幻燈片展示。
請依照下列步驟將「全螢幕幻燈片展示」Widget 新增到網站:
啟動 Adobe Muse。連按兩下頁面,頁面隨即在「設計」視圖中開啟。
選擇「視窗 > Widget 資料庫」以存取「Widget 資料庫」,或者按一下面板中的「Widget 資料庫」索引標籤將其設為作用中狀態。
展開 Widget 清單中的「幻燈片展示」區段。在「幻燈片展示」區段選取名稱為「全螢幕」的 Widget。
「全螢幕幻燈片展示」Widget 的運作方式與 Adobe Muse 中的其他 Widget 不同。請花點時間查看其運作方式。
將「全螢幕幻燈片展示」Widget 從「Widget 資料庫」拖移到頁面。
請注意,預設的內容會進行縮放,以符合整個瀏覽器視窗的高度和寬度。
新增「全螢幕幻燈片展示」Widget 時,依預設會在右上角顯示「上一個」按鈕、「下一個」按鈕和「計數器」欄位。
按一下藍色箭頭,以檢閱「選項」面板中的設定。
「等比例填滿框架」選項會自動套用到「新主體」(大型影像) 和「新縮圖」影像,以利全螢幕檢視。
選擇您要套用的轉變類型。使用「切換效果」選單選擇「淡化」、「水平」或「垂直」。「轉變速度」依預設為 0.5 秒,但您可以視需要調整該速度。
啟用「自動播放」後,幻燈片展示會在頁面載入後馬上開始播放,並依照您設定的秒數循環播放整個內容。啟用「自動播放」後,預設為每張影像顯示 3.5 秒。
設定「全螢幕幻燈片展示」Widget 時,通常會啟用「下一個」和「上一個」按鈕供導覽使用,所以「縮圖」預設為隱藏。但是,如果您要在主要幻燈片展示影像上方顯示縮圖,則可以啟用「縮圖」選項。
如果縮圖為隱藏,請務必維持啟用「上一個」和「下一個」組件。「計數器」為選用,此工具可幫助訪客瞭解目前播放的是組合中的哪一個影像。
如果您要在頁面的特定部分顯示「上一個」、「下一個」和「計數器」介面,請使用「選取」工具將它們移動到想要的位置,然後固定控制項。如果您也想讓縮圖保持在頁面的相同位置,請將整組縮圖放在位置上並固定。如果您要在頁面的特定部分顯示「上一個」、「下一個」和「計數器」介面,請使用「選取」工具將它們移動到想要的位置,然後固定控制項。如果您也想讓縮圖保持在頁面的相同位置,請將整組縮圖放在位置上並固定。
您在自適應網站新增此 Widget 時,可修改此 Widget 在不同中斷點的「固定」與「調整大小」設定。
接下來您要將影像新增到「全螢幕幻燈片展示」Widget。請依照下列步驟操作:
選取「檔案 > 置入」。
在顯示的「讀入」視窗中,按住 Shift,同時以滑鼠按一下以選取電腦上的數個連續影像檔案。或者,您也可以按住 Command (Mac) 或 Control (Windows),同時選取資源檔案夾中數個非連續的影像檔案。
按一下「開啟」,將所選檔案載入「置入噴槍」。
即使您所選的影像有不同的尺寸和長寬比,「等比例填滿框架」選項會將其縮放至完全符合頁面尺寸的大小。
按一下幻燈片展示以新增所選的影像檔案。請注意,幻燈片展示的預設影像會在您新增影像後馬上自動移除。
選擇「檔案 > 在瀏覽器中預視網頁」。調整瀏覽器視窗大小,並注意幻燈片展示內容如何縮放和裁切,以填滿整個瀏覽器視窗。按一下「下一個」和「上一個」按鈕,切換一連串的影像,或者,如果已啟用自動播放,則直接讓影像播放。
關閉瀏覽器視窗並返回 Adobe Muse。
「自由格式縮圖」選項對縮圖在幻燈片展示中的顯示方式提供了完整的控制。您可以將每張縮圖放置在您要的任何位置,而不是將縮圖排列成一排或數排。
在「設計」視圖中,開啟「Widget 資料庫」並展開「幻燈片展示」區段。將任一「幻燈片展示」Widget 拖移到頁面。
選取整頁後,請連按兩下縮圖影像加以選取。您可以檢閱「控制」面板左上角的選取指示器,查看哪一項元素已選取。
在「幻燈片展示」Widget 中顯示的縮圖,依預設會儲存在名為「縮圖容器」的容器內。此外層容器會確保縮圖依您調整外層容器大小的結果,以直行或直排的方式排列。整組縮圖影像會嵌套在所有啟用縮圖之幻燈片展示的縮圖容器內,直到您啟用「自由格式縮圖」選項為止。
如果您想要以隨機或非對齊位置的方式顯示縮圖,則可以移除外層容器,並將每張縮圖影像放置在頁面上想要的位置。請依照下列步驟操作:
在選取「幻燈片展示」Widget 的情況下,按一下藍色的箭頭以存取「選項」選單。
啟用「自由格式縮圖」選項旁的核取方塊。「設計」視圖中的縮圖容器周圍邊界方框會立即消失,且選取指示器會顯示「幻燈片展示」一詞。
按一下頁面的其他任何位置,以關閉「選項」選單。
現在,您已移除縮圖的外層容器,可以重新放置每張縮圖影像,以符合頁面設計。
使用「選取」工具選取一張縮圖。在選取縮圖的情況下,選取指示器會顯示「縮圖」一詞。將所選縮圖移動到想要的位置。重複此步驟以重新放置所有縮圖。如果您想讓每張縮圖在捲動瀏覽器或調整瀏覽器大小的情況下,仍保持在原位,可以固定每張縮圖。
如果您要調整縮圖容器大小,讓他們變成不同尺寸,請停用「選項」選單的「一併編輯」選項,然後使用「選取」工具個別拖移每張縮圖的角落,依需要進行縮放。
在自適應網站,亦可為縮圖重新對齊、調整大小、設定固定選項。
選擇「檔案 > 在瀏覽器中預視網頁」。幻燈片展示的縮圖會散佈在頁面上。按一下縮圖以查看幻燈片展示中顯示的對應影像。
關閉瀏覽器並返回 Adobe Muse。
當內容在影像預視燈箱中顯示時,即代表會凸顯最上層視窗並醒目顯示其內容,頁面的其他部分則會變暗。訪客透過按一下縮圖、「下一個」或「上一個」按鈕與影像預視燈箱互動。若要退出影像預視燈箱並返回正常網站視圖,訪客要按一下「關閉」按鈕或按下 Escape。
Adobe Muse 中的所有「幻燈片展示」Widget 皆提供「影像預視燈箱」選項。另外,「幻燈片展示」區段中的一個 Widget 已預先設定為使用影像預視燈箱行為。「影像預視燈箱幻燈片展示」Widget 預設為已啟用「影像預視燈箱」選項。
若要建立在影像預視燈箱顯示影像的幻燈片展示,請依照下列步驟操作:
在「設計」視圖中,展開「Widget 資料庫」中的「幻燈片展示」區段。將任一「幻燈片展示」Widget 拖移到頁面。
在「選項」選單中,於「版面」區段找到「影像預視燈箱」選項,並確認已將其選取。
在「選項」選單仍開啟的情況下,進行任何其他變更,視需要設定 Widget。例如,您可以顯示或隱藏「上一個」按鈕、「下一個」按鈕、「註解」和「計數器」。針對影像預視燈箱顯示,啟用「關閉」按鈕很有幫助。核取「關閉按鈕」選項旁的核取方塊。
如有需要,您可以使用「選取」工具將「關閉」按鈕移動到不同的位置。當訪客要退出影像預視燈箱顯示並關閉最上層視窗時,他們可以按一下「關閉」按鈕或按下 Escape。
如果您要變更影像預視燈箱視窗周圍的邊框寬度,請選取「影像預視燈箱幻燈片展示」Widget 並更新「間距」面板中的「間隔」設定。
選擇「檔案 > 在瀏覽器中預視網頁」來測試「幻燈片展示」Widget。按一下任一縮圖影像,以觸發影像預視燈箱效果,並在頁面的其他部分變暗時,看到最上層視窗中顯示的對應主體影像。
按一下「下一個」和「上一個」按鈕,循環播放幻燈片展示中的影像。
測試完幻燈片展示後,請按一下「關閉」按鈕退出影像預視燈箱視圖。影像預視燈箱隨即關閉,其他頁面內容則會顯示。
關閉瀏覽器並返回 Adobe Muse。
登入您的帳戶