閱讀本文以開始使用 Adobe Muse 的自適應設計。瞭解如何為任何裝置建立自適應網站。

註解:

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

建立自適應網站時,根據特定裝置、作業系統或產品品牌新增中斷點的作法,可能不太有助益。若根據這些因素定義中斷點,可能會導致高維護成本。替代方式應該是由網站的版面和內容來決定新增中斷點的方式與位置。

請繼續閱讀,瞭解使用 Adobe Muse 建立自適應網站的建議設計方法。

1

建立網站。從「新增網站」對話方塊中選擇「流動寬度」。

若要避免空白和其他設計問題,請設定頁面尺寸。按一下「進階設定」,為網站設定最小頁面寬度、最大頁面寬度和最小高度。


在「新增網站」對話方塊中,選取「流動寬度」。
在「新增網站」對話方塊中,選取「流動寬度」。

 

 

 

2

開啟主版頁面或個別頁面。您會注意到,預設中斷點位於 960 像素。


您會注意到,預設中斷點位於 960 像素。
您會注意到,預設中斷點位於 960 像素。

 

 

 

3

開始在此中斷點為頁面元素 (例如文字、影像、投影片和 Widget) 設定版面配置。


配置網頁。
配置網頁。

 

 

 

4

使用定位桿模擬各種瀏覽器寬度。查看您的網站在不同的瀏覽器寬度下會如何顯示。


使用定位桿來查看您的網站在不同的瀏覽器寬度下會如何顯示。
使用定位桿來查看您的網站在不同的瀏覽器寬度下會如何顯示。

 

 

 

5

只要有設計中斷的地方,都新增中斷點。例如,在先前的影像中,當您拖曳定位桿時,文字方塊會超出寬度。請在該設計中斷處的寬度上新增中斷點。


在所有設計中斷處新增中斷點。
在所有設計中斷處新增中斷點。

 

 

 

6

以新的中斷點調整版面,使您的網站看來有妥善配置。


在中斷點調整您的版面
在中斷點調整您的版面

 

 

 

7

繼續預視網站,直到最小寬度為止。在必要時新增中斷點並調校版面。


使用這個設計方法後,不論是從任何裝置以任何瀏覽器寬度檢視您的網站,看起來都很美觀。您的設計不會受到特定裝置大小或螢幕大小影響。

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

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