首页 > 公告 > 教你一個方法!7步零代碼制作響應式網站響應式代碼

教你一個方法!7步零代碼制作響應式網站響應式代碼

通過學習本套教程:你可以輕松的零代碼制作一個響應式網站。 你能夠掌握AdobeMuse 2018 版本的所有響應式設計功能。

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文件圖層順序和智能對象的細致程度,我們可以通過圖層上移下移來進行調整。

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

網頁內容和北京圖片的關系一定要分開由圖知,紅框內的是內容,外的是背景區;我們去理解背景是適應浏覽器的,浏覽器的寬度是會隨設備而改變的,但內容是居中不變的;所以在PS設計的時候,內容必須獨立開來。

先做好一個斷點布局,然後先做最大的寬度適配。我們建議把基礎斷點的寬度設置爲1280px,然後設置一個最大的適配寬度,我這裏設置的是1600px;在適配的過程中,除了在1600px下調整元素的布局,還可以通過搖杆,左右拖拉,觀察過渡的過程是否有問題出現。

做好第一個和最大的適配後,開始調整網頁元素的對齊參考點。我們可以看到,目前這個標題是居中對齊爲參考的,那麽在頁面縮小或者擴大的時候,他就會以網頁的中心爲參考點,進行縮放;也可以是向左固定,參考元素到網頁左邊的距離,但左右固定通常是logo和菜單用的。

⑥開始適配768px平板寬度和375px手機寬度的布局同樣是先調整布局,然後縮放元素,設置元素的對齊參考點。

⑦觀察內容是否超出當前斷點的編輯區域通常在不同的斷點下,由于元素的縮放模式沒有選擇對,通常都會超出了斷點編輯範圍內,在超出後需要按照你需要進行調整。

⑧最後檢查不斷斷點縮放的過程中,圖片的縮放規則是否恰當。選擇元素後,我們可以在Resize看到,圖片的縮放模式,我們可以通過搖杆調整的過程中去觀察,選擇一種最合適的縮放方式;而類似LOGO之類的,就可以固定不變。

发表评论

电子邮件地址不会被公开。 必填项已用*标注