怎么制作響應式網站（上）

• 作者：新網
• 來源：新網
• 瀏覽：100
• 2018-02-27 17:50:04

AdobeMuse 2018，提供了制作響應式網頁設計的功能，方便網頁設計師在無代碼的前提下，進行網頁的響應式布局設計，通過以下簡單的制作案例我們可以快速掌握制作的流程，另外，我會提及7個制作流程中需要注意的順序，這個順序需要重視。

 AdobeMuse 2018，提供了制作響應式網頁設計的功能，方便網頁設計師在無代碼的前提下，進行網頁的響應式布局設計，通過以下簡單的制作案例我們可以快速掌握制作的流程，另外，我會提及7個制作流程中需要注意的順序，這個順序需要重視。

制作順序(需要注意)

 

1. 先制作好PSD模板，不要直接在Muse當中完成視覺設計。

 

2. 處理好PSD文件中智能對象的關系以及圖層順序的關系。

 

3. 網頁內容與背景圖片的關系一定要分開。 先做好一個斷點的布局，然后先做最大的寬度適配。

 

4. 做好第一個和最大的適配后，開始調整網頁元素的對齊參考點。

 

5. 開始適配768px平板寬度和375px手機寬度的布局。

 

6. 觀察內容是否超出當前斷點的編輯區域。

 

7.最后檢查不斷斷點縮放的過程中，圖片的縮放規則是否恰當。

 

步驟教程：

 

①先制作好PSD模板，不要直接在Muse當中完成視覺設計這PSD模板只需要做好桌面版的就可以了，移動端的不需要做，我們在Muse當中完成。

 

②處理好PSD文件中智能對象的關系以及圖層順序的關系(需要注意，處理的過程越細致越好，尤其要注意圖層順序關系，一定要分好組)

 

(另外，圖層中含有蒙版和圖層效果的圖層，需要把他轉換成智能對象，并合并蒙版)

 

③網頁內容與背景圖片的關系一定要分開

 

1.進入到Muse中后，新建一個站點，首先我們需要導入PSD，Ctrl(Com)+D。注意勾選Cilp to layer(裁切圖層)，點擊OK后，把布局放在左上角對齊。

 

2. 導入PSD后，發覺還是容易存在圖層先后和背景圖片張開的問題，這些問題取決于你處理PSD文件圖層順序和智能對象的細致程度,我們可以通過圖層上移下移來進行調整。

 

以上就是怎么制作響應式網站的七個步驟。