全国服务热线:0571-88730320

登录/ 注册
您现在的位置是: 首页 > 建站新闻 > 七步零代码生产响应网站,原来可以这么简单!

七步零代码生产响应网站,原来可以这么简单!

来源:温州优帮云 发布时间:2019-11-07 12:55:00

adobe muse 2018,提供响应式网页设计功能。无需编写代码,网页设计人员可以方便地设计出响应式的网页布局。通过下面简单的生产案例,我们可以快速掌握生产过程。其中七个生产过程需要注意它们的顺序,这需要注意。如果这篇文章对你有帮助,我希望你能关注并支持它。

终效果:

一、先做psd模板,不要直接在用户中完成可视化设计。

二、处理psd文件中智能对象与层序列的关系。

三、网页内容和背景图片之间的关系必须分开。(稍后再讨论)首先,做一个断点布局,然后做***宽度匹配。

四、在完成个也是重要的调整之后,开始调整web页面元素的对齐参考点。

五、开始调整768px平板宽度和375px手机宽度的布局。

六、观察内容是否超出当前断点的编辑区域。

七、在连续断点缩放过程中,检查图像缩放规则是否合适。

(1)首先,制作一个好的psd模板,不用直接完成视觉设计,在使用psd模板时只需要做一个好的桌面版本,移动端不需要做,我们在muse中完成。

(2)处理屏蔽门文件中智能对象与层序的关系(注意过程越详细越好,尤其是层序之间的关系,必须分组好)

(此外,具有遮罩和层效果的层需要转换为智能对象并合并遮罩。)

(3)网页内容与背景图像的关系必须分离。进入muse后,需要导入psd,ctrl(com)+d到一个新站点。请注意,选中cilptolayer(剪切层),单击“确定”,然后在左上角对齐布局。

导入psd后,很容发现图层打开和背景图片打开的问题。这些问题取决于psd文件处理的层次性和智能对象的精细性。我们可以通过上下移动图层来调整它们。

想想这个开箱即用的不是去掉遮罩,这时我们需要画一个长方形,然后把它切成背景图像;另外,横幅图也需要画一个长方形,然后把宽度设为。

网页内容与北京图片之间的关系必须用图形来分隔,红色框内的内容是内容,外部是背景区域;我们希望了解背景适合浏览器,浏览器的宽度会随着设备的变化而变化,但内容不变;所以在设计ps时,内容必须是独立的。

首先进行断点布局,然后首先进行宽度匹配。我们建议将基断点的宽度设置为1280px,然后设置拟合宽度,这里设置的是1600 px。在适应过程中,除了调整1600px以下的元件布局外,还可以用摇杆左右拖动,观察过渡过程中是否有问题。

在进行调整之后,开始调整web页面元素的对齐参考点。我们可以看到标题目前在引用的中间,所以当页面缩小或扩展时,他将以页面的中心作为参考点进行缩放;或者可以将其固定在左边,参考元素与页面左侧之间的距离,但左右的固定通常被徽标和菜单使用。

首先调整768px平板宽度和375px手机宽度的布局,然后缩放元素并设置元素的对齐参考点。

观察内容是否超出当前断点的编辑区域通常在不同的断点下。由于未正确选择元素的缩放模式,因此它通常超出断点的编辑区域,并且需要在超过断点后根据需要进行调整。

在连续断点缩放过程中,检查图像缩放规则是否合适。在选择元素后,我们可以在resize中看到,通过调整摇杆的过程可以观察到图片的缩放模式,选择合适的缩放模式;与logo类似,可以固定。

优帮云

致力于网站建设,改变企业营销模式

电话咨询 0571-88730320

联系我们

  • 地 址:杭州市联胜路10号华立云立方
  • 电 话:0571-88730320 17742004931
  • 联 系:方经理
  • Q Q:2885116112
  • 邮 箱:2885116112@qq.com
微信二维码

扫码关注我们