註解:

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

Adobe Muse 2016 年 2 月版本和更新版支援自適應設計。如果您以 2016 年 2 月之前的版本建立網站,能夠將網站轉換為自適應設計。

為什麼我應該移轉至自適應版面?

如果您目前有使用替代版面的 Adobe Muse 專案,則可將您的專案移轉至自適應版面。不過,如果您想要繼續使用替代版面進行作業,也無妨。 

自適應網站通常等同於大量的程式碼以及複雜的範本。第一次使用時,Adobe Muse 可讓您建立自適應網站,而不需要編寫任何程式碼,也不需要任何格點或範本。您還可進一步使用單一檔案來建立完全的自適應網站,使其在任何裝置的不同畫面大小中皆獲得妥善配置。個別的版面現在已成為歷史!

使用 Adobe Muse 自適應設計亦可輕鬆地更新文字和影像。您不必費時地為每個版面更新相同的變更。此外,In-Browser Editing 中可讓您透過瀏覽器來編輯網站內容的應用程式也支援自適應版面。

當您設計網站時,Adobe Muse 還會提供多種彈性項目。您可以選擇在特定中斷點顯示或隱藏特定物件。舉例來說,當您的網站是透過行動裝置供使用者瀏覽時,您可以選擇顯示易於觸控的選單選項。您也可以將物件固定至某個位置,或是將物件重新放置於特定中斷點。

請續讀閱讀以瞭解如何將您現有的 Adobe Muse 網站移轉至自適應版面。將您的網站移轉至自適應設計,使其未來便於使用。

如何將替代版面移轉至自適應設計?

在您將網站移轉至自適應版面之前,可能要參閱 Adobe Muse 中的自適應網頁設計概覽

若要開始將網站移轉至自適應版面:

  1. 開啟您現有的網站。

  2. 開啟網站中的每個頁面,然後按一下「頁面 > 頁面屬性」。

    按一下「頁面屬性」
  3. 版面標籤,將「固定寬度」變更為「流動寬度」。您也可從本視窗設定最小與最大頁面寬度,以及邊緣與間隔。

    按一下「確定」

    將「固定寬度」變更為「流動寬度」
    在「頁面屬性」視窗中將「固定寬度」變更為「流動寬度」。

  4. 為確保您新增的任何新頁面均為流動,請按一下「檔案 > 網站屬性」。在此視窗中將「固定寬度」修改為「流動寬度」。

  5. 選擇您版面的最大頁面寬度、最小寬度與最小高度。

  6. 按一下「確定」

  7. 前往主版頁面和個別頁面,以「流動寬度」開啟頁面。

    若要有效率地使用自適應設計,可停用捲動效果。如果您要為特定頁面保留捲動效果,請繼續在這些頁面使用「固定寬度」。

    當您以「流動寬度」開啟頁面時,該頁面中的物件預設有「固定寬度」設定。物件也會固定在左側。

  8. 使物件流動才能讓物件依瀏覽器寬度成比例調整大小。以滑鼠右鍵按一下每個必須流動的物件,並選取「自適應」選項。

    如果希望物件流動,可移除固定。若要移除固定,請以滑鼠右鍵按一下物件,然後選擇「固定至頁面 > 流動」。

  9. 使用定位桿並檢視不同瀏覽器寬度中的頁面版面。

    您會注意到某些 Widget 並非流動設計。請在這些 Widget 中斷設計的地方,針對頁面寬度新增中斷點。接著您可針對該中斷點調整 Widget 大小,或隱藏 Widget。

    依照預設,您在處理以先前版本建立的網站時,看不到中斷點列。若要顯示中斷點,請按一下「檢視 > 顯示中斷點」。

    經由「檢視」選單顯示中斷點
    按一下「檢視 > 顯示中斷點」。

    註解:

    當您在自適應設計中規劃版面時,先針對最大頁面寬度配置頁面。接著,使用定位桿以不同瀏覽器寬度檢視頁面。如果設計中斷,可在那些寬度新增中斷點。然後在這些中斷點調整版面。

    依據經驗法則,請根據網站的版面來新增中斷點,而不是根據使用者裝置的畫面大小。

  10. 調整物件的大小和位置,將文字格式化,使其在所有瀏覽器寬度中皆妥善配置。如需在自適應版面中配置物件的相關資訊,請參閱在自適應網頁設計中配置物件

    註解:

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

  11. 檢查所有中斷點上文字的對齊方式和可讀性。如果您要重新對齊文字方塊,或為特定頁面寬度格式化文字,請參閱將自適應版面中的文字格式化

  12. 將定位桿拖曳到特定中斷點以預視變更,或以網頁瀏覽器預視變更。

  13. 刪除網站中您可能為其他裝置建立的任何替代版面。自適應網頁設計可讓您在單一畫布中移轉和維護適用所有裝置的網站。

您的自適應網站已準備就緒,可以發佈了!

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

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