商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 建站经验 >

教你一个方法!7步零代码制作响应式网站

发表日期:2018-01-14 19:52聚圣源浏览次数: 本文关键词:教你,一个,方法,7步,零,代码,制作,响应,式,

  通过学习本套教程:①你可以轻松的零代码制作一个响应式网站。 ②你能够掌握AdobeMuse 2018 版本的所有响应式设计功能。

  前言

  

教你一个方法!7步零代码制作响应式网站

AdobeMuse 2018,提供了制作响应式网页设计的功能,方便网页设计师在无代码的前提下,进行网页的响应式布局设计,通过以下简单的制作案例我们可以快速掌握制作的流程,另外,我会提及7个制作流程中需要注意的顺序,这个顺序需要重视。 如果文章对你有帮助!希望可以点赞关注支持一下!

 

  最终效果:

  

教你一个方法!7步零代码制作响应式网站

 

  制作顺序(需要注意)

  1.先制作好PSD模板,不要直接在Muse当中完成视觉设计。2.处理好PSD文件中智能对象的关系以及图层顺序的关系。3.网页内容与背景图片的关系一定要分开。(后续会细讲) 先做好一个断点的布局,然后先做最大的宽度适配。4.做好第一个和最大的适配后,开始调整网页元素的对齐参考点。5.开始适配768px平板宽度和375px手机宽度的布局。6.观察内容是否超出当前断点的编辑区域。7.最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。

  步骤教程:

  ①先制作好PSD模板,不要直接在Muse当中完成视觉设计这PSD模板只需要做好桌面版的就可以了,移动端的不需要做,我们在Muse当中完成。

教你一个方法!7步零代码制作响应式网站

 

  ②处理好PSD文件中智能对象的关系以及图层顺序的关系(需要注意,处理的过程越细致越好,尤其要注意图层顺序关系,一定要分好组)

教你一个方法!7步零代码制作响应式网站

 

  (另外,图层中含有蒙版和图层效果的图层,需要把他转换成智能对象,并合并蒙版)

教你一个方法!7步零代码制作响应式网站

 

  ③网页内容与背景图片的关系一定要分开1.进入到Muse中后,新建一个站点,首先我们需要导入PSD,Ctrl(Com)+D。注意勾选Cilp to layer(裁切图层),点击OK后,把布局放在左上角对齐。

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  2. 导入PSD后,发觉还是容易存在图层先后和背景图片张开的问题,这些问题取决于你处理PSD文件图层顺序和智能对象的细致程度,我们可以通过图层上移下移来进行调整。

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  3.想这种出框的就是没有去掉蒙版,这时候我们需要画一个矩形,然后把他作为背景图像,裁切进去;另外,banner图也需要画一个矩形,然后设置100%宽度。

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  ③网页内容和北京图片的关系一定要分开由图知,红框内的是内容,外的是背景区;我们去理解背景是适应浏览器的,浏览器的宽度是会随设备而改变的,但内容是居中不变的;所以在PS设计的时候,内容必须独立开来。

教你一个方法!7步零代码制作响应式网站

 

  ④先做好一个断点布局,然后先做最大的宽度适配。我们建议把基础断点的宽度设置为1280px,然后设置一个最大的适配宽度,我这里设置的是1600px;在适配的过程中,除了在1600px下调整元素的布局,还可以通过摇杆,左右拖拉,观察过渡的过程是否有问题出现。

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  ⑤做好第一个和最大的适配后,开始调整网页元素的对齐参考点。我们可以看到,目前这个标题是居中对齐为参考的,那么在页面缩小或者扩大的时候,他就会以网页的中心为参考点,进行缩放;也可以是向左固定,参考元素到网页左边的距离,但左右固定通常是logo和菜单用的。

教你一个方法!7步零代码制作响应式网站

 

  ⑥开始适配768px平板宽度和375px手机宽度的布局同样是先调整布局,然后缩放元素,设置元素的对齐参考点。

教你一个方法!7步零代码制作响应式网站

 

  

教你一个方法!7步零代码制作响应式网站

 

  ⑦观察内容是否超出当前断点的编辑区域通常在不同的断点下,由于元素的缩放模式没有选择对,通常都会超出了断点编辑范围内,在超出后需要按照你需要进行调整。

教你一个方法!7步零代码制作响应式网站

 

  ⑧最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。选择元素后,我们可以在Resize看到,图片的缩放模式,我们可以通过摇杆调整的过程中去观察,选择一种最合适的缩放方式;而类似LOGO之类的,就可以固定不变。

教你一个方法!7步零代码制作响应式网站

 

  最后,提供案例的PSD源文件和Muse源文件给大家参考,下载地址:链接: http://pan.baidu.com/s/1c2ci5HY 密码: s5sq

  案例演示网站网址:http://www.musecn.cn/musecn/responsive/(不包含交互,仅演示响应式变化)

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/9851.html

网站设计案例推荐

热门文章

站长工具综合查询里面SSL证书不...

SSL证书不安全是怎么回事?但是点进去这个提示后,显示的是别人的tdk是不是被劫持或者被黑了?...

日期:2018-03-27 浏览次数:1895

简洁而实用的版权信息可增色网...

打开网站,人们自然会从上往下浏览,首先映入眼帘的一定是BANNER主视觉,然后是网站主体内容部分。相比较而言,注意到网站底部版权信息的浏览者确实不多,但这并说明网站版权信...

日期:2018-09-20 浏览次数:1883

网站设计需要注意的3点问题...

对于网站设计来讲会受到很多因素的影响,而且不同类型的网站,在设计时需要体现的元素也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信...

日期:2018-02-12 浏览次数:1808

企业网站为什么要改版 改版选择...

网站改版,是每个建站企业必须面临的工作。相信也有不少站长问,已经做好的企业网站,为何还要大费周章重新进行改版设计呢?下面小编就来给大家说说,企业究竟为什么要改变,并...

日期:2018-03-26 浏览次数:1338

永城网站制作:模板建站不可不...

随着互联网建站尤其是自助建站热潮不断高涨,建站行业涌现出越来越多的自助建站平台,这些平台普遍都提供网站模板可选。...

日期:2018-04-30 浏览次数:940

相关文章

【山东网站建设】做一个网站需...

小程序创业扶持计划 实现月入10万创业梦 建网站费用问题是一个很模糊的概念,因为需求决定价格。今天,小小课堂网为大家带来的是《做一个网站需要多少钱?》。希望本次的建站教...

日期:2018-09-05 浏览次数:80

【黑龙江网站优化】Css中color属...

我们大家在制作网站、编写css代码的时候,总会时不时的用到color属性。作为网页制作过程中最常用到的属性之一 ,大家知道color有几种表达方法吗?今天我就带大家一起来看一下。 第...

日期:2018-09-03 浏览次数:64

【江西做网站】建一个网站,最好...

现在很多传统企业老板都觉得生意越来越难做,其实不是生意不好做,而是时代在变,你没有变。 传统企业销售产品主要靠: 打电话、打电话、打电话 ,重要的事情说三遍。 目前企业...

日期:2018-08-30 浏览次数:66

【宁陵网络推广】网站没收录,...

建网站,最烦心的事情莫过于,网站建好了,却久久没被收录。网站没被收录,就没有流量,没流量就没有成交,网站就等于白做了。 所以,SEO优化对于网站是非常重要的,优化好,网...

日期:2018-08-29 浏览次数:67

【青海做网站】主机显示“登录...

有些网友在登录主机控制面板时,会出现登录无效或面板的按钮无法点击或点击无反应的问题。如下图: 一般出现这种情况的原因有以下3种: 用户名或密码输入错误。 OBOX中的管理虚...

日期:2018-08-26 浏览次数:74

随机推荐

企业建站:打造炫酷官网的几个...

网站建设如何突破同质化竞争的...

初期草根站长适合做什么样的网...

网站建设搜索框设计技巧和功能...

对于企业网站建设来说 哪些内容...

利用robots文件做seo优化,让蜘蛛...