下一代济南网站建设响应式设计工具：Webflow

为了准备一个关于设计师和开发人员的角色转变，在如何互动几个月前给出的谈话，我采访了20 +的网络商店。 以我自己的经验验证，我发现他们中许多人面临的挑战响应装修设计到他们的工作流程 ，以及大多数网页设计师的角色发生了变化，包括编码以某种形式或另一种。

至少有一半的设计师知道HTML和CSS很好，但想要一个更直观的方式来得到它。 那么，新一代的可视化交互设计工具已经来临。 这些响应式设计工具的人谁了解HTML和CSS（或者是愿意学习），并希望以可视方式设计一个负责任的网站 – 并有代码来显示它。

一些最新的和最显着的视觉敏感济南网站建设者是Webflow的，边缘的Adobe回流CC和金刚鹦鹉。 是的，一百万其他人都在那里，包括Squarespace，FROONT和画架，但我们会集中在少数这篇文章。 我的目的不是为了冠军这些工具，而是让你熟悉他们，并讨论他们的长处和短处。

为了记录在案，我是一个前端开发谁使用多种框架和我自己的代码作为起点（与WordPress的）手响应代码的网站。 我一直持怀疑态度生成的代码，有很好的理由（还记得GoLive的？），但我也明白，像这些工具有一个时间，一个地方，是的，观众，你可以在设计中使用这些工具之一进程创建响应谱曲 ，不管你是否打算使用生成的代码。 我什至考虑使用一些快速原型设计。 亵渎！

所以，让我们来看看，从Webflow的。

Webflow的

像所有的我们将讨论的工具， Webflow的是一个相对较新的场景。 这对于无需盯着代码创建响应的网站在浏览器拖放式编辑器。 它需要一个包月并有多个价格水平的个人和团队。

包括在所有订阅的是举办一个内容交付网络上使用一个子域（ yoursite.webflow.com ），除非你愿意支付几块钱的定制域名托管。 但你也可以简单地导出生成的代码，并把它在那里你想要的。 怎么就这么的Webflow生成的代码，你问？它基于引导3.0，是的，我们中的一些可以编写更干净，更轻便，更语义代码，但总而言之，Webflow的代码也比较干净。

在您注册并登录，你得到的Webflow的仪表盘。 这是你控制你的帐户，管理网站设置并启动您的网站。 默认情况下，有没有什么，除了一个大的蓝色按钮盯着你的脸，要求你创建一个网站。 您可以使用模板或从头开始。 甚至还有一个市场为模板，收费和免费，在那里你可以卖你自己的Webflow的模板。

积木

一旦你开始了一个网站，你正在考虑的Webflow的设计师，奇迹发生的地方。 在设计，目前只在Chrome和支持谷歌金丝雀 （这基本上是Chrome浏览器的开发者，与被添加的新功能几乎每天都有），你会盯着在浏览器中的第一个页面，在左侧工具栏和几个面板右侧。

通用操作（如添加页面，发布和预览）在左边，和基本事实的内容和格式选项是正确。 从右边的“+”面板中，您可以将布局元素（div的或设置为最大宽度或100％的宽度HTML5元素）和一个自定义的网格到默认桌面布局。

有了您的地方基本结构，你可以开始插入页面内容。Webflow的配备了一套标准的网络组件（包括列表，链接和文本块）等一系列定制的小部件（如社交媒体图标和响应滑块），您可以拖动到页面的结构。 对于图像，你可以使用GIF，JPG，PNG或SVG，以及为视网膜和高DPI显示器优化的图像。 您也可以将“嵌入”部件设计到添加自己的代码。

设计

虽然Webflow的是拖放，经验是不是很喜欢在Photoshop或Illustrator设计。 你建立的内容组合在一起更像是一个拼图游戏，用典型的CSS属性，例如定位padding ， margin和position 。

作为一个程序员，我明白如何有效Webflow的视觉显示HTML结构和CSS属性。 因此，工作的HTML和CSS的知识是必要的，而且第一次网站建设者可能会有点用几个选项困惑，但是这是视频的帮助是什么，以及内嵌帮助图标（“？” ）无处不在。

说实话，样式面板右边，在那里你调整大部分的CSS属性，也比较直观，它处理的CSS属性，如道路padding和margin是相当聪明。 CSS编码人员可能会觉得它缺乏，并希望看到的代码。 页之间共享内容是相当简单的 ，和一些SEO相关的内容，如标题和描述，可以为每个页面进行设置。

定义你的响应式设计

当谈到如何将内容实际响应浏览器的大小，Webflow的遵循业界最初是如何处理响应式设计：三个设备或断点。 当您添加和设计的内容和领域，你可以决定哪些（三）设备的规格，它们将出现在。

您还可以轻松地预览设计从界面中的三种尺寸。 目前，断点是不可编辑的设计师，除非你加在仪表板您自己的代码或导出代码和编辑CSS的其他地方。

字体，媒体，表格和链接

• 字体
  这些天来，主持字体是一个必须为任何自我尊重的设计师。 集成谷歌字体或从Typekit帐户套件可在仪表板来完成，然后将这些字体将可以访问在“字体”菜单中的设计区域。
• 媒体
  添加媒体（包括或是Vimeo和YouTube视频），非常的方便，太。 Webflow的使用Embedly从供应商的一个长长的清单中嵌入的内容。
• 表格
  简单的联系表格也可，可设置和很容易设计。 您可以通过电子邮件发送的数据：刚刚从仪表板中的设置抓取的形式捕获的数据，或钩的形式，另一个脚本（或者只是插入您自己的表单代码）。
• 链接
  除了典型的连接选项（如网站的网页，电子邮件和手机之间）的Webflow允许链接到您的网页部分，具有自动插入锚之间平滑滚动。 还可以插入一个链接块，这是内容与加到它的单个链路的区域。 你也可以很容易地通过他们的造型调整您的链接的外观。

工作守则

与大多数其他工具，一些更先进的HTML和CSS的功能在默认情况下在工作区中隐藏的，但可以切换上。 如果你喜欢冒险的感觉，你也可以指定你自己的类内容，并重新命名，并在样式管理器删除它们。 如果你方便的使用代码，你可以插入自己的head和body标记在仪表板。 这将打开大门，以添加自定义组件，像jQuery插件和更大量。

整合与CMS

Webflow的是目前静态网站建设者，而不是依赖于一个内容管理系统（CMS）或博客系统。 你可以从你的Webflow设计导出代码为出发点，以使用一个WordPress（或其他）的项目，甚至作为一个平面文件的CMS。 但一旦代码被导出，它失去了它在Webflow的原始设计连接。

Webflow的一个有用的功能是保存网页版本的能力 。 这些天来，我们大多数人谁开发网站为生使用某种版本控制的，所以在其最简单的形式，我们可以恢复到早期版本，如果发生问题。 当Webflow的设计，你可以手动创建一个版本或离开它的Webflow自动每20节省创建一个。

还原点会在仪表板网站的设置来创建，并且可以在每个还原点添加备注。 然后，如果有事，你可以将整个文件（即网页）恢复到先前保存的版本。 所以，自己写一个音符每一个还原点来解释其中的网址是是一个好主意。

出版和导出

发布到Webflow的内容交付网络（计入成本）是非常简单的，因为如果你喜欢拿其他地方的代码是出口。 我可以想像几种用途是：使用它来创建自己的静态响应网站的人; 用它来演示一个响应式设计或导出的代码，手头宽裕的开发设计人员; 并使用生成的代码块在他们的项目开发。 的Webflow还使用户能够协同工作 （其中成本较高），包括通过分享模板，网站传送给客户等等。

使用Adobe边缘回流CC

边缘回流是边缘工具和服务，使用Adobe近年来先后引进了家庭的一部分。 该系列包括边缘回流，边动画和边缘检查，而且它是创意云，这是基于订阅的一部分。 不像Webflow的，这是基于浏览器的，边缘的回流是目前您下载并安装到硬盘上的应用程序。 因为回流仍然是技术上的公共预览模式 （例如一个测试这是提供给全世界），它不完全尚未出炉，并根据用户反馈在未来的版本中的东西很可能会改变。

边缘回流是一种设计工具，抓住了“在中间人”一个负责任的设计，这往往是很难移交时开了一个开发项目或提出设计概念到客户端时传达。 换句话说，边缘回流使得Photoshop文件的响应友好。

积木

当开始回流中的一个项目，你可以按照以下方法之一。 您可以创建一个回流项目，其中包含您的网站的网页，并从一个空白的画布开始，可以这么说。 您可以导入网页中的图像和Photoshop的内容，然后建立自己的设计; 这样做，你甚至可以将内容直接从一个Photoshop CC文件导入到你的项目中回流（版本14.1±只 – CS6和更早的版本将无法正常工作），如果Photoshop文件（PSD）已设置正确。

第三种方法是将回流项目从Photoshop CC（14.1 +）导出为出发点的响应式设计的回流。 这使您可以导入图形，文本和您的Photoshop文档中所定义的资产。 使用内置到Photoshop CC（14.1 +）发电机技术的基础上，在Photoshop中的图层名称会自动生成Web优化图像。 这种连接是回流的大卖点，对于我们这些谁依靠的Photoshop网页设计之一。

设计

当涉及到设计，回流是相当类似于Photoshop和InDesign。 重新定位的元素在视觉上，而不是编辑CSS和HTML来移动它们。 回流也需要你在绘制设计空间包含元素，而不是将它们拖动的（如在Webflow的）。 该float: left声明适用于回流焊的所有元素在默认情况下，这样拖着内容，在页面上可以是痛苦的开始。 再次，虽然，该应用程序需要你了解HTML和CSS的概念，因为大多数的布局相关的功能是基于他们。

为了帮助您设计，回流配备了一个可编辑的网格，它允许你编辑栏，排水沟和不透明度 。 每个响应断点可以有不同的网格设置。 您可以创建多个页面，并且最接近添加CSS是从一个元素复制并粘贴视觉样式到另一个。 回流焊，您还可以访问为基础的CSS选项body风格（称为“页”）和包含分区（所有回流页面都有）。

定义你的响应式设计

因为响应式设计是回流的目的，在生活中，有一件事，真正突出的是如何直观地定义断点。 在回流，整个反应谱表示（不只是三种设备的尺寸，如Webflow的）。 如果手机和平板之间的设计突破的部分，例如，你可以很容易地通过点击一个按钮，并进行必要的更改添加一个断点。 回流焊甚至允许您设置最大和最小断点​​，这意味着你可以设计移动第一，如果你喜欢。

字体，媒体，表格和链接

• 字体
  从Tyepkit帐户字体可以很容易地在界面中使用，当您连接套件。 回流焊还带有接入边缘Web字体（中托管的Web字体来自Adobe，谷歌和其他的集合）。
• 媒体
  因为除非你编辑生成的代码，在边缘回流添加媒体你不能注入自己的代码是不可能的。 您可以设置一个占位符的媒体（如图像），使用它作为一个视觉提示，用于生产网站。
• 表格
  在回流，您可以添加一系列典型的表单元素，如按钮，文本框和单选按钮（等等）的。 这些插入表单元素在页面中不会添加一个form标签生成的代码; 因此，表单元素并不意味着是功能开箱即用。 这再次提醒我们，回流是目前样机工具，更适合用于创建概念验证的设计比生成生产就绪代码。
• 链接
  在边缘回流CC的最新版本中，您可以链接到该项目中，以及外部URL的网页，以及像控制状态hover和active在设计的任何对象。

整合与CMS

回流焊目前有没有办法用一个CMS，除非你把生成的代码，做它的应用程序之外的自己集成。

工作守则

编辑代码不回流的目的，因为它的意思是作为一个可视化设计工具。 然而，使用元素面板，你可以命名元素和组织代码（即在DOM）中的层次结构，对你有意义（也许给你的开发人员）。 如果你想添加的东西像一个jQuery的幻灯片，平滑滚动或视频，或将自己的HTML代码，那么你需要编辑生成的代码在另一个应用程序。

出版和导出

请记住，边缘回流目前还没有出口或发布功能。 当在预览支持的浏览器的网站，回流生成HTML和CSS，但行内注释警告你不要使用代码在生产环境中。 在边缘回流的论坛上的反应来看，这并没有从停止尝试的人 。 回流焊确实使您能够复制并粘贴生成的CSS使用更下游您的实际网站。

对于里面看回流焊如何产生的，检查出亚伦Shekey帐户的过程 。

金刚鹦鹉

在现场的最新应用是金刚鹦鹉，它只是向公众发布了1.0版3月31日。 金刚鹦鹉被定位为一个网页设计工具，还写语义化的HTML和CSS。 我觉得标语说，这一切，“停止写代码，开始绘制它。”像边缘的回流，金刚鹦鹉也是您下载并安装到硬盘上的应用程序，并连接到一个注册的帐户。 但不像Webflow的和边缘回流CC，没有月租费。 您只需支付一次性的价格。

花了几天的金刚鹦鹉后，我可以告诉你，它有很大的潜力作为一个负责任的网页设计工具。 那是说，这是一个非常令人印象深刻的1.0版，完全用一些错误的好方法。 我来自一个网络的背景，我可以说，界面很直观，但我发现自己缺少像右键单击上下文菜单的基本功能和变焦。 但考虑到极少数人踢这个东西了，不是一个大公司，让我印象深刻。

积木

当您启动一个金刚鹦鹉的项目，你面对的是一个空白页，这是你的设计画布。 你可以开始添加设计元素到页面导入的图像和添加文本框和格式跟他们一起去，或者你可以直接进入补充说，你可能希望使用断点。 金刚鹦鹉的界面非常简单，和一般的设计师真的不会需要很长时间来破译那里的东西 – 那就是，只要有工作的HTML和CSS的知识。

像回流，金刚鹦鹉是非常类似于Photoshop和InDesign在其设计的方法。 你画和重新定位的元素在视觉上，而不必编辑CSS和HTML。 流是计算所有将您的设计元素在静态文件的流动性的引擎的名称。 正如Webflow的和回流，你需要了解HTML和CSS的概念，因为大多数的布局功能是基于他们。

设计

金刚鹦鹉有什么似乎是一个非常有用的功能，称为视图模式，这表明你的页面为“正常”，“大纲”或“线框”的设计元素，因为我们很多人将使用金刚鹦鹉作为一个线框和实体模型工具，看到内容为黑色轮廓（“纲目”）或灰色框（“线框”）会有所帮助。

定义你的响应式设计

在边缘回流一会儿工作过，我很惊奇地发现，类似金刚鹦鹉的工作空间是。 像回流，金刚鹦鹉可以让你直观地定义断点，虽然它的界面是不是华而不实的回流在我看来。 整个反应谱表示（不只是三种设备的尺寸，如Webflow的）。

如果断点之间的设计突破的地方，您可以轻松地添加一个断点，并进行必要的更改。 可悲的是，金刚鹦鹉目前不允许移动的第一个设计，因为你不能设置max和min断点。 DOM中也被锁定在较小的断点，使您无法添加内容（这些工具甚至变灰）。 但是，人们都在喋喋不休金刚鹦鹉的论坛， min-width断点（移动先行的设计）都来了。

字体，媒体，表格和链接

• 字体
  谷歌网页字体都集成在工作区中，您还可以通过连接你的帐户在设计领域的“字体”菜单中访问Typekit字体。
• 媒体
  目前，金刚鹦鹉不提供简单的方法来插入媒体如YouTube视频。 你可以，但是，插入一个占位符元素，并配合一些JavaScript给它，使用“脚本”面板。
• 表格
  金刚有各种典型形式的元素，包括按钮，文本框和单选按钮，可以添加到一个设计的。 正如回流，这些都是视觉表示形式，而不是创建一个实际的工作形式。 如果你喜欢冒险的感觉，你可以将表单元素结合在一起，并切换到该标签form在大纲编辑器。 这将至少给你一个函数形式的积木，如果你打算使用生成的代码在您的网站制作。
• 链接
  您可以在“链接”菜单链接类型链接到一个项目中创建的页面，以及。

工作守则

最接近的代码有金刚鹦鹉的工作（除了编辑出版的代码）编辑元素在大纲面板，这是DOM的表示。 在大纲面板，你可以改变HTML标签，鸟巢和重新排序的内容，应用CSS名称等等。 您还可以创建全局样式（CSS），可以应用到您的内容。

整合与CMS

像回流，金刚鹦鹉不会与CMS集成。 有些人在金刚界正试图找出工作流程从金刚到WordPress的（和其他平台），但没有直接的联系呢。

出版和导出

金刚鹦鹉有通向一个预览窗口中的发布选项。 不像回流，金刚鹦鹉提供了导出选项，在“发布设置”。在对话框中出现，您可以选择要导出的页面，注入代码（如谷歌分析）到head或body ，量身CSS您的需求（通过写速记，增加供应商的前缀，巩固款式等），生成高清晰的屏幕和更优化的图像。

该设置告诉你，生成的代码是不是作秀。 一旦发布，你都考虑到一个预览窗口，在这里你可以查看所有的代码（HTML，CSS，JavaScript的），甚至进入预览页面在您的默认浏览器。 三个应用程序中，金刚鹦鹉的代码是最简洁和最亲密的到什么是前端开发实际上可能写的。

结束语

下面是每个应用程序的最重要功能的快速综述。 它不包括一切，我们已经讨论了（要不然我早就只是页面上的表格耳光，并把它称为一天）。

这些响应式设计工具很可能在这里留下以某种形式或其他。 自从移动设备来到现场，我们一直在试图配置我们的工作流程，以适应响应的设计。 这些工具有可能弥合这一鸿沟使用，也可以作为一个起点，前端设计或简单的线框图和原型时。

正如你所期望的，我已经看到人们试图建立使用回流焊大基于CMS的网站，然后抱怨，当他们不能注入自己喜欢的响应幻灯片或哀叹，代码是不是他们会写什么。 请介意，金刚鹦鹉和回流都意味着是一个工作流，而不是开头和结尾的部分。通过使用这些工具，因为它们的目的（而不是强迫他们进入我们的工作流程），我们可以跨越响应的门槛，有可能挽救自己和我们的客户的时间和头痛。