亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

前言

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

    如果文章對你有幫助！希望可以點贊關注支持一下！

最終效果：

制作順序（需要注意）

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

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

3.網頁內容與背景圖片的關系一定要分開。（后續(xù)會細講） 先做好一個斷點的布局，然后先做最大的寬度適配。

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

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

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

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

步驟教程：

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

這PSD模板只需要做好桌面版的就可以了，移動端的不需要做，我們在Muse當中完成。

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

(需要注意，處理的過程越細致越好，尤其要注意圖層順序關系，一定要分好組)

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

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

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

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

3.想這種出框的就是沒有去掉蒙版，這時候我們需要畫一個矩形，然后把他作為背景圖像，裁切進去；另外，banner圖也需要畫一個矩形，然后設置100%寬度。

③網頁內容和北京圖片的關系一定要分開

由圖知，紅框內的是內容，外的是背景區(qū)；我們去理解背景是適應瀏覽器的，瀏覽器的寬度是會隨設備而改變的，但內容是居中不變的；所以在PS設計的時候，內容必須獨立開來。

④先做好一個斷點布局，然后先做最大的寬度適配。

我們建議把基礎斷點的寬度設置為1280px，然后設置一個最大的適配寬度，我這里設置的是1600px；在適配的過程中，除了在1600px下調整元素的布局，還可以通過搖桿，左右拖拉，觀察過渡的過程是否有問題出現。

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

我們可以看到，目前這個標題是居中對齊為參考的，那么在頁面縮小或者擴大的時候，他就會以網頁的中心為參考點，進行縮放；也可以是向左固定，參考元素到網頁左邊的距離，但左右固定通常是logo和菜單用的。

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

同樣是先調整布局，然后縮放元素，設置元素的對齊參考點。

⑦觀察內容是否超出當前斷點的編輯區(qū)域

通常在不同的斷點下，由于元素的縮放模式沒有選擇對，通常都會超出了斷點編輯范圍內，在超出后需要按照你需要進行調整。

⑧最后檢查不斷斷點縮放的過程中，圖片的縮放規(guī)則是否恰當。

選擇元素后，我們可以在Resize看到，圖片的縮放模式，我們可以通過搖桿調整的過程中去觀察，選擇一種最合適的縮放方式；而類似LOGO之類的，就可以固定不變。

最后，提供案例的PSD源文件和Muse源文件給大家參考，下載地址：

鏈接: http://pan.baidu.com/s/1c2ci5HY 密碼: s5sq

案例演示網站網址：http://www.musecn.cn/musecn/responsive/

（不包含交互，僅演示響應式變化）http://img.ui.cn/data/file/1/0/9/1498901.png