Web 设计实战（三） web设计教程

原文：zh.annas-archive.org/md5/7F8B3C6FCF9A035C2A6AD7E31BDFDEBB

译者：飞龙

许可证：CC BY-NC-SA 4.0

第十三章：客户端渲染简介

自Web 诞生之初，我们就知道显示HTML 的传统方式是使用服务器端渲染。后者更好，网站简单，不需要大量交互。但现在情况已不再如此。一个网站有许多需要消息传递、更新、购物和实时数据同步的应用程序。最终用户总是想要更多。

在本章中，您将学习：

什么是服务器端渲染？

什么是客户端渲染？

两者的优点和缺点

VueJS 概述

最后，使用VueJS创建一个天气应用程序

那么什么是客户端渲染呢？客户端渲染是一种主要使用JavaScript 而不是PHP、Python 或Ruby 等服务器端语言来渲染网站的新方式。

要理解其中的差异，您需要了解服务器端渲染的工作原理。

什么是服务器端渲染？

服务器端渲染是渲染网站最常见的方法。当您访问网站时，系统会向服务器发出请求，并以HTML 形式呈现该网站。这通常需要几毫秒，但取决于许多因素，例如互联网速度、位置和访问者数量。

如果您想访问另一个网站，您基本上会向服务器发送另一个请求，然后重复整个过程。如果您的页面有1,000 行代码（就像现在的许多网站一样），这可能会很烦人。

然而，服务器端渲染更适合SEO。 HTML 页面可以被机器人抓取，但是客户端渲染并不那么容易，至少不如服务器端渲染那么容易。

什么是客户端渲染？

另一方面，客户端渲染是使用JavaScript 进行渲染的。您得到的不仅仅是HTML，而是一个简单的HTML 结构，但包含JavaScript 以在浏览器中呈现HTML 的其余部分。

这是一种新方法，最近在Facebook 和Google 等公司的框架开发中受到了关注。

主要区别在于，当您单击查看另一个页面时，JavaScript 会呈现该页面，而不是从服务器请求新页面。这是加载内容的更快方法，因为它只加载需要的内容而不是整个页面。

缺点是SEO 很糟糕，因为内容只有在浏览器中加载后才会呈现。这个问题可以解决，但仍然不容易。

服务器端渲染的优缺点

以下两节简要总结了每种方法的优点和缺点，以帮助您决定在您的项目中使用哪种方法。

服务器端渲染

优势：

改善搜索引擎优化，因为搜索引擎可以抓取您的网站。

第一页加载速度更快

适合静态网站

坏处：

频繁的服务器请求

渲染速度慢

每次都需要重新加载页面

客户端渲染

优势：

初始加载后渲染速度更快

非常适合网络应用程序

对服务器的请求更少

坏处：

如果实施不当，SEO 效果不佳

初始加载可能需要额外时间

大多数情况下需要外部库

介绍 VueJS

如果您想构建一个客户端呈现的网站，可以使用许多JavaScript 框架。 ReactJS、AngularJS 和VueJS 是最著名的框架之一。如果您知道这些是由Google 和Facebook 提供的，这并不奇怪。

VueJS 是最容易学习的之一。这就是为什么我们决定从这个开始。本书的最后一章简要介绍了VueJS，以便您了解它的工作原理和功能。

VueJS 主页

使用VueJS，您可以创建从JavaScript 支持的小部件到放入现有应用程序中的中型应用程序的所有内容。通过JavaScript 控制整个页面，从而重新渲染各个部分，可以实现大型企业级应用程序、整个网页以及包含多个页面的单个页面（至少对于用户而言）。它在构建应用程序的整个过程中都非常敏感。这些由VueJS 提供支持，它渲染DOM 的重要部分，使其看起来好像另一个页面正在加载，但JavaScript 最终处理所有这一切。

为什么JavaScript 运行在浏览器内部，因此如果您只想重新渲染应用程序的一部分，则无需访问服务器并等待响应。这使得该应用程序反应灵敏、触感灵敏，并提供了出色的用户体验。

这就是你可以使用VueJS 做的事情。那么为什么选择VueJS 而不是Angular 2 或ReactJS，这些框架你可能已经知道并且可以做类似的事情呢？首先，VueJS 非常精简并且文件大小很小。对于核心框架，我们讨论的gzip 格式仅为16 KB。

这是一个非常集中且简洁的框架。然而，它不仅更小、加载速度更快，而且运行时也更快，根据一些基准测试，其性能优于Angular 2 和ReactJS。当然，这始终取决于具体应用。

我想现在开始使用VueJS，构建我的第一个小应用程序，并看看它的实际配置方式。

设置 VueJS

开始使用VueJS 并创建您的第一个应用程序实际上非常简单。首先，从vuejs.org（官方主页）开始。您会注意到那里有一个漂亮的“开始”按钮。我们点击它。转到官方文档。无论如何，它值得一看，我会尝试在那里安装它。这里有几个不同的选项，具体取决于您使用的设置。

VueJS安装页面

下载VueJS—— 有多种选项，您可以下载文件或使用提供的CDN。对于本练习，我们将仅使用CDN。只需点击VueJS 提供的链接即可，如下所示。

VueJS CDN

此时无需创建新的HTML 项目。让我们访问jsfiddle.net。

JSFiddle 是一个在线Web 编辑器，可以非常轻松地创建和测试内容。

JS小提琴

只需将VueJS 脚本复制并粘贴到HTML 的块部分即可。

脚本src=\’img/VueJS\’/script

您始终可以通过删除@2.5.16 并将其保留在vue 中来获取最新版本。

脚本src=\’img/VueJS\’/script

现在您已经导入了VueJS，您可以使用它及其所有功能。现在让我们用它来构建我们的第一个小型应用程序。为此，请添加一个段落“Hello, world”。

p

你好世界！

/p

到目前为止，没有什么有趣的。然而，我们想要做的是能够使用VueJS 控制文本。为此，您需要创建一个实例。使用VueJS，只需将以下代码添加到您的JavaScript 文件中：

var 应用=新Vue({

})

现在，我们不希望p 标签成为应用程序，因此我们需要创建一个包含应用程序的div。添加您的身份应用程序。

div id=\’应用程序\’

p

你好世界！

/p

/div

现在您需要调用#app div 并将其设置为应用程序的模板。

var 应用=新Vue({

el: \’#app\’,

})

现在，要用数据填充应用程序，我们需要data 属性。

var 应用=新Vue({

el: \’#app\’,

数据： {

title: “世界你好！”

}

})

你可以称之为标题。接下来，您需要将其链接到您的文本。为此，只需删除文本并添加{{ title }} 或属性名称即可。

让我们通过单击左上角的“运行”按钮在JSFiddle 中运行它。

第一个VueJS 实例

现在，您可能会说，这样做没有意义。没做完。让我们通过添加与p 中显示的文本关联的输入来扩展VueJS 应用程序。

输入v-model=\’标题\’ 类型=\’文本\’

在输入中添加了v-model 指令。这会将文本框绑定到Vue 的标题数据属性。

在这里，您可以尝试在您所写内容之后添加文本。

JSFiddle 练习结束

至此，本次介绍就结束了。如果这一步有任何问题，请访问我的JSfiddlehttps://jsfiddle.net/knee8oha/9/。

对我来说，最好的学习方式就是实践。现在，让我们一起创建一个应用程序来熟悉VueJS。

在 VueJS 中创建一个天气应用程序

在本练习中，您将构建一个在VueJS 中显示某个位置的天气的组件。该组件包括一个位置搜索文本框，允许您搜索openweathermap.org/（一个免费的天气预报API）以获取基于位置的搜索信息。

Vue Material

让我们创建一个简单的HTML 文件。在本练习中，我们将使用另一个库，而不是使用Bootstrap，看看它有多简单。使用Vue Materials，一个基于Google Material Design 的库。您可以在vuematerial.io/上查看。

vue素材

单击“开始”查看安装说明。幸运的是，CDN 和即用型模板是可用的。复制模板并将其粘贴到您的HTML 文件中。

!doctypehtml

html

头

元字符集=\’utf-8\’

元内容=\’宽度=设备宽度，初始比例=1，最小UI\’名称=\’视口\’

链接rel=\’stylesheet\’ href=\’https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|材质+图标\’

链接rel=\’stylesheet\’ href=\’https://unpkg.com/vue-material@beta/dist/vue-material.min.css\’

链接rel=\’stylesheet\’ href=\’https://unpkg.com/vue-material@beta/dist/theme/default.css\’

/头

身体

div id=\’应用程序\’

!– 代码在这里–

/div

脚本src=\’img/vue\’/script

脚本src=\’img/vue-material@beta\’/script

脚本

Vue.use(Vuematerial.default)

新Vue({

el: \’#app\’

})

/剧本

/身体

/html

首先，让我们向head 部分添加一个标头。

titleVue JS 天气应用/标题

Vue 材料提供了可以重复使用的便捷布局。我们希望首先让应用程序成为移动设备并给它一个标题。您可以使用以下代码将其插入到您的应用程序中：

div id=\’应用程序\’

div class=\’页面容器\’

md-app md-waterfall md-mode=\’固定-最后\’

md-app-toolbar 类=\’md-primary\’

div 类=\’md-toolbar-row\’

div 类=\’md-toolbar-section-start\’

span class=\’md-title\’VueJS: 天气/span

/div

div 类=\’md-toolbar-section-end\’

md-button class=\’md-icon-button\’

md-iconmore_vert/md-icon

/md-按钮

/div

/div

/md-应用程序工具栏

md-app 内容

!– 点击此处查看应用程序–

/md-应用程序内容

/MD-应用程序

/div

/div

接下来，在脚本部分安装应用程序。

脚本

Vue.use(Vuematerial.default)

天气变量={

el: \’#app\’

}

var app=new Vue(天气)

app.$mount(\’#app\’)

/剧本

您现在已经有了一个可以使用的完全响应式应用程序。

VueJS应用

组件

我们将创建的第一个组件是主要天气组件。我们需要为其附加三个属性：

数据

方法

模板

数据数组需要以下组件的数据点：

WeatherLocation：保存输入中输入的位置。

WeatherApi：这是OpenWeather API 密钥openweathermap.org/appid

天气：将API的结果存储在该组件中

displayWeather：如果要显示数据，则设置为true 或false（布尔值）。

要调用OpenWeather API，请使用Vue 资源方法.get()。该方法的结果被保存到天气数据点，并将displayWeather数据点设置为true。

OpenWeather API

要访问API，您必须注册并创建一个帐户。立即在openweathermap.org/appid 创建一个帐户。

OpenWeather注册页面

单击“注册”以继续该过程。最后，从API 选项卡访问您的会员仪表板。您可以复制提供的API 密钥。

开放天气API

现在我们看看如何调用API并获取结果。您可以通过查看OpenWeather (openweathermap.org/current) 提供的文档来获取API 调用的示例。

API文档

网址由以下部分组成：

API调用地址

这次调用得到的结果如下（你可以自己测试一下）：

{\’coord\’:{\’lon\’:-0.13,\’lat\’:51.51},\’天气\’:[{\’id\’:300,\’main\’:\’细雨\’,\’描述\’:\’夜光细雨\’,\’图标\’ :\’09d\’}]，\’基地\’:\’站\’，\’主要\’:{\’温度\’:280.32，\’压力\’:1012，\’湿度\’:81，\’temp_min\’:279.15，\’temp_max\’:281.15}，\’能见度\’:1 0000 ,\’风\’:{\’速度\’:4.1,\’度\’:80},\’云\’:{\’全部\’:90},\’dt\’:1485789600,\’sys\’:{\’类型\’:1,\’id\’:5091,\’消息\’:0.0103，\’国家\’:\’GB\’，\’日出\’:1485762037，\’日落\’:1485794875}，\’id\’:2643743，\’名称\’:\’伦敦\’，\’鳕鱼\’:200}

提供的代码为JSON 格式，通常用于显示数据。代码被缩小了，所以很难阅读。让我们使用工具解压它。我使用了unminify.com/。为此，只需粘贴代码并单击“取消收缩”。

{

\’坐标\’: {

“经度”: -0.13，“纬度”: 51.51

}

,

\’天气\’:[ {

\’id\’: 300, \’main\’: \’毛毛雨\’, \’描述\’: \’光强度毛毛雨\’, \’图标\’: \’09d\’

}

],

\’基地\’:\’站\’,

\’主要\’: {

“温度”: 280.32，“压力”: 1012，“湿度”: 81，“temp_min”: 279.15，“temp_max”: 281.15

}

,

\’可见度\’:10000,

\’风\’: {

“速度”: 4.1，“度”: 80

}

,

\’云\’: {

“全部”: 90

}

,

‘dt’:1485789600，

\’系统\’: {

\’类型\’: 1，\’id\’: 5091，\’消息\’: 0.0103，\’国家\’:\’GB\’，\’日出\’: 1485762037，\’日落\’: 1485794875

}

,

“身份证号”:2643743，

\’名称\’:\’伦敦\’,

‘塔拉’:200

}

现在我们有了更多代码，您可以看到数据显示为ID 和值。你可以使用任何一个。对于本练习，选择以下数据：

平均温度

最低温度

最高温度

天气描述

日出和日落时间

开始吧。

API 调用

首先，您需要创建一个包含所有内容的HTML 标记。

让我们在应用程序中创建HTML 标签天气。

md-app 内容

!– 点击此处查看应用程序–

天气/天气

/md-应用程序内容

在脚本部分，让我们创建第一个Vue 函数。

Vue.component(\’天气\’, {

});

正如前面提到的，我们需要数据、方法和模板来显示内容。让我们从数据开始：

Vue.component(\’天气\’, {

data: 函数(){

返回{

天气位置：\’\’,

天气API: \’05911854df7aa0be884df72549a75fd9\’,

天气：[],

显示天气： false

}

},

});

该函数保存：

用户设置位置

API密钥

从API中提取的数据

用于显示或隐藏信息的布尔值

然后你需要添加这样的方法：

方法：{

getWeather: 函数()

{

返回this.$http.get(\’http://api.openweathermap.org/data/2.5/weather?q=\’+ this.weatherLocation +\’appid=\’ + this.weatherApi).then((response)={

this.weather=响应.body;

this.displayWeather=true

}，（响应）={

this.天气=[];

this.displayWeather=false

});

}

},

设置getWeather 函数。该函数执行以下操作：

使用API 密钥和用户配置的位置调用API

存储从API获取的数据，并将显示信息设置为true

如果API 没有响应或内容，则显示信息将设置为false。

最后，您的模板将如下所示：

template: \’div id=\’weatherApp\’\’ +

\’表单v-on:submit.prevent=\’getWeather\’md-field md-iconplace/md-icon labelLocation/label md-input type=\’text\’ name=\’weatherLocation\’ v-model=\’weatherLocation\’/md-input/md -fi

eld>\’ +
\'<md-button class=\”md-primary md-raised\” type=\”submit\”>Search</md-button> \’+
\'</p>\’ +
\'</form>\’ +
\'<div v-if=\”displayWeather\” class=\”container display-weather-section\”><md-card><md-card-header><h1>{{ weather.name }}</h1></md-card-header>\’ +
\'<md-card-content><weather-display v-bind:weatherDisplay=\”weather.weather[0]\”></weather-display>\’ +
\'<temperature v-bind:temperature=\”weather.main\”></temperature>\’ +
\'<clouds v-bind:cloud=\”weather.clouds\”></clouds>\’ +
\'<sun v-bind:sun=\”weather.sys\”></sun>\’ +
\'</md-card-content></md-card>\’ +
\'</div></div>\’
});

然后，我们将把这些信息传递给我们为每个创建的模板。对于天气名称和描述，我们有以下模板：

Vue.component(\’weather-display\’, {
props: [\’weatherDisplay\’],
template: \'<div id=\”weatherDisplay\”>\’ +
\'<h2>{{ weatherDisplay.main }}</h2>\’ +
\'<p>{{ weatherDisplay.description }}</p>\’ +
\'</div>\’
});

我们使用props属性传递数据，使用template属性创建具有该值的 HTML。

然后，我们有温度。我们将显示平均温度、最高温度和最低温度。我们从 OpenWeather API 获取的数据格式是开尔文，所以我们需要创建一个函数来转换温度。

将开尔文转换为摄氏度，您只需要从数字中减去273.15：

Vue.component(\’temperature\’, {
props: [\’temperature\’],
methods: {
displayTemp: function( temp )
{
return parseFloat(temp – 273.15).toFixed(2);
}
},
template: \'<div id=\”temp\”>\’ +
\'<h2>Temperature</h2>\’ +
\'<p>Avg Temp – {{ displayTemp(temperature.temp) }}c</p>\’ +
\'<p>Min Temp – {{ displayTemp(temperature.temp_min) }}c</p>\’ +
\'<p>Max Temp – {{ displayTemp(temperature.temp_max) }}c</p>\’ +
\'</div>\’
});

对于cloud，我们只需要显示文本：

Vue.component(\’clouds\’, {
props: [\’cloud\’],
template: \'<div id=\”cloud\”>\’ +
\'<h2>Clouds</h2>\’ +
\'<p>Coverage – {{ cloud.all }}%</p>\’ +
\'</div>\’
});

最后，我们有日出和日落时间。我们从 OpenWeather 得到的格式是时间戳，所以我们需要将其转换为日期时间：

Vue.component(\’sun\’, {
props: [\’sun\’],
methods: {
timestampToDate: function( timestamp ){
var date = new Date(timestamp*1000);
return date.toString();
}
},
template: \'<div id=\”sun\”>\’ +
\'<h2>Sun</h2>\’ +
\'<p>Sunrise – {{ timestampToDate(sun.sunrise) }}</p>\’ +
\'<p>Sunset – {{ timestampToDate(sun.sunset) }}</p>\’ +
\'</div>\’
});

我们的应用现在已经完成。让我们看看它的样子：

我们的天气应用 – 搜索栏

然后，我们有我们的结果页面：

我们的天气应用 – 结果页面

摘要

这是对 VueJS 的简要介绍。这个框架有很多可能性，我只触及了其中的一小部分。我希望这会引起你对 VueJS 或你选择的任何客户端渲染框架的好奇心。在下一个最后一章中，我将向你展示我每天用来帮助我的工作流程的工具列表。这些工具肯定也会帮助到你。让我们开始吧！

第十四章：帮助您的工作流程的工具

没有相机的摄影师或者没有纸和铅笔的时尚设计师会是什么？正如他们所说，你的工具决定了你的水平。

在本章中，我们将介绍一些我最喜欢的工具，这些工具应该帮助您每天改善工作流程，例如以下内容：

HTML 模板
Lorem Ipsum
CSS 预处理器 – Less
CSS 预处理器 – Sass
ColorZilla
Foundation
Fontastic
webflow
Modernizr
CSS3 生成器
git
Codekit
Animate.css
TinyPNG
Unsplash

让我们开始吧！

HTML 模板

我们已经在我们的项目中使用了这个工具。HTML5 Boilerplate 是最顶尖的前端模板之一。正如其名称所示，这个前端模板是基于 HTML5 的。它是一个库和技巧的集合，可以让您快速（和高效地）开始您的最新项目。HTML5 Boiler 可能是最快的解决方案，让您的项目立即启动：

HTML 模板

无论您想构建网站还是应用程序，您都可以使用 HTML5 Boilerplate 来节省时间，而不会影响性能。

HTML5 Boilerplate 更好的地方在于它在 GitHub 上有一个庞大的社区支持。在极少数情况下，您总是可以找到所需的帮助。尽管 HTML5 Boilerplate 不适用于大型项目，但在您需要立即开始较小项目并且不想从头开始编码时，它是完美的选择。

Lorem Ipsum

我们都熟悉 Lorem Ipsum，即使我们不知道它的名字。设计师使用它来模拟设计项目中的文本。

事实上，Lorem Ipsum 的历史比您想象的要长得多。这不是一种新的设计师技巧。印刷和设计行业在过去 500 年中一直使用这段拉丁文本来复制实际文本的外观：

Lorem Ipsum

然而，您可能会想，为什么要使用 Lorem Ipsum？为什么要使用一种已经不存在的语言来填充空间，而您可以轻松地一遍又一遍地复制和粘贴您的文本这样的短语？

Lorem Ipsum 不仅是一个填充文本，它还提供了一种错觉。在内容中，就像你正在阅读的内容一样，有变化。你会看到两个字母的单词和九个字母的单词。没有重复的模式。

然而，当您使用重复的短语作为文本占位符时，它可能会玷污整个项目。人眼会被重复的模式分散注意力。当然，这会让人们关注您的整体设计，并可能导致客户关注项目中所有看起来不对劲的琐碎事情。

如果您是一个纯粹主义者，您可以在这里使用 Designers Toolbox 的 Lorem Ipsum（Greeking）生成器(http://designerstoolbox.com/designresources/greek/)。这对于传统的 Lorem Ipsum 文本占位符来说是完美的。然而，为了有趣和幽默，可以查看 Bacon Ipsum(https://baconipsum.com/)。

CSS 预处理器 – LESS

想要更多地使用更精简的样式表（LESS）吗？这是 CSS 的一种语言扩展，也是最流行的 CSS 预处理器之一：

LESS

如果您已经熟悉 CSS，那么开始使用 LESS 对您来说将会很容易。事实上，如果您有 CSS 背景，您可能学习 LESS 的时间比阅读本章剩下的时间还要短。

那么，为什么选择 LESS 而不是 CSS？使用 LESS 的最大原因之一是您可以在项目中获得更多的时间。

它的工作方式很像编程语言。 LESS 可以用@符号定义变量。然后，您可以存储一个常量值，然后在整个样式表中重复使用。这绝对是一个值得一试的工具。

CSS 预处理器 – SCSS

LESS 并不是唯一的 CSS 扩展。看看语法上令人愉悦的样式表（SASS）。它是由两种语法组成的脚本语言：原始的缩进语法（给定.sass扩展名）和较新的 SCSS 语法（给定.scss扩展名）：

SCSS

无论您使用哪个版本的 CSS 库，SASS 都与每一个兼容。而且，与 LESS 类似，SASS 是开源的，并得到了庞大的开发者社区的支持。同样，它也向后兼容，这样您就可以转换您的 CSS 文件。

那么，为什么选择 SASS 而不是 LESS？根据您问的人，SASS 更受欢迎，而 LESS 更容易使用。这可能取决于您是更喜欢 Ruby 还是 JavaScript。SASS 是用 Ruby 编写的。然而，最初是用 Ruby 编写的 LESS 已经转移到 JavaScript。您需要 NodeJS 来运行 LESS。

ColorZilla

试图找到完美的颜色，但无法完全复制它吗？

输入 ColorZilla。这个浏览器附加组件是一个吸管，一个颜色选择器和一个渐变生成器。ColorZilla 在 Chrome 和 Firefox 中都可用。ColorZilla 还提供 CSS 渐变编辑器，您可以直接从www.colorzilla.com/gradient-editor/访问：

ColorZilla

对于平面设计师和网页开发人员来说，ColorZilla 是一个救星。这是一个简单的工具，您会发现自己每天都在使用。它可以帮助您从浏览器中的任何页面（或图像）中获取准确的颜色读数。

Foundation

由 Zurb 创建，Foundation 是一个开源的响应式前端框架。

Foundation 是高度可定制的。设计师喜欢 Foundation，因为它与几乎所有浏览器和设备兼容，符合移动优先的要求。当您需要快速设置项目时，包括必须在智能手机上运行的应用程序时，Foundation 是一个明智的选择。您不需要了解或调整后端编码。它对于各种项目都能很好地工作，从原型到 HTML 电子邮件到工作网站：

Foundation

Foundation 可以与您选择的任何 CMS 一起使用。

Fontastic

您是否曾经需要快速更改图标的大小或颜色？添加阴影或其他设计元素到您的图标？

让我们来认识一下 Fontastic。这个神奇的工具允许设计师快速更改图标，以满足任何项目的独特需求。您可以通过创建自己的图标字体来实现这一点。然后，将该字体上传到您的项目中。上传后，您可以使用 CSS 自定义图标的外观和感觉，而无需在 Photoshop 中费力地操作每个图标：

Fontastic (http://fontastic.me/)

它是如何工作的。转到 Fontastic，并从其超过 9,000 个可用图标图像的庞大库中选择图标。接下来，为这些图标分配字母（以创建字体）。

从那里，您可以通过 CSS 修改您的图标。从更改颜色到调整大小，您可以通过编码来完成所有这些，而不是重新绘制并浪费大量时间。

webflow

好消息是，即使您对编码一无所知，您仍然可以设计和构建网站。

webflow 只是你需要的工具。它是一半设计师，一半开发者，完全令人惊叹。您可以直观地设置您的网站设计，然后 webflow 会完成其余工作。它将编写您的网站，使其生动起来，并无缺地运行：

webflow (https://webflow.com/)

这里没有模拟和原型。webflow 创建使用 HTML、CSS 和 JavaScript 的实时和完全功能的网站。

顺便说一句，我提到它也是响应式的了吗？这意味着您不必担心最终项目在较小的屏幕上看起来很奇怪。

如果您想了解代码的质量，您可以放心，webflow 保证代码整洁，不会减慢网站访客的体验。

Modernizr

Modernizr 是一个小型 JavaScript 库，用于自动检测用户浏览器中的功能和/或技术（例如 HTML5）。此工具的目的是根据用户的独特浏览器优化您的网站用户体验。您可以使用 Modernizr 在您的网站上提供愉快的浏览体验，无论浏览器是多新还是过时：

ModerniZR（https://modernizr.com/）

CSS3 生成器

当您需要快速为您的 CSS 创建代码时，您将需要 CSS3 生成器。

从文本阴影到渐变，从多列到过渡，您可以通过简单的 CSS3 生成器做很多事情：

CSS3 生成器（http://css3generator.com/）

好消息是，CSS3 生成器有很多工具可供您使用。通过其中一个工具生成您的 CSS3 片段，然后直接将代码复制到您的项目中。编码并不适合每个人，如果您更喜欢视觉思维，这个生成器快捷方式对您来说是完美的解决方案。

CSS3 生成器是我最喜欢的 CSS3 工具之一，因为它快速、干净且易于使用。

git

以下所有内容对您都是真的吗：

您需要一个版本控制系统来跟踪对文件所做的任何更改
您与许多人一起工作
您需要经常远程或离线工作

然后，您需要 git：

git（https://git-scm.com/）

git 是一个开源的版本控制系统。无论您是在小型项目还是大型项目上工作，git 都是一个不错的选择。其速度和灵活性使其成为一个很棒的选择。

这是 git 的工作原理：

git 与您的本地副本一起工作，可以在离线时执行：

每当您保存工作时，git 都会创建您文件的图像，也称为提交
每次创建此提交时，它都会链接到您的其他提交，这意味着文件上的所有活动都会发生变化
每当您（或团队中的其他人）进行更改时，您的提交都会记录下来
您可以使用它来撤消更改并返回到以前的提交

git 的另一个好处是文件的处理方式。文件存在为修改、暂存或提交状态。在修改状态下，您对文件所做的更改仅存在于本地工作目录中。然后，您可以将这些新修改的文件暂存。当更改成为文件开发的永久部分时，最终阶段是提交。

CodeKit

CodeKit 是用于构建网站的另一个工具。基本上，CodeKit 自动化了许多开发人员的任务，以便构建网站不会花费太长时间。它可以编译任何语言，因此 CodeKit 非常易于使用：

CodeKit（https://codekitapp.com/）

我喜欢 CodeKit 的简单原因是您无需在更改后刷新浏览器。CodeKit 会自动为您完成。所有浏览器都受支持，所有设备都受支持。

另一个放下一切去使用 CodeKit 的原因？网站优化非常容易。CodeKit 允许您通过一键最小化图像高达 70％。您可以使用它来缩小脚本并减少 HTTP 请求。这些类型的优化是确保网站速度快的最佳方法之一。

CodeKit 的拖放用户界面非常流畅和友好。

Animate.css

Animate.CSS 基本上只是为了好玩。从吸引注意力到缩放退出，您会发现数十种 CSS 动画来装饰您的网页设计：

Animate CSS（https://daneden.github.io/animate.css/）

Animate.CSS 打包在一个小文件中。你所需要的一切都包含在那个文件中。从官方网站下载后，你将把样式表放入文档的头部。然后，你可以为所需的元素添加所选择的动画，看着你的想法在屏幕上跳动（或者你选择的任何效果）。所有这些都在 (https://github.com/daneden/animate.css/blob/master/README.md) 的 README 文件中有详细说明。

Animate.CSS 是为你的网页项目增添乐趣和趣味的绝佳选择。由于它是 CSS，所以它轻巧且兼容大多数屏幕。

TinyPNG

我最喜欢的设计师工具之一是 TinyPNG。顾名思义，TinyPNG 可以压缩 PNG 或 JPEG 图像以减小文件大小。然而，它在不降低文件的视觉质量的情况下进行压缩——就像魔术一样：

TinyPNG (https://tinypng.com/)

为了实现网页项目的最大速度，尽可能减小文件大小非常重要。毫无疑问，图像文件通常是网站上最大的文件。这就是为什么：TinyPNG 是一个很棒的选择——它可以减小你的文件大小（通常可以减少 50% 或更多），而不会影响视觉效果。更小的文件大小不仅意味着更快的加载时间，还可以节省你的带宽。

TinyPNG 使用起来速度非常快，如果你注册了专业账户，一次可以上传多达 25 MB 的文件。免费服务则限制为最多 20 张图片，每张最大为 5 MB。

Unsplash

当你需要高质量的照片，但又负担不起聘请摄影师，或者只是需要一些设计的占位符时，Unsplash (unsplash.com/) 就是你的选择。它提供了摄影师上传的开源免费图片：

Unsplash (https://unsplash.com/)

我每天都在使用它，说实话，它已经成为我最常用的网站之一。

总结

我希望这些工具清单能像它帮助我一样帮助你。不要节制地使用它。设计社区的好处在于每个人都喜欢分享自己的工作并互相帮助。设计师和开发者是一个开放的社区，这就是我们社区的真正精神。

#以上关于Web 设计实战（三）的相关内容来源网络仅供参考，相关信息请以官方公告为准！