請閱讀此文章以深入瞭解中斷點。瞭解如何固定自適應版面的物件並調整其大小,以及格式化每個中斷點的文字。

註解:

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

在自適應設計中,物件和文字的單一版面可能無法適合所有畫面大小。影像、文字、Widget 和表單可能會重新放置在不同的中斷點上。外框可能會超出頁面寬度,物件可能與另一物件碰撞,或文字的清晰度可能會降低。影像、文字、Widget 和表單需要重新放置在不同的中斷點上。因此,配置物件和格式化文字時必須考慮周全,使它們在不同的畫面大小中獲得妥善配置。 

在您設計頁面後,可使用定位桿來預視畫面大小不同的版面。如果您發現需要在特定的瀏覽器寬度上以不同方式配置物件,可以新增中斷點。

續讀閱讀就可深入瞭解 Adobe Muse 自適應版面中的中斷點,以及有效設計版面的方法。

中斷點是什麼?

自適應版面中的中斷點代表不同的瀏覽器寬度 (單位為像素)。中斷點可讓您以不同的瀏覽器寬度檢視設計成品,並測試頁面中的物件會如何因應瀏覽器寬度的改變。

新增中斷點

依照預設,Adobe Muse 中的新網站包含了適用桌上型電腦的中斷點 (960 像素寬度)。您可以針對此寬度開始設計自己的版面。完成設計時,您可以使用定位桿以各種寬度預視版面。當您這麼做時,可以看到設計中斷的寬度並加以記錄。例如,一行文字分為兩行,或排成一排的影像垂直堆疊。以上都是需要額外中斷點的寬度。新增必要的中斷點後,您可以調校設計,讓物件妥善配置。

於後端,Adobe Muse 會針對每個中斷點將對應的媒體查詢聲明新增至您的網頁。媒體查詢屬於 CSS3 模組,可讓內容順應不同畫面大小來調整。大多數的現代瀏覽器都可以解譯與這些中斷點對應的媒體查詢。當使用者在各種不同的裝置上檢視您的網頁時,瀏覽器會選出最適合的媒體查詢和對應的設計版面來顯示給使用者。

  1. 您可拖放中斷點列上的定位桿,放置於您要新增中斷點的位置。

  2. 按一下中斷點列上的 。新中斷點隨即新增於中斷點列上。您也能查看中斷點的瀏覽器寬度。

    您也可比照操作,在中斷點列上新增中斷點,設定特定的瀏覽器寬度。

    在中斷點上按一下後,作用中的中斷點便會填滿色彩。其他中斷點則會以灰色顯示。

    註解:

    您也可以在「設計」視圖中放置含中斷點的資料庫項目,來新增中斷點。開啟「資料庫面板」、選取您要放置的物件、按一下該物件旁的 + 號,然後將物件拖曳到「設計」視圖中。

我應在何處新增中斷點?

您可將中斷點新增至主版頁面與個別頁面。將中斷點新增至個別頁面後,該中斷點值只會套用至此一特定頁面。

您在主版頁面上新增中斷點時,可選擇在個別頁面上套用您需要的任何中斷點。主版頁面的中斷點會以小三角形顯示在個別頁面上。您只需要按一下加號 (+),即可在個別頁面上啟動這些中斷點。

主版頁面中斷點
按一下 + 號以新增主版頁面中斷點。

看看以下案例:當您配置網站時,可能想要為手機新增特定的中斷點。您可以在主版頁面上新增適當的中斷點,讓它們在個別頁面中可供使用。當您進一步設計個別頁面時,只要按一下即可在頁面上取得這些中斷點。

註解:

您將不同的主版頁面套用至個別頁面後,舊主版頁面的中斷點便會被新主版頁面的中斷點取代。

編輯中斷點

  1. 在中斷點列上,拖曳定位桿,並放在所要的中斷點值上。這是您修改的中斷點位置。

  2. 如果您要檢視或編輯中斷點顏色,請在中斷點上按一下滑鼠右鍵,選取「中斷點屬性」,或按兩下中斷點。

    您也也可以從本視窗修改中斷點顏色、頁面寬度、高度與邊界值。

    用來檢視及修改中斷點顏色與邊界值的中斷點屬性
    使用「中斷點屬性」對話方塊可修改中斷點顏色與中斷點值。

  3. 按一下「確定」儲存變更。

註解:

您無法從個別頁面編輯主版頁面中斷點。

刪除中斷點

  1. 若要刪除中斷點,請執行下列任一操作:

    • 按一下作用中的中斷點左側的 X。
    • 於中斷點列上按一下滑鼠右鍵,然後選取「刪除中斷點」。

    刪除中斷點時,對應的版面會變更,中斷點的文字設定也會遭到刪除。

    刪除中斷點
    按一下 x 符號可刪除中斷點。

    以滑鼠右鍵按一下來刪除中斷點
    以滑鼠右鍵按一下並刪除中斷點。

    註解:

    您無法從個別頁面刪除主版頁面中斷點。

在中斷點之間移動

您可以從目前的中斷點移動至下一個或上一個中斷點。若要前往上一個或下一個中斷點,請執行下列操作:

  • Windows 使用者:
    • 上一個中斷點 - 按下 Ctrl + Shift + 5
    • 下一個中斷點 - 按下 Ctrl + Shift + 6
  • Mac OS 使用者:
    • 上一個中斷點 - 按下 Cmnd + Shift + 5
    • 下一個中斷點 - 按下 Cmnd + Shift + 6

在自適應版面中使用物件

您可使用下列選項以確保您的版面在所有中斷點上都能美觀:

  • 顯示/隱藏物件:您選擇在另一個中斷點上顯示物件時,可選擇隱藏中斷點內的物件。如需詳細資訊,請參閱顯示或隱藏物件
  • 在不同的中斷點中以不同方式放置物件:您可將單一物件放置在不同中斷點中的不同位置。如需詳細資訊,請參閱在自適應網頁設計中放置物件
  • 使用自適應固定:您可決定哪些物件要保持靜止,哪些要流動。您可固定靜態物件,使它們停留在所有中斷點上的相同位置。如需詳細資訊,請參閱自適應固定
  • 調整物件大小:您可在各中斷點上調整物件成不同大小。您也能設定物件,自動依據頁面寬度調整其大小。如需調整物件大小的相關資訊,請參閱調整物件大小
  • 為不同中斷點將文字格式化:您可在不同中斷點以不同方式將文字格式化,增加文字在不同瀏覽器寬度中的清晰度和可讀性。如需詳細資訊,請參閱將自適應版面中的文字格式化

顯示或隱藏物件

看看以下案例:您已插入桌上型電腦的傳統選單。但是這個選單佔據平板螢幕上太多空間。平板電腦裝置更適合使用三明治選單或折疊式選單。

以 Adobe Muse 設計自適應網站時,這種案例的處理方式很簡單。您可以選擇針對桌上型電腦檢視顯示傳統選單,並針對平板電腦裝置顯示三明治選單,如下圖所示。

在自適應版面中顯示或隱藏物件
在桌上型電腦檢視中顯示傳統選單並隱藏三明治選單。

在自適應版面中顯示或隱藏物件
在行動裝置檢視中顯示三明治選單並隱藏傳統選單。

若要在 Adobe Muse 專案中顯示或隱藏物件:

  1. 插入您需要的所有物件,包括您要在某些中斷點中隱藏的物件。

  2. 將定位桿拖曳到特定中斷點視圖。

  3. 在您要隱藏的物件上按一下滑鼠右鍵,然後按一下「在中斷點中隱藏」。

    物件會在目前的中斷點視圖中隱藏,但是在其他中斷點中顯示。如果您要改成在所有其他中斷點中隱藏物件,請按一下「在其他中斷點隱藏」。您稍後可以使用「圖層」面板在特定的中斷點中顯示物件。

    在中斷點中隱藏物件
    在中斷點中隱藏物件

    現在,配置在中斷點視圖中顯示的物件。

  4. 前往您要顯示隱藏物件的中斷點視圖。您可以拖曳定位桿以達到目的。

  5. 按一下「圖層」面板,找到您要取消隱藏的物件圖層。您可能必須深入不同圖層,以找到您的物件圖層。

    透過「圖層」面板顯示或隱藏物件
    使用「圖層」面板來顯示/隱藏物件

  6. 按一下對應到物件圖層的第一欄。小黑點隨即顯示,代表物件已顯示於目前的中斷點視圖中。

    按一下以顯示或隱藏物件
    按一下第一欄以顯示或隱藏物件。

    若要取消物件在所有中斷點上隱藏,請在物件上按一下滑鼠右鍵,然後按一下「在其他中斷點顯示」。

放置物件

您可在不同的中斷點視圖中以不同方式放置物件。例如,您可以在桌上型電腦檢視中以水平方向放置影像,也可以在行動裝置檢視中以垂直方向放置影像。

Adobe Muse 會記憶物件位置,並在畫面大小改變時據以顯示。

針對桌上型電腦檢視配置物件
針對桌上型電腦檢視水平配置物件。

針對行動裝置檢視配置物件。
針對行動裝置垂直配置物件。

若要移動所有中斷點上的物件,請執行下列操作:

  1. 選取您要放置物件的中斷點。

  2. 將物件拖放到所要位置上。

    註解:

    配置物件時,請記得要檢查物件之間的距離,以及物件和瀏覽器邊緣之間的距離。您可能需要調整物件的位置,或新增更多中斷點以解決中斷點之間發生的設計問題。

同時移動多個物件

您可以在自適應版面中同時移動多個物件。若要移動一組垂直對齊的物件,只要選取最上方的物件即可。Adobe Muse 左側邊界隨即出現垂直控制點。

Adobe Muse 的垂直移動控制點
移動一組垂直對齊的物件。

按一下該控制點,上下移動控制點,所選物件及其下方所有物件就會同時移動。

放置含中斷點的物件

您可藉由放置含中斷點的資料庫項目,在「設計」視圖中新增一組中斷點。開啟「資料庫面板」(「視窗 > 資料庫」)。選擇您想新增至頁面中的項目。按一下項目旁的加號並將項目拖移至「設計」視圖。

使用資料庫項目新增中斷點
按一下 + 號來放置含中斷點的物件

注意自動新增至頁面的一組中斷點。若您先前已新增中斷點至頁面,而現在又新增含中斷點的資料庫項目,則頁面中的所有中斷點皆會啟動。

您可以使用含中斷點的資料庫項目,在不同頁面之間,甚至在不同的 .muse 檔案之間快速地複製中斷點。

固定物件

在 Adobe Muse 中,如果您要使某些物件保持靜止,可以使用固定。您可以將物件固定於頁面或瀏覽器上:

  • 將物件固定至瀏覽器:如果您希望物件即使在您使用瀏覽器捲軸列時仍保持不動,可以將物件固定至瀏覽器。例如,即使您向上或向下捲動時,仍保持不動的選單列。若要進一步瞭解有關將物件固定至瀏覽器的詳細資訊,請參閱此連結
  • 將物件固定至頁面:如果您希望物件相對於網頁保持固定,可以將物件固定至頁面。例如,永遠顯示在網頁右上角的公司標誌。

如需瞭解如何在自適應設計中將物件固定至頁面,請繼續閱讀。

註解:

若要判斷是否要固定物件,可使用定位桿並以各種瀏覽器寬度檢視頁面。如果您仍要將物件固定到頁面上,請執行下列步驟:

  1. 選取您要固定的物件。

  2. 在上方的「固定」選項中,選取其中一個方塊來將您的物件固定至頁面。

    在自適應設計中使用「固定至頁面」選項
    在自適應版面中使用「固定」選單來固定物件。

  3. 以下列其中一種方式將物件固定至頁面:

    • 固定在左側 :如果您要將物件固定在網頁的左側,請選取此方塊。瀏覽器邊緣與物件左側之間的距離會保持不變。
    • 固定在中心 :如果您要將物件固定在中心,請選取此方塊。物件左上邊緣與瀏覽器邊緣之間的距離會保持不變。
    • 固定在右側 :如果您要將物件固定在網頁的右側,請選取此方塊。瀏覽器邊緣與物件右側之間的距離會保持不變。

    例如,如果您有一個類似「立即預訂」的按鈕需要在所有中斷點中都顯示在頁面的右側角落,您必須選取該按鈕並將按鈕固定在右側,如圖所示。

    按一下方塊以將物件固定在右側。
    按一下右側的方塊以將物件固定在右側。

    當您將物件固定至頁面後,Adobe Muse 會顯示從物件延伸出的虛線,以指出「固定至頁面」的位置。請參閱下圖中延伸至頁面右側邊緣的虛線。這表示物件固定至頁面右側。

    「固定至頁面」指示線
    虛線指出「固定至頁面」的位置。

  4. 使用定位桿來檢視不同頁面寬度中的版面。查看在頁面調整大小時,固定設定是否會影響頁面版面。

調整物件大小

  1. 前往您要調整大小的物件所在的中斷點視圖。

  2. 在物件上按一下滑鼠右鍵,然後選取「調整大小 > 調整大小選項」。

    註解:

    不同的物件有不同的調整大小選項。例如,您可以在自適應版面中依寬度和高度調整影像的大小,但是只能依寬度調整文字方塊的大小。

    非流動物件沒有「調整大小」選項。

  3. 為目前的中斷點拖曳物件並調整其大小。

    例如,在第一張圖中,請注意影像於 768 像素的中斷點處超出了寬度。您可以拖曳並調整影像的大小來符合頁面寬度,如第二張圖所示。

    影像超出頁面寬度。
    影像超出頁面寬度。

    針對不同的中斷點調整物件大小。
    針對不同的中斷點拖曳並調整物件大小。

  4. 在瀏覽器中預視這項變更。調整瀏覽器大小,直到瀏覽器寬度達到您的中斷點值。觀察瀏覽器寬度達到中斷點值時的物件大小變更。

註解:

如果「狀態按鈕」或任何其他 Widget 容器中的項目設定為流動,它們的容器在調整大小時,項目也會跟著調整位置及/或調整大小。

拷貝物件的大小和位置

如果您要拷貝不同中斷點上的物件大小和位置,請執行下列步驟:

  1. 在您要拷貝的物件上按一下滑鼠右鍵。

  2. 執行下列任一項作業:

    • 選取「拷貝大小與位置至 > <特定的中斷點值>」,針對特定中斷點套用目前物件的大小和位置。
    • 選取「拷貝大小與位置至 > 所有中斷點」,將目前物件的大小和位置套用至所有中斷點。

將自適應版面中的文字格式化

在自適應設計中,為了讓文字清晰易讀,針對不同的瀏覽器寬度處理文字相當重要。放在某一中斷點視圖中的文字,在另一個中斷點視圖中可能會突然繞圖排文。您切換中斷點時,也可能會出現不需要的分行符號。

Adobe Muse 讓您為不同的中斷點以不同方式將文字格式化。例如,您可以選擇針對平板電腦使用 20 pt 的字體大小,而針對行動裝置使用 15 pt 的字體大小。

針對桌上型電腦檢視格式化文字
針對桌上型電腦檢視格式化文字

針對行動裝置檢視格式化文字
針對行動裝置檢視格式化文字

若要將自適應設計中的文字格式化,Adobe Muse 在面板上提供「文字格式化」圖示,在此面板上還可找到「裁切」工具和「選取」工具。這個圖示中有兩個選項,您可選擇其中之一將文字格式化。

您可選擇「格式化所有中斷點上的文字」選項,將頁面上所有中斷點上的文字格式化。選擇這個選項時,只需要在一個中斷點視圖上格式化文字。其他中斷點上的文字會自動格式化。

另一方面,如果需要為特定中斷點格式化文字,您可選擇「格式化目前中斷點上的文字」選項。例如,為行動裝置設計文字的版面時,可選擇將文字大小增加為 24。

Muse 便會記憶文字格式,並在以不同瀏覽器寬度檢視網站時,據而顯示。

將自適應版面中的文字格式化

  1. 前往中斷點視圖。

  2. 選取文字方塊,拖曳以調整大小。當您調整文字方塊的大小時,文字會重新排列。

    註解:

    文字方塊的右邊界定義當您調整文字方塊大小時文字流動的寛度範圍。

  3. 若要將文字格式化,請選取您要格式化的文字,然後按下列其中一個選項:

    • 格式化所有中斷點上的文字」,將所有中斷點上的文字格式化。
    • 格式化目前中斷點上的文字」,只針對目前的中斷點格式化文字。

    這兩種選項位於「文字」工具或「裁切」工具所在的左面板中。

    格式化中斷點上的文字
    格式化自適應設計中的文字

    A. 格式化所有中斷點上的文字 B. 格式化目前中斷點上的文字 

    註解:

    自適應版面中的格式化文字選項只會變更文字的格式設定。您無法變更每個中斷點的文字或內容。

跨中斷點複製文字格式

如果您要拷貝不同的中斷點或瀏覽器寬度上的文字大小和位置,請執行下列步驟:

  1. 選取要拷貝的文字。

  2. 執行下列任一項作業:

    • 按一下滑鼠右鍵,選取「拷貝文字格式至 > <特定的中斷點值>」,為該特定中斷點套用目前的文字屬性。
    • 按一下滑鼠右鍵,選取「拷貝文字格式至 > 所有中斷點」,為所有其他中斷點套用目前的文字屬性。

    使用定位桿來預視每個中斷點上的版面。如有必要請新增中斷點,為不同的瀏覽器寬度最佳化版面。

在自適應版面套用捲動效果

您可在自適應版面新增捲動效果。唯有固定中斷點能支援捲動效果。有固定中斷點,就表示版面的頁面寬度是固定的。新增固定中斷點,將您要套用捲動效果的物件選取起來,然後進行「捲動效果」設定。

  1. 在您要新增捲動效果的位置,開啟 Adobe Muse 頁面。例如,您要新增捲動效果,可能是為了便於瀏覽,以及頁首的背景影像。

  2. 開啟自適應版面時,請注意頁面上的中斷點。這些中斷點是流動的,以雙向箭頭圖示表示。

    流動中斷點
    流動中斷點會以雙向箭頭圖示表示

    如果您現在檢視「捲動效果」面板,就可看見該選項已停用。

    流動中斷點已停用捲動效果
    流動中斷點已停用捲動效果

  3. 您必須新增固定中斷點,才能啟用「捲動效果」。若要新增固定中斷點,請在中斷點列上按一下,再按一下「新增中斷點」。 

  4. 從下拉式清單中選擇 「固定寬度」,然後按一下「確定」。

    新增固定寬度中斷點
    新增固定寬度中斷點

    固定中斷點
    注意,固定中斷點有一個方形圖示。

    請注意,頁面上的固定中斷點會以方形表示。若在寬度 1225 像素以上的瀏覽器檢視頁面,頁面固定保持在 1225 像素。版面在此中斷點不會變成流動。

  5. 將您要套用捲動效果的物件選取起來,然後進行「捲動效果」設定。

    對所選物件套用捲動效果
    對所選物件套用捲動效果

    註解:

    唯有在固定中斷點,而不是其他 (流動) 中斷點時,才能套用捲動效果。

    如需瞭解如何在 Adobe Muse 中新增及使用捲動效果,請參閱在 Adobe Muse 中套用捲動效果

常見問題集

針對桌上型電腦、平板電腦及行動裝置設計網站時,理想的中斷點為何?

若您想針對特定裝置設計網站,則可新增適當的中斷點。但是,使用者可能會從任何螢幕大小的各種裝置檢視您的網站。因此,建議您僅於設計中斷處新增中斷點。這樣便能確保您的網站在任何裝置上看起來都有妥善配置。

為什麼主版頁面的中斷點無法在個別頁面中運作?

主版頁面的中斷點在個別頁面上會以白色三角形顯示。若要在個別頁面上啟用這些中斷點,請按一下中斷點列上的白色三角形,然後按一下加號 (+)。

另一個將主版頁面的中斷點輕鬆帶至個別頁面的方式是複製主版頁面元素,切換至您要套用中斷點的頁面,選取「編輯 > 貼上 (含中斷點)」,然後從畫布刪除貼上的項目。雖然項目已遭刪除,但是來自主版頁面的中斷點仍會保留。

如何避免自適應版面中的文字方塊重疊?

文字方塊無法縮放,因此若其未「流動」便可能互相重疊。若要讓文字方塊流動,請在每個文字方塊上按一下滑鼠右鍵,然後選取「調整大小 > 自適應寬度」。

如何去除自適應網站中額外的空間或空白?

您可能會發現因黏性頁尾或隱藏物件等數個原因而產生的額外空間或空白。如需有關如何解決此問題的詳細資訊,請參閱此文章

如何移除預覽網站時所顯示的灰色區域?

每當您在預覽中看到灰色區域時,請查看頁面外部放置的外部物件或隱藏物件。若要選取所有物件,請按一下「檢視 > 顯示框架邊線」。您也可以縮小顯示,然後檢視所有物件的位置。檢查隱藏物件或外部物件,然後將該物件放置在您的版面之中,如此即可解決此問題。

如何讓所有 Widget 流動或自適應?

Adobe Muse 中的所有 Widget 目前皆非自適應。若要瞭解每個 Widget 的自適應行為,請參閱此表格

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

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