怎么制作响应式网站(上)

发布时间:2022-05-14 10:03:21 作者: 来源: 浏览量(1750 )
摘要: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文件图层顺序和智能对象的细致程度,我们可以通过图层上移下移来进行调整。

 

以上就是怎么制作响应式网站的七个步骤。

 

扫一扫二维码,直接手机访问此页

扫码访问手机页面

【免责声明】本网站的部分文章信息(文字、图片、音频视频文件等资源)来自于网络,均是为公众传播有益咨询信息之目的,其版权归版权所有人所有。 本站采用的非本站原创文章及图片等内容无法一一与版权者联系,如果本站所选内容的文章作者及编辑认为其作品不宜供大家浏览,或不应无偿使用, 请及时联系我们删除,同时向您深表歉意!请发送邮件153462496@qq.com进行联系。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

在线客服
嘿,我来帮您!