在本教程结束时，您将学习如何在Webflow中创建您的第一个主页，并对如何在Webflow中构建强大的网站有一个坚实的理解——通过可视化编码HTML和CSS。
有很多关于没有代码运动——一波允许我们不用代码就能构建软件的技术浪潮。但代码是互联网的核心。这并不是说不用它来建立网站和应用程序。这一运动实际上专注于通过可视化使编码更容易(和更快)。这意味着，你只需要设计，像Webflow这样的平台就可以为你编写代码。
如果您带着基于基础代码进行设计的心态来使用Webflow，那么您将能够很快地学习它。除此之外，你还可以学习如何编程。
Webflow是什么?
Webflow是一个设计和网页开发工具，电子商务，CMS和托管平台。平台的每个方面都由一个特定的产品/功能集表示:欧宝体育在线首页
设计师
这是一个基于网页标准和最佳实践的可视化网页设计工具设计师将您的设计决策转换为干净的、可用于生产的HTML、CSS和JavaScript。欧宝体育在线首页我们创建它是为了让设计师能够以一种熟悉的方式开发网站——例如，视觉上的——而不牺牲质量。
如果你主要是一个原型，你可以单独使用设计器，或者与开发人员共享原型来再现，或者导出代码。
但是要体验Webflow的全部功能，您需要将设计器与CMS和托管结合起来。
CMS
就像设计师一样CMS是一个无代码的web开发工具。它有内部设计器元素(网站设计人员工作的地方)和现场元素(客户端和/或内容管理人员工作的地方)。我们称后一个元素为Editor，但后面会详细介绍。
现在，只需要知道在设计器中，CMS允许您通过组合模块化“字段”来构建您将反复发布的内容类型——比如博客文章、产品页面等。欧宝体育在线首页一旦创建了我们称为Collections的内容类型，就可以使用Designer来确定Collection项在站点上的外观(就像单个博客文章的外观一样)。
电子商务
Webflow电子商务让您利用设计器和CMS的力量来创建完全定制的电子商务体验。任何Webflow项目都可以转换为电子商务网站，但托管价格与普通网站略有不同。
您可以连接您的电子商务网站使用Stripe、Apple Pay、Paypal或谷歌Pay等支付网关，同时还通过各种集成扩展您的商店功能。
举办
Webflow难题的最后一块是我们的举办平台。它由亚马逊网络服务(AWS)和fast支持，速度极快，超级可靠，具有企业级安全级别，您将需要它来享受我们的一些最好的功能，包括:ob体育app苹果版
- CMS
- 编辑器
- 表单管理
- 响应图像(根据设备自动调整图像大小以提高性能)
- 免费SSL/HTTPS(改进的站点安全性，谷歌基本上使要求访问者信息的站点成为必须)
好了，现在我们已经了解了地形，让我们来谈谈潜水。
设计和构建一个主页
在我们创建第一个空白项目之前，我们需要了解网站是如何从根本上构建在web上的——使用HTML和CSS。
基本原理:盒子模型
网站使用盒模型这一设计原则让我们明白，网页上的一切基本上都是一个框中框。这些框是称为“div”的HTML组件。
在上图中，我们有一个section(用黑色标出)、一个容器(用红色标出)来保持section内所有内容的响应，以及充当容器内内容的各种div(用蓝色标出)。
section、container和div的命名法归根结底取决于如何使用所谓的CSS类设置div的样式和标签。
我们使用CSS来设置这些HTML框及其内容的间距、定位、对齐、字体和样式。我们在每个框中添加所谓的CSS类，这就像为样式设置创建的预设。类可以在整个网站中重复使用，并允许您在构建网站时保持条理。
总结一下:
- HTML是页面上的组件
- CSS就是该组件的设计
恭喜你，你现在对网站是如何建立的有了一个大致的了解。你现在可以做的一个有趣的练习是，打开你最喜欢的网站，比如apple.com，然后打开浏览器的inspect元素。
您可以查看代码(在右边)，并看到所有内容都是一个方框(又名div)。在这些div中有时还有其他div，其中包含标题、段落和按钮等内容。这些都是HTML。你可以看到apple.com的设计者如何为每个组件/元素和div标记他们的类，同时也可以在样式部分查看CSS。
好了，开工吧。
设计中的建筑
学习Webflow的最好方法是实际构建Webflow。为了从这个指南中得到最大的收获，我需要你跟随我完成我们将要完成的所有步骤。
第一步是创建一个空白项目。
在这里你会看到你需要建立任何强大的网站。在左侧，您将看到添加和编辑组件所需的所有内容，在右侧，您将看到设置这些组件样式所需的所有内容。
在Webflow中，Designer左侧的前3个按钮是用于HTML元素的。
第一个是添加元素面板。在这里，你可以添加div、按钮、文本、图像、表单等组件。第二个是可以添加和管理符号的地方。这些是你可以预先保存并在多个页面上重用的部分，比如导航栏或页脚。第三个是Navigator，在这里可以看到组件的层次结构和结构。
在我们将任何元素放到画布上之前，让我们先确定Body(我们所构建的主页)的字体和字体大小。
首先在导航器中选择Body。然后，转到样式面板(在右边)并选择类“Body (All Pages)”。我们对这个类所做的任何样式编辑都可以在我们网站的其他页面上重复使用。例如，如果我们想给所有的页面添加一个主背景色，我们可以在这里这样做。在本例中，我们保持默认的白色。
我们希望通过到Typography并从列表中选择一种字体来建立基本字体和大小。你也可以添加自定义字体在你的项目设置中，这将在下拉菜单中反映。
我们选择了字体Verdana，现在我们要选择基本字体大小。16px是一个标准的字体大小，添加“1.4-”的高度将确保字体高度是字体大小的1.4倍。如果你想了解更多关于高级网页排版和字体设置的知识，请观看这个视频:
好的，让我们添加一些元素。我们将开始添加一个预先构建的导航栏。
接下来，我们将为我们的英雄部分添加一个Section div。打开Section div后，我们可以向其中添加一个类，并将其命名为“Hero Section”，这样我们就可以保持条理，并在导航器中整齐地查看所有元素。
现在我们可以对导航栏进行一些样式更改，首先将背景设置为与Body相同的颜色。
只需选择导航栏中的导航栏，并在样式面板中更改背景颜色。
现在让我们添加一个logo。确保将logo保存为PNG或SVG格式，并将其上传到Webflow项目中的资产管理器中。从那里，你可以拖放图标资产到你的画布上。
现在，让我们调整徽标上的填充，并添加一个额外的导航链接。
添加一个新的导航栏链接就像复制和粘贴一样简单——Mac上使用Command C和Command V, Windows上使用Control C和Control V。
很好，我们有一个简单的导航栏。让我们进入英雄部分。
我们将开始添加一个容器到我们的英雄部分。我们想要重新创建当前的Webflow主页(有点)，所以我们还需要向容器添加一个Grid。
添加Grid之后，可以右键单击它并删除默认的额外行。这样，我们的容器中就有了一个简单的两列网格。
回到框模型，我们还想在每一列中添加一个div，并向它们添加类(Left column Grid和Right column Grid)，这样我们就可以对它们进行适当的标记，并在以后设置它们的样式。
我们向右列网格中添加了一个图像元素，现在我们可以在左列网格中添加内容。
我们从一个标题、一个段落和一个按钮开始。正如你在上面的视频中看到的，我们可以通过将元素拖放到画布上，或者直接拖放到导航器中来添加元素。在使用网格时，在Navigator中对齐内容更容易。如您所见，我们在Navigator中而不是在画布上添加了段落。这是因为元素没有到达我们想要的位置。
现在，我们可以使用右边的样式面板添加内容并设置样式。让我们调整字体大小，并为空格添加空白。
好了，让我们让这个看起来更好一点，从CTA(行动号召)按钮开始。
让我们改变按钮的颜色，并在按钮文本和实际按钮的内边缘之间添加更多的填充。
我们使用边距来创建元素内部的空间，使用边距来创建元素外部的空间。对于分隔标题、段落和按钮之类的内容，我们使用边距，因为我们想在这些元素之间创建空间。但是对于我们的按钮，我们想在按钮元素内部创建更多的空间，所以我们使用了填充。
这将引导我们进入为Hero Section添加填充内容的部分，从而让我们的Grid能够从导航栏中获得一些空间。
在为我们的Hero Section添加填充后，我们还想在右列网格中居中我们的图像，以便与左列网格对齐。
要做到这一点，我们只需要在我们之前做的右列网格上进行选择，在样式面板内，单击居中对齐。这将确保右列网格中的所有内容都落在框的中心。
现在让我们添加一个部分来展示我们拥有的所有客户。
在创建五列网格之后，让我们将网格上的类名设置为Client Logo grid。现在，我们要把我们的logo上传到资产管理器。出于演示的目的，我将使用一个标志五次。
只需将您的标志拖放到网格上的每一列。在删除第一张图像后，我们希望确保我们的标志位于网格的中间。要将logo居中，选择图像，并在样式面板中单击对齐到居中。
因为我们为所有五列使用了相同的logo，所以我简单地复制并粘贴了它们(Mac上的Command C和Command V, Windows上的Control C和Control V)到上面的视频中。
我们刚刚建立了我们的第一个主页!
我不是一个伟大的网页设计师，但希望你有一个更好的理解如何接近Webflow作为一个初学者。如果你能走到这一步，你的Webflow开发技能很快就会得到提升。
作为参考，下面是我的导航器的样子。注意组件的位置:
但是等等，我们只知道这在桌面上看起来很好。平板电脑和手机呢?
使其响应
现在，如果你以前做过响应式设计，你就会知道在这个阶段事情会变得有点棘手。
好消息是:Webflow已经为您做了很多艰苦的工作!为了看到它的实际效果，我们将向下查看位于设计器顶部栏中心的各种设备预览:
现在切换到每个断点，看看它如何影响您的设计。
如果您按照我们的方式设计，Webflow将自动尝试并使所有内容都响应。但如果使用Grid(我们就是这样)，有时需要缩小或移动内容。
我们可以看到，在平板模式或更小的模式下，任何东西都会让我们的特色图像看起来不那么好看。我们的字体也有点太大了，我们的内容也太靠近边缘了。
让我们来解决这一切。
无论我们在平板模式下做什么设计改变，都将反映到更小的尺寸上．所以从平板模式开始，根据需要向下移动。
首先，从修改特色图像的显示方式开始。而不是图像被挤压到右边，我们想把它移动到英雄区域的底部。
为此，单击编辑网格。从那里添加一个额外的行，然后右键单击删除我们的特色图像所在的左边列。这将自动将包含图像的右列网格移到我们创建的新底部行。
一旦发生这种情况，单击右列网格，并通过单击调整中心将图像移动到div的中心。从那里，添加一些顶部空白到右列网格，使其向下。
看起来不错，让我们切换到移动景观模式。
首先我们看到的是字体太大了，让我们减小它。接下来，我们要从边缘引入内容。要解决这个问题，选择整个网格所在的容器，并在两边添加填充。
最后一个，切换到移动竖屏模式。
字体又太大了。让我们缩小标题、段落和按钮文本。
我们完成了!
如你所见，底部的客户端标识保持响应并缩小了自己的尺寸。但如果你想让logo彼此堆叠，请遵循我们在英雄部分中对网格所做的完全相同的过程。
你做到了，你的第一个响应式主页，内置在Webflow中。
你应该感到骄傲，我知道我是。我们刚刚用代码在视觉上开发了整个主页。在Webflow中构建让我们无需实际编写代码就能体验到代码的强大功能。查看我们在本指南中可视化编写的所有HTML和CSS:
要我说，这很酷。如果你有任何问题，请在下方留言，祝你创作愉快!
不用写一行代码，就可以建立完全定制的、可生产的网站欧宝体育在线首页——或者超高保真度的原型。只有Webflow。
更多的资源
如果你想提高你的网页设计技能，我们强烈建议你看看我们的终极网页设计课程以及下面的其他资源:
发表
2021年2月17日
类别
教程
.jpg)
