教你一个方法！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之类的，便能够牢固稳定。

　　最初，供给案例的PSD源文件战Muse源文件给各人参考，下载地点：链接: http://pan.百度.com/s/1c2ci5HY 稀码: s5sq

　　案例演示网站网址：http://www.musecn.cn/musecn/responsive/(没有包罗交互，仅演示呼应式变革)