北京网站制作：设计师的发展之了解前端

北京网站制作在本文的过程中，我们将对前端开发进行一次重大飞跃，并了解它如何适应我们的更广泛的图景。以下是我们要介绍的内容：

1. 了解前端堆栈

2. DOM的局限性

3. 注意事项

4. 了解事件，状态和响应能力

了解前端堆栈

渲染网站可能是一项非常重要的任务。利用大量设备，浏览器，接入点，带宽，编程语言和环境，构建一致的Web体验可能很困难。感谢浏览器和标准化主体（W3C），我们有一些支柱可以在可能的情况下进行控制; 这些支柱是HTML，CSS和JavaScript。 

结合起来，我们将这些支柱称为前端堆栈。每种语言都有自己的目的，开发人员花费大量时间确保它们不会模糊每个语言的线条，因为它们可以相互渗透。所以，让我们在这里得到基础。商用的现代浏览器：Safari，Edge，Chrome和Firefox之类的浏览器只能理解HTML，CSS和JavaScript。就是这样，三种语言。除Javascript外，HTML和CSS是声明性静态语言。我的意思是你不一定在其中任何一个中“编程”，因为没有真正的逻辑可写（有一些小的例外）。然而，近年来一直在互联网的角落爆发的JavaScript是一种编程语言。

当我试图向学生解释前端堆栈时，我总是觉得引用人体是有用的。考虑到我们在原子设计的背景下谈论，这恰好与我的比喻结束！ 

HTML：超文本标记语言

HTML是你的骨架。它决定了你的结构和姿势。从这样的结构可以得出一定程度的意义。你的头总是先到，颈部，肋骨，臀部，腿部，脚部，一直到你的趾骨。 

我刚才描述的元素的顺序是你的典型人。对于鲸鱼或老虎来说可能有所不同。因此，对于博客，商店或平台，HTML可以是不同的。HTML完全与意义有关，并以有意义的方式向Web浏览器描述页面的内容。它已经成为一种科学，因为谷歌的算法基本上读取这个结构，并从中得出页面实际上是什么。 

外卖：请记住，HTML为您的Web体验提供了一种结构。

CSS：层叠样式表

CSS就是你的样子。头发的颜色，眼睛的颜色，肤色，毛茸茸的，长长的手臂，肌肉，脚趾长度等。甚至你的头发造型，或你的化妆让你看起来像你。 

它唯一的目的是为那些非常简单和无聊的HTML设计风格。如果我们都只是在我们的骷髅中四处走动，吸引力就会成为一个问题。这同样适用于Web体验。

JavaScript的

JavaScript是你的习惯和互动。点击你的指关节，眨眼，微笑，咳嗽，走路的方式，如果你决定跳过或不跳，都是关于交互性的。关于JavaScript的重要一点是，当你关闭浏览器时，它们都被遗忘（一般来说），所以我们可以认为JavaScript是网站中的交互性，当你在“会话”中或正在积极地与之交互时网站。想想点击弹出窗口或导航下拉列表。

你们当中有些人可能会问大脑或“逻辑”的位置，但我们会到达那里。本节最重要的一点是HTML，CSS和JavaScript都存在于浏览器中，它们共同构建一个“静态”Web体验，然后我们可以回到Atomic Design进行优化。 

DOM的局限性

DOM代表文档对象模型。DOM是由用户激活的会话中共存的HTML，CSS和JavaScript的生动呼吸结果。

因为DOM是源代码的生动的呼吸表示，所以理解它具有局限性是很重要的。您在计算机上用HTML，CSS和JavaScript文件编写的代码称为源代码。这个源非常接近地模仿你在DOM中看到的内容，但它不是一回事。DOM是操作和整理这些充满源代码的文件的后产品。当从浏览器请求这些文件时，语言被“解释”并且网站或网页诞生。如果更改源代码，则需要刷新这些源文件的表示形式，以便在浏览器中显示更新的版本。

每种语言都有其自身的局限性。例如，CSS没有特别强大的布局引擎。这意味着在浏览器中生成复杂的布局可能非常简单。HTML没有布局功能，只能为网站提供理解的结构和层次结构。JavaScript作为一种编程语言，具有操作HTML和CSS的能力。由于我们使用三层堆栈来创建任何给定网站的前端，因此它们都需要彼此很好地协作，以及符合一些额外的参数。在我们的示例中，这些参数指的是不同的浏览器，设备，操作系统，浏览器版本等。所有浏览器类型和分销商的DOM或多或少相同，。

注意事项

CSS采用了一种名为Box Model的概念。Box模型包含以下属性：

• 内容：实际内容区域，也许填充文字。

• 填充：围绕内容区域的额外填充并增加背景。

• 边界：边界，在填充之外。

• 边距：将形状本身推离其他元素。

这是一个更好地解释它的图表。

在设计诸如正方形的形状时，它占用的空间包括上述元素。 

“ 可能性永远不会对你有利 ”

是的，五个列网格对开发人员来说不是好兆头。使用evens通常比使用赔率更容易。开发人员倾向于使用像Bootstrap或UIKIT这样的前端框架，这些框架带有包含十列，十二列或更多列的预先计算的网格。向开发人员询问他们计划使用哪个框架（如果有的话）是一个非常好的主意，以便更好地使您的设计与HTML和CSS保持一致

水，不是冰

网络的旧时代已经一去不复返了。由于大部分网站都在向响应性方向发展，因此对流畅布局的需求变得非常明显。网格现在用百分比（10％，30％，50％）的容器计算出来，然后在开发人员指定的某些断点处崩溃。 

字体不是你的朋友

网站上的字体与打印的工作方式截然不同。在自己的计算机上构建网站时，可以使用系统上安装的任何字体。这对你很有用，但是一旦这些文件移动到另一台计算机，源代码就不能再引用你自己计算机上安装的字体，因为它没有连接到它。

有很多方法可以解决这个难题，但您经常会听到开发人员要求设计人员使用Google字体。Google字体是托管在CDN（内容分发网络）上的一组字体，可以由任何与Internet有效连接的计算机访问，这意味着即使我没有在我自己的计算机上安装特定字体，仍然可以在我的网站上呈现。请注意这一点。某些字体也不是为在Web引擎上呈现而设计的。与Web浏览器相比，在Photoshop中查看时，它们可能看起来截然不同。每个程序使用不同的渲染引擎渲染字体。

事件，国家和反应

现在我们已经介绍了一些基础知识，让我们来看看设计师在设计中不会考虑但对用户体验非常重要的一些问题。 

活动

事件是用户在与您的网站交互时所采取的操作。JavaScript有很多需要考虑，但简单的例子包括“click”，“scroll”，“mouseon”或“mouseout”，以及“keydown”或“keyup”。如果您想了解更多有关JavaScript事件的信息，请访问Mozilla。您在此处看到的一些事件不一定是由用户交互触发的。

从设计师的角度来看，一旦用户对其进行操作，了解网站上某些元素或部分会发生什么变得至关重要。例如，点击按钮会发生什么？或者，当点击关闭时，是否有动画应用于模态窗口？这些是您需要提供答案的问题，特别是如果您的项目具有预定义的范围。根据预算和时间表，“交互设计”，因为它在网络社区中被称为，可以花费宝贵的时间从项目中获取。 

州

事件发生后，元素将保留在“状态”中。一个常见的例子是链接。链接有许多状态：活动，焦点，悬停。点击后你的链接是什么样的？在你按下的时候？当鼠标悬停在它们上面？或者当他们被移动触摸时？ 

原子设计在这里真的很方便，因为你的风格指南可以轻松地解释这些状态，同时构建一个原子，如按钮。州可以对您的用户体验产生巨大影响，因此在处理更复杂的网站时要考虑到这一点。

响应

“响应性”热门话语现在已经嗡嗡作响了很长一段时间。作为开发人员，我们需要确保我们的Web体验在所有设备上都是一致的。如果您是自由职业者，几乎每个客户都会要求他们的网站做出回应。它已成为网络的“面包和黄油”。CSS为开发人员提供了一些有用的技术，例如媒体查询，允许开发人员在某些“断点”自定义布局。

Bootstrap和Foundation等前端框架旨在通过为开发人员设计响应式，基于百分比的网格来使响应更容易实现。这里最大的问题不是响应式设计网格的工作方式，而是设计网格的更多功能。 

结论

多数民众赞成这一次！在下一篇文章中，我们将介绍后端以及如何使用原子设计思维模式来提高我们对逻辑和编程技能的理解。

北京网站制作