一直以来网页设计和前端是2个职位，设计负责制作效果图，而前端负责将效果图转化为html代码。因为设计理念的差距，前端工程师往往并不能完全表达设计的意图，因此，如何让设计师设计的效果图和最后呈现出来的网页是一样的效果，就是人们不断研究方向，庆幸的是，这种方向找到了，那就是让设计师通过拖拽式，类似ps的效果图来设计网页，它会直接生成html页面。下面我们就来盘点几个主流的网页设计工具。

webflow

Webflow试图帮助那些毫无编程概念的设计师将自己的创意发挥出来，已经有将近 10000 用户的它最大的特点就是和 Froont 相似的在线响应式网页设计平台，它能够根据浏览网页设备的不同自动对网页进行大小调整和排版，并且兼容的设备平台包括了 PC， 平板和智能手机。最后用户在完成从设计到 CSS 构架之后，甚至可以在线直接将建好的网页发布，而不需要导出代码到其他发布工具上。

image

macaw

Macaw的设计环境由称为Stream的实时布局引擎提供支持，该引擎允许以类似于Adobe Photoshop之类的图像编辑器的方式来操作元素。在幕后，Stream会计算所有必要的属性（浮动，清除，边距等），以像经验丰富的开发人员一样将元素放入静态文档流中。与布局逻辑作斗争的时代已经结束。

image

长期以来，人们一直认为不可能将设计转换为可用的HTML和CSS。但是，Macaw强大的设计到代码引擎Alchemy改变了这种看法。它是从社区收集的最佳实践的基础上完全构建的，它是如此直观直观，以至于您可能会意外地编写漂亮的语义代码。

wix

image

有丰富的设计师提出帮助，并且有着丰富的参考资料，有着丰富的各种类型设计参考。它提供两种设计方案，一种是根据模板类型自动生成设计，一种是自己根据编辑器进行设计，两种方案分别适用于快速开发和精心设计。

image

Layoutit

基于bootstrap的拖拽式网页设计，它的界面比较固化，提供了常用的各种组件，可以方便的生成轮播图，风箱等。

image

使用Layoutit工具可以简单而又快速搭建 Bootstrap 响应式布局，操作基本是使用拖动方式来完成，新增html5 自动保存、开启元素立即编辑模式、增加撤销、重做跟踪操作功能、加入 ckeditor 弹出编辑器。你只需利用这款工具生成原型，便可尽情享受编程的乐趣!

wordpress Elementor

这是一款wordpress的插件，它是目前wordpress插件里面最好的设计工具。

image

使用Elementor编辑网页非常方便，它的编辑界面分为两部分，左侧工具区与右侧编辑区。工具区用来提供我们需要的Elementor小工具，比如按钮、图片、标签、进度条等，你用鼠标可以将它们拖拽到网页中；而右侧编辑区则是我们排版布局的区域，这里是真实网页的实时预览，你可以在这里创建页面结构，把各个小工具集成到一起，构建出漂亮的页面。