Web-设计实战-全-

Web 设计实战（全）

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

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

自从我开始在这个领域工作以来，我仍然对网络的发展感到惊讶。我一直喜欢互联网是一个快速发展的技术——技术、设计、流程以及一切都变化如此迅速。

《实用网页设计》是一本全面的网页设计师实践指南。每一章都经过彻底修订，提供易于理解和简单使用的信息、技巧和方法。

本书的第一部分是关于网页设计的基础知识。它关注其历史、发展，以及主要组成部分。我们将以逐步的设计工作流程和响应式设计与自适应设计的比较结束本书。

本书的第二部分将教你如何从头开始构建和实施你的网站，介绍 Bootstrap 框架、客户端渲染以及设计工作流程中最好的工具。

本书的受众

《实用网页设计》教读者网页设计的基础知识，以及如何从头开始构建具有交互和动态内容的响应式网站。这是任何想学习网页设计和前端开发的人的完美书籍。适合没有经验的人，也适合有一些经验并愿意提高的人。

充分利用本书

要充分利用本书，最好有一些设计经验，但并非必需。你可以在完全不了解的情况下完成这门课程。

此外，你需要一台运行 Windows 或 OS X 的计算机；你最喜欢的互联网浏览器的最新版本（Chrome、Firefox 或 Safari）；以及一个代码编辑器，在本书中，我们将使用 Atom。

下载示例代码文件

你可以从www.packtpub.com的账户中下载本书的示例代码文件。如果你在其他地方购买了本书，你可以访问www.packtpub.com/support并注册，文件将直接发送到你的邮箱。

你可以按照以下步骤下载代码文件：

  1. 登录或注册www.packtpub.com。

  2. 选择“支持”选项卡。

  3. 点击“代码下载和勘误”。

  4. 在搜索框中输入书名，然后按照屏幕上的说明操作。

文件下载后，请确保使用以下最新版本解压或提取文件夹：

  • WinRAR/7-Zip 适用于 Windows

  • Zipeg/iZip/UnRarX 适用于 Mac

  • 7-Zip/PeaZip 适用于 Linux

本书的代码包也托管在 GitHub 上：github.com/PacktPublishing/Practical-Web-Design。如果代码有更新，将在现有的 GitHub 存储库上更新。

我们还提供了来自我们丰富书籍和视频目录的其他代码包，可以在github.com/PacktPublishing/上找到。去看看吧！

下载彩色图片

我们还提供了一份 PDF 文件，其中包含本书中使用的屏幕截图/图表的彩色图片。你可以在这里下载：www.packtpub.com/sites/default/files/downloads/PracticalWebDesign_ColorImages.pdf。

使用的约定

本书中使用了许多文本约定。

CodeInText：表示文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名。这是一个例子：“让我们创建这个文件夹并将其命名为Racing Club Website。”

代码块设置如下：

<html> <!--This is our HTML main tag-->
 <head> <!--This is our head tag where we put our title and script and all infos relative to our page.-->
  <title>My Page Title</title>
 </head>
 <body> <!--This is where all our content will go-->
  <h1>John Doe</h1>

 </body>
</html>

当我们希望引起你对代码块的特定部分的注意时，相关行或项目将以粗体显示：

.content {
  background-color: red;
  width: 75%;
}
.sidebar {
  background-color: green;
  width: 25%;
}

粗体：表示一个新术语，一个重要词，或者你在屏幕上看到的词。例如，菜单或对话框中的单词会以这种方式出现在文本中。这是一个例子：“然后点击右上角的三个点，然后点击“显示设备框架”。

警告或重要说明会显示为这样。

提示和技巧会显示为这样。

第一章：Web 设计的演变

我仍然记得小时候用 56k 调制解调器浏览互联网的情景。那时候感觉很棒！网站加载得很慢，但它们被设计成尽量减少我们使用的数据，因为每个 kbit 都被计算为使用量（没有无限上网，哈！）。为了理解 Web 设计的工作原理，我坚信我们需要了解它背后的历史，了解开发人员和设计师在 1991 年蒂姆·伯纳斯-李的第一个网站开始时是如何设计网站的。基于表格的网站、动画文本和 GIF 图像、免费页面构建工具的出现，以及 1996 年 Macromedia 引入 Flash 都是 Web 设计领域的重大进步。这将帮助您真正理解 Web 设计原则，了解它的发展方向和重要性。让我们通过这些关键方面来精确了解 Web 设计是如何演变的，并分析它在当代社会日常生活中的重要性。

在这一章中，我们将涵盖以下内容：

  • 有史以来第一个网站：万维网的开始

  • 基于表格的布局：在 HTML 中引入表格标记

  • Flash 的引入：Web 设计的复兴

  • CSS——救世主：网站设计的新方式

  • Web 2.0：JavaScript——Web 的新智能

  • 移动设备的兴起：移动 Web 设计的繁荣

  • 响应式 Web 设计：为移动和桌面设计

  • 扁平设计：新设计趋势的兴起

有史以来第一个网站

有史以来第一个网站是由一位名叫蒂姆·伯纳斯-李的科学家于 1990 年创建的。他是欧洲核子研究组织（CERN）的一位英国计算机科学家。它基本上是一个基于文本的网站，带有一些链接。1992 年的原始页面副本仍然存在在线。它的存在只是为了向人们介绍和告诉他们什么是万维网（WWW）：

随后的大多数网站基本上都是相同的。它们完全基于文本，使用简单的 HTML 标记：

  • <h1>用于标题

  • <p>用于段落

  • <a>用于链接（我们将在我们的 HTML 课程中学习所有这些标记）

HTML 的后续版本允许人们插入图像<img>和表格<table>，从而创造了更多的可能性。

1994 年，万维网联盟（W3C）成立，旨在制定和建立 Web 的标准（www.w3.org/）。主要是为了阻止私营公司建立自己的 Web 语言，因为这将在 Web 上造成混乱。W3C 至今仍在为开放 Web 提供标准，比如新的 HTML5 或 CSS3。

以下是 90 年代的一些网站示例。以下截图显示了 1994 年雅虎网页的外观：

以下截图显示了 1996 年谷歌网页的外观：

基于表格的布局

随着 HTML 中表格标记的引入，Web 设计变得更加有趣。Web 设计师看到了使用原始表格标记（他们总是很狡猾）来构建他们的设计的机会。网站仍然以文本为主，但至少他们可以将内容分成不同的列、行和其他导航元素。1996 年，大卫·西格尔在他的书《Creating Killer Sites》中介绍了间隔 GIF 的使用，这使得 Web 设计师可以利用空白空间（基本上是在内容之间放置小的透明 GIF），并通过合并切片图像背景，用户会产生一个简单结构的错觉，而实际上背后是一个表格布局。设计师们最终可以玩弄一些图形设计元素，比如访问计数器、动画 GIF 等，随着它在流行中迅速增长。文字和图像在网站上随处可见。

我们可以在 1996 年 3drealms 的网站中看到这一点，它展示了设计师们用来添加到他们的网站中的所有花哨的元素：

我们还可以看到 2002 年雅虎网页的演变：

Flash 的介绍

Flash，之前是 Macromedia Flash，现在是 Adobe Flash，是在 1996 年创建的。它就像是网页设计的复兴。如果你今天用 Flash 建立你的网站，人们可能会取笑你，但在那个时候，它是创建交互和图形网站的杀手工具。设计师们能够添加动画、自定义字体和形状、3D 按钮、闪屏页面，而且所有这些都在一个工具-Flash 中。整个内容被封装到一个文件中，供用户的浏览器阅读。就像魔术一样。不幸的是，这种魔法很不方便。它对于搜索引擎优化（SEO）不友好，而且在计算机资源方面非常沉重。

Flash 开始衰落是在 2010 年，当时苹果决定停止在他们的 iOS 软件中支持 Flash（www.apple.com/hotnews/thoughts-on-flash/）。随着 HTML5/CSS3 的新功能，你可以创建动画并添加多媒体内容，设计师和开发者很快就转向了 Flash，至少是在网页设计方面。

以下是一些 Flash 网站的例子。这个截图显示了一个非常基本的 Flash 网站，使用了滑块、动画和交互。你可以在www.richard-goodwin.com/flash/indexn.html查看这个网站。

这是一个令人印象深刻的 Flash 网站，当我开始网页设计时它就存在了，Immersive Garden：

CSS - 救世主

层叠样式表（CSS）在 2000 年代变得更加流行，因为它们在网页浏览器中得到了越来越多的支持。CSS 定义了 HTML 的显示方式，这使得设计师能够将内容和设计分开，使网站更容易维护和加载更快。你可以在不触及内容的情况下改变基于 CSS 的网站的整体外观。

CSS 作为 Flash 的替代品真的起到了很大的作用。W3C 推荐它作为最佳实践，它提供了更清晰的语义，从而实现更好的 SEO。

然而，CSS 的一个缺点是各种浏览器的支持不足：一个浏览器会支持最新的功能，而另一个则不会。这对开发者来说是一场噩梦。

我们将在书的第六章中详细探讨这一点，构建你自己的网站。以下是雅虎网站（2009 年）的一些设计变化：

Web 2.0

21 世纪初期见证了 JavaScript 的崛起。这是事情真正开始朝着我们今天所知道的网络发展的时候。JavaScript 是向网络添加智能的第一种手段。设计师们能够向他们的设计中添加交互、复杂的导航和多媒体应用程序。

尽管网络的最初似乎主要关注设计和美学，但很快就变得以用户为中心，以可用性为主要关注点。设计师们也更加关注颜色分布、位置、对排版的关注，以及使用图标而不是文本链接。最后，Web 2.0 的发展也促进了 SEO 的增长，作为内容驱动。这些技术，如关键词优化、标记和入站和出站链接，现在仍在使用。网络行业真的意识到了 SEO 的重要性，这在这个时期成为了网页设计的主要关注点。

以下是一些网站的例子：

我们可以看到设计上的差异。布局和内容更加结构化。随着MySpace网站，开发者开始为人们创建应用程序进行互动：

移动的崛起

我仍然记得第一部 iPhone 发布时。 对我来说很明显我不会买。 那时我显然不了解自己。 iPhone 最终引发了移动浏览的繁荣。 网络行业的人们没有预料到这一点；用户怎么可能在如此小的屏幕上浏览网站？ 这显然一点也不用户友好。 网页设计师开始设计第二个只在移动上显示的网站。 我仍然记得那些链接以m.domainname.com开头。 维护两个网站绝对是一件麻烦事。 人们开始越来越多地从移动设备访问网站。

2016 年，全球首次移动和平板电脑上网使用超过了桌面使用：

StatCounter 统计 http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide

响应式网页设计

我们第一次听到“响应式网页设计”这个术语是在 2011 年由伊桑·马科特提出的。 在他关于响应式设计的书中，他描述了一种新的设计方式，既适用于桌面，也适用于移动界面，基本上建议在每个屏幕上使用相同的内容，但是不同的设计布局。 960 网格系统的引入也帮助了这个响应式问题（960.gs）。 最流行的版本要么使用 12 列，要么使用 16 列。 对于设计师来说，设计他们的网站使用 12 列桌面，逐渐降级为移动查看已经成为标准。 随着 CSS3 的媒体查询的引入，设计师更容易为移动屏幕设计网站。

我们将在下一章节中更详细地探讨这个主题。

媒体查询是 CSS3 模块，允许内容呈现适应条件，如屏幕分辨率（例如，智能手机屏幕与计算机屏幕相比）。 从左到右，我们有 iPhone，iPad 和桌面版本。 这是网格系统和媒体查询的完美示例（www.wired.com/2011/09/the-boston-globe-embraces-responsive-design/）：

扁平设计

你可能听说过这个术语。 如果没有，扁平设计是指设计风格，其中元素没有样式化的形状和字符，如渐变，投影阴影，纹理和任何使其看起来真实和立体的设计类型。 它通常被描述为与“丰富设计”的相反，后者用于使元素在用户导航时感觉更触觉，真实和可用。

人们经常说扁平设计起源于瑞士风格。 如果你没有听说过这个，瑞士风格（也称为国际排版风格）是 1940-50 年代的主导设计风格，起源于瑞士：

它仍然对许多与设计相关的领域的现代主义运动的图形设计产生深远影响。 它成为了 20 世纪中叶世界各地图形设计的坚实基础。 这种设计风格的主要特征是使用不对称布局，网格，如 Akzidenz Grotesk 的无衬线字体和清晰的内容层次结构。 著名的字体 Helvetica 就是在这个时期创造的，并且在各种类型的设计中都被使用。

毫无疑问，瑞士风格对我们今天所知的扁平设计风格产生了很大影响。然而，这一趋势的主要原因主要是由于在这一时期响应式设计的发展，开发人员和设计师们努力实现了一个严重依赖纹理、投影和背景图像的设计。将这些模式缩小到各种屏幕尺寸，以及由于浏览器兼容性的限制，对设计师来说太过繁琐。他们不得不回归基础，简化他们的设计，使其更少的纹理化。这将导致网站加载更快，更高效，更容易设计。

作为一名设计师，我看到这一趋势正在上升。我仍然记得设计师们测试 CSS3 的最新功能，尝试尽可能少地使用设计资产，同时试图通过代码创建一切。在这个时候，开发人员和设计师的主要关注点是效率和更快的加载。

但我们可以一致同意的是，微软和苹果都对这一趋势产生了重大影响，并进一步推广了这一趋势。随着微软的 Metro 和苹果的 iOS 7 的推出，人们立即感到所谓的丰富设计已经完全过时，并迅速发现他们需要重新设计他们的网站或应用程序。

iOS 6 和 iOS 7 之间的比较

接下来呢？

在审查了所有这些重要的网页设计特点之后，要记住并牢记的一件重要事情是，网页设计趋势并不是由任何特定的个人或公司导致的。网页设计是视觉设计（受印刷设计影响）和网络技术的结合。随着 HTML5 和 CSS3 的进步，我们可以开始看到设计变得比最初的扁平设计复杂得多。技术现在允许人们在设计和形式上拥有更多的灵活性。让我们看看网页设计趋势将如何发展，但要记住它发展得很快，非常快。

摘要

总结这一章，我们看到了互联网是如何由蒂姆·伯纳斯-李爵士创建的第一个网站开始的，以及互联网如何随着多年来表格布局、Flash、CSS 的发展，特别是智能手机的兴起而发生了变化，这改变了用户全球浏览互联网的方式。有了这段历史，我们现在可以跳到第二章，讨论网络组件并解释它们的用途。所以，让我们开始吧！

第二章：网页设计及其组件

在第一章中，网页设计的演变，我们看到自 1990 年蒂姆·伯纳斯-李爵士的第一个网页以来，网页设计是如何演变的。在这些年里，我们看到了新的元素和风格出现在网站设计中。一些元素将帮助用户浏览网站，一些将帮助讲述故事，但最重要的是，所有这些元素都有潜力改善访客的体验。在本章中，我将帮助你了解每个组件，它的用途，以及为什么它有用。让我们深入研究吧！

以下是我们将要涵盖的组件列表：

  • 网格

  • 行动号召

  • 面包屑

  • 搜索栏

  • 图标

  • 模态

  • 排版

  • 颜色

  • 可用性

  • 一致性

网格

如果你还记得，我们在第一章谈到了网格。网格在响应式设计中非常有用，但它们的用途并不止于此。设计师们自印刷设计以来就使用了网格，用于书籍、出版物，尤其是杂志。简单地定义，网格系统是一个帮助设计师结构他们的设计、内容和图像，并使其更易读和易管理的系统。

了解网格非常重要，因为它们将帮助你按比例设计，平衡设计中的元素，组织模块和部分。更重要的是，它将帮助用户以设计网格的一致性和熟悉性进行导航：

网格系统网站(thegridsystem.net/)，对于每个网格系统来说都是一个非常有用的工具，必须要了解。

缺点

任何事物都有优点和缺点，网格也不例外。对于大多数人，特别是那些新手设计者来说，网格系统的第一个缺点是他们可能觉得网格系统在创意上有些限制和重复。这是完全可以理解的，不幸的是，有时你会觉得很难突破思维定式，感觉好像一遍又一遍地创造相同的东西。但请记住，网格不容易掌握，需要练习和经验才能充分利用它的优势。

网格在这里是为了帮助，但就像设计时的所有规则一样，规则是用来打破的。你不一定需要遵循网格，但在打破规则之前，你需要了解它是如何工作的。让我们来看一些使用网格布局的好例子：

kinfold.com

网格的出色使用，优雅而简单。你可以清楚地看到构图和布局。你可以在网站(kinfold.com)上查看。你会发现顶部部分不是网格的一部分，但它仍然与设计完美地融合在一起：

著名的 Bootstrap，基于网格的 CSS 框架

一个很好的练习是尝试在网站上找到网格。并看看它是如何设计的。

行动号召

行动号召（CTA）是一个营销术语，用来定义一个设计元素，它向用户征求并鼓励用户采取行动，最终目标是尝试销售。当你开始作为设计师设计网站时，特别是为营销目的时，你会经常听到这个术语。每个设计师的目标是最大化点击转化率，从而最终实现销售。在设计 CTA 时，以下是一些良好实践的指示。

显而易见

我要给出的建议是，在设计 CTA 时不要太有创意，因为它仍然是一个按钮，人们已经习惯了。随着用户习惯了在线体验，他们知道 CTA 以按钮的形式出现。他们看到一个按钮，就知道该怎么做。简单。让它变大，明显，并且与周围的一切脱颖而出，那就成功了。

这是一个糟糕的 CTA 示例：

来自 Capgemini.com 网站 2017 年的图片。一切权利属于 Capgemini

箭头指向的区域是按钮，是的，我是认真的，你可以点击它。这就是为什么你应该将 CTA 作为按钮，而不是其他形式，尤其不要与内容或标题相似。

使用对比色

使用对比色可以使按钮突出，吸引用户的注意。颜色的选择也很重要，所以要小心你使用的颜色。我们将在本章后面讨论颜色心理学。

这是一个很好的例子：

来自Freelancer.com，一切权利属于 Freelancer International Limited

这个例子很有趣，因为这里的意图很明显是让用户专注于橙色按钮，眼睛会自然而然地转向它。通过使按钮成为对比色，你可以吸引用户的注意力。

引人注目的文案

你在 CTA 中写的内容也非常重要。措辞应该简短。超过十到十五个词的任何内容可能都太长了。简单的陈述是最好的。

这是一个很好的例子，措辞简洁高效：

来自Invision.com的图片

位置

位置也非常重要，CTA 按钮需要放在用户接下来会看到的地方。作为设计师，你可以预测和预测这种行为。你不需要花哨，只需要合乎逻辑：

来自Dropbox.com的图片

这里很直接，你必须点击的地方很明显。CTA 在表单之后放置得很合理。

另一方面，这是一个不太直接的例子：

来自Apple.com的图片

在这个例子中，按钮的放置不直观，用户必须返回到上面才能点击 CTA，而不是在内容之后。

面包屑

面包屑（或面包屑导航）是指示用户在网站或 Web 应用程序上的位置的辅助导航系统。该术语来源于《韩赛尔与格莱特》童话故事，主要角色在故事中留下一串面包屑以便追踪回到他们的房子。就像童话故事一样，网页中的面包屑允许用户从开始的地方找回自己的路。对于复杂的网站或应用程序非常有用，但对于没有逻辑层次结构或分组的单页面网站来说并不是很有用。

以下是一些面包屑的例子。

这里有一个 Google Drive 的例子：

这是一个电子商务网站的例子。(mac-addict.com.au):

搜索栏

搜索栏对于内容丰富的网站（如 YouTube、Facebook 和 eBay）变得更加重要。用户现在习惯使用搜索栏，当他们搜索某物时，他们总是在寻找它。然而，并非每个网站都需要搜索栏。如果你有一个简单直观的网站，内容较少，搜索栏可能就太过了。

以下是设计搜索栏时的一些良好实践的快速提示。

提交按钮

设计师在设计时经常贬低提交按钮，但背后总是有原因的。即使用户可以按Enter按钮，不显示它也不够有价值。用户需要看到还有其他操作可以触发。为用户提供不同的可能性来实现他们的最终目标总是更好的：

上面是一个糟糕的搜索栏和一个好的搜索栏的例子。

使其显眼

让用户寻找搜索框是一种不好的方法。搜索框应该很容易找到，特别是当你的网站上有很多内容时。通过对比或颜色使你的搜索栏突出是很重要的。显示一个完整的开放文本字段也很重要，因为隐藏在图标后面的搜索栏会使搜索功能不太显眼，并增加访问它的点击次数：

这是亚马逊移动网站的样子：

来自Amazon.com的图片

你可以看到亚马逊在移动端专注于搜索栏，而不是隐藏它。

正确放置搜索栏

搜索栏需要突出，但也需要放置得当。由A. Dawn Shaikh和Keisi Lenz进行的一项研究（搜索在哪里？重新审视用户对网络对象的期望）涉及 142 名参与者，结果显示用户最方便的位置是在网站的每个页面的顶部中心或右上角。

来自(blog.wikimedia.org/2010/06/15/usability-why-did-we-move-the-search-box/)

图标

现在图标随处可见，你可以在路标、键盘、界面等地方找到它们。图标帮助我们更好地理解和解释信息。它在任何图形通信中都起着重要的视觉辅助作用。作为设计师，知道何时何地使用图标来服务你的设计是非常重要和关键的。以下是一些快速入门的提示。

简而言之

有趣的是，图标可以快速总结文本的内容。网络用户已经变得更擅长扫描页面，寻找对他们来说相关和有趣的内容。因此，他们只需看一眼图标，就能快速获取他们想要的信息。例如，在这个例子中：

（uber.com）

图标可以快速描述内容，并产生美观的效果。

吸引用户的注意力

一个没有图标的网站可能会很无聊。想象一下一本没有图片的杂志，会有多无聊？对于网站内的图标来说，也是同样的逻辑。此外，有了漂亮的图标，你为你的网站增添了更多的美感，而你的用户也会因为方便而感激你。

来自Paypal.com的图片

看看这张从 PayPal 网站上截取的带有图标的屏幕截图，与我们去掉图标的下一张对比：

来自Paypal.com的图片

第一个肯定比第二个更有趣和吸引人。

方向性

我推荐使用图标的最后一个原因是向用户显示方向。与其显示“上一个”或“下一个”，显示箭头往往更有效，因为用户现在习惯了这种方式：

箭头也可以设计得很好（cars3generations.com/）。

模态

模态框通常是弹出窗口，而不是打开新的标签页/窗口。它们通常会使背景变暗，以吸引弹出窗口的注意。简而言之，模态框用于在同一页面上向用户显示信息，而不需要重新加载页面，从而提高了可用性。

模态框起源于 Windows、Mac OSX 和 Linux，但它们很快就传播到了 Web 应用程序和其他用途。

使用模态框的五种常见用法：

  • 错误：警告用户出现错误

  • 警告：警告用户可能有害的情况

  • 收集信息：从用户那里收集信息

  • 确认或提示：要求用户确认操作

  • 助手： 在使用界面时帮助用户

模态框不应与侧边栏、手风琴菜单、工具栏等无模态组件混淆，因为它们允许用户与父窗口进行交互。

以下是一些模态框的例子：

在Twitter.com上撰写推文时使用模态框：

模态框也用于在登陆网站时获取人们的电子邮件或注意力，比如在Getflywheel.com上。

排版

我仍然记得设计我的第一个网站时，网页设计中的字体非常受限制。只有几种默认字体可用，我们大多数情况下不得不使用超级中性的 Arial 字体。随着 CSS3 的字体支持，现在可以添加自定义字体，这对设计师来说是一种解脱！排版在设计中非常重要，它可以改变访问者的感知。纽约时报（opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/）中有一项研究比较了字体的真实性。看一下这张图表：

权重一致

你可以看到人们倾向于相信 Baskerville 字体中写的信息胜过其他任何字体：

权重不一致

排版在你的设计中真的可以起到作用。不幸的是，我在这里不是为了做一个完整的排版课程，但这里有一些快速选择最佳字体的小贴士。

选择一个与您的品牌相连接的字体

你所做的一切都应该与你的品牌相连接，包括你的排版。你选择的排版将给用户一个关于你的品牌是谁以及是关于什么的想法。基本上有三种不同的字体类别：有衬线、无衬线和手写体。

有衬线字体

有衬线字体很容易通过字母上延伸的小线或笔画来识别。这里有一张图解释了区别：

图表来自visualhierarchy.co/blog/serif-vs-sans-serif/

与有衬线字体相关的情绪通常是经典、浪漫、优雅、正式和成熟的。一些著名的有衬线字体包括 Times New Roman、Baskerville、Georgia 和 Garamond。

无衬线

无衬线字体通常被认为比有衬线字体更现代。与无衬线字体相关的情绪更清洁、友好、简约或现代。一些最著名的无衬线字体包括 Arial、Helvetica、Futura 或 Gotham。

Gotham 字体来自www.typography.com/fonts/gotham/overview/

Gotham 字体在 2000 年代末非常流行。

随意手写体

这些字体旨在表现得像是快速书写的非正式字体。很多时候它们看起来像是用毛笔画的。它们可以代表情感、速度和熟悉感。它们不适合作为正文内容，但可以作为一个非常好的标题来传达情感：

来自创意市场的 Bellisia 字体（creativemarket.com/sizimon/1719182-Bellisia-Script）

不要使用太多字体

这是我经常给年轻设计师的建议，因为他们倾向于在设计中使用太多的字体，我猜是因为太兴奋了。尽量保持设计的一致性，我建议使用一到三种不同的字体，但不要超过三种。使用有衬线字体作为标题，无衬线字体作为正文是一个很好的搭配。

以下是一些良好组合的示例：

Playfair 和 Futura 的组合(www.dogstudio.co/)

另一个好的组合：

GTWalsheim 和 Adobe Garamond 的组合(www.christianaslund.com/the-new-oil-frontier)

最后，GT-Sectra 和 Futura 的组合：

GT-Sectra 和 Futura 的组合(changegout.com/)

如果你想要一个网站来找到排版的好组合，我推荐fontpair.co/。

有不同的方法将字体添加到你的网站中：

  • 你可以使用自己的字体，并使用字体生成器生成与你的浏览器兼容的字体。我推荐www.fontsquirrel.com/。

  • 你也可以使用免费的 Google 字体：fonts.google.com/。

颜色

颜色在网页设计中具有巨大的重要性。根据 Kissmetrics 的说法，当你看到一种颜色时，你的眼睛会与大脑的下丘脑区域进行交流，然后，它会向垂体发送信号，最终到甲状腺。这会导致释放激素，引起情绪、情感的波动，从而产生行为。有趣，不是吗？

同样来自 Kissmetrics 的研究表明，一个网站访客形成判断或意见只需要 90 秒。而 62-90%的互动是由产品颜色决定的。

现在你应该明白为什么颜色非常重要，为什么选择它们的方式、时间、受众和目的至关重要。

颜色的含义

每种颜色在每个人身上都会引发特定的情感。尽管这可能会因文化、背景或偏好而有所不同。以下是颜色含义的快速参考：

  • 黄色：

  • 张扬的黄色应谨慎使用

  • 男性觉得这不雅

  • 孩子们喜欢

  • 橙色：

  • 新的红色，温暖而没有危险

  • 与能量（饮料、运动、健身）相关

  • 孩子们也喜欢

  • 红色：

  • 促使行动，增加呼吸和脉搏

  • 象征激情，是时尚/化妆品品牌、约会和食品的理想选择

  • 紫色：

  • 奢华、优雅和女性化

  • 涵盖了大量女性受众，没有负面联想

  • 黑色：

  • 高雅、传统、企业

  • 卓越和正式

  • 绿色：

  • 成熟，绿色促进健康

  • 适用于健康产品、道德运动

  • 浅绿色表示创新和新思路

  • 蓝色：

  • 受欢迎的蓝色暗示着智慧和宁静

  • 深蓝色与奢侈品相关

  • 浅蓝色适用于清新的产品和创意

  • 抑制食欲，所以不适合食品

  • 粉色：

  • 经典的粉色

  • 经常被过度使用来吸引女性用户的注意

  • 任何女性化和与婴儿有关的东西

  • 它也被认为刺激甜食欲望

  • 白色：

  • 纯净、凉爽、平静和现代

  • 棕色：

  • 大多数人避开这种颜色

  • 男性不喜欢

  • 唤起自然

  • 表示可靠性

例如，如果你想创建一个销售玩具的电子商务网站，你不会使用黑色，因为它暗示着更加高档和优雅。你会更多地在欧莱雅或魅可化妆品等奢侈品牌上使用它：

图片来自Loreal.com。

看看欧莱雅如何使用黑色看起来更奢华，尽管他们并不是奢侈品市场。

当然，记住这些只是指导方针（它们总是取决于上下文）。看看不同的网站如何使用颜色，这总是学习的最佳方式。

可用性

我们之前谈到设计如何演变为以用户为中心的设计。这正是我们现在要研究的，那么什么是可用性呢？可用性简单地定义了用户界面的易用性。通常用五个组成部分来衡量：

  • 可学习性：用户在访问网站时，实现基本任务有多容易？

  • 效率：学习之后，用户重新执行任务或完成其他任务有多有效率？

  • 记忆性：用户在一段时间不使用网站后，再次返回并熟练使用网站有多容易？

  • 容错性：用户从错误中恢复有多容易？

  • 满意度：使用设计有多愉快和令人满意？

在过去几年里，用户已经习惯了网页设计的某些标准，不再容忍加载缓慢、难看或难以浏览的网站。如果你的网站不可用，那么还有很多其他选择。加载速度慢和糟糕的用户体验是增加网站跳出率的因素之一。但是，如果你研究用户的需求和行为，你就能够根据这些来调整你的内容和设计。以下是一些快速指南，让你对应该注意的事项有所了解：

简洁

简洁绝对是我在设计中始终追求的东西之一。有时，页面中简单的 CTA 就足够了，不是在开玩笑！首先尝试定义你的用户需要，然后尽可能简化用户体验。添加没有任何功能目的的不必要元素将不可避免地影响访问者。建筑师的著名语录：

“少即是多”

-路德维希·密斯·凡德罗

在某种程度上是相当准确的。

可导航性

在简洁的延续中，直观的导航对于良好的用户体验至关重要。不要让用户思考。尽量将自己放在最终用户的位置上，使导航尽可能无痛。与朋友或家人进行一些测试总是一个好主意。

以下是一些良好导航的快速提示：

  • 保持主导航简单，放在页面顶部是不错的。

  • 不要忘记在大型网站中加入页脚导航（人们经常使用页脚导航）。

  • 包括一个搜索框（我们之前讨论过为什么要这样做）。

  • 不要使你的导航过于复杂。对项目进行分类，但不要过于深入。

  • 链接应该明显，下划线、加粗或者使用不同颜色，但它们应该总是与内容有所区别。

易访问性

如果你的网站加载时间超过三秒，你需要考虑优化你的网站。如今的用户懒惰且不耐烦。在一个一切都快速且易于访问的互联网世界中，你需要尽可能地让你的网站易于访问。

以下是可用性和易访问性的一些基础知识：

  • 正常运行时间：确保你的网站没有宕机或在加载时出现任何错误。投资于一个良好的托管。

  • 损坏的链接：确保没有死链接。用户不应该跳转到 404 页面。一个好的做法是如果链接无法访问，将用户重定向到一个新页面。

  • 网站响应性：使你的网站适用于每种屏幕，并根据分辨率支持不同的布局。

良好的可访问性的一个很好的例子是亚马逊。他们的网站可以从任何地方访问，而且几乎没有宕机，主要是因为他们也是一个托管公司。但是如果你仔细观察，他们的网站在桌面和平板电脑上都是响应式的，在调整大小时会自适应。对于移动设备，他们有一个自适应网站，具有不同和更清晰的布局，更适应小分辨率。我们将在接下来的章节中看到响应式和自适应之间的区别。

Amazon.com 在台式电脑、iPad 和 iPhone 上

一致性

在审查了所有这些网页设计组件之后，我将以一致性及其重要性结束。一致性无疑是一个良好网站的关键组成部分。它将为你的出色网站或应用程序带来最后一块拼图。想象一个例子，当你想找到你的钥匙，但你知道它们总是在同一个地方，你就不必思考。但如果你找不到它，你会开始紧张地寻找它。对于用户来说，网站也是一样的。你不希望他们每次来到你的网站都要学习。

那么，我们如何保持一致呢？

这些是你应该保持一致的几个领域：

  • 设计

  • 内容

  • 互动

设计

你的设计应该是一致的，这意味着你创建的每个元素，如链接、按钮、输入或标题，都应该遵循你自己的设计风格。用户会记住细节，无论是有意识地还是无意识地，所以他们会因为特定的颜色或形状而认出一个链接。

一个用户界面（UI）样式指南示例。这有助于保持 UI 的一致性：

内容

视觉方面不仅需要保持一致，内容也需要如此。网站上使用的情绪和语气必须反映品牌。如果你是一个面向企业销售的企业网站，你的网站内容既应该看起来，也应该感觉非常专业。

互动

最后，互动在整个网站上必须保持一致。网站如何响应用户的互动应始终保持一致并保持不变。例如，在 Dropbox 上打开文件时，返回按钮始终位于左上角位置，这样用户就不必再次寻找它并重新学习你的界面。

总结

在本章中，我们涵盖了很多主题，但总结起来，网页设计中的每个组件都很重要，对于你的设计来说很重要，但更重要的是对于最终用户来说很重要。有了所有给出的建议，你现在能够创建并使网站看起来很棒，用户友好。

在你开始着手创建自己的设计之前，我想向你介绍下一章，它将讨论响应式和自适应设计，这是你作为设计师或开发者需要了解的内容。让我们开始吧！

第三章：网站设计工作流程

在我们真正开始着手创建和实施我们的第一个网站之前，我希望你能从头到尾地经历一遍所有的过程。网页设计不仅仅是设计美观的网站和漂亮的布局；网页设计是一个整个过程，特别是当你想要在现实世界中实施你的设计时。

在这一章中，我们将涵盖以下内容：

  • 目标确定：如何确定我们的目标

  • 范围定义：列出范围

  • 线框图创建：如何创建线框图

  • 设计：创建出色设计的框架

  • 实施、测试和发布

我们的情况

让我们想象自己作为设计师工作，接受客户工作。你的第一个项目是为一个赛车俱乐部设计网站；以下是项目的简要：

Racing* Club*是一个赛车迷俱乐部，成立于 2016 年。它最初是由一群热爱汽车的朋友创建的，但迅速发展成一个热衷于分享他们的激情的社区。

那么现在，让我们来看整个过程。

目标确定

在这个阶段，你需要确定网站的最终目标。通过与客户沟通并询问他们关于他们的业务和目标的问题。

网站的目的是什么？

现在是确定要解决的问题或为网站设定目标的合适时机。销售门票或增加门票销售？看看你的客户想要什么，并为其找到最佳解决方案。你还需要进行自己的调查，深入了解他们的网站，并寻找需要修复的任何问题。通过之前学习的所有基础知识，你现在能够看到什么是好的，什么是不好的。

网站是为谁设计的？

简化设计过程和决策的最佳方法是了解你的目标受众。了解受众有很多方法。你可以问客户，使用不同的分析工具进行跟踪，或者查看以前关于同一市场的报告，这些都会在这个阶段帮助你。

这对我们的受众有用吗？

你的客户应该对他们的客户有一些信息，比如他们的年龄、收入等。利用这些信息来创建人物角色，并创建适合网站的用户流程。在我们的例子中，赛车俱乐部，我们会创建以下人物角色：

  • 乔治：38 岁，父亲，车库工人，热衷于赛车

  • 保罗：28 岁，单身，从事金融工作，热爱汽车和赛车

两种用户流程将有不同的工作方式，你可以排除任何与我们目标用户无关的流程。

他们期望在那里找到或做什么？

了解并定义网站的信息架构（IA）也很重要。知道要向用户展示什么将决定你屏幕的设计并规划用户体验。

你需要创建一个站点地图并定义你需要做的每个屏幕。首先这样做将极大地帮助你设计网站，因为你甚至不需要考虑它。

网站需要遵循品牌还是有自己的品牌身份？

当你需要遵循品牌风格指南时，设计网站可能会有所不同。由于风格指南将有助于保持品牌的一致性，客户希望你遵循它，即使这可能会在一定程度上限制你的创造力。

如果客户没有品牌身份，这是为他们创建一个品牌的好机会。

有竞争对手吗？如果有，网站与其他网站有何不同？

了解客户的竞争对手也是了解该做什么和不该做什么的好方法。在收集信息的过程中，你需要研究客户的竞争对手。这不仅仅是要做一些完全不同的事情，而是要为客户做好的事情。如果你的竞争对手的一些用户体验很好，可以从中汲取灵感，让你的客户网站变得更好。你通常不需要重新发明轮子，只需要改进它。

所以这就是我们的项目。

我们需要一个具有以下特点的网站：

  • 首页

  • 即将举行的活动页面

  • 往期活动页面

  • 活动页面详情（查看活动信息并购买门票）

  • 博客页面

  • 关于我们页面

  • 联系页面

  • 登录页面（查看购买门票的历史记录）

网站需要响应式设计，以便人们可以在手机上访问。客户没有品牌身份，并且愿意让我们创造一个。

网站的主要目标是首先向用户展示相关信息，然后，如果他们愿意，让他们能够在线购买门票，而不是去实际的地点购买。

网站地图如下：

网站地图示例

定义范围

这通常是设计师的难点：了解和定义项目的范围。项目通常会比预期的时间长，但这不应该是问题，因为这会导致更多的工作。但有时，客户的期望和你的期望并不相同，所以最好设定边界，以防止意外的工作和范围蔓延。将所有内容都写入合同将有所帮助。这里有一些你可以使用的模板：www.smashingmagazine.com/2013/04/legal-guide-contract-samples-for-designers/。

创建线框图

现在我们已经定义了项目的目标，我们可以开始设计一些线框图。

在这个项目示例中，我们只会做几个屏幕。这是我们将用于首页、活动页面和即将举行的活动页面的线框图。线框图不是为了精细和设计，它们只是为了得到布局和内容的想法。所以只需使用你喜欢的设计应用程序的简单矩形，或者甚至可以手绘。

这是我们想出的：

对于活动页面：

这是我们为活动页面想出的设计：

设计

当我设计一个项目时，我总是使用相同的框架：

  1. 获取灵感

  2. 改进

  3. 创新

让我解释一下我在每个步骤中做什么：

获取灵感

我真的认为灵感是设计创作的主要部分之一。寻找和收集灵感对我来说至关重要，因为我需要这些灵感来通过获取一些我认为酷或与这类项目相关的设计片段来制作自己的设计。

以下是我用来寻找灵感的一些网站：

  • Awwwards

  • CSSDesignawards

  • FWA

  • Dribbble

  • Behance

然后我会使用BukketApp来获取图片，并为这个特定项目创建一个情绪板。

改进

一旦你有了情绪板，你就可以开始调整和改进设计。就像拼图一样，尝试通过重新组合形状、颜色等来构成。这是最有趣和最有创意的部分，因为这取决于你的想象力和你创造独特高质量东西的灵活性。

创新

当你最终从上一步得到一些东西时，你现在可以将这个设计扩展到整个设计风格。

这个框架不仅可以应用在设计中，还可以应用在创意或研究过程的各个方面。看看生物学研究，比如仿生学，它模仿自然的元素和部分，解决复杂的人类问题。这个过程本质上是一样的，只是方式不同。

这是我们想出的最终设计：

首页设计：

实施、测试和发布

设计获得批准后，就是实施网页设计的时间了。这是一个非常有趣的阶段，因为你将让你的设计变得生动起来。看到并与之交互将会得到一些有趣的反馈，这些反馈在设计时可能没有看到。

一旦一切都完成了，你需要彻底测试每个页面，并确保每个链接都能正常工作。这也是一个很好的方法，可以将你的网站放在一个暂存网站上，让人们可以在不将其发布到生产服务器上的情况下进行测试。在这个过程中，你总会发现问题或错误。测试将确保你的网站在每个浏览器和每个设备上都能完美运行。这是一个漫长的过程，但必须完成！

最后，大家最喜欢的部分来了：发布是当你看到自己的作品最终上线时，你应该为此感到自豪。但是，仅仅因为你已经发布了网站，并不意味着工作结束了。你仍然可以进行一些 A/B 测试，使你的设计变得更好，永远不要忘记，一个伟大的网站不仅仅是关于美学，而是要找到形式和功能之间的正确平衡。

这最后三个步骤是下一章的一部分，所以我们将逐步进行这个过程。

总结

在本章中，我们经历了从设计网站到发布的整个过程。了解整个过程将有助于你与你的客户和项目。很多人在设计项目时匆忙行事，但在实际设计之前还有很多步骤。特别是如果你在做大量的用户体验设计，花一些时间进行一些研究实际上会为你节省大量的时间和金钱。

在下一章中，我们将深入了解响应式和自适应设计。这两者有着相似的最终目标，但它们是非常不同的。我们将看到其中的区别！

第四章：响应式设计与自适应设计

在设计我们的网站之前，让我们了解响应式和自适应设计之间的区别，以及为什么有必要了解它。了解响应式和自适应设计方法之间的区别对于网页和应用程序设计师来说非常重要。了解这些区别将使您在规划和执行设计时拥有更好的视野和结果。

随着我们现在拥有的设备数量，了解每个设备的需求和行为真的很重要。内容是关键，它需要在每个设备之间流动。正如 Josh Clark 所说的那样，把它看作是在每个设备上冷却的水：

“内容就像水一样。内容会呈现多种形式，流入许多不同的容器，其中许多我们甚至还没有想象过。”

-（也受到李小龙著名语录的启发）

作者/版权所有者：Stéphanie Walter

设计师们仍然混淆这些，并且并没有真正看到两者之间的界限，尤其是年轻的设计师。

在本章中，我们将学习：

  • 响应式设计

  • 自适应设计

  • 哪一个是最好的？

  • 并从中获得启发。

让我们开始吧！

响应式设计

我们在第一章中简要讨论了响应式设计，Web 设计的演变；如果你还记得的话，它描述了一种为桌面和移动界面设计的新方法。基本上是建议在每个屏幕上使用相同的内容，但是不同的布局设计。

更准确地说，响应式网站根据浏览器空间显示内容。如果你在桌面上打开一个响应式网站并改变浏览器窗口的大小，它将动态适应窗口大小并自行排列。

响应式设计的概念最初是由 Ethan Marcotte 创造的，当他写了一篇关于响应式建筑设计概念的介绍性文章时，即一个房间/空间会根据其中的人数自动调整。

“最近，一个名为“响应式建筑”的新兴学科开始探讨物理空间如何对通过它们的人的存在做出反应。通过嵌入式机器人技术和拉伸材料的结合，建筑师正在尝试艺术装置和墙体结构，当人群靠近时会弯曲、伸展和扩展。运动传感器可以与气候控制系统配对，根据房间内的人数调整温度和环境照明。一些公司已经生产出“智能玻璃技术”，当房间内的人数达到一定密度阈值时，玻璃会自动变得不透明，为他们提供额外的隐私层。”

这个想法是在网页设计中有类似的行为。与响应式建筑一样，网页设计应该自动调整给用户。最终目标是在每个设备上都有无缝的体验，主要是通过 CSS（媒体查询）在客户端上实现。

为了更容易理解，看看下面的图表：

在这个图中，你可以看到每个设备上的行为。桌面视图有三列，每列占总宽度的 33.3%。随着屏幕尺寸的减小，这个值增加到 50%，在移动视图上增加到 100%。结果，我们可以看到，内容会根据窗口大小拉伸，因此无论用户使用什么设备，内容仍然可读。

所有规则都在 CSS 文件中制定，因此 HTML 根本没有被修改。这就是为什么 CSS 媒体查询非常强大。

以下是一些良好响应式设计的例子：

Stripe.com 上的响应式布局

来自Stripe网站的上述截图显示，布局完全是流动的，能够伸展和适应各种屏幕分辨率：

Designmodo.com

来自Designmodo网站的上一张屏幕截图显示了非常清晰和清晰的设计，完全是响应式的。您可以看到右侧边栏在平板电脑和移动视图上都消失了。

Bloomberg网站

上一张屏幕截图显示了Bloomberg网站。该网站以其良好的网格响应和让用户专注于内容而闻名。

自适应设计

而响应式设计旨在创建一个通用的外观和感觉，其中一个设计因设备而异，自适应设计则采用了不同的方法。自适应设计旨在检测用户设备并将用户重定向到专为该分辨率设计的网站。

由 Aaron Gustafson 在 2011 年的书Adaptive Web Design: Crafting Rich Experience with Progressive Enhancement中首次提出，自适应设计的主要区别在于在特定分辨率上有一个完全不同的网站。调整浏览器大小对设计没有影响。

自适应设计的最佳示例是Amazon.com，它在平板电脑和手机上显示了一个全新的网站布局：

亚马逊网站在桌面、平板电脑和手机上。

如果您尝试调整浏览器大小，您会发现设计在 999 像素以下不会改变。

您可以使用 Google Chrome 的检查工具来测试网站的响应性或适应性。您只需右键单击并检查任何元素以打开开发者控制台，并单击小图标，如下面的屏幕截图所示。然后，您可以从左侧的下拉菜单中选择任何设备。

带有设备工具栏的 Chrome 检查器

因此，请记住，自适应网站在桌面上是看不到的，即使您调整大小，只能在相关设备上看到。

而响应式设计是在客户端使用 CSS 工作，自适应设计则是在服务器端工作。这确实是两个概念之间的主要区别。

以下是一些其他示例：

Opentable.com

上一张屏幕截图显示了OpenTable网站，该网站在 iPad 视图和 iPhone 视图上有一个自适应网站。看到他们如何完全改变了移动视图的布局是很有趣的：

Adidas.com

来自Adidas网站的上一张屏幕截图显示，Adidas在移动视图（m.adidas.com）上有一个完全不同的网站，外观更动态和用户友好：

最后一个例子将是 Google.com

上一张屏幕截图显示了Google网站。如果您还没有注意到，Google.com在 iPad 和 iPhone 上是一个自适应网站，令人惊讶，不是吗？

那么哪一个是最好的呢？

响应式设计绝对更容易设计和实施。这就是为什么它是迄今为止最受欢迎的创建和设计网站的方法。

然而，它将对每个屏幕的设计控制权降低。在简单的网站上，它看起来相当简单，但在繁重和复杂的网站上，它往往会成为一个真正的头痛——在移动设备上不起作用的组件（广告）或视觉层次结构可能会变得不友好。有时，响应式网站会给人一种“未完成”的感觉，元素似乎是以适应屏幕的方式排列的，但并非为了最佳用户体验而设计。然而，还有另一种方法，即移动优先。这基本上是从移动设备开始设计，然后逐渐扩展到桌面。但它仍然无法解决问题。

移动优先的另一个优势是速度。研究显示，具有自适应网站的公司在加载速度测试中通常表现比响应式网站更好。这是因为响应式网站通常在桌面和移动设备上使用相同的元素/资产，而不是为移动网站具有特定的格式和大小。然而，如今，通过使用媒体查询，可以轻松地克服这个问题，如果响应式网站得到了正确的实施：

指标（默认） 自适应 响应式
响应 568 毫秒 1,202 毫秒
文档完成 1,536 毫秒 4,086 毫秒
网页响应 2,889 毫秒 4,860 毫秒
下载的字节数 2,474,326 千字节 4,229,362 千字节
下载的对象 20 61

Catchpoint 进行的测试。UXPin (www.uxpin.com/studio/blog/Responsive-vs-Adaptive-design-whats-best-choice-designers/)。

自适应设计也有缺点。首先，设计和实施自适应设计通常比设计和实施响应式设计要多得多。管理和维护两个或更多不同的网站需要更多的基础设施和预算。

最后，虽然搜索引擎在识别.com和m.com网站方面变得更加出色，但仍然明智的是，大多数搜索引擎仍然不会平等地对待多个 URL 上的相同内容。

要点

响应式设计是设计跨设备网站的最流行方式。它更容易、更简单，但在设计方面可能会有限制。

优点 缺点
无缝和统一 较少的设计控制
对 SEO 友好 广告无法正常工作
更容易实施 加载时间稍长

自适应设计将被选择用于大型基础设施或复杂网站，以更好地控制设计并在各种设备上提供更好的用户体验。

优点 缺点
允许设计师构建更好的设计和用户体验 在设计和实施网站方面更多的工作
设计师可以优化设备上的广告 对于 SEO 目的来说具有挑战性
加载速度更快

没有好的或坏的做事方式。响应式设计和自适应设计只是值得理解的概念。您甚至可以在单个网站中同时使用它们，使用响应式设计用于个人电脑、笔记本电脑和平板电脑，使用自适应设计用于移动设备。只需记住这一点：在设计网站时，必须始终考虑用户的需求。

总结

在本章中，我们看到了响应式设计和自适应设计之间的区别。了解这些区别将有助于您在实施网站时。

现在我们已经学习了网页设计的基础知识，是时候转到另一边，建立自己的网站了。在下一章中，我们将学习 HTML 的基础知识，以及如何从头开始构建一个 HTML 页面。所以，让我们开始编写我们的第一个网站！

第五章：学习 HTML5

终于是时候开始构建我们的网站了。首先，您需要了解超文本标记语言（HTML）和 CSS 的基础知识。我们将从 HTML 开始，介绍 HTML 是什么。按照 HTML 文档的结构，我们将填充结构，并在途中添加一些图像和链接。

在本章中，我们将涵盖：

  • Atom，我们的文本编辑器

  • HTML 标签和属性

  • HTML 结构

  • 图像和链接

所以，让我们开始吧。

我们的主要工具

在我们真正开始编码之前，我们需要下载一个文本编辑器。这是一个基本上用来编写我们所有代码的程序。在本课程中，我们将使用 Atom；您可以通过此 URL（atom.io/）下载该工具。该程序适用于 macOS、Windows 和 Linux，而且完全免费！

如果您熟悉其他文本编辑器，完全可以使用您自己的。还有一些其他非常好的免费编辑器，如 Sublime Text 3（www.sublimetext.com/）、Bracket（brackets.io/）和 Dreamweaver（www.adobe.com/products/dreamweaver.html）。

一旦您有了文本编辑器，我们就可以开始课程了：

ATOM 文本编辑器

首先，我们需要创建一个文件夹来放置所有我们的项目文件。让我们创建这个文件夹并将其命名为Racing Club Website。完成后，将此文件夹打开为我们的项目文件夹。单击文件|添加项目文件夹...：

既然我们已经安装了超级文本编辑器并设置了项目文件夹，让我们谈谈 HTML。

什么是 HTML？

HTML 是用于创建网页和 Web 应用程序的标准标记语言。结合 CSS 和 JavaScript，您可以创建简单和复杂的网站。

每个网页实际上都是一个 HTML 文件。每个 HTML 文件只是一个纯文本文件，但扩展名为.html而不是.txt。

HTML 标签

HTML 标签是定义您如何对元素和内容进行排序和显示的隐藏关键字。大多数 HTML 标签都有两个部分，一个开放部分和一个关闭部分：

请注意，关闭标签与开放标签具有相同的文本，但有一个额外的斜杠（/）字符。

也有一些例外，比如 HTML 标签<img>没有闭合标签：

<tagname>Content</tagname>

要查看 HTML 文档，您需要一个网页浏览器，如 Google Chrome、Mozilla Firefox、Internet Explorer 或 Safari。

HTML 属性

属性是用于自定义标签的内容，并且它们是在标签内定义的，例如：

<img src="img/image.jpg">

大多数标签的属性是可选的，通常用于更改标签的默认状态。但是，某些标签，如<img>标签，需要src和alt等属性，这些属性对于浏览器正确显示图像是必需的。

HTML 结构

每个 HTML 都遵循一种结构，以便浏览器能够读取页面。总结一下，它总是以<html>标签开头。此标签将包含<head>标签和<body>标签。让我们创建我们的第一个页面，这样您就可以理解了。

创建我们的第一个页面

要创建我们的第一个页面。单击文件|新建文件或Command + N（或Ctrl + N适用于 Windows）。

您现在有一个无标题文件。让我们快速保存并命名它，方法是单击文件|保存或Command + S（或Ctrl + S适用于 Windows），然后将其命名为index.html。

为什么要命名为index.html？因为index.html页面是在访客请求站点时默认显示的默认页面的常用名称。换句话说，index.html基本上是网站的主页名称。

现在我们有了我们的第一个 HTML 文件，我们必须放入必要的标签才能使其工作。必要的标签应按以下方式编写：

<html>  <!--This is our HTML main tag-->
 <head>  <!--This is our head tag where we put our title and script and all infos relative to our page.-->
  <title>My Page Title</title>
 </head>
 <body> <!--This is where all our content will go-->

  This is where all my web page content goes!

 </body>
</html>

只需将代码复制粘贴到你的 HTML 文件中，并用你的互联网浏览器打开文件（我们将选择 Google Chrome）。不要忘记保存你的文档！

你的网页应该如下所示：

在 Google Chrome 中打开的网页

恭喜！你刚刚创建了你的第一个网页！

现在让我们向我们的页面添加一些其他元素。

HTML 元素

HTML 中有许多不同的元素，它们都是为不同的目的而设计的。不是必须要了解所有的元素，但是一些对于网站来说是必不可少的。以下是 HTML 中的一些基本元素。

标题和段落

要在 HTML 中插入标题，有一个名为<h1>的标签，一直到<h6>。数字由标题的重要性决定。

让我们把一个<h1>元素放到我们的<body>中：

<html> <!--This is our HTML main tag-->
 <head> <!--This is our head tag where we put our title and script and all infos relative to our page.-->
  <title>My Page Title</title>
 </head>
 <body> <!--This is where all our content will go-->
  <h1>John Doe</h1>

 </body>
</html>

现在我们有了我们的第一个标题。让我们添加一个段落。要添加一个段落，我们可以使用 HTML 标签<p>：

<h1>John Doe</h1>
  <p>I'm an amazing Designer</p>

你之前学到，对于每个 HTML 标签，我们有一个开放的<tagname>标签和一个关闭的</tagname>标签。这基本上是告诉你你的元素何时结束。你也可以在一个标签内添加另一个标签。例如，如果我们想要使一些文本加粗。

让我们使用我们的<p>标签，并在amazing单词中添加一个<b>标签使其加粗：

<p>I'm an <b>amazing</b> Designer</p>

这是你在浏览器中应该看到的：

太棒了！你刚刚把文本加粗了！现在让我们添加一些表单。

使用表单，无论你想从用户那里获取什么类型的信息，你都需要使用<input>标签来获取它们。

有许多不同类型的输入，但是，现在我们将涵盖email和submit。

input标签是不需要闭合标签的例外之一；让我们把它添加到我们的段落中：

<input type="email">

HTML 属性

你可以把属性看作是每个标签的选项

但是email输入如果没有提交按钮就不会有任何作用！让我们添加另一个输入类型，submit：

<input type="submit">

让我们看看我们现在有什么：

这是你在浏览器中应该看到的。用Ctrl（或Cmd）+ S保存你的 HTML 文档，然后刷新你的浏览器。

太棒了！但是我们可能会有一点问题。我们实际上没有说用户应该在email输入中输入什么。幸运的是，有一个名为placeholder的属性，让我们可以向我们的输入添加默认文本，这样用户就知道应该输入什么：

<input type="email" placeholder="Your email">

太棒了！现在你可以在我们的电子邮件输入中看到我们的占位符。

这是你在浏览器中应该看到的。用Ctrl（或Cmd）+ S保存你的 HTML 文档，然后刷新你的浏览器。

链接和图片

我们的最后一部分将是添加图片和链接。

网页如果没有图片会很无聊。要添加一张图片，你需要添加一个<img>标签：

img 标签结构

你需要添加src属性来放置你的图片位置。

但首先，让我们创建一个文件夹来放置我们所有的图片。回到你之前创建的主文件夹Racing Club Website。在里面，让我们创建一个名为images的文件夹。

在 GitHub 上的代码包中的Images文件夹中，你可以看到一个名为designer.jpg的图片；让我们把这张图片复制粘贴到我们的images文件夹中。

现在我们在images文件夹中有了图片，我们可以将它链接到我们的img标签。为此，添加以下内容：

<img src="img/designer.jpg">

你可以在src属性中放置两种不同类型的 URL。相对 URL，比如我们放置的这个，只有在链接到与当前页面相同域的文件时才有效。因为我们是在本地进行操作，所以被视为相同域。绝对 URL，包括http://的 URL，会将你引导到图片目录，例如http://philippehong.com/img/image-example.jpg。

现在让我们添加一个链接。链接使用<a>标签和href属性添加。

您可以在href属性中放入两种不同类型的 URL，就像您可以为图像一样。这次让我们放入一个绝对 URL，添加我们的 Twitter 页面：

<a href="http://twitter.com/philippehong">My Twitter</a>

但我们仍然需要在<a>标签内添加一些文本才能使其可见。

您的 HTML 文档应如下所示：

<html> <!--This is our HTML main tag-->
  <head> <!--This is our head tag where we put our title and script and all infos relative to our page.-->
    <title>My Page Title</title>
  </head>
  <body> <!--This is where all our content will go-->

    <h1>John Doe</h1>
    <p>I'm an <b>amazing</b> Designer</p>
    <input type="email" placeholder="Your email">
    <input type="submit">
    <img src="img/designer.jpg">

    <a href="http://twitter.com/philippehong">My Twitter</a>

  </body>
</html>

请注意，您可以看到代码已经准备就绪。让我们保存我们的 HTML 文档，看看它在我们的互联网浏览器中的效果：

这是您在浏览器中应该看到的内容。使用Ctrl（或Cmd）+ S保存您的 HTML 文档，然后刷新您的浏览器。

它看起来非常简单，但这是因为我们没有添加任何 CSS。

摘要

在本章中，我们学习了 HTML 的所有基础知识。我们了解了 HTML 标签、属性，以及 HTML 页面的整体结构。

在我们进入下一章之前，我们在本章学习的标签并不是 HTML 中唯一可用的标签。HTML 中有很多标签，您可以在本书末尾的术语表中查看它们。当我们创建自己的项目时，我们还将使用一些新的标签！现在让我们给我们的页面添加一些样式！

第六章：学习 CSS3

层叠样式表（CSS）允许您控制 HTML 内容的样式，更改颜色、字体、布局等。它相当容易理解，在本章中，我们将解决以下主题：

  • 使用 CSS 的方法

  • CSS 格式

  • 父元素和子元素

  • 类和 ID

  • CSS 框模型

  • CSS 布局和分隔符

使用 CSS 的不同方法

有三种使用 CSS 的方法：

  • 在具有style属性的 HTML 标签内（这种方法不推荐，但您仍然可以稍微使用）：
<p style'"font-size:12px"></p>
  • 在具有<style>标签的 HTML 文档的<head>部分内：
<style>
  p {
    font-size:12px;
  } 
</style>
  • CSS 代码也可以放入外部文件中，并使用<link>标签链接到 HTML 文档。文件扩展名将保存为.css文件：
<link rel="stylesheet" href="css/style.css">

对于此示例，我们将使用第二个选项，但是当我们开始构建自己的网站时，我们将学习第三个选项。

让我们从在<head>部分中添加<style>标签开始：

<head> <!--This is our head tag where we put our title and script and all infos relative to our page.-->
  <title>My Page Title</title>
  <style>

  </style>
 </head>

CSS 格式

我们现在准备好放入我们的 CSS，那么 CSS 的格式如何？

CSS 很简单理解：

  • 选择器：这是您选择要添加样式的 HTML 元素的位置。在此示例中，我们选择所有<h1>元素。

  • 大括号：这些括号内的所有样式将应用于选择器选择的 HTML 元素

  • 属性：属性控制 HTML 元素样式的一个方面，例如 text-align、color、width、background 等。

  • 值：值传递给属性。在这种情况下，text-align 的值可以是 left、right、center 或 justify。

  • 分号：在属性的末尾应用它是强制性的。

您可以在同一个<style>标签中拥有多个样式。让我们居中所有h1和p标签。

您应该有以下内容：

<style>
 h1 {
  text-align: center;
 }
 p {
  text-align: center;
 }
</style>

父元素和子元素

如果您想要居中所有文本而不仅仅是<h1>和<p>？有一种简单的方法可以实现。您必须了解父元素和子元素。基本上，如果您为父元素设置样式，则所有子元素将具有相同的样式，除非您为子元素指定特定样式。以下是我们的示例：

<body> <!--This is our parent element -->
  <h1>John Doe</h1>
  <p>I'm an <b>amazing</b> Designer</p>
  <input type="email" placeholder="Your email">
  <input type="submit">
  <img src="img/designer.jpg">
  <a href="http://twitter.com/philippehong">My Twitter</a>
</body>

<body>标签是其中包含的每个元素的父元素，其中包括<h1>、<p>、<input>、<img>和<a>元素。

让我们删除以前的样式，并使用text-align: center;样式<body>元素：

<style>
  body {
    text-align: center;
  }
</style>

让我们保存 HTML 文档并在 Chrome 中重新加载页面。请注意，每个元素都具有属性text-align: center;。

类和 ID

我们已经了解了如何使用 CSS 选择 HTML 标签，但是大多数情况下，您将拥有多个相同的 HTML 标签，例如<p>或<a>。我们如何区分它们，以便只选择和设置特定的样式？这就是类和 ID 的作用。它们用于选择您已经放置了id或class属性的特定 HTML 标签，例如：

<div id="header"></div>
<p class="big"></p>

要在 CSS 中选择此 ID header，我们需要写一个井号（#）字符，后面跟着元素的 ID，在本例中是header：

#header {
  margin-left: 10px;
}

要选择类，我们需要写一个句点（.）字符，后面跟着类的名称：

.big {
  font-size:20px;
}

那么 ID 和类之间有什么区别？唯一的区别是 ID 在 HTML 文档中只能使用一次，而类可以多次使用。我们还需要知道以下内容：

对于 ID：

  • 每个元素只能有一个 ID

  • 每个页面只能有一个具有该 ID 的元素

对于类：

  • 您可以在多个元素上使用相同的类

  • 您可以在同一个元素上使用多个类

例如，我们可以有以下内容：

<div id="header" class="big red blue"></div>

这意味着<div>元素具有 ID header 和类 big、red 和 blue。

现在让我们在文档中添加一些类和 ID：

<body> <!--This is our parent element -->

  <h1 id="my-name">John Doe</h1>
   <p class="text">I'm an <b>amazing</b> Designer</p>
   <input class="form" type="email" placeholder="Your email">
   <input class="button" type="submit">
   <img class="image" src="img/designer.jpg">
   <a class="link" href="http://twitter.com/philippehong">My Twitter</a>

</body>

正如您所看到的，我添加了一些非常简单的 ID 和类，以便您了解它是如何工作的。当涉及到使用 ID 和类的最佳实践时，我们将详细介绍。

现在我们有了我们的 ID 和类，让我们为我们的 CSS 添加一些样式。 为此，让我们选择我们的第一个 IDmy-name，并使其更大和带下划线。 为此，我们将使用 CSS 属性font-size和text-decoration：

<style>
  body {
    text-align: center;
  }
  #my-name{
    font-size: 50px;
    text-decoration: underline;
  }
</style>

现在让我们来设置一些类。 例如，让我们在我们的 HTML 文档中添加另一个<p>标签，就在我们的链接之前，如下所示：

<body> <!--This is where all our content will go-->

  <h1 id="my-name">John Doe</h1>
  <p class="text">I'm an <b>amazing</b> Designer</p>
  <input class="form" type="email" placeholder="Your email">
  <input class="button" type="submit">
  <img class="image" src="img/designer.jpg">
  <p class="text">Follow me on Twitter</p> <!--Added text-->
  <a class="link" href="http://twitter.com/philippehong">My Twitter</a>

</body>

现在我们有两个具有相同类的元素，让我们看看当我们想要通过添加font-family属性来样式化类text时会发生什么：

<style>
  body {
    text-align: center;
  }
  #my-name{
    font-size: 50px;
    text-decoration: underline;
  }
  .text {
    font-family: Arial;
  }
</style>

保存您的 HTML 文档并刷新您的浏览器。 这是您应该看到的：

这应该改变具有类text的元素的字体。 您可以看到两个元素都已更改。

CSS 框模型

所有 HTML 元素都可以看作是框。 CSS 框模型允许我们定义元素之间的空间。 无论您想要添加边框、设置边距还是在元素之间添加填充，您都需要了解框模型。 在实施设计时，了解这一部分将对您有很大帮助。

盒子

框模型由四个属性组成：

  • 内容：文本、图像等

  • 填充：内容周围的透明区域，位于框内

  • 边距：盒子之间的空间

  • 边框：围绕填充和内容

请查看以下图表，以便更好地理解：

CSS 框模型可以如前图所示描述。

框模型还可以让我们设置元素的高度和宽度。 通过以下设置内容的宽度或高度：

Width: 200px;

内容的宽度将为200px。

现在，标准框模型的讨厌之处在于，您只能设置内容的宽度和高度，而不能设置整个框本身的宽度和高度，这意味着填充、边距和边框将添加到我们指定的宽度和高度中。 这相当让人讨厌：

使用属性 content-box 的框模型

幸运的是，我们可以通过使用box-sizing属性来抵消这一点：

box-sizing: border-box;

通过将box-sizing设置为border-box，我们现在将设置整个框的宽度和高度：

使用属性 border-box 的框模型

块和内联

关于框模型还有最后一件事。 在 HTML 中，有我们所谓的块级元素和内联元素。

块级元素：它使用浏览器的整个宽度，并始终从新行开始。 您可以将它们视为需要一个接一个地堆叠的块。 标题和段落是块级元素的一些示例。

块级元素的示例：

  • <div>

  • <h1> - <h6>

  • <p>

  • <form>

块级元素用红色框表示

内联元素：内联元素不会从新行开始，只会占据必要的宽度。 看一下蓝色元素的示例：

内联元素用蓝色框表示

以下是内联元素的示例：

  • <span>

  • <a>

  • <img>

CSS 布局和分隔符

现在我们了解了框模型的工作原理，我们可以尝试为我们的 HTML 页面构建一个简单的布局，如下图所示：

我们的布局将有一个带有右侧边栏的容器，并在底部有一个页脚。 这是许多网站的非常基本的布局。

此布局将位于一个容器内，该容器将居中于页面。 没有多余的话，让我们开始吧！

基本布局

为了创建我们的基本布局，我们将使用<div>元素。 <div>元素是最常用的 HTML 元素。 <div>代表分割，我们只是用它来通过创建放置内容的框来将我们的页面分成部分。

让我们在<style>部分清除我们的 CSS，从头开始。

我们将首先添加一个<div>元素来包装我们创建的所有内容，然后给它添加一个类container：

   <div class="container">
     <h1 id="my-name">John Doe</h1>
     <p class="text">I'm an <b>amazing</b> Designer</p>
     <input class="form" type="email" placeholder="Your email">
     <input class="button" type="submit">
     <img class="image" src="img/designer.jpg">
     <p class="text">Follow me on Twitter</p> <!--Added text-->
     <a class="link" href="http://twitter.com/philippehong">My Twitter</a>
   </div>

格式化和缩进您的 HTML

您可以在我的 HTML 文档中看到我的代码是缩进的。代码缩进适用于每种语言，使其更易于阅读和结构化。缩进的基本方法是使用Tab键将内容向右移动一步：

这是您应该具有的基本结构和缩进。

样式化我们的类

让我们首先对我们刚刚创建的container类进行样式化。为此，让我们转到我们的<style>部分并添加以下内容：

<style>
  .container {
    width: 960px; 
  } 
</style>

这将把width属性设置为具有类container的<div>为960px。

我们希望我们的容器居中显示在页面上。为了做到这一点，我们需要添加margin属性，如下所示：

<style>
  .container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

添加margin-left: auto;和margin-right: auto;意味着左右边距会根据元素的上下文（在这种情况下是浏览器窗口）自动调整：

有很多种方法可以使用 CSS 来使元素居中；这是第一种方法。我们将在接下来的章节中了解其他几种方法。

现在让我们按照我们想要的布局创建我们的content元素。

在我们的<div class = "container">内部，让我们添加我们的<div class = "content">。同样，让我们将我们的内容移动到这个div中，如下所示：

<body> <!--This is where all our content will go-->
 <div class="container">
   <div class="content">
     <h1 id="my-name">John Doe</h1>
     <p class="text">I'm an <b>amazing</b> Designer</p>
     <input class="form" type="email" placeholder="Your email">
     <input class="button" type="submit">
     <img class="image" src="img/designer.jpg">
     <p class="text">Follow me on Twitter</p> <!--Added text-->
     <a class="link" href="http://twitter.com/philippehong">My Twitter</a>
   </div>
 </div>
</body>

接下来，让我们添加我们的sidebar。在我们的<div class= "content">之后，添加一个带有类sidebar的div。

在我们的sidebar内部，添加一个<p>元素来创建一些内容：

<div class="sidebar">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis neque, volutpat ac consequat sed, ullamcorper at dolor. Donec placerat a mi quis ultricies. Etiam egestas semper tempor. Suspendisse nec eros porta, rhoncus tortor sed, consequat arcu. Suspendisse potenti. Nunc blandit nisl eu justo feugiat vestibulum. Vivamus consequat, quam vitae sagittis maximus, magna lacus fringilla justo, sit amet auctor mi nulla quis ante. Morbi malesuada gravida turpis, vel lobortis libero placerat sit amet. Vestibulum sollicitudin semper est eget ultricies. Donec posuere turpis urna.
  </p>
</div>

您可以通过访问网站www.lipsum.com/找到一些虚拟文本。

最后，让我们在sidebar元素之后添加我们的footer元素：

<div class="footer">
  <p>This is my footer</p>
</div>

我们的 HTML 文档现在应该如下所示：

<html> <!--This is our HTML main tag-->
 <head> <!--This is our head tag where we put our title and script and all infos relative to our page.-->
  <title>My Page Title</title>
  <style>
    .container {
      width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
 </head>
 <body> <!--This is where all our content will go-->
   <div class="container">
     <div class="content">
       <h1 id="my-name">John Doe</h1>
       <p class="text">I'm an <b>amazing</b> Designer</p>
       <input class="form" type="email" placeholder="Your email">
       <input class="button" type="submit">
       <img class="image" src="img/designer.jpg">
       <p class="text">Follow me on Twitter</p> <!--Added text-->
       <a class="link" href="http://twitter.com/philippehong">My Twitter</a>
     </div>
     <div class="sidebar">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis neque, volutpat ac consequat sed, ullamcorper at dolor. Donec placerat a mi quis ultricies. Etiam egestas semper tempor. Suspendisse nec eros porta, rhoncus tortor sed, consequat arcu. Suspendisse potenti. Nunc blandit nisl eu justo feugiat vestibulum. Vivamus consequat, quam vitae sagittis maximus, magna lacus fringilla justo, sit amet auctor mi nulla quis ante. Morbi malesuada gravida turpis, vel lobortis libero placerat sit amet. Vestibulum sollicitudin semper est eget ultricies. Donec posuere turpis urna.</p>
     </div>
     <div class="footer">
       <p>This is my footer</p>
     </div>
   </div>
 </body>
</html>

现在，出于本课程的目的，让我们为每个元素添加一些背景颜色，以查看布局的工作原理。为此，让我们转到我们的样式部分，并为每个类添加background-color属性，如下所示：

<style>
  .container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .content {
    background-color: red;
  }
  .sidebar {
    background-color: green;
  }
  .footer {
    background-color: blue;
  }
</style>

现在我们将保存我们的 HTML 文档并刷新我们的浏览器以查看它的外观：

我们的网页看起来很丑，但它确实展示了布局是如何组合在一起的。让我们添加一些 CSS 属性，使其看起来符合我们的期望。

我们希望.content元素占总宽度（960px）的75%，而侧边栏占25%。我们可以进行一些数学计算，计算 960 的75%，但是在 CSS 中，您也可以按百分比设置width：

.content {
  background-color: red;
  width: 75%;
}
.sidebar {
  background-color: green;
  width: 25%;
}

现在我们将保存我们的 HTML 文档并刷新我们的浏览器以查看它的外观：

如您所见，我们的元素的宽度属性为75%和25%。现在，为了将我们的sidebar移到内容旁边，我们需要使用名为float的 CSS 属性。使用float，元素可以被推到左侧或右侧，从而允许其他元素围绕它包裹。所以让我们这样做：

.content {
  background-color: red;
  width: 75%;
  float: left;
}
.sidebar {
  background-color: green;
  width: 25%;
  float: right;
}

让我们保存我们的 HTML 文档并刷新我们的浏览器以查看它的外观：

我们的内容和sidebar现在并排显示，但问题是我们的footer在右侧，因为它具有来自sidebar的float右侧的属性。为了避免这种情况，我们需要使用clear属性，它与float属性相对应。我们将属性设置为 both，这意味着右侧和左侧：

.footer {
  background-color: blue;
  clear: both;
}

保存并刷新文档。

我们现在已经完全使用 CSS 编写了我们的布局。

总结

我们现在终于有了我们的布局。再次强调，本课程不是为了做出漂亮的东西，而是为了帮助您了解如何正确使用 CSS 布局页面。在下一章中，我们将深入研究 HTML 和 CSS，通过创建和设计我们的网站来学习—多么令人兴奋！

第七章：创建您自己的网站

有趣的部分终于来了。我们将从头到尾开始实施我们的网站。我将逐步解释每个步骤。以下是本章将涵盖的内容列表：

  • 安装 HTML 样板

  • 使用图像、字体和 normalize.css 设置我们的项目

  • 创建我们的页眉并美化它

  • 创建我们的主要部分并学习 CSS 中的定位

  • 创建我们的博客部分

  • 添加关于部分

  • 创建合作伙伴部分

  • 创建页脚部分

首先，让我们看看我们将要实施的设计。如果您还记得，我们在第四章中看到了一个小预览，响应式与自适应设计。

我们的设计

我们的主页将包括以下内容：

  1. 页眉：我们将学习如何创建和美化一个导航部分，带有标志和右侧菜单。

  2. 主要图像：在网页设计中，它描述了一个前端横幅图像，通常是一个大图像。我们将学习如何创建一个带有大标题的全宽背景图像。

  3. 带有六篇博客文章的Blog预览：我们将学习如何显示带有图像和内容的三个响应式列。

  4. 关于我们部分：我们将学习如何向图像添加渐变。

  5. 合作伙伴部分：我们将学习如何在页面上居中内容。

  6. 页脚：基本上与页眉相同，但在底部。

您可以在我提供的资源文件中的Resources | Screens中查看主页的完整尺寸图像。项目还包括Sketch源文件。

我强烈建议您安装 Sketch 或 Figma，如果您还没有使用这些设计工具之一。Sketch 应用程序通常用于 Web 设计项目，可以在sketchapp.com下载。它有 14 天的免费试用期。Figma 类似于 Sketch，可以在没有试用期的情况下使用。

这就是我们的设计长什么样子：

我们的主页设计

话不多说，让我们开始吧！

安装 HTML 样板

我们将从头开始，因此让我们为这个项目创建一个新文件。当我开始一个项目时，我喜欢下载一个 HTML 样板。HTML5 样板是一个前端模板，旨在帮助您构建快速、强大和适应性强的 Web 应用程序或站点。您基本上只需下载一个包，它包含了开始项目所需的所有文件。

让我们去html5boilerplate.com/下载模板的最新版本：

单击下载 v6.0.1 或更高版本。

让我们看看我们的包里有什么：

文件夹中有很多文件。我们可以看到，它包含了网站正常运行所需的所有基本文件：

  • index.html：我们的主页，用户访问网站时会首先看到的页面

  • css文件夹：存放所有 CSS 文件的文件夹

  • img文件夹：存放所有图像的文件夹

  • js文件夹：存放所有 JS 文件的文件夹

  • favicon.ico：显示在浏览器标签左上角的图标，向用户指示他们正在访问您的网站，通常是您的标志

  • 404.html：一个用于错误 URL 的用户的 HTML 页面

其他文件对我们目前来说并不那么重要；我们将在即将到来的章节中进行审查。

让我们将文件夹重命名为我们自己的名字，例如Web 项目。

编辑 index.html

现在让我们在 Atom 中打开我们的文件夹；单击菜单|打开… |并选择我们的Web 项目文件夹。

从左侧面板选择index.html。您可以看到 HTML 文档及其内容：

<!doctype html>
<html class="no-js" lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title></title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="manifest" href="site.webmanifest">
      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
      <!--[if lte IE 9]>
          <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
      <![endif]-->

      <!-- Add your site or application content here -->
      <p>Hello world! This is HTML5 Boilerplate.</p>
      <script src="img/modernizr-3.5.0.min.js"></script>
      <script src="img/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="img/jquery-3.2.1.min.js"><\/script>')</script>
      <script src="img/plugins.js"></script>
      <script src="img/main.js"></script>

      <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
      <script>
          window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
          ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
      </script>
      <script src="img/analytics.js" async defer></script>
  </body>
</html>

现在我们将逐个审查此 HTML 文件的每个部分，以便您了解代码的每个部分：

<title></title>

在这里，您将放置我们网站的标题；在这个练习中，让我们把标题设为“赛车俱乐部-活动和门票”。

<meta name="description" content="">

这一部分是页面的描述，对于 SEO 很有用，并且会在标题之后出现在搜索结果中。

<meta name="viewport" content="width=device-width, initial-scale=1">

这将告诉浏览器如何在桌面和移动视图中行为。你可以保持原样。

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

我们在上一章中学到，在我们的 HTML 页面中使用 CSS 有三种不同的方法。我们在练习中使用了第二种方法，但是使用 CSS 的最佳方式是将其放入一个外部文件中，就像这样。你可以保持原样。

<!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

这基本上是为了建议使用 Internet Explorer 9 或更低版本的用户更新他们的互联网浏览器。你不需要改变这段代码。

<!-- Add your site or application content here -->
 <p>Hello world! This is HTML5 Boilerplate.</p>

这是我们的内容。我们将编辑 HTML 的这部分来在我们的 HTML 页面中添加元素和内容。你可以删除<p>元素，因为我们不需要它。

以下代码包含了链接到我们页面的 JavaScript 插件的列表：

<script src="img/modernizr-3.5.0.min.js"></script>
<script src="img/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="img/jquery-3.2.1.min.js"><\/script>')</script>
<script src="img/plugins.js"></script>
<script src="img/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
    window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
    ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="img/analytics.js" async defer></script>

插件如下：

  • modernizr：检测用户的浏览器并相应地改变网站的行为。

  • Jquery：我们将在下一章中使用这个框架来创建交互和动画。

  • Plugin.js：包含我们需要的所有其他插件。

  • Main.js：包含我们将创建的所有 JS 代码。

  • Google Analytics：用于分析用户并帮助了解你的网站表现的分析插件。我们将在第十章，优化和发布我们的网站中介绍这个。

让我们开始编辑我们的网页！

创建我们的网页

现在一切都准备好了，让我们开始整理我们的图片文件夹并安装我们的字体。

图片文件夹

我已经准备了一个包含所有你需要的图片的文件夹来进行这个练习。这些图片可以在Resources | Image Web project中找到。你可以简单地将所有图片和资源复制到我们新项目文件夹中的img文件夹中。

安装我们的字体

如果你再看一下网站，你会发现我们正在使用自定义字体，这意味着我们没有使用网页安全字体。网页安全字体是预装在每台设备上的字体。它们出现在所有操作系统上。这些字体集合被 Windows、Mac、Google、Linux、Unix 等使用。

可能还有一些，但这是常见的网页安全字体列表：

  • Arial

  • Helvetica

  • Times New Roman

  • Courier New

  • Courier

  • Verdana

  • Georgia

  • Comic Sans MS

  • Trebuchet MS

  • Arial Black

  • Impact

不是很吸引人；坦率地说。

但是，有了 CSS3，我们现在可以通过使用@font-face来添加自定义字体。让我们看看如何添加这个：

@font-face

为了这个练习，我提供了一个名为fonts.zip的压缩文件，以便让你更容易。你可以解压这个文件，然后将fonts文件夹移动到我们的Web Project文件夹中。让我们看看这个文件夹里有什么：

它包含了网页所需的字体文件，并且可以直接使用。

要在网页上使用自定义字体，我们需要事先生成或转换这个字体为网页字体。你可以使用网站fontsquirrel.com从你自己的字体生成网页字体。

还有一个使用@font-face属性的 CSS 文件：

@font-face {
  font-family: 'built_titling';
  src: url('built_titling_rg-webfont.woff2') format('woff2'),
       url('built_titling_rg-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'built_titling';
  src: url('built_titling_el-webfont.woff2') format('woff2'),
       url('built_titling_el-webfont.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

因此，让我们将这个 CSS 文件链接到我们的 HTML 文件中。在我们的index.html中，让我们添加以下内容：

<link rel="stylesheet" href="fonts/font.css"> <!-- Font face CSS link -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

很好，我们现在已经将我们的字体链接到我们的 HTML 页面。现在让我们添加我们的第二个字体，这是一个谷歌字体。

导入谷歌字体

自 2010 年以来，谷歌为用户提供了一个发现字体并免费使用的平台。谷歌字体的主网站上提供了 800 多种字体系列，我们将在这个练习中使用其中的一种。

谷歌让导入字体变得非常容易。以下是在我们的网站上引入字体的步骤：

  1. 前往谷歌字体网站（fonts.google.com/）。

  2. 搜索我们的字体，Roboto，并点击相应的字体（fonts.google.com/specimen/Roboto）。

  3. 点击选择这个字体。

  4. 点击底部的小弹出窗口，切换到自定义选项卡。

  5. 我们希望有常规和粗体。

  6. 切换回 EMBED 选项卡并复制显示的代码：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  1. 在我们之前的 CSS 链接之前粘贴此代码：
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/font.css"> <!-- Font face CSS link -->

您现在已安装了 Google 字体！

现在，要使用我们的 Google 字体，只需在我们要样式化的元素上粘贴 CSS 属性：

font-family: 'Roboto', sans-serif;

让我们去我们的 CSS 文件，位于css | main.css。

找到以下注释的部分：

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

在这里，写：

body {
  font-family: 'Roboto', sans-serif;
}

这将将 font-family 属性应用于<body>元素，这是我们 HTML 页面的主要元素，因此它将应用于<body>内的所有元素。

添加 normalize.css

当查找main.css时，您可能会注意到另一个css文件。normalize.css是什么，为什么我们应该将其与我们的 HTML 集成？

正如我们之前所看到的，每个浏览器的渲染方式都不相同。使用normalize.css，所有浏览器将更一致地渲染元素，并符合现代标准。我们只需要将其添加到我们的其他css文件中，它就会起作用。很酷，不是吗？

标题

让我们开始实施我们的标题。最佳做法是先做 HTML，然后再完成 CSS。让我们先看看我们的设计。

如您所见，我们的标题具有透明背景，左侧有标志和主菜单，右侧有次级菜单。

首先，在我们的 HTML 文档中创建一个<header>标签：

<!-- Add your site or application content here --> <header></header>

创建菜单

要创建我们的菜单，我们需要创建一个列表。在 HTML 中，要创建列表，您必须使用标签<ul>。

<ul>代表无序列表；它需要在<li>内部有一个列表标签。您可以按以下方式使用它：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

我们的列表应该最终看起来像这样：

<header>
  <ul>
    <li>Upcoming events</li>
    <li>Past events</li>
    <li>FAQ</li>
    <li>About us</li>
    <li>Blog</li>
    <li>Contact</li>
  </ul>
</header>

插入链接

为了使菜单工作，我们需要向我们的列表添加链接；否则，它将无法工作。要添加链接，您必须使用标签<a>。为了使每个<li>元素可点击为链接，我们需要在<li>标签内添加<a>标签，如下所示：

<li><a>Upcoming events</a></li>

现在我们需要指定链接的位置。为此，我们需要添加属性href：

<li><a href="upcoming.html">Upcoming events</a></li>

如果不存在href属性，则<a>标签将不起作用。href的值可以是指向另一个网站的绝对链接，也可以是指向同一域上的文件的相对链接。这基本上与我们之前看到的src属性的行为相同。

最后，我们的菜单应该看起来像这样：

<ul>
  <li><a href="upcoming.html">Upcoming events</a></li>
  <li><a href="past.html">Past events</a></li>
  <li><a href="faq.html">FAQ</a></li>
  <li><a href="about.html">About us</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

最后，让我们给我们的<ul>标签添加一个类，这样我们以后可以用css指定样式，就像这样：

<ul class="main-nav">

添加标志

除了我们的导航，我们还在左侧放置了一个标志。我在资源文件夹（练习 2 | 资产）中提供了一些您可以在此练习中使用的资产。

只需将logo.png和logo@2x.png文件复制并粘贴到您的Web 项目的img文件夹中。

logo@2x.png只是图像的视网膜版本，这意味着它的像素密度是普通图像的两倍。将视网膜图像命名为后缀@2x是一个很好的做法。

现在我们将简单地在我们的菜单之前添加一个图像，如下所示：

<img src="img/logo.png" alt="">

也许您已经注意到我们只放置了logo.png，并没有使用logo@2x.png。为了能够仅在视网膜设备上使用我们的视网膜版本图像，我们将不得不使用属性srcset：

<img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x">

srcset属性非常简单易用。对于每个资产，添加密度以指定应该使用哪个屏幕密度。在这个例子中，我们将放置img/logo@2x.png 2x。您还可以指定它应该出现在哪个屏幕宽度，但让我们在这个例子中保持简单。

一个网页设计的良好实践是使标志链接到主页。为此，我们需要将img标签放在标签内：

<a href="#"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>

为了确保链接指向网站的主页，我们需要将href属性"#"更改为"/"，这样它将转到文件夹的根目录：

<a href="/"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>

最后，让我们放一个类"logo"，这样我们以后可以定位这个元素：

<a class="logo" href="/"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>

右侧菜单

菜单的最后一部分是右侧的菜单，有登录和Facebook喜欢按钮。有很多方法可以做到这一点，但我建议使用另一个列表，就像我们之前创建的那个：

<ul class="right-nav">
  <li><a href="login.html">Login</a></li>
  <li><a href="#">Facebook</a></li>
</ul>

我们将添加类"right-nav"并添加 2 个<li>，就像前面的代码中所示。

添加 Facebook 喜欢按钮

要添加Facebook的喜欢按钮，我们首先需要创建按钮。为此，我们需要去 Facebook 开发者网站获取信息。我已经为你准备好了链接：developers.facebook.com/docs/plugins/like-button。在这个页面上，你会找到自定义按钮的方法，就像下面的截图所示：

完成后，点击获取代码，并选择 IFrame 选项卡：

我们可以将这段代码复制到我们网站的第二个<li>标签中。

我们将稍微定制一下按钮；将属性高度的默认值更改为20px。你应该最终得到这样的代码：

<ul class="right-nav">
  <li><a href="login.html">Login</a></li>
  <li><a href="#"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
</ul>

我们现在在 HTML 中有了我们的菜单；让我们用 CSS 添加一些样式，使它看起来更好。

为我们的页眉添加样式

此刻，我们的页眉看起来非常无聊。但是，别担心，我们将用 CSS 添加一些魔法，让它变得更漂亮。

我们之前看到 CSS 可以用三种不同的方式编写：

  • 在带有style属性的 HTML 标签中

  • 在 HTML 文档的<head>部分中，带有style属性的 HTML 标签

  • CSS 代码也可以放在外部文件中

对于我们自己的项目，我们将使用网页中普遍使用的第三种方式，因为 CSS 可以在不更改 HTML 文件的情况下进行更改。

让我们创建一个 CSS 文件，用于一般的样式。在 Atom 中，点击文件|新建文件，并将文件保存为文件|另存为。选择css文件夹，并将此文件命名为styles.css。我们必须像之前创建的font.css文件一样链接这个文件：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/fonts.css"> <!-- Font face CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/styles.css">

现在我们有了styles.css，我们可以开始了。但我通常喜欢同时查看 HTML 和 CSS。这很容易做到；选择你的styles.css，然后转到查看|窗格|右侧拆分。现在你有两个不同窗格中打开的文件。你可以关闭左边的那个：

Atom 中的两个视图拆分。

首先，我们需要定位header标签。header标签没有类，但我们可以只用这个标签来定位 HTML 标签。在 CSS 中，它将是：

header {
}

这将基本上定位 HTML 中的每个<header>标签，所以你需要小心：

如果我们仔细看一下我们的设计，我们会发现页眉占据了整个网页的宽度，高度为70px，并且有一个从灰色到透明的渐变背景，让图像出现在其后。

为此，我们有 CSS 属性width：

header {
  width: 100%;
  height: 70px;
}

现在我们可以添加背景渐变。为此，我们有 CSS 属性background-image: linear-gradient：

background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 50%);

为了使用 CSS 创建渐变，我经常使用一个生成器（www.colorzilla.com/gradient-editor/），它会为我创建最终的代码。

我有时也会使用 Sketch 或 Photoshop 提供的 CSS 工具，直接从设计中复制 CSS 属性。

在这个练习中，你可以直接复制我提供的代码：

header {
  width: 100%;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 50%);
}

保存 CSS 和 HTML 文件，并在浏览器中打开index.html：

现在我们有了容器，但我们仍然需要为我们的菜单添加样式。让我们首先通过它的类main-nav来定位我们的列表。如果你记得，要调用一个类，我们需要在类名前面加一个点，就像这样：

header .main-nav {

}

现在我们想要具体地定位<ul>内的每个<li>。为了做到这一点，我们只需要在后面添加li，就像我们在之前的章节中看到的那样：

header .main-nav li {

}

让我们首先移除列表的样式，它默认是一个圆圈。为了做到这一点，我们需要使用 CSS 属性list-style-type：

header .main-nav li {
  list-style-type: none; 
}

让我们放置none，这样它将移除li标签中的所有样式。

我们还需要将列表水平显示而不是垂直显示。为了实现这一点，我们需要使用 CSS 属性 display: inline-block。

CSS 属性display: inline-block 将以内联方式显示列表，但具有设置宽度和高度的块元素的能力：

header .main-nav li {
  list-style-type: none;
  display: inline-block;
}

让我们保存我们的工作并检查一下我们目前的进展：

我们现在的目标是将菜单放在标志旁边。为此，我们需要使标志浮动。正如我们之前在 CSS 章节中看到的，我们将在标志上使用 CSS 属性float: left;：

header .logo {
  float: left;
}

我们现在需要正确显示菜单。我们首先给我们的main-nav添加一个高度：

header .main-nav {
  height: 70px;
}

我们还需要使菜单浮动，以便右侧菜单可以显示在上方：

header .main-nav {
  height: 70px;
}

由于所有<ul>标签默认具有一些填充和边距，我们需要覆盖它：

Header .main-nav {
  height: 70px;
  float: left;
  margin: 0;
  padding: 0;
}

问题是我们的菜单与标志并排，所以我们需要为菜单添加一些填充：

header .main-nav {
  height: 70px;
  float: left;
  margin: 0;
  padding: 0;
  padding-left: 0;
}

但现在我们有两个重叠的属性，因为填充包括所有填充，如填充左侧。这仍然有效，但这是不好的 CSS。为了正确编写它，我们可以使用一个 CSS 属性来组合和修改填充：

这张图片解释了如何使用一个属性改变不同的填充。

对于我们的练习，我们将执行以下操作：

header .main-nav {
  height: 70px;
  float: left;
  margin: 0;
  padding: 0px 15px;
}

我们的下一个目标是使我们的菜单与标志垂直对齐。为此，我们可以使用一点 CSS 技巧，通过使用行高，通常用于改变段落中行之间的间距。通过将line-height设置为菜单的高度，我们将使菜单垂直对齐：

header .main-nav {
  height: 70px;
  float: left;
  margin: 0;
  padding: 0px 15px;
  line-height: 70px;
}

现在让我们自定义字体为我们之前安装的字体。让我展示最终的 CSS，这样我就可以逐行解释它的含义：

header .main-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

首先，我们需要定位.main-nav类中的<a>标签。在括号内，我们将有以下内容：

  1. color: white; 将指定文本的颜色。您可以使用 HEX 代码或 140 种本地颜色 CSS 支持来设置这种颜色（www.w3schools.com/cssref/css_colors.asp）。

  2. text-decoration: none; 将取消文本上的所有装饰。这里我们想要取消每个链接上的下划线。

  3. font-family: 'built_titling', Helvetica, sans-serif; 用于指定我们想要显示的字体。如果第一个字体无法加载，将使用以下字体名称。

  4. font-weight: 200; 是字体的粗细级别。

  5. font-size: 20px; 将是以像素为单位的字体大小。

  6. letter-spacing: 将指示每个字符之间的间距。

  7. padding: 这是我们之前学过的内部填充。

我们快要完成了。让我们保存并查看一下：

我们只剩下右侧部分要完成，让我们完成它！

对于这部分，我们需要使它向右浮动。让我们首先定位这个类：

Header .right-nav {

}

这个右侧导航将几乎与左侧导航具有相同的属性；我们只会将浮动更改为右侧：

header .right-nav {
  height: 70px;
  float: right;
  margin: 0;
  padding: 0px 15px;
  line-height: 70px;
}

正如你将看到的，我们将在编码中使用大量的复制/粘贴，因为很多元素将使用相同的属性。

但是如果我们有很多选择器使用相同的 CSS 属性怎么办？我们需要复制/粘贴所有吗？在编码中的一个好习惯是始终简化我们的代码，以便加载时间更短。

在 CSS 中，我们可以调用多个选择器并放置相同的 CSS 属性。为此，我们需要用逗号,分隔它们。例如，对于我们的left-nav和right-nav，我们可以这样做：

header .main-nav, header .right-nav{
  height: 70px;
  float: left;
  margin: 0;
  padding: 0px 15px;
  line-height: 70px;
}

header .right-nav {
  float: right;
}

这将产生与我们之前编写的代码相同的效果。因为我们调用了.right-nav并在之后添加了float: right;属性，它会覆盖之前的属性，即float: left;。这是在 CSS 中编码时的一个好习惯。

让我们在编写代码时遵循这个好习惯：

header .main-nav li, header .right-nav li {
  list-style-type: none;
  display: inline-block;
}

header .main-nav li a, header .right-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

现在我们有了我们的标题。让我们保存它并最后看一下：

太棒了！最后，为了使我们的代码清晰易读，我建议在代码的每个部分的开头和结尾添加一些注释。

这将是我们HEADER部分的最终 CSS 代码：

/* HEADER */

header {
  width: 100%;
  height: 70px;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 50%);
  position: absolute;
}

header .logo {
  float: left;
}

header .main-nav, header .right-nav{
  height: 70px;
  float: left;
  margin: 0;
  padding: 0px 15px;
  line-height: 70px;
}

header .right-nav {
  float: right;
}

header .main-nav li, header .right-nav li {
  list-style-type: none;
  display: inline-block;
}

header .main-nav li a, header .right-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

/* END OF HEADER */

添加英雄部分

在实现我们的标题后，我们现在可以进行下一步，即英雄部分。在网页设计中，英雄部分通常由一个大图像、一个标题、一个描述和一个行动号召（CTA）组成。它作为网站的概览，因为这是访问者将看到的第一件事情。

在我们的设计中，我们有以下内容：

这很简单。它由一个背景图像、一个渐变叠加和一些文本以及左侧的按钮组成。如果我们试图勾勒出每个块的轮廓，我们可能会得到这样的东西：

也许这可以帮助你想象我们在 HTML/CSS 中要做的事情。让我们从 HTML 开始：

我们可以首先创建一个将包含所有内容的部分（紫色）：

<section id="hero">
</section>

我们将添加一个id，这样以后调用它会更容易。

现在我们需要创建一个包含所有元素但也水平居中的container（紫红色）。为此，我们将创建一个带有container类的div：

<section id="hero">
  <div class="container">

  </div>
</section>

里面我们将有一个块，其中将包含标题、描述和按钮，这些将左对齐。我们可以称之为"hero-text"：

<section id="hero">
  <div class="container">
    <div class="hero-text">

    </div>
  </div>
</section>

现在，让我们在里面添加内容：

<section id="hero">
  <div class="container">
    <div class="hero-text">
      <p class="hero-date">10.05.18</p>
      <h1 class="hero-title">Wakefield Park</h1>
      <button type="button" name="button" class="btn-primary">Book now</button>
    </div>
  </div>
</section>

正如你可能已经注意到的，我们没有在 HTML 中添加图像，因为我们想用 CSS 添加它。使用 CSS 添加图像可以提供更多的灵活性和定制。在这种情况下，我们希望使其全屏并覆盖背景。首先，让我们调用我们的#hero div：

#hero {

}

让我们添加以下样式：

#hero {
  width: 100%;
  height: 700px;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.4) 100%),
    url("../img/hero-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

以下是一些解释：

  1. 我们首先需要设置块的大小。因为我们希望它是全屏的，所以我们必须将宽度设为 100％，高度设为 700px，因为这是设计的尺寸。

  2. 使用 CSS5，我们有能力添加多个背景。为此，我们需要用逗号分隔它们，就像之前展示的那样。

  3. 我们使用background-repeat来使背景不像默认情况下那样无限重复。

  4. background-size: cover; 将使背景图像根据块的大小（这里是全屏）进行拉伸。

  5. background-position: center; 将始终将背景放在中心，即使在调整大小时也是如此。

  6. 让我们保存我们的文件并看看我们得到了什么：

我们有我们的图片和渐变；现在让我们进入我们的内容。

正如我们之前所说，我们需要我们的内容居中。正如你可能已经注意到的，我们的设计遵循一个网格：

我们需要创建这个容器，它的宽度为 940px，并且在水平方向上居中。非常简单，我们需要做的就是：

.container {
  max-width: 940px;
  margin: 0 auto;
}

以下是一些注释：

  1. max-width: 940px:：我们不希望容器超过940px，但它可以根据屏幕尺寸而小于这个值。

  2. margin: 0 auto; 是水平居中块级元素的简单方法。

下一步将是对内容进行样式化。但是，首先，我们需要在跳入代码之前分析设计。观察设计时，我们可以看到：

  • 英雄内容需要从英雄部分垂直居中

  • 英雄内容需要左对齐，并且宽度为 50％

CSS flexbox

为了实现这一点，我们将使用新的 CSS 属性display: flex。CSS flexbox 非常实用，因为它可以让你非常容易地定位元素。使用 flexbox 可以非常轻松地实现居中、排序和对齐。如果你能掌握这个新属性，我保证你会成为 CSS 方面的高手。

在我们的情况下，我们希望我们的.container在垂直方向上居中。为了做到这一点，我们将针对这个类并添加这些属性：

#hero .container {
  display: flex;
  align-items: center;
  height: 700px;
}

通过在.container之前添加#hero，我们只针对#hero内部的.container元素。我们不希望所有.container具有相同的属性：

  1. display: flex;必须设置在父元素上。

  2. align-items: center;将垂直对齐并居中此元素内的所有元素。神奇！

  3. 需要设置height以便您可以将元素垂直对齐。

CSS flexbox 具有非常强大的属性。我们可以使用 flexbox 属性来完成整个网站，但为了让您了解所有可能性，我们必须经历所有步骤。

让我们继续进行文本样式设置：

.hero-text {
  max-width: 470px;
}

我们设置这个宽度，因为我们不希望文本一直延伸到右边，所以我们将最大宽度设置为.container的max-width的一半。继续遵循我们的设计：

.hero-text .hero-date {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-size: 30px;
  color: #FFFFFF;
  font-weight: normal;
}

接下来，我们有我们的标题：

.hero-text .hero-title {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-size: 120px;
  margin: 20px 0px;
  font-weight: normal;
  color: #FFFFFF;
  line-height: 1;
}

最后，我们有我们的按钮：

.btn-primary {
  display: inline-block;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 4.5px;
  background: #BF0000;
  color: white;
  padding: 12px 22px;
  border: none;
  outline: none;
}

我们使用display: inline-block;，这样我们就可以将按钮用作内联元素，但具有块元素（宽度和高度）的特性。默认情况下，border和outline都设置为none。每个按钮都有一个border和outline。

让我们看看我们有什么：

网站看起来很棒，但顶部有一些讨厌的边距。为了解决这个问题，我们需要使用 CSS 属性"position"。

CSS 中的定位

在 CSS 中，有五种不同的定位值：

  • 静态

  • 相对的

  • 固定的

  • 绝对

  • 粘性

静态位置

它们都有不同的用途。所有 HTML 元素默认都是静态定位的。

相对定位

具有相对位置的元素相对于其正常位置进行定位。您可以通过更改其左、上、右或下位置来调整定位。

例如：

div.relative-element {
    position: relative;
    top: 50px;
    left: 50px;
}

查看以下图表以更好地理解：

绝对位置

具有绝对位置的元素将被放置在其最近的定位父元素旁边，这意味着任何期望静态位置的位置元素。如果此元素没有父元素，则将定位到视口本身。

绝对定位的元素将放置在父元素之上。

固定位置

具有固定位置的元素将作为绝对位置，但仅在视口本身上。即使页面滚动，它也将保持在相同的位置：

粘性位置

具有粘性位置的元素是基于用户的滚动位置进行定位的。

在每个浏览器中并不完全支持，因此我们在这个练习中不会使用它。

现在我们了解了 CSS 中位置的用法，我们需要使标题叠加到英雄部分。为此，我们需要使标题位置绝对。由于标题没有父元素，它将定位在视口本身上。

让我们回到标题部分并添加position: absolute属性：

header {
  width: 100%;
  height: 70px;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 50%);
  position: absolute;
}

让我们保存并看看我们有什么：

我们现在有了我们的第一部分和标题的良好实现。让我们继续到下一部分。

博客部分

首先，就像我们总是做的一样（你需要养成这个习惯），我们需要分析设计并看看它是如何组成的：

正如我们所看到的，博客部分由标题和六篇博客文章组成。每行有三篇文章，宽度均为三分之一。

我们知道如何用float和display: inline-block属性来设计这个。让我们尝试用 CSS flexbox 来构建它。

让我们首先添加 HTML：

<section id="blog">
  <div class="container">
    <h2><b>Blog</b> Everything about RACING CLUB</h2>

  </div>
</section>

这里有一些解释：

  1. 我们需要创建另一个section id "blog"

  2. 我们需要重用类container来拥有一个遵循相同宽度的容器

  3. 我们添加了一个<h2>，因为它不像主标题那么重要

  4. 我们添加了一个<b>标签来使单词 Blog 加粗

现在让我们添加我们的blog帖子部分：

<section id="blog">
  <div class="container">
    <h2><b>Blog</b> Everything about RACING CLUB</h2>
    <div class="blog-posts">
      <div class="blog-post">
        <img src="img/blog1.jpg" srcset="img/blog-img/blog1.jpg 1x, img/blog-img/blog1@2x.jpg 2x">
        <p class="blog-post-date">09th January 2016</p>
        <h3>Racing Club Advan Neova Challenge Round 3 Update</h3>
        <p class="blog-post-desc">FINAL ROUND: Labour Day Trackday Wakefield Park. Last chance to compete in the Circuit Club Advan Neova Challenge 2016!
There was much anticipation with Jason's big power Evo competing at Round 3, however some suspected engi… <a href="#">Read More</a></p>
      </div>
    </div>
  </div>
</section>

这是我们做的事情：

  1. 我们添加了一个带有类"blog-posts"的div，其中包含了所有的博客帖子。

  2. 在内部，我们创建了一个带有类"blog-post"的div，它将是一个单独的博客帖子。

  3. 在这个div里，我们添加了一个带有img标签和我们之前学到的srcset的图片。

  4. 我们还为博客帖子日期添加了一个带有类"blog-post-date"的 p 标签。

  5. 我们添加了一个没有类的<h3>，因为它是唯一的h3元素，所以我们可以很容易地用 CSS 来定位它。

  6. 最后，我们添加了带有链接的description文本。

这代表一个单独的博客帖子，所以要创建六个，我们只需要复制blog帖子元素六次。

让我们也添加另一个div来制作我们的“显示更多”按钮：

<div class="blog-show-more">
  <button type="button" name="button" class="btn-primary">More posts</button>
</div>

最后，你应该有这样的东西：

<section id="blog">
  <div class="container">
    <h2><b>Blog</b> Everything about RACING CLUB</h2>
    <div class="blog-posts">

      <div class="blog-post">
        <img src="img/blog1.jpg" srcset="img/blog-img/blog1.jpg 1x, img/blog-img/blog1@2x.jpg 2x">
        <p class="blog-post-date">09th January 2016</p>
        <h3>Racing Club Advan Neova Challenge Round 3 Update</h3>
        <p class="blog-post-desc">FINAL ROUND: Labour Day Trackday Wakefield Park. Last chance to compete in the Circuit Club Advan Neova Challenge 2016!
There was much anticipation with Jason's big power Evo competing at Round 3, however some suspected engi… <a href="#">Read More</a></p>
      </div>

      <div class="blog-post">
        <img src="img/blog2.jpg" srcset="img/blog-img/blog2.jpg 1x, img/blog-img/blog2@2x.jpg 2x">
        <p class="blog-post-date">09th January 2016</p>
        <h3>Hidden Behind the Scenes</h3>
        <p class="blog-post-desc">Originally posted by Narada Kudinar, 23.08.11.
At our Trackdays, we get a variety - owners with their girlfriends, owners with their mates, owners and their mechanics - but there is one combination I am truly at envy with. It's the owners and their Dads. <a href="#">Read More</a></p>
      </div>

      <div class="blog-post">
        <img src="img/blog3.jpg" srcset="img/blog-img/blog3.jpg 1x, img/blog-img/blog3@2x.jpg 2x">
        <p class="blog-post-date">04th July 2015</p>
        <h3>Introducing Advan Trackdays!</h3>
        <p class="blog-post-desc">For the first time, Yokohama Advan Tyres are hosting their very own Trackdays, hosted by your's truly! The aim? To thank their loyal customers by providing a bargain event as well as introduce new Advan tyres to those who don't use them yet...<a href="#">Read More</a></p>
      </div>

      <div class="blog-post">
        <img src="img/blog4.jpg" srcset="img/blog-img/blog4.jpg 1x, img/blog-img/blog4@2x.jpg 2x">
        <p class="blog-post-date">09th Jun 2015</p>
        <h3>ANZAC Day Spots Running Out!</h3>
        <p class="blog-post-desc">FINAL ROUND: Labour Day Trackday Wakefield Park. Last chance to compete in the Circuit Club Advan Neova Challenge 2016!
There was much anticipation with Jason's big power Evo competing at Round 3, however some suspected engi… <a href="#">Read More</a></p>
      </div>

      <div class="blog-post">
        <img src="img/blog5.jpg" srcset="img/blog-img/blog5.jpg 1x, img/blog-img/blog5@2x.jpg 2x">
        <p class="blog-post-date">15th Mar 2015</p>
        <h3>10 Year Anniversary Details Now Available!</h3>
        <p class="blog-post-desc">Originally posted by Narada Kudinar, 23.08.11.
At our Trackdays, we get a variety - owners with their girlfriends, owners with their mates, owners and their mechanics - but there is one combination I am truly at envy with. It's the owners and their Dads. <a href="#">Read More</a></p>
      </div>

      <div class="blog-post">
        <img src="img/blog6.jpg" srcset="img/blog-img/blog6.jpg 1x, img/blog-img/blog6@2x.jpg 2x">
        <p class="blog-post-date">16th Jan 2015</p>
        <h3>Prepare for EPICNESS</h3>
        <p class="blog-post-desc">For the first time, Yokohama Advan Tyres are hosting their very own Trackdays, hosted by your's truly! The aim? To thank their loyal customers by providing a bargain event as well as introduce new Advan tyres to those who don't use them yet... <a href="#">Read More</a></p>
      </div>

    </div>
div class="blog-show-more">
      <button type="button" name="button" class="btn-primary">More posts</button>
    </div>

  </div>
</section>

现在让我们转到 CSS！我们将首先为标题添加样式：

#blog h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 60px;
}

对于blog-posts容器，我们将按照以下方式进行：

.blog-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 50px;
}

.blog-post {
  width: 33.33%;
  padding: 0 5px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.blog-posts是父元素，.blog-post是子元素。

关于.blog-posts的一些信息：

  1. display: flex;总是需要添加到父元素。

  2. flex-direction: row;将把子元素定向为一行。如果你想的话，你也可以把它放在一列上。

  3. flex-wrap: wrap;将使子元素换行，从上到下。默认情况下，它会尝试将每个元素放在一行上。

  4. margin-top: 50px;在顶部添加了一点边距。

关于.blog-post的一些信息：

  1. width: 33.33%;将宽度设置为总宽度的三分之一

  2. padding: 0 5px;在右侧和左侧添加一些填充

  3. box-sizing: border-box;: 正如我们之前看到的，这使得填充和边距属性应用在盒子内部而不是外部

到目前为止，我们有了正确的布局：

让我们为博客帖子内部的内容添加样式：

.blog-post img {
  width: 100%;
}

我们使用width: 100%;因为我们希望我们的图片占据整个宽度。其余的都是相当基本的 CSS，只是为了遵循设计：

.blog-post .blog-post-date {
  font-size: 14px;
  color: #9A9A9A;
  margin-top: 20px;
}

.blog-post h3 {
  font-size: 20px;
  color: #4A4A4A;
  letter-spacing: -0.4px;
  line-height: 1.4;
}

.blog-post .blog-post-desc {
  font-size: 14px;
  color: #4A4A4A;
  line-height: 1.6;
}

.blog-post .blog-post-desc a {
  color: #BF0000;
  text-decoration: underline;
  font-weight: bold;
}

这就是我们最终得到的东西：

现在看起来很相似了。最后一部分是“显示更多”按钮。一个简单的方法是在父元素中添加text-align: center，这样它就会使按钮在中间对齐：

.blog-show-more {
  text-align: center;
}

最后一点，我会在底部添加一些边距，增加一些空白：

#blog {
  margin-bottom: 50px; 
}

我们的博客部分的 CSS：

/* BLOG SECTION */

#blog {
  margin-bottom: 50px;
}

#blog h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 60px;
}

.blog-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 50px;
}

.blog-post {
  width: 33.33%;
  padding: 0 5px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.blog-post img {
  width: 100%;
}

.blog-post .blog-post-date {
  font-size: 14px;
  color: #9A9A9A;
  margin-top: 20px;
}

.blog-post h3 {
  font-size: 20px;
  color: #4A4A4A;
  letter-spacing: -0.4px;
  line-height: 1.4;
}

.blog-post .blog-post-desc {
  font-size: 14px;
  color: #4A4A4A;
  line-height: 1.6;
}

.blog-post .blog-post-desc a {
  color: #BF0000;
  text-decoration: underline;
  font-weight: bold;
}

.blog-show-more {
  text-align: center;
}

/* END OF BLOG SECTION */

创建关于我们部分

这个部分并不是很复杂。让我们来看看设计：

如果我们使用我们的块分析器，我们可以得到这样的东西：

我们需要做的事情：

  • 使内容垂直居中

  • 将文本对齐到左边

  • 有一个覆盖整个部分的背景图片

如我们之前所见，垂直对齐元素的最佳方法是使用 CSS flexbox。

让我们创建我们的 HTML。在我们的blog部分之后，我们将添加我们的about-us部分：

<section id="about-us">

</section>

在这个部分里，和往常一样，我们要添加我们的container：

<section id="about-us">
          <div class="container">

          </div>
</section>

在我们的容器里，我们将创建两个块，用来包含我们的大标题和描述：

<section id="about-us">
  <div class="container">
    <div class="about-us-title">
        <h3>The love of cars</h3>
    </div>
    <div class="about-us-desc">
      <h4>About us</h4>
      <p>Racing Club was founded in 2003 with one goal in mind, to make motorsport accessible through Trackdays. What started out simply as a bunch of mates with a love of cars and driving fast… </p>
      <button type="button" name="button" class="btn-primary">Learn more</button>
    </div>
  </div>
</section>

让我们保存并跳转到我们的 CSS 文件：

  1. 首先，定位我们的关于部分 ID：
#about-us {

}
  1. 为我们的部分添加背景图片：
#about-us {
  width: 100%;
  background-image: url(../img/about-us-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0;
  color: white;
}

我们使用了之前在我们的主标题部分使用的相同的 CSS 属性。添加了一些填充，以保持与设计的一致性。我们在父级设置了颜色，这样我们就不必在每个子元素中设置颜色。

  1. 在container中设置 flexbox：
#about-us .container {
  display: flex;
  align-items: top;
}

align-items: top;将使文本从顶部对齐，就像设计中的一样。

  1. 我们现在必须设置容器内块的width；否则，flexbox 将无法工作：
.about-us-title {
  width: 50%;
}

.about-us-desc {
  width: 50%;
}

让我们保存并检查设计：

到目前为止，一切都很好；我们正在朝着正确的方向前进。让我们为我们的标题和描述添加一些样式。

  1. 为我们的标题添加样式：
.about-us-title h3 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}

margin: 0必须默认添加，因为每个h标题都有一个跟随文本大小的边距。让我们再次检查：

我们已经非常接近了，但我们仍然需要在实现上更加精确：

我们可以看到在我们的设计中，标题底部有几个换行和一条红线。

为了做到这一点，我们需要在 HTML 中添加一些换行。要在 HTML 中添加换行，我们可以在任何文本块中使用标签<br />。所以在我们的标题中，我们会在The和love后面添加一个<br />标签：

<h3>The<br /> love<br /> of cars</h3>

现在，要添加红线，我们可以创建一个<div>并自定义它为我们想要的形状和颜色。但这将在 HTML 中添加一些无用的东西。

更好的方法是在 CSS 中使用::before/:: after选择器。此选择器可以在 HTML 元素之前或之后添加一些文本。

它主要用于在段落后添加额外的文本，但我们将用它来添加这条红线。

为此，我们必须选择h3元素并添加::after：

.about-us-title h3::after {

}

对于每个::after或::before选择，我们需要添加 CSS 属性content：

.about-us-title h3::after {
  content: "";
}

我们将把值留空，因为我们不想要任何文本。继续：

.about-us-title h3::after {
  content: "";
  display: block;
  background: #BF0000;
  width: 90px;
  height: 2px;
  margin-top: 30px;
}

我们做了什么：

  • 我们将display设置为block，因为默认情况下它是内联的

  • 我们添加了红色背景和尺寸

  • 我们添加了一些边距，以便文本和红线之间有一些空间

我们几乎完成了。我们还需要为描述的标题添加最后的修饰：

.about-us-desc h4 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  margin: 0;
}

关于我们部分的最终 CSS 代码如下：

/* ABOUT US SECTION */

#about-us {
  width: 100%;
  background-image: url(../img/about-us-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0;
  color: white;
}

#about-us .container {
  display: flex;
  align-items: top;
}

.about-us-title {
  width: 50%;
}

.about-us-title h3 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}

.about-us-title h3::after {
  content: "";
  display: block;
  background: #BF0000;
  width: 90px;
  height: 2px;
  margin-top: 30px;
}

.about-us-desc {
  width: 50%;
}

.about-us-desc h4 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  margin: 0;
}

/* END ABOUT US SECTION */

添加合作伙伴部分

让我们像上一个部分一样高效地进行这一部分。

看一下以下内容：

此部分仅包含一个标题、两个图像、文本和一个按钮。我们需要在我们通常的容器内创建一个块（如橙色所示）。

HTML：

<section id="partners">

</section>

从我们的section标签和id开始，我们将其命名为partners：

<section id="partners">
  <div class="container">
  </div>
</section>

像往常一样，我们需要我们的div "container"来维护我们的结构：

<section id="partners">
  <div class="container">
    <div class="partners-container">
    </div>
  </div>
</section>

在内部，我们创建另一个容器，"partners-container"：

<section id="partners">
  <div class="container">
    <div class="partners-container">

      <h2>Partners</h2>

      <div class="partners-inner">

        <div class="partner">
          <img src="img/partner1.png" srcset="img/partner1.png 1x, img/partner1@2x.png 2x">
          <p>Advan Neova Cup</p>
        </div>

        <div class="partner">
          <img src="img/partner2.png" srcset="img/partner2.png 1x, img/partner2@2x.png 2x">
          <p>JDM Style Tuning</p>
        </div>

      </div>

      <button type="button" name="button" class="btn-primary">Become a partner</button>
    </div>
  </div>
</section>

在我们的"partners-container" div内部，我们执行以下操作：

  • 我们将我们的标题放入h2中

  • 我们还创建了另一个"partners-inner" div 来容纳我们的两个合作伙伴图像

  • 在这个partner-inners div内部，我们有我们的单个合作伙伴div，每个都有一个图像和一个文本

  • 我们还添加了一个按钮，放在partners-inner之外，但在"partners-container"内

我们的 CSS 将如下所示：

#partners {
  background-color: black;
  color: white;
  text-align: center;
  padding: 50px 0px;
}

以下是代码的一些解释：

  1. 背景是black;，因为在设计中，我们有一个黑色背景

  2. 我们可以在父元素中放置color:white;，这样所有内部元素都将具有相同的属性

  3. 我们可以对text-align:center;做同样的事情

  4. 我们还在顶部和底部添加了一些填充

.partners-container {
  max-width: 400px;
  margin: 0 auto;
}

我们添加了max-width和margin: 0 auto;来使我们的partners-container居中。要使用margin: auto方法对齐任何内容，您总是需要为元素定义一个宽度：

.partners-container h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 60px;
}

还要添加以下 CSS：

.partners-inner {
  display: flex;
  margin: 30px 0px;
}

.partners-inner .partner {
  width: 50%;
}

为了能够使用display:flex;，我们需要为子元素设置width。

PARTNERS 部分完成了；让我们保存并查看一下：

我们 PARTNERS 部分的最终 CSS 代码如下：

/* PARTNERS SECTION */

#partners {
  background-color: black;
  color: white;
  text-align: center;
  padding: 50px 0px;
}

.partners-container {
  max-width: 400px;
  margin: 0 auto;
}

.partners-container h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
}

.partners-inner {
  display: flex;
  margin: 30px 0px;
}

.partners-inner .partner {
  width: 50%;
}

/* END PARTNERS SECTION */

全部完成了！让我们进入最后一步，页脚！

添加页脚部分

在这一部分，我们将致力于页脚部分。

页脚基本上与页眉相同，因此为了简化编码，我们将简单地复制并粘贴来自我们页眉的代码，并更改一些内容：

<header>
  <a id="logo" href="/"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>
  <ul class="main-nav">
    <li><a href="upcoming.html">Upcoming events</a></li>
    <li><a href="past.html">Past events</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="right-nav">
    <li><a href="login.html">Login</a></li>
    <li><a href="#"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
  </ul>
</header>

这里是我们需要更改的内容：

  • 将<header>标签更改为<footer>标签

  • 在我们的页脚内添加一个.container div，如下所示

  • 将我们的标志图片更改为"logo-footer.png"。

这是最终的 HTML：

<footer>
  <div class="container">
    <a id="logo" href="/"><img src="img/logo-footer.png" srcset="img/logo-footer.png 1x, img/logo-footer@2x.png 2x"></a>
    <ul class="main-nav">
      <li><a href="upcoming.html">Upcoming events</a></li>
      <li><a href="past.html">Past events</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="about.html">About us</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul class="right-nav">
      <li><a href="login.html">Login</a></li>
      <li><a href="#"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
    </ul>
  </div>
</footer>

让我们跳到 CSS。我们首先要定位我们的footer：

footer {
  background: black;
  color: white;
}

我们调用footer而不带任何点或#，因为我们单独调用标签。这也意味着将选择每个其他footer标签。因此，我们需要确保只选择footer元素的标签。

我们添加了一个黑色的背景，就像设计中一样，但也在父级别添加了color:white。我们很懒，不想每次都添加。

footer .container {
  display: flex;
  height: 120px;
}

这变得很有趣；我们现在已经针对footer内的.container进行了定位，并将其属性更改为flex，这样我们就可以将这些元素显示为内联。

我们不会为每个子元素指定宽度，因为我们希望它们占据自然的空间。

最后一步，我们将为标志添加一些填充以使其与菜单对齐：

footer .logo {
  padding-top: 20px;
}

footer .main-nav li, footer .right-nav li {
  list-style-type: none;
  display: inline-block;
}

footer .main-nav li a, footer .right-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

我们还从header中获取了一些样式，并将其复制到这里：

我们现在已经完成了我们的页脚！

以下是最终的 CSS 代码：

/* FOOTER SECTION */

footer {
  background: black;
  color: white;
}

footer .container {
  display: flex;
  height: 120px;
}

footer .logo {
  padding-top: 20px;
}

footer .main-nav li, footer .right-nav li {
  list-style-type: none;
  display: inline-block;
}

footer .main-nav li a, footer .right-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

/* END FOOTER SECTION */

总结

迄今为止，我们所做的总结：我们从头开始创建了一个网页，还使用了 HTML Boilerplate 来启动我们的项目。我们学到了很多 CSS 技巧，特别是关于 CSS flexbox，这可能非常有用。

在下一章中，我们将解决 CSS 的响应式方面，并为我们的网站添加一些交互性。让我们开始吧！

第八章：使我们的网站响应

在第四章中，响应式与自适应设计，您学习了响应式设计和自适应设计之间的区别。前者更容易实现，后者则针对最终用户。

本章将涵盖以下内容：

  • 什么是媒体查询？

  • 打开浏览器检查器

  • 桌面优先和移动优先之间的区别

  • jQuery 介绍

  • 如何使我们的网站对每种设备和屏幕尺寸都响应

什么是媒体查询？

可以使用媒体查询来实现响应式设计。这是如何工作的？将媒体查询视为您应用于 CSS 的条件。您告诉浏览器根据设备或视口大小添加或删除某些 CSS 规则：

要应用这些规则，我们需要使用 CSS 属性@media，如下所示：

/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {
    background-color: #F09A9D; /* Red */
  }
}

@media only screen and (max-width: 400px) 意味着如果屏幕/视口尺寸小于或等于 400px，那么我们将应用这个 CSS。

您可以向媒体添加几种不同类型的属性，并针对不同类型的设备进行定位。

例如，您可以使用以下代码专门针对 iPhone 4：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

}

这翻译为以下内容：

and (min-device-width: 320px) 
and (max-device-width: 480px)

上述代码意味着任何尺寸大于或等于 320px 且小于或等于 480px 的设备：

and (-webkit-min-device-pixel-ratio: 2)

以下代码针对像素比或密度为 2 的任何设备：

and (orientation: portrait)

上述代码将仅针对纵向方向的设备。

现在我们已经介绍了媒体查询的基础知识，让我们在项目中实践一下。

打开检查器

首先，为了能够测试我们网站的响应性，Chrome 中有一个非常有用的工具。要访问它，您可以转到查看 | 开发者 | 开发者工具：

要使用此工具，请单击左上角的第二个图标

现在，您可以选择任何您想要测试的设备，如下：

您还可以看到整个页面的代码显示在右侧：

谷歌 Chrome 检查器

这非常有用，因为它允许您在放入代码之前尝试不同的 CSS 属性，或者检查您的 CSS 是否有效。您可以快速尝试并进行调整。

桌面优先

根据您开始的设计过程，但一般来说，您会从桌面设计开始，然后逐渐降低到移动端。如果您从移动优先的过程开始设计，您将需要从移动端开始，然后升级到桌面端。

因此，初始 CSS 是为桌面设计的，现在我们要考虑的是要应用到 CSS 的条件。

我们想要针对的设备如下：

  • 桌面（默认）

  • 平板电脑（视口尺寸小于或等于 1,024px）

  • 大型移动设备（视口尺寸小于或等于 768px）

  • 小型移动设备（视口尺寸小于或等于 400px）

这是一个如何分隔不同断点的示例。您可以根据需要进行更改。

因此，在 CSS 中看起来是这样的：

/* Tablet Styles */
@media only screen and (max-width: 1024px) {

} 

/* Large Mobile Styles */
@media only screen and (max-width: 768px) {

} 

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {

}

现在我们已经准备好了我们的断点，让我们开始使我们的网站响应。

设计菜单

在本节中，我们将看看如何在移动设备或平板电脑上隐藏桌面菜单，而在移动设备或平板电脑上显示汉堡图标：

移动视图的设计

如果我们单击该图标，菜单将在右侧打开：

在移动设备上打开的菜单

为此，我们首先需要在移动版本和平板版本上隐藏菜单。

在我们的 CSS 的header部分末尾，添加以下代码：

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  header {
    display: none;
  }
}

现在我们想在移动设备上显示汉堡菜单。我们需要在 HTML 中创建一个div标签，并且只在移动设备上显示它，使用 CSS：

<div class="hamburger-menu">
   <img src="img/hambuger-icon.svg">
</div>

我们将把这个放在我们的头部标签</header>的结束之前。

在 CSS 中，我们需要在桌面视图中隐藏汉堡，并且只在移动视图中显示它：

.hamburger-menu {
  display: none;
}
/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  header .main-nav, header .right-nav {
    display: none;
  }
  .hamburger-menu {
    display: block;
  }
}

让我们保存并查看：

如果你想为平板视图添加一个花哨的框架，那么点击右上角的三个点，然后点击显示设备框架。

我们可以看到汉堡图标显示出来了，但我们需要正确放置它：

.hamburger-menu {
  display: none;
  position: absolute;
  right: 15px;
  top: 15px;
}

不要忘记我们只是通过媒体查询改变display属性，所以我们在这里应用的规则将适用于移动版本。

现在我们必须创建另一个仅在移动版本上显示的菜单，当用户点击汉堡菜单时，整个页面将向左移动：

显示内容和移动导航的不同层的图表

为了能够移动整个页面，我们需要创建一个 HTML 标签并将我们的内容放在其中。我们将创建一个名为<main>的标签，并将我们从header到footer创建的内容放在其中。

现在，在 CSS 中，我们首先需要为我们的main标签添加一个新的部分：

/* MAIN SECTION */

main {

}

/* END MAIN SECTION */

现在，为了确保这个元素将成为父元素，我们需要将这个元素设置为position: relative;，这样每个具有position: absolute;的元素现在都将与这个元素相关联：

main {
  position: relative;
}

我们还将添加一个background-color: white;，以确保它具有与默认的white相同的背景white：

main {
  position: relative;
  background-color: white;
}

现在，为了移动我们的main标签，我们将使用"left:-200px"的 CSS 属性：

main {
  position: relative;
  background-color: white;
  left:-200px;
}

这将使我们的元素水平移动-200px，也就是向左移动 200px。现在，让我们保存并查看：

主容器向左移动了 250px

对于我们的移动菜单，让我们创建另一个带有"mobile-nav"类的div，但我们将把它放在<main>标签之外。

<div class="mobile-nav">

</div>
<main>
   <header>
    ...

在.mobile-nav中，让我们重新创建我们的nav（包括.main-nav和.right-nav列表）：

<div class="mobile-nav">
          <ul>
            <li><a href="upcoming.html">Upcoming events</a></li>
            <li><a href="past.html">Past events</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="about.html">About us</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="login.html">Login</a></li>
            <li><a href="#"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
          </ul>
        </div>

在我们的 CSS 文件中，让我们确保在桌面视图中隐藏我们的.mobile-nav：

/* MOBILE MAVIGATION */

.mobile-nav {
  display: none;
}

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  .mobile-nav {
    display: block;
  }
}

/* END MOBILE NAVIGATION */

让我们添加一些定制：

.mobile-nav {
  display: none;
  position: fixed;
  background-color: #1F1F1F;
  width: 200px;
  height: 100%;
  right: 0;
  top: 0;
}

  • position: fixed;：因为我们希望菜单在我们移动<main>容器时保持固定在后面

  • background-color: #1F1F1F;：从设计中选择的颜色

  • width: 200px;和height: 100%;：因为我们希望尺寸略小于移动设备的最小宽度，即 320px。200px 看起来不错，当然，我们希望高度为 100%，以垂直占据整个空间

  • right: 0;和top: 0;：指定从视口的位置

iPad 视图（1,024px）

让我们完成菜单的定制：

.mobile-nav ul {
  margin: 0;
  padding: 25px;
}

.mobile-nav ul li {
  list-style-type: none;
  margin-bottom: 10px;
}

.mobile-nav ul li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
}

让我们保存并查看它的样子：

iPad 视图（1,024px）

现在让我们将<main>容器返回到初始位置：

main {
  position: relative;
  background-color: white;
  left: 0px;
}

这就是乐趣开始的时候；我们将在 JS 中创建一个函数，当用户点击汉堡菜单时，会使<main>容器动画化。

为了实现这一点，当用户点击汉堡菜单时，我们将向<main>标签添加一个类。这个类叫做active，将具有以下值：

main.active {
  left: -200px;
}

因此，如果我们向<main>元素添加一个active类，容器将按我们指定的方式向左移动。

现在让我们把它移除，开始 JS。

为了启动任何项目，对于任何初学者来说，最好的方法是从 jQuery 开始。什么是 jQuery？

什么是 jQuery？

jQuery 是一个快速而简洁的 JavaScript 库，简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互，用于快速的 Web 开发。

  • jQuery 官方网站

jQuery 本身不是一种语言；它是一个帮助更轻松、更高效地编写 JavaScript 的 JavaScript 框架。jQuery 的优点如下：

  • 它简化了 JavaScript 语法

  • 它已经解决了 JavaScript 在每个 Web 浏览器之间将会遇到的大部分问题

  • 它使部署在所有平台上更安全

  • 对于初学者来说很容易理解

  • 它有许多库和一个庞大的社区

要使用 jQuery，我们只需要将脚本链接到我们的 HTML，但是幸运的是，使用 HTML 样板，jQuery 已经集成了。以下是在我们的 HTML 中调用 URL 并下载 jQuery 文件的行：

<script src="img/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

jQuery 语法

我们现在来看一下 jQuery 语法。以下语法是一个改变 body 背景的 jQuery 和 JavaScript 代码的示例：

jQuery
$('body').css('background', '#fff'); 

Javascript
function changeBackgroundColor(color) {
   document.body.style.background = color;
}
onload="changeBackgroundColor('white');"

您可以看到它们之间的很大区别。

jQuery 的基本语法非常简单：

$(selector).action();

  1. $符号开始任何 jQuery 操作

  2. (selector)用于查询(或查找)HTML 元素，通过 ID 或类，就像在 CSS 中一样(#或.)

  3. action()是要在元素上执行的操作

  4. 分号(;)用于关闭操作

例如，要在 jQuery 中添加一个类，我们可以使用 jQuery 操作.addClass：

$('main').addClass('active');

要实现这一点，我们需要事先创建一个 JS 文件，并在其中编写所有我们的 JS 代码。但是，我们可以使用 HTML 样板中的一个创建的位于我们的js文件夹中的main.js。

要调用 jQuery 并说我们需要执行这些操作，我们需要添加以下代码：

$(document).ready(function(){

   // jQuery methods go here...

});

这是为了防止在文档完成加载之前运行任何 jQuery 代码。

现在，为了测试我们的 jQuery 是否正确地与我们的 HTML 文件链接，我们可以做的一个快速的事情是在页面加载时显示一个警报。

为此，我们可以使用 JavaScript 的alert操作：

$(document).ready(function(){

  alert("Hello world");

});

我们的警报操作正常工作

我们可以删除alert操作并添加我们之前创建的小代码：

$(document).ready(function(){

  $('main').addClass('active'); 

});

让我们保存并检查一切是否正常工作：

这显示了检查器上的类

确实，我们从一开始就有我们的类active。

将此操作更改为用户单击菜单时，我们需要使用 jQuery 操作click：

$('.hamburger-menu').click();

我们可以定义这一点，但这将不起作用，因为我们需要在单击图标时定义操作。为此，我们需要在内部设置一个function。函数是一组您可以设置的操作，后面跟着一个开放和一个关闭的花括号：

$('.hamburger-menu').click(function(){

});

现在，在function内部，我们将添加addClass操作：

$('.hamburger-menu').click(function(){
    $('main').addClass('active');
  });

现在保存您的 JS 文件并刷新页面。当您单击hamburger-menu时，容器会向左移动。干得好！我们迈出了第一步。但是，现在我们想关闭菜单并将容器移回。

我们可以添加这个：

$('main').click(function(){
    $('main').removeClass('active');
});

但是，这不起作用，因为它总是尝试删除类active，因为<main>是.hamburger-menu的父级。为了解决这个问题，我们需要告诉脚本在单击触发器时停止点击event冒泡。这意味着它永远不会达到<main>级别，并且不会触发.removeClass()方法。为此，我们需要添加一种跟踪点击事件并告诉它不要冒泡的方法：

$('.hamburger-menu').click(function(event){
    event.stopPropagation();
    $('main').addClass('active');
  });

您现在可以检查您的菜单。它按预期正常工作，但当您单击.hamburger-menu本身时，它不会执行任何操作。这是因为我们没有告诉它要执行任何操作。

当我们单击汉堡菜单时，我们需要使<main>返回到其初始位置。但是，现在，我们只设置了将类active添加到<main>。

我们需要配置一种方法，只有在<main>上有active时才能移除该类。为此，我们需要应用一个条件。在 jQuery 中应用条件，我们只需要使用条件if和else在function内部：

$('.hamburger-menu').click(function(event){
    event.stopPropagation();
    if (condition){

    } else {

    }
  });

因此，我们想要的操作如下：

  • 如果<main>有类active，则删除类active

  • 如果<main>没有类active，则添加类active

要检查元素是否有类，我们可以使用 jQuery 操作hasClass，如下所示：

$('.hamburger-menu').click(function(event){
    event.stopPropagation();
    if ($('main').hasClass('active')){
      $('main').removeClass('active');
    } else {
      $('main').addClass('active');
    }
  });

现在保存您的 JS 文档。我们的 JS 完美地工作了，但是如果您有完美主义的倾向，添加一些动画不会伤害您。我们可以为容器添加一些过渡效果，以使动画更加流畅：

main {
  position: relative;
  background-color: white;
  left: 0px;
  transition: all 0.2s ease-in-out; 
}

过渡效果只会作用于移动的元素，这种情况下是<main>元素。

我们的响应式终于完成了；让我们转移到主标题部分。

使主标题部分具有响应性

让我们来检查一下目前我们的主标题是如何响应的：

iPad 视图和 iPhone 8 视图

正如我们所看到的，iPad 视图中没有什么需要改变；然而，在 iPhone 视图中，缺少填充，标题似乎有点太大。

我认为可以在不添加太多代码的情况下解决这个问题，就是给每个部分实现的container添加一些填充：

.container {
  max-width: 940px;
  margin: 0 auto;
}

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  .container {
    padding: 0px 15px;
  }
}

我们将从平板电脑断点添加一些填充，这样它将影响所有更低的断点。

现在让我们修复我们的标题。这将是直接的；我们只需要找到我们的.hero-title类并添加一些媒体查询：

/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
  .hero-text .hero-title {
    font-size: 90px;
  }
}

就是这样！您也可以根据需要随时更改值。

使博客部分具有响应性

这个博客部分是基于三列网格的，它在台式机和平板电脑上运行得很好；然而，在手机上，它缩小得有点太多，所以我们需要将三列改为两列（对于小手机，一列）：

博客部分的移动视图

要改变列的宽度，让我们转到我们创建的.blog-post类，并在大手机断点上将宽度值改为50%：

.blog-post {
  width: 33.33%;
  padding: 0 5px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
  .blog-post {
    width: 50%;
  }
}

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  .blog-post {
    width: 100%;
  }
}

这将确保内容无论出现在哪种设备上都能够被读取。

此外，标题也显得有点太大。在移动视图中，我们可以将font-size减小40px：

#blog h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 60px;
}

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  #blog h2 {
    font-size: 40px;
  }
}

前面的代码将如下所示：

博客部分的不同断点的视图

使关于我们部分具有响应性

关于我们部分在 iPad 视图上看起来很好，但在手机上开始变得有点挤：

关于我们部分的移动视图

为了解决这个问题，我们需要在手机断点上将宽度值改为100%：

.about-us-title {
  width: 50%;
}

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  .about-us-title {
    width: 100%;
  }
}

.about-us-desc {
  width: 50%;
}

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  .about-us-desc {
    width: 100%;
  }
}

此外，我们将通过添加 CSS 属性flex-orientation: column来改变 flexbox 的方向。默认情况下，这个值是row，但您也可以通过row-reverse值来改变顺序，对于column值也是一样，使用column-reverse：

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  #about-us .container {
    flex-direction: column;
  }
}

设计看起来不错，但文本与标题仍然有点太近；让我们通过添加一些边距来解决这个问题：

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  .about-us-desc {
    width: 100%;
    margin-top: 50px;
  }
}

现在，保存并检查：

关于我们的响应式布局

使 footer 部分具有响应性

最后一部分是footer，对于大多数网站来说，它只是一个链接列表。它通常显示为一个简单的垂直列表；它不像我们创建的标题菜单那样复杂。

首先，我们需要移除在footer中设置的高度值；为此，我们可以简单地用auto值替换它：

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .container {
    height: auto;
  }
}

我们还需要通过设置 flexbox 的方向来垂直显示链接，就像我们之前看到的那样：

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .container {
    flex-direction: column;
    height: auto;
  }
}

下一步将是改变我们在<li>上设置的显示值：

footer .main-nav li, footer .right-nav li {
  list-style-type: none;
  display: inline-block;
}

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .main-nav li, footer .right-nav li {
    display: block;
  }
}

此外，我们需要移除在<a>标签上设置的填充：

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .main-nav li a, footer .right-nav li a {
    padding: 0px;
  }
}

最后，我们需要从<ul>中移除默认的填充：

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .container ul {
    padding: 0;
  }
}

现在我们都完成了。

总结

那是一个非常紧凑的章节，我希望你仍然能够理解！现在我们已经介绍了如何使用媒体查询使我们的网站具有响应性，还有一个快速介绍 jQuery，我们现在可以继续下一章了。在下一章中，我们将深入研究 CSS 和 jQuery，通过添加一些交互和动态内容来丰富您的网站。我们将讨论 CSS 中的伪类，如何在网站上使用插件，以及如何通过 API 收集信息。我迫不及待要向你展示这些！

第九章：添加交互和动态内容

我发现网站构建的这一部分是最有趣和令人愉快的。添加交互和动态内容将为我们的网站带来生机，并为其增添个人风格。

在本章中，我们将：

  • 首先学习 CSS 中伪类的基础知识，以及一些悬停和激活状态的示例

  • 学习如何从头开始创建 CSS 动画

  • 通过连接到 API 并导入一些内容来添加一些动态内容以在我们的网站上显示

让我们开始吧！

CSS 伪类

伪类用于定义元素的特殊状态。例如，当您悬停或单击按钮时，可以激活一个状态。

我们将学习两个简单的伪类，最常见的伪类。当您知道如何使用它们时，您可以轻松地添加和激活其他伪类：

不同的伪类

这两个伪类是hover和active。当您用鼠标悬停在元素上时，将使用hover状态。这对于显示元素是可点击的很有用。另一方面，当您单击元素时，将使用active状态。

要使用这些伪类，您只需用冒号:调用它们：

.element:hover {
    // Display something
}

.element:active {
    // Display something
}

对于第一个示例，当悬停在菜单中的链接上时，我们将添加一些样式。我们希望在悬停时为链接添加下划线。为了做到这一点，最好能够轻松地用 CSS 来定位每一个<a>。但是，如果我们查看我们的 HTML，我们会发现每个导航都有许多不同的类。我们要做的是为每个nav添加一个共同的类，这样我们就可以轻松地用 CSS 来调用它。

我们在标题和页脚上有类.main-nav和.right-nav。我们要做的是为这些类中的每一个添加一个共同的类.nav：

<ul class="nav main-nav">
              <li><a href="upcoming.html">Upcoming events</a></li>
              <li><a href="past.html">Past events</a></li>
              <li><a href="faq.html">FAQ</a></li>
              <li><a href="about.html">About us</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
            <ul class="nav right-nav">
              <li><a href="login.html">Login</a></li>
              <li><a href="#"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
            </ul>

现在，我们必须定位nav内的链接。链接是元素<a>，正如我们之前所看到的。为了定位它，我们将在 CSS 中调用如下：

.nav li a {
  // CSS
}

这将定位每个.nav的每个.li的每个子元素中的每个<a>。

让我们添加伪类:hover：

.nav li a:hover {
  // CSS
}

要在链接下方添加下划线，我们可以使用 CSS 属性text-decoration:underline;：

.nav li a:hover {
  text-decoration: underline;
}

现在让我们也为按钮添加一些样式。

对于每个按钮，我们都有类.btn-primary，所以，与之前的过程相同，我们将添加伪类hover：

.btn-primary:hover {
  background: #A3171B;
}

我们在这里做的是在悬停在按钮上时改变按钮的背景颜色。现在让我们添加一个active状态：

.btn-primary:active {
  box-shadow: inset 0px 8px 4px rgba(0, 0, 0, 0.25);
}

这将在单击按钮时向按钮添加内阴影。

为了增加一些额外的效果，我们可以添加一个transition来使动作更加平滑。不要忘记，transition必须添加在正常状态下，而不是在伪类上：

.btn-primary {
  display: inline-block;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 4.5px;
  background: #BF0000;
  color: white;
  padding: 12px 22px;
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

大功告成！相当容易。CSS 中有很多伪类。我们将继续学习更多，但您现在可以尝试一下。以下是 CSS 中的伪类列表：www.w3schools.com/css/css_pseudo_classes.asp。

下一步是构建一个固定导航！我们将结合一些 jQuery 和 CSS 来构建一个导航，当用户滚动页面时，它将固定在顶部。令人兴奋的时刻！

固定导航

我们想要做的是在滚动到博客部分时使导航固定在顶部，如下面的截图所示：

我们要构建的固定导航。

为了实现这一点，我们将在标题上添加一个额外的类。这个额外的类将使导航固定在顶部，并使导航背景变暗。让我们首先创建这个额外的类：

header.sticky {

}

我们需要小心，因为我们没有用空格分隔类，这意味着当标题也有类sticky时。

对于这个类，我们将添加以下属性：

header.sticky {
  position: fixed;
  top: 0;
  background-color: #212121;
  background-image: none;
}

让我们来分解一下：

  • 我们使用position: fixed;，因为我们希望使导航固定在顶部。position: fixed将使元素相对于浏览器窗口定位。

  • top: 0;告诉我们它会固定在顶部。

  • background-color: 设置了一个纯色背景。

  • background-image: none;移除了渐变。

博客部分的粘性页眉

我们有我们的 CSS 类.sticky准备就绪。现在我们需要创建我们的 jQuery 函数来实现这一点。

JS 插件：Waypoints

我们将使用一个插件，当滚动到一个元素时触发一个动作。该插件称为Waypoints，可以从此链接下载：imakewebthings.com/waypoints/：

Waypoints 网站。

只需点击“下载”按钮即可下载文件。在您下载的文件中，只有一个文件是必需的。转到lib文件夹，找到jquery.waypoints.min。复制此文件并粘贴到我们的Web Project文件夹中，具体来说是在我们的js | vendor文件夹中。

粘贴后，我们需要将其链接到我们的 HTML 页面。为此，请转到我们的 HTML 文件，位于结束标签</body>之前。您会看到一堆脚本已经链接到我们的 jQuery 文件之前。在最后一个文件main.js之前，只需添加以下内容：

<script src="img/jquery.waypoints.min.js"></script>

main.js应该是列表中的最后一个文件，因为它包含了所有我们个人的 JS 函数，并且需要在浏览器最后读取。

每个插件都有不同的使用方式。最好的方法是阅读插件作者提供的文档。在这里，我将向您解释使用此插件的最简单方法。

要使用.waypoint与 jQuery，我们可以使用以下方式调用它：

$('elementToTrigger').waypoint(function(direction){
    /* JS code */
});

以下是一些解释：

  • elementToTrigger将是我们希望插件监视并在用户滚动通过该元素时触发动作的元素。在这种情况下，它将是#blog。

  • direction：此参数将用于检测用户是向下滚动还是向上滚动页面。

让我们转到我们的main.js并创建我们自己的JS 代码：

$('#blog').waypoint(function(direction) {

  });

现在我们想要的是，当用户向下滚动并滚过博客部分时执行一个动作，但当用户向上滚动并离开博客部分时执行另一个动作。

为了做到这一点，我们需要使用一个条件，就像我们之前看到的那样：

$('#blog').waypoint(function(direction) {
    if (direction == 'down') {

    } else {

    }
  });

direction == 'down'表示滚动的方向等于down。

现在我们要做的是在用户向下滚动并经过博客部分时添加类sticky，并在后者离开时删除相同的类：

$('#blog').waypoint(function(direction) {
    if (direction == 'down') {
      $('header').addClass('sticky');
    } else {
      $('header').removeClass('sticky');
    }
  });

让我们保存并看看它是如何工作的：

我们的粘性页眉。

它工作得很好，但是页眉会立即出现，没有任何动画。让我们尝试使其更加流畅。为了添加一些过渡效果，在这个例子中，我们将使用 CSS 动画。

CSS 动画

CSS 动画允许创建动画而无需 JS 或 Flash，具有关键帧和每个 CSS 属性。它比简单的过渡提供了更多的优势。

要创建 CSS 动画，您需要创建一个关键帧：

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

from表示动画开始时，而to表示动画结束时。

您还可以通过设置百分比来更精确地设置时间段：

/* The animation code */
@keyframes example {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
}

要触发动画，您需要在具有 CSS 属性的特定 div 中调用它：

animation-name: example;
animation-duration: 4s;

对于我们的页眉导航，关键帧将是：

/* The animation code */
@keyframes sticky-animation {
    from {transform: translateY(-90px);}
    to {transform: translateY(0px);}
}

transform: 是 CSS 中的一种新的位置类型，允许您在 2D 或 3D 环境中移动元素。使用translateY，我们在Y 轴上移动元素。此外，我们将关键帧命名为sticky-animation：

header.sticky {
  position: fixed;
  top: 0;
  background-color: #212121;
  background-image: none;
  animation-name: sticky-animation;
 animation-duration: 0.3s;
}

最后一部分将是在类.sticky中调用动画，持续时间为0.3s。

我们现在有一个完美运行的粘性导航，带有一个很酷的动画！

添加一个动态的 Instagram 动态

最终目标是能够通过连接到 Instagram API 并从中提取信息来实现自己的 Instagram 动态。

从设计的角度来看，我们希望在页脚之后展示我们最新的 Instagram 照片动态，当您将鼠标悬停在上面时，会有一个不透明度的悬停效果。

它应该看起来像这样：

我们的 Instagram 供稿的最终设计

为了实现这一点，首先我们需要有一个 Instagram 账户。如果你已经有一个，你可以使用你自己的。否则，我已经为这个练习创建了一个账户：

我们很棒的 Instagram 供稿

安装 Instafeed.js

我之前上传了一些赛车的图片。下一步是安装一个名为Instafeed.js的插件。让我们去网站下载它：instafeedjs.com/:

Instafeed.js 主页

右键点击下载，然后点击另存为....将文件放在我们Web 项目中js文件夹中的vendor文件夹中。

对于每个插件，安装过程每次都相当相似。所有的安装过程通常都在网站上详细说明。让我们来看看 Instafeed 的文档。

设置Instafeed.js非常简单。只需下载脚本并将其包含在 HTML 中：

<script type="text/javascript" src="img/instafeed.min.js"></script>

首先，我们需要调用最初放在我们的vendor文件夹中的js文件：

<script src="img/modernizr-3.5.0.min.js"></script>
<script src="img/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="img/jquery-3.2.1.min.js"><\/script>')</script>
<script src="img/jquery.waypoints.min.js"></script>
<script src="img/instafeed.min.js"></script>
<script src="img/plugins.js"></script>
<script src="img/main.js"></script>

将其放在我们之前安装的 Waypoints 插件之后。

现在，如果我们仔细查看文档，我们可以找到我们需要的部分。

从你的用户账户获取图片

要从你的账户中获取特定的图片，设置get和userId选项：

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: 'YOUR_USER_ID',
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>

下一步是找到 userID 和 TokenAccess。如果你不想创建 Instagram 账户，想要使用我之前创建的账户，你可以直接转到标题为显示供稿的部分。

查找我们的 userID 和 TokenAccess

我们需要找到的信息是userID和accessToken。要获得userID，我们需要我们的 Instagram 用户名。Instagram 并没有真的让我们很容易地找到我们的userID。幸运的是，有很多人创建了一个简单的方法来找到它。你可以很容易地通过谷歌搜索如何找到 Instagram userID来找到一个方法，但我们会直奔主题。只需转到这个网站codeofaninja.com/tools/find-instagram-user-id并填写你的 Instagram 用户名：

查找 Instagram 用户 ID 网站

点击查找 Instagram ID 后，你会得到类似这样的东西，带有你的User ID：

我们的 userID

现在让我们转到我们的main.js并复制/粘贴instafeedjs文档中显示的代码示例。在我们的Sticky Nav代码之后，粘贴代码：

// INSTAGRAM

    var userFeed = new Instafeed({
        get: 'user',
        userId: 'YOUR_USER_ID',
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();

只需复制并粘贴我们从网站上得到的userID，替换'YOUR_USER_ID'：

// INSTAGRAM

    var userFeed = new Instafeed({
        get: 'user',
        userId: '7149634230',
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();

还没有完成；我们仍然需要我们的访问令牌。这会有点复杂。

获取我们的访问令牌

Instagram 并没有真的让我们很容易地找到访问令牌。通常，生成我们的访问令牌需要相当长的时间，但我们将使用一个工具来帮助我们获得它。让我们前往 http://instagram.pixelunion.net/ 并点击生成访问令牌。

这个网站将为我们生成一个令牌访问，我们唯一需要的是授权网站访问我们的账户：

Pixel Union 网站

点击生成令牌访问；它应该将你引导到 Instagram 的授权页面：

Instagram 授权页面

完成后，你可以复制粘贴他们提供的代码：

Pixel Union 访问令牌代码

让我们复制/粘贴最后一块拼图到我们的main.js代码中：

// INSTAGRAM

    var userFeed = new Instafeed({
        get: 'user',
        userId: '7149634230',
        accessToken: '7149634230.1677ed0.45cf9bad017c431ba5365cc847977db7',
    });
    userFeed.run();

保存main.js。下一步是用我们的 Instagram 供稿的照片填充 HTML。

显示供稿

Instafeed 插件是如何工作来显示我们的供稿的？它会寻找<div id="instafeed"></div>并用链接的缩略图填充它。

让我们转到我们的 HTML 文件的末尾，在我们的<footer>标签之后，添加<div id="instafeed"></div>：

<footer>
            <div class="container">
              <a class="logo" href="/"><img src="img/logo-footer.png" srcset="img/logo-footer.png 1x, img/logo-footer@2x.png 2x"></a>
              <ul class="nav main-nav">
                <li><a href="upcoming.html">Upcoming events</a></li>
                <li><a href="past.html">Past events</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
              <ul class="nav right-nav">
                <li><a href="login.html">Login</a></li>
                <li><a href="#"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
              </ul>
            </div>
          </footer>

          <div id="instafeed"></div>

让我们保存并看看它的样子：

我们的 Instagram feed 确实出现了，但我们不能就这样离开它。让我们自定义我们的 feed 并添加一些 CSS 使其漂亮。

我们要做的第一件事是从我们的 feed 中获取更大的图片。默认情况下，Instafeed 从 Instagram 获取缩略图的最小尺寸。要获取更大的缩略图，我们可以阅读文档，并找到以下信息：

在 Instafeed 提供的标准选项中，我们可以看到我们可以使用resolution属性从缩略图中选择三种分辨率类型：

Instafeed 文档。

让我们选择最大的那个。要添加此选项，我们只需要在我们的 JavaScript 函数中添加一个属性：

// INSTAGRAM

    var userFeed = new Instafeed({
        get: 'user',
        userId: '7149634230',
        accessToken: '7149634230.1677ed0.45cf9bad017c431ba5365cc847977db7',
        resolution: 'standard_resolution'
    });
    userFeed.run();

因此，在accessToken之后，我们可以添加resolution属性。确保在accessToken属性的末尾添加逗号，以表明这不是最后一个属性。最后一个属性在末尾不需要逗号。

保存并查看我们有什么：

网站工作正在进行中

很好，现在它需要一些 CSS 来使其漂亮。在转到 CSS 之前，我们需要检查 Instafeed 为我们生成了什么 HTML，以便我们能够在 CSS 中调用它。如果您记得，我们可以在 Google Chrome 中检查元素的 HTML。我们只需右键单击它，然后单击检查：

我们的 Google Chrome 检查器

我们可以看到 Instafeed 生成了一个带有<img>的<a>标签。非常简单直接。

知道了这一点，让我们去我们的styles.css文件，并在我们的footer部分之后写入：

/* INSTAFEED */

#instafeed {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: black;
}

#instafeed a {
  flex-grow: 1;
}

为了解释，我们使用：

  • width: 100%;因为#instafeed 是包含所有内容的容器。我们希望它占满整个宽度。

  • display: flex;因为我们希望水平并排显示缩略图。

  • justify-content: center;将内容放置在中心。

  • overflow: hidden;因为我们不希望页面水平扩展。

  • background: black;因为默认情况下背景是白色的。

最后，但同样重要的是：

  • flex-grow: 1;：如果所有项目的flex-grow都设置为1，则container中的剩余空间将均匀分配给所有子项目。如果其中一个子项目的值为 2 或更高，则剩余空间或更多空间将占用其他空间的两倍。

让我们看看现在的样子：

网站工作正在进行中

现在，最后一部分是在悬停时添加不透明度效果。我们将使用我们之前学到的不透明度和伪类:hover来进行操作：

#instafeed a {
  flex-grow: 1;
  opacity: 0.3;
}

#instafeed a:hover {
  opacity: 1;
}

同样，您只需要在伪类中添加您想要更改的值；在这里，它是不透明度。

让我们也添加一些transition：

#instafeed a {
  flex-grow: 1;
  opacity: 0.3;
  transition: opacity 0.3 ease;
}

让我们保存并查看：

网站工作正在进行中

很好，到目前为止我们做得很好。但是如果您像我一样是一个完美主义者，您会注意到在手机和平板电脑上，图像相当大。让我们添加一些快速响应式 CSS，然后我们就可以结束了：

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  #instafeed a img {
    max-width: 300px;
  }
}

/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
  #instafeed a img {
    max-width: 200px;
  }
}

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  #instafeed a img {
    max-width: 100px;
  }
}

我在这里做的是在每个断点上更改图像大小：

平板电脑和手机视图中的 Instagram Feed

我们现在已经完成了网站的交互和动态内容。

总结

显然，您可以在您的网站上做很多事情和添加很多东西。这只是一个可以非常快速实现的小预览。再次强调，您的想象力和决心将是唯一的限制。这是我们在本章中涵盖的内容：

我们已经学习了 CSS 伪类以及它如何帮助不同的动画。我们已经学会了如何使用 CSS 的@keyframe来创建动画。我们现在可以用 JQuery 来定位元素并为其添加不同的功能。我们已经学会了如何连接到 API 并使用插件显示信息。

本章内容非常精彩！在下一章中，我们将学习如何优化我们的网站并发布它！

第十章：优化和发布我们的网站

欢迎来到创建我们网站的最后一部分；我们已经走了很长的路。我们的网站看起来非常棒，有一些很酷的动画。在本章中，我们将通过以下方式优化我们的网站：

  • 为我们的网站创建和实现一个 Favicon

  • 学习如何优化我们的图像

  • 学习一些 SEO 基础知识

  • 逐步学习如何将我们的网站发布到网上

让我们开始吧！

创建一个 Favicon

Favicons是你在浏览器标签和书签栏上看到的小图标。它们是任何网站的标识的一部分，让用户认识你的网站：

Dribbble 网站的 Favicon

不要跳过这一步。有一个非常简单的在线工具可以做到这一点。我们只需要一个图像作为我们的图标，所以现在就做吧。让我们去realfavicongenerator.net/，这是 Favicon 生成器。通过这个，我们可以为浏览器创建图标，甚至根据它将在其上运行的不同操作系统进行设计。我们只需要选择我们的图像。在这种情况下，我们将使用资产文件夹中提供的标志，并找到图像Logo_Square.png。在网站上点击选择您的 Favicon 图片，并上传标志。

这是我们现在拥有的：

它为我们提供了一堆 iOS、Android 和 Windows 手机的图标，并进行了一些自定义，但这并不是真正重要的。真正重要的是页面底部的内容：

现在我们将点击第二个选项，因为我们想选择一个路径，我们将把我们的图标放在那里，因为我们不想把它们放在根目录，主项目文件夹中。网站建议我们将 Favicon 放在根目录，但我们将指定一个不同的路径，因为将有很多图像，我们希望保持它有组织。让我们在img文件夹内创建一个文件夹，并将其命名为icons。然后，我们将编辑网站上输入框中的值，并将/img/icons作为我们刚刚创建的文件夹。现在，让我们生成 Favicon！首先，我们需要点击生成您的 Favicons 和 HTML 代码，这将带我们到另一个页面，然后我们可以点击 Favicon 包以下载它。还提供了一段代码片段，我们可以复制粘贴。

这段代码将被插入到我们网站的<head>标签中，就在<!-- Place favicon.ico in the root directory -->之后。

现在可以删除 Boilerplate 提供的三行代码了：

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

我们的head部分现在应该是这样的：

<head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
        <link rel="manifest" href="/img/icons/site.webmanifest">
        <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="/img/icons/favicon.ico">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="msapplication-config" content="/img/icons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">

        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <link rel="stylesheet" href="fonts/font.css"> <!-- Font face CSS link -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>

最后一步是将我们下载的文件复制到我们的icons文件夹中。干得好！让我们跳到下一部分，看看如何优化我们网站的性能。

网站性能优化

没有人喜欢慢网站；我们都知道这一点。除此之外，页面速度对用户的参与度有真正的影响，因为没有人想等待网站加载。我们已经添加了一些插件和很多图像。现在，让我们开始优化我们的网站，并通过一些加快上传时间的技术让我们的用户更喜欢我们的网站。我们可以做两件非常基本的事情，即优化重图像和压缩 CSS 和 jQuery 代码。让我们来做吧。

优化图像

我们必须优化的第一件事是我们的图像，因为图像通常是网页中最重的内容。我们的一些图像非常重，比如我们的主图像，超过 480KB。所有这些图像，加上我们下载网站时，需要很长时间。想象一下，有人在智能手机上使用缓慢的互联网连接尝试下载这个网站。这将花费他们很长时间。所以，让我们减小文件大小。作为第一步，我们可以减小实际图像大小。

我使用一个叫做TinyJPG的工具来压缩大型图像。我发现它比 Sketch 或 Photoshop 的集成优化更强大：

Tinyjpg.com

您需要做的就是拖放您想要压缩的图像。让我们尝试一下我们的hero-image，它的大小为 480KB：

压缩后的 hero-image.jpg

在这里，您可以看到，压缩hero-image.jpg后，它现在几乎只有原来的一半大小！不可思议，不是吗？现在我们要做的就是尽可能压缩尽可能多的文件，以减小它们的大小。

优化我们的代码

我们还可以对 CSS 和 jQuery 代码进行压缩。这基本上通过删除不必要的空格和优化代码来减小 CSS 和 jQuery 文件的大小。但是，压缩代码使人类阅读变得非常困难，因此我们应该只在准备启动网站时才压缩代码。我使用的一个工具是 Minifier (www.minifier.org/)。我们只需将我们的代码粘贴到其中：

Minifier.org

当我们有大量代码需要压缩时，这种技术实际上更重要；否则，我们将无法节省太多空间。在我们的情况下，我们没有那么多的代码，所以也许没有必要这样做。

如果您想要对代码进行解压缩，还有另一个网站可以使用：unminify.com/.

现在，让我们继续进行一些非常基本的搜索引擎优化。

基本 SEO 改进

搜索引擎优化（SEO）是一个非常热门的话题。这是因为非常重要，您的网站可以被用户通过搜索引擎（如 Google）找到。

什么是搜索引擎优化？

基本上，搜索引擎优化或 SEO 使用一些技术来改进和推广网站，以增加网站从搜索引擎获得的访问者数量。SEO 有许多方面，但我们只会涵盖一些非常基本的内容，使我们的网站能够被搜索引擎找到。

Meta 描述

首先，最重要的是，我们需要一个网站标题。这对于 SEO 和用户理解网站非常重要。

在您的 HTML 顶部，有一个<title>标签，我们要填写它。在这个例子中，我们将添加Racing Club - Motor Racing Club for passionate：

<title>Racing Club - Motor Racing Club for passionate</title>

其次，让我们谈谈meta 描述标签。这个标签是网站的简短描述，通常用于在搜索结果页面上描述一个网站，就像我们在这个 Dribbble 网站的例子中看到的一样：

“Dribbble”一词的搜索结果

<meta name="description" content="Shots from popular and up and coming designers in the Dribbble community, your best resource to discover and connect with designers worldwide." />

这段文字对网页访问者来说是不可见的，但它可以帮助您为您的网站做广告，从搜索结果中吸引用户访问您的网站。因此，这是搜索营销的一个极其重要的部分。我们应该使用重要关键词来制作引人注目的 meta 描述，但不超过 160 个字符。

现在，让我们为我们的网页做这个；没有比这更容易的了。我们只需使用带有name="description"属性的meta标签，然后使用我们想要的描述的content属性。我们想要添加一些关于 Racing Club 的内容，所以我们会放置类似这样的内容：“一个由热爱者组成的赛车俱乐部。澳大利亚各地的月度活动。立即购买您的门票。”在我们的 HTML 中，我们已经预先添加了一个meta，所以我们只需要在其中放置描述：

<meta name="description" content="A Racing Club by passionates to passionate. Monthly events in Australia-wide. Buy your ticket now.">

您可以在 HTML 的顶部看到这一行：

<meta charset="utf-8">

这用于声明网站的字符编码，但它不包括排名，所以与 SEO 无关。不过，这是我们制作每个网站都应该包含的内容。

有效的 HTML

我们应该始终编写有效的 HTML 代码。有效的 HTML 代码是遵循官方 HTML 规则并且没有错误的代码。有效的 HTML 被谷歌所青睐，因为它使网站更有可能在我们未经测试的浏览器上运行。它看起来更专业，对可访问性更好，使得屏幕阅读器更容易阅读网站，例如盲人用户。有一个官方工具可以检查我们是否有有效的 HTML 代码，那就是 W3 标记验证器（validator.w3.org/）。我们将使用它来测试我们的网站。为此，我们只需使用命令或Ctrl + A复制整个代码，然后将其粘贴。在网站 validator.w3 上，我们将使用直接输入验证选项，并在点击检查之前将所有代码粘贴在这里。这需要一点时间，但它告诉我们我们的代码中有八个错误。

在报告中，我们可以看到一些建议：

W3 验证器报告

其中一个建议是我们应该尽量遵循报告建议我们做的事情，但是，你仍然可以按照现在的样子启动网站。

起初，它说：

这个文档似乎是用英语写的，但 HTML 起始标记具有空的 lang 属性。考虑使用 lang="en"（或变体）代替。

事实上，建议指定网站的语言，以便搜索引擎可以识别它，并在必要时进行翻译。让我们在我们的lang属性中添加en值（表示英语）：

<html class="no-js" lang="en">

其次，它建议我们去掉我们实现的 iframe 上的一些属性，但也要在 iframe 之前删除<a>标签。让我们这样做。

最后，它说：

img 元素必须具有 alt 属性，除非在某些条件下。

alt属性是替代属性。它用于在加载照片时描述照片，或者当浏览器无法正确渲染图像时。它还用于谷歌搜索图像，因此非常重要。

让我们为所有的图片添加alt属性，例如：

<img src="img/logo-footer.png" srcset="img/logo-footer.png 1x, img/logo-footer@2x.png 2x" alt="Logo Racing Club">

现在让我们再次检查我们的代码：

W3 标记检查器上的成功验证

干得好，我们的代码现在已经验证通过了！

关键词

接下来要考虑的是内容为王。你的网站上有很棒的内容非常重要，即使你的网站是搜索结果中的前几名。如果你的内容不好，你的用户不想阅读它，那么它就毫无价值，即使你排名很高。如果可能的话，继续提供新的内容，这样你的访问者就会想要继续回来。接下来你需要做的是在内容中有策略地放置关键词。这对于在搜索排名中表现良好非常关键，因为关键词是用户实际用来找到你的东西。不过要小心，不要过度使用关键词，因为搜索引擎会认为这是关键词垃圾邮件，他们可能会对你进行惩罚。在标题、meta-description 标签、标题和链接中使用关键词。

链接

另一件重要的事情是让其他网站链接到你。这些链接被称为反向链接，就像是给你的网站写推荐信一样。搜索引擎部分地根据指向网站的链接数量和质量对网站进行排名。这是 SEO 的一个关键因素，因此你应该有一个策略来增加指向你网站的反向链接的数量和质量。实际上，关于 SEO 还有很多更多的信息在互联网上。如果你感兴趣，可以查阅一些书籍或互联网上的信息；这是一个充满激情的主题。

至此，优化工作就完成了。让我们继续下一部分，我们将学习如何在互联网上发布我们的网站。

启动我们的网站

我们的网站现在已经准备好与世界分享。我们已经走了这么长的路，现在我们几乎到了尽头。发布我们的网站非常容易。我们只需要按照这三个步骤进行即可。

购买域名

首先，我们需要选择并购买一个域名。对于我们的网站，可以是www.racingclub.com。然后，我们需要购买网络托管；把它想象成互联网上的一个文件夹，我们将把所有文件放在其中。为了确保我们的网站运行顺利，我们需要正确的带宽。这是在一定时间内允许的数据传输量。

一旦我们拥有这两样东西，我们只需要将我们的网站上传到我们的网络空间，然后我们就准备好了。有许多域名注册公司和网络托管公司。当然，我不会告诉你应该选择哪一个。我只能告诉你，我曾经用namecheap.com注册域名和购买网络托管。那里的服务总是很好，但我不能告诉你它是最好的网络托管，因为我到目前为止还没有尝试过其他服务器。

您可以访问Namecheap网站，在购买之前检查您的域名是否可用。这很容易和直接：

一旦您拥有域名，您需要一个主机。我建议使用相同的提供商获取托管和域名，这样更容易管理。

在购买托管时，您可以选择使用您购买的域名或您自己的域名：

使用 Namecheap 购买托管

一旦您购买了托管并将其链接到您的域名，您将收到一些确认购买的电子邮件，但更重要的是，连接到服务器以及您的文件传输协议（FTP）的所有凭据。这是用于将文件传输到服务器的协议。要上传我们的文件，我们需要使用这个协议的工具。我总是使用FileZilla。易于使用和开源，它可以胜任工作。下一步是下载 FileZilla（filezilla-project.org/）：

FileZilla 网站

单击下载 FileZilla 客户端，并正确安装 FileZilla。

一旦您在 FileZilla 上，单击文件|站点管理器：

FileZilla 新网站

现在我们需要添加一个新站点，但我们需要找到 Namecheap 发送给我们的凭据。转到您的电子邮件，查找 SFTP 详细信息，它应该看起来像这样：

Namecheap SFTP 凭据

查看 SFTP 详细信息的描述，以便输入正确的信息：

  • 主机：这是服务器地址

  • 端口：这是端口

  • 协议：需要设置为 SFTP

  • 登录类型：设置为正常

  • 用户名和密码：相应地放置

单击连接。

现在你会看到一堆文件夹，各种名称。不要担心它们；寻找public_html，因为这将是您的public文件夹。一旦进入，您可以删除默认设置的文件。

现在转到Web Project，并选择您要放入 FileZilla 的所有文件。要小心；所有文件，包括隐藏文件，都需要上传。如果您使用 Windows，您不需要担心这个问题，但对于 Mac 用户，隐藏文件在文件名前面有一个点。要显示隐藏文件，只需使用快捷键Shift + CMD + 。来显示我们的隐藏文件：

在 macOS 中显示隐藏文件

现在将所有文件拖放到 FileZilla 中。它将自动将它们上传到您的服务器。一旦完成，您的网站现在正式上线了！

这将因托管提供商而异，但通常是相同的过程。如果托管使用 FTP 或 SFTP 传输文件，FileZilla 是一个很好的工具，可以与每个托管一起使用。

Google 分析

现在我们的网站已经上线，我们仍然可以继续工作，因为上线并不是故事的结束。您唯一需要做的就是网站维护。这意味着您应该跟踪您的网站的成功，并监控您的用户行为。我们如何做到这一点？我们使用一个非常强大的工具，叫做 Google Analytics。使用这个软件，您将能够监控统计数据，比如您的网站接收的访问次数，您的访客停留的时间，每个访客的平均页面浏览量，以及许多其他有用的统计数据：

Google Analytics 网站

然后，使用这些数据，您可以对网站进行调整，使其更好。我现在将在刚上传的网站上安装 Google Analytics，以向您展示它有多么简单。您需要先创建一个 Google Analytics 帐户，但如果您已经有 Google 帐户，这很容易。创建了 Google Analytics 帐户后，您需要创建一个帐户以获取跟踪代码：

Google 分析中的新帐户

在我们的情况下，这是一个网站，我将称之为“赛车俱乐部”。然后，我们需要将其链接到我们的网站。输入所有必要的信息，然后点击获取跟踪 ID：

Google Analytics 跟踪代码

现在谷歌已经为您提供了一个代码，可以粘贴到您的网站上。这是一个基本的 JavaScript 代码，所以您可以在所有脚本之后粘贴它。

在我们的 HTML 样板中，留有一个位置用于我们的 Google 分析代码。只需用 Google 提供的代码替换即可：

<script src="img/modernizr-3.5.0.min.js"></script>
        <script src="img/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="img/jquery-3.2.1.min.js"><\/script>')</script>
        <script src="img/jquery.waypoints.min.js"></script>
        <script src="img/instafeed.min.js"></script>
        <script src="img/plugins.js"></script>
        <script src="img/main.js"></script>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="img/js?id=YOUR GOOGLE ANALYTICS CODE"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'YOUR GOOGLE ANALYTICS CODE');
        </script>

现在的最后一步是使用 FileZilla 将更新后的文件上传到我们的服务器。只需拖放index.html（不要忘记保存！），然后就完成了！

这是对 Google Analytics 的一个非常快速的介绍，但这个工具非常强大，可以设置跟踪网站上的所有内容。这是一个相当漫长的旅程，但我们做到了。现在你实际上可以在互联网上打开一个网页，看到我们一起创建的网站。现在你可以自己做到所有这些。很神奇，不是吗？

Google 搜索控制台

当一切都完成后，您可以通过告诉谷歌查看您的网站并使用他们的机器人爬行来完成您的上线。为此，我们需要将我们的 URL 添加到谷歌数据库，我们将使用他们的 Google 搜索控制台（www.google.com/webmasters/tools/）来完成这一点。

Google 搜索控制台

只需输入您的域名，验证您拥有此域名，然后您就可以了。

总结

干得好。在本章中，我们涵盖了相当多的内容。在本章中，我们走过了启动网站的过程。从创建我们的 favicon，压缩我们的图像，缩小我们的 CSS 和 JS 文件，我们还成功验证了我们的 HTML 与 W3 Markup Validator。接着购买我们的域名并将文件上传到我们的服务器。我们通过集成 Google Analytics 并将网站提交给 Google 搜索来完成了本章。我们可以说这是一个非常紧凑的章节！

在下一章中，我们将学习 Bootstrap 是什么，以及为什么开发人员喜欢它。我们还将了解它的组件，学习如何使用 Bootstrap Grid，最后，Bootstrap 如何使用媒体查询。

让我们跳到下一章！

第十一章：什么是 Bootstrap？

现在我们知道如何从头开始构建网站了，我想向您介绍 Bootstrap (getbootstrap.com/)。

在本章中，我们将：

  • 了解 Bootstrap 是什么，以及为什么开发者喜欢它

  • 阅读 Bootstrap 的文档，了解如何使用它

  • 让我们来了解著名的 Bootstrap 网格

  • 了解 Bootstrap 如何使用媒体查询

什么是 Bootstrap？

Bootstrap 是一个开源的 HTML、CSS 和 JS 库，可以帮助您轻松构建网站和应用程序。它是一个组件库，您可以重复使用这些组件，而不是一遍又一遍地重新创建每个组件。Bootstrap 是响应式和移动优先的；这基本上就是 Bootstrap 的全部内容，也是为什么它在网页开发者中如此受欢迎的原因。现在，假设开发者为不同的设备创建了不同版本的网站；只需在页面上应用少量代码，网站就可以在任何设备上正确显示，这节省了时间和额外的成本。

每隔几年就会有重大更新。Bootstrap 2 于 2012 年正式发布，然后相对较快地被 Bootstrap 3 取代，后者于 2013 年发布。然后，当然，2016 年出现了 Bootstrap 4。它变得越来越稳定，发布之间的间隔也越来越长。希望不久之后 Bootstrap 5 就会到来。

Bootstrap 4 仍然非常新，所以很多开发者仍在使用 Bootstrap 3：

Bootstrap 网站

在框架内，还有许多元素和组件，您可以在您的网站或页面中使用。文档选项卡中的所有内容都是必不可少的；它包含了您可以随时参考的宝贵信息，也是您想要了解新元素或组件的地方：

Bootstrap 文档

它从 Bootstrap 的介绍开始，包括了您开始所需的所有信息。然后，在左侧，它提供了所有的部分和组件。这可能是您将查看的最受欢迎的部分之一，因为它包含了您可以在 Bootstrap 中使用的所有不同元素。因此，这可以帮助您构建您的页面。

Bootstrap 还提供了一些示例或快速开始示例，这些都在示例选项卡中。这些是在您完成本章后练习或测试的想法，这样您就可以将新想法应用到自己的页面中，并测试您在整个章节中学到的内容：

Bootstrap 示例。

值得将此页面加为书签，或者将来再次访问。现在，另一个值得关注的重要部分是 Bootstrap 博客；这是所有更新发布的地方，无论大小。因此，最好随时关注，以防发生可能会影响您网站的变化。

因此，简而言之，这只是对 Bootstrap 网站的一个快速概述。值得将组件页面加为书签，以便将来需要时可以快速查阅。接下来，我们将更仔细地看看这些组件是什么，以及我们将如何使用它们。

组件

让我们来看看我们的 Bootstrap 文档 (getbootstrap.com/docs/4.0/getting-started/introduction/)，更具体地说是组件部分。这位于文档选项卡上，包含了您在使用 Bootstrap 编写网站时将使用的许多元素：

Bootstrap 组件

这些都按字母顺序列出，因此您可以轻松找到所需的内容。例如，如果我们只看看按钮，这提供了您在 Bootstrap 中开始使用按钮所需的所有信息。默认按钮有它们自己的样式类；我们可以在这里看到有主要、次要、成功、危险、警告、信息、浅色、深色和链接：

Bootstrap 按钮

要将这些按钮中的任何一个添加到您的页面，您可以使用此处提供的代码，或者如果您想要一个按钮的轮廓，例如，如果我们向下滚动，您会看到轮廓按钮也有自己的类。您只需要添加此代码以添加轮廓按钮：

Bootstrap 轮廓按钮

如果我们继续向下滚动，您会看到有许多不同的按钮选项可用。当然，您可以只添加一个标准按钮并手动启动它，但这些示例是快速在页面上使用按钮的好方法。

现在，显然，按钮并不那么令人兴奋；这只是 Bootstrap 中有多少细节以及在 Bootstrap 中编码时有多少支持的一个例子。让我们看另一个例子，比如表单。我们在右侧有所有我们的表单内容。让我们点击内联表单，例如；我们可以看到所有描述内联表单选项的信息，以及您需要添加到页面的代码：

内联表单

如果您选择另一个，例如导航栏，这将显示在向页面添加导航栏时可以使用的所有不同选项。它从基础开始，然后说明导航栏需要一个导航栏类，并且默认情况下是流体的。这只是意味着它们会延伸到整个页面的宽度。然后，它继续描述导航栏的不同元素，包括添加您的品牌、不同的颜色方案以及如何使您的导航栏响应式。有很多信息可以帮助确保您在需要时可以快速上手。如果您愿意，随时查看这些组件。将来使用时，将这个页面加入书签肯定是值得的。

当我们开始构建我们的页面时，我们显然会更详细地讨论。接下来，我们将继续并查看 Bootstrap 网格系统。

Bootstrap 网格系统

Bootstrap 之所以如此受欢迎的主要原因之一是其响应式特性。现在，Bootstrap 建立在一个网格系统上，并且基于一组 12 列。如果您只是跳转到 Bootstrap 网站上的文档，然后进入布局部分，然后进入网格部分，我们可以更仔细地看一下：

Bootstrap 网格

Bootstrap 包含三种不同的组件；它们是列、容器和行。基本上，容器保存内容，行对齐内容，列决定内容在该行上如何分割。如果您对网格系统没有经验，不要担心太多，因为当您逐步学习并获得实际经验时，一切都会变得清晰起来。为了最好地说明网格系统的内容，我们可以看一下接下来页面上的响应式类部分。我觉得这是对网格系统内容的最好解释：Bootstrap：

Bootstrap 中的响应式类

有五个预定义类的层次结构，用于构建复杂的响应式布局。在这个例子中，我们可以看到正在使用新的col类。这意味着在这一行中，我们基本上有四列，并且每个元素占据 12 列行中的特定列数。

在第一种情况下，每个元素占据 12 列行中的三列，因为 3 可以整除 12 四次。这个布局在所有设备上也是一样的，从超小型设备一直到超大型设备。如果您愿意，您还可以定义您想要在行中占据的列数，这在这个例子中是在第二行中。

因此，第一部分内容将占用8列，下一个将占用4列。同样，无论屏幕尺寸如何，它都将填满整个 12 列。Bootstrap 之所以如此受欢迎，是因为它具有响应式特性，某些元素在较小的设备上堆叠，而在较大的设备上沿着行对齐。为此，我们只需要在我们的列类中定义设备大小：

响应式特性

在下一个示例中，您可以看到通过使用sm类或小类，内容是相似的，因为顶部有8和4，然后下一行切换为三个部分。然而，在实际的示例中，两者的内容在较小的设备上实际上会堆叠，当断点达到较小设备以上时，它将沿着行显示。在本页中有关网格系统的更多信息，但是，正如我提到的，随着我们逐步学习本章内容，您很快就会习惯它的工作方式。

我希望这能稍微解释一下网格系统，但是，正如我所说的，通过在下一章中使用它，您很快就会掌握它。接下来，我们将看一下 Bootstrap 媒体查询。

媒体查询

Bootstrap 最好的一点是，您可以将媒体查询整合到您的 CSS 文件中，这实质上让您可以从特定的项目或断点开始，并帮助您针对特定设备定位样式。如果您首先转到文档选项卡，然后转到布局部分，然后我们只需要稍微向下滚动到响应式断点部分。我们可以在这里看到我们的媒体查询。我们可以看到断点很重要，因为这些通常用作查询的指南，因此您可以确定您想要为哪个设备设置样式：

响应式断点

在这段代码的第一部分中，我们有所有断点的媒体查询，除了超小型设备。这使用了min-width命令。如果我们稍微向下滚动，我们会看到除了超大型设备之外，我们有所有断点，这些使用了max-width命令。不同之处在于，如果您首先为移动设备设计，则倾向于使用min-width选项，如果您首先为桌面设计，则倾向于使用max-width：

最大宽度命令

通常，我倾向于使用max-width，并且我倾向于首先为桌面设计，然而；了解两者都是很好的，以防您需要首先为移动设备设计。

这是对媒体查询的简单介绍；再次，随着我们课程的进行，您会更好地理解这一点，但我希望这能稍微解释一下，这样当我们真正开始时，您就有了基本的理解。

摘要

在本章中要记住的重要点是，Bootstrap 就像是开发人员可以轻松重复使用的组件库。通过了解它们（网格、组件、媒体查询），您将能够实现很多，而不是从头开始构建网站时。

接下来，我们将使用 Bootstrap 设计我们的页面，并逐步学习如何使用它。

第十二章：使用 Bootstrap 构建网站

我们刚刚看到了 Bootstrap 有多么强大。有了一个可以重复使用的广泛组件和元素列表，它可以使我们的开发阶段非常容易，这就是为什么开发人员喜欢它。在本章中，我们将讨论如何使用 Bootstrap 框架构建我们的网站，具体步骤如下：

  • 学习如何在项目中设置 Bootstrap

  • 创建和设计我们的导航栏

  • 继续英雄部分

  • 创建和设计博客部分

  • 创建和设计关于部分

  • 完成页脚

我们将从头开始创建项目，并创建与之前创建的相同页面，以比较我们最初的技术与 Bootstrap 技术。让我们开始吧！

安装 Bootstrap

我们需要做的第一件事是下载 Bootstrap。有多种下载方式。让我们前往下载页面查看一下。在主页上点击下载按钮。现在你可以查看不同的下载最新版本 Bootstrap 的方法：

下载 Bootstrap

第一种方法是下载编译后的 Bootstrap 版本。你的版本将取决于你学习这门课程的时间，但总是选择最新版本的 Bootstrap。

你也可以下载包含所有文件的 Bootstrap 源版本，但大多数情况下，你只需要编译后的文件，因为这样更快更容易让 Bootstrap 运行起来。

如果你向下滚动一点，你会注意到 BoostrapCDN。Bootstrap 还提供了一个内容传送网络（CDN），它将在服务器上托管最新版本的 Bootstrap，因此你可以只粘贴 URL 而无需在服务器上托管文件。这很好，因为你的用户不需要再次下载文件，因为他们可能已经通过访问使用 Bootstrap 的其他网站下载了文件。

设置我们的项目

要开始，让我们创建一个名为Racing Club Bootstrap的文件夹。在 Atom 中，我们将打开一个新窗口，点击添加项目文件夹...，并找到Racing Club Bootstrap。

在里面，让我们创建我们的index.html文件。点击创建新文件（Ctrl + N或Cmd + N），并保存它，这样我们就可以将文件命名为index.html。

完成后，让我们前往 Bootstrap 网站（getbootstrap.com/docs/4.0/getting-started/introduction/），具体来说是“Introduction”部分。

在这一部分，Bootstrap 为你提供了一个启动项目的模板：

启动模板

复制提供的代码并粘贴到你的index.html文件中。我们可以从模板中删除<h1>Hello, world!</h1>。

我们准备好开始了，但我们也想写自己的 CSS。为此，让我们创建一个名为css的文件夹和一个名为styles.css的 CSS 文件。

为了快速做到这一点，你可以右键单击 Atom 中的左侧栏，然后点击新建文件夹，如下截图所示：

在 Atom 中创建一个文件夹

当你创建 CSS 文件时，你总是需要将它链接到你的 HTML 文件中，否则它不起作用。如果你记得链接它，你将需要添加以下代码：

<link rel="stylesheet" href="css/styles.css">

既然我们已经创建了我们的 CSS 文件并将其链接到我们的 HTML 文件中，我们需要做的最后一件事就是复制我们在上一个项目中创建的img和fonts文件夹。这更容易，因为我们将重新创建相同的页面。只需将这些文件夹复制粘贴到我们的新项目中。

不要忘记将字体 CSS 链接到你的 HTML 文件中。在你的styles.css之前添加它：

<link rel="stylesheet" href="fonts/font.css">

安装 Google 字体 Roboto：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

既然我们都准备好了，让我们开始吧。

Bootstrap 导航栏

我们将首先创建的是 Bootstrap navbar。Bootstrap 中的navbar是 Bootstrap 框架中最具标志性的特性之一，因为它的工作方式。因此，为了提供一个它的工作方式的示例，如果我们导航到 Bootstrap 网站，然后到文档选项卡，我们会看到屏幕顶部的所有导航元素：

！

Bootstrap 导航

如果我们缩小浏览器，我们可以看到导航也在缩小。然后，当它达到较小的屏幕时，我们会得到这个汉堡菜单，如果我们点击它，它会显示其中的导航元素：

！

Bootstrap 移动导航

编写 Bootstrap 导航

现在让我们转到 Bootstrap 网站上的组件中的navbar部分。在这里，您可以找到使用 Bootstrap 构建导航所需的所有文档。

现在让我们回到我们的 HTML 文件，并写入以下代码：

<nav class="navbar navbar-expand-lg fixed-top ">

</nav>

上述代码的细节如下：

  1. 我们首先在内容的主体中添加了我们的<nav>元素，所有<nav>元素都需要一个navbar类。

  2. 然后，我们添加了新的扩展类，即navbar-expand-lg。这基本上告诉浏览器何时折叠navbar，何时扩展它。

  3. 因此，在这种情况下，当它达到大屏幕时，它将展开并显示桌面版本。如果我们想在中等屏幕上展开，那么我们只需要将lg更改为md，或者对于较小的屏幕，更改为sm。

  4. 然后，我们添加了定位类，因为我们希望这个navbar固定在屏幕顶部，所以当用户滚动时，导航始终可见，我们只需添加fixed-top类。

接下来，让我们添加一些导航选项：

<nav class="navbar navbar-expand-lg fixed-top ">
      <div class="collapse navbar-collapse" id="navigation-bar">

      </div>
    </nav>

在这段代码中，我们简单地标识了以下内容：

  1. 我们添加了一个带有collapse类的div。这只是告诉浏览器，这个div及其所有内容将是可折叠的元素。

  2. 然后，我们添加了一个navbar-collapse类。

  3. 最后，我们添加了一个将在稍后链接到我们的切换按钮的id="navigation-bar"。

现在我们需要添加我们的导航列表，包括<ul>和<li>用于列表，以及每个链接的<a>：

<nav class="navbar navbar-expand-lg fixed-top ">
      <div class="collapse navbar-collapse" id="navigation-bar">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="upcoming.html">Upcoming events</a></li>
          <li class="nav-item"><a class="nav-link" href="past.html">Past events</a></li>
          <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
          <li class="nav-item"><a class="nav-link" href="about.html">About us</a></li>
          <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </nav>

为了使导航正常工作，我们需要在<ul>上使用.navbar-nav类，在<li>上使用nav-item类。最后，我们需要在<a>标签上使用.nav-link类。

现在让我们在浏览器中检查一下我们的列表：

！

我们导航的工作进展

我们有了 Bootstrap 导航，但是如果将页面缩小到移动视图，您会注意到导航消失了。这是因为我们还没有包含我们的切换按钮，所以现在让我们添加它。

回到我们的index.html，我们可以在创建的div上方添加我们的按钮。让我们创建一个按钮标签，并给它.navbar-toggler类和指示，如下所示：

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation-bar">

</button>

data-target属性是我们之前所拥有的导航选项的链接方式，即#navigation-barID。

现在我们需要在这个按钮内添加汉堡菜单。为此，我们可以使用≡的 HTML 代码，这是三条杠图标的 HTML 代码。有很多可用的 HTML 符号，您可以使用。您可以搜索 HTML 符号，那将为您提供很多示例和符号。

让我们添加一个带有.navbar-toggler-icon类和 HTML 符号的span标签：

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation-bar">
 <span class="navbar-toggler-icon">≡</span>
</button>

现在，如果我们保存并检查，我们可以在移动屏幕上看到我们的菜单图标，如果我们点击它，菜单将正确显示：

！

移动导航。

现在让我们在我们的navbar中添加标志。通常，标志是一个链接，所以让我们添加一个带有.navbar-brand类的<a>标签。

我们不希望标志在移动视图上折叠，所以我们只需在<button>之前添加<a>：

<nav class="navbar navbar-expand-lg fixed-top ">

      <a class="navbar-brand" href="#"><img src="img/logo.png" class="img-fluid" alt="Logo Racing Club"></a>

      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation-bar">
        <span class="navbar-toggler-icon">☰</span>
      </button>

      <div class="collapse navbar-collapse" id="navigation-bar">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="upcoming.html">Upcoming events</a></li>
          <li class="nav-item"><a class="nav-link" href="past.html">Past events</a></li>
          <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
          <li class="nav-item"><a class="nav-link" href="about.html">About us</a></li>
          <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>
      </div>

    </nav>

在这个<a>中，我们添加了以下内容：

  1. 一个.navbar-brand类

  2. 与我们的标志相关联的img标签

  3. 在这个img中，我们添加了一个.img-fluid类，使这个图像具有响应性

我们现在设置了我们的标志，但还没有完成。我们需要添加右侧导航。为此，我们只需要在<ul class="navbar-nav">之后添加另一个<ul>：

<div class="collapse navbar-collapse" id="navigation-bar">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="upcoming.html">Upcoming events</a></li>
          <li class="nav-item"><a class="nav-link" href="past.html">Past events</a></li>
          <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
          <li class="nav-item"><a class="nav-link" href="about.html">About us</a></li>
          <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>

        <ul class="navbar-nav ml-auto">
 <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
 <li class="nav-item"><span class="nav-link"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden"></iframe></span></li>
 </ul>
      </div>

我们添加了.ml-auto类来将第二个导航移到右侧。这代表着margin-left自动。它填充了导航左侧的边距，这将有效地将其移动到右侧。如果你想要相反的效果，你只需添加.mr-auto类。

现在让我们来看看我们的导航：

Bootstrap 导航

我们的导航看起来很棒，我们已经拥有了导航栏所需的所有元素。接下来，我们将添加一些样式。

样式化我们的导航栏

样式化 Bootstrap 组件非常简单。我们唯一需要做的就是覆盖 Bootstrap CSS。但是，我们不想覆盖 Bootstrap CSS 文件本身；我们想要做的唯一事情就是添加额外的 CSS 属性，这些属性将覆盖原始的 Bootstrap CSS。我们之前创建了一个名为styles.css的 CSS 文件，并且，由于这个文件在 HTML 文档中按顺序链接到 Bootstrap CSS 文件之后，我们编写的每个具有相同属性和类的 CSS 都将覆盖原始的 Bootstrap CSS：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">

我们需要定位正确的 CSS 类来覆盖它。如果您记得，我们使用了谷歌 Chrome 的检查器来检查元素并检查它们的 CSS。要打开检查器（或开发工具），右键单击元素，然后单击检查：

在 Chrome 上检查元素

现在我们可以看到开发者面板，那里有很多信息。您可以检查不同的面板。当在 HTML 中悬停在一个元素上时，您可以看到它显示在网页上：

谷歌 Chrome 检查器

当您想要修复任何 CSS 样式问题或查看 HTML 时，这非常有用。现在让我们修复 CSS。

通过检查器，我们可以看到.navbar类默认有一些填充，但我们想要摆脱它。

只需将以下 CSS 添加到您的styles.css中：

.navbar {
  padding: 0;
}

保存后，您可以检查我们用自己的样式覆盖了 bootstrap CSS：

覆盖 Bootstrap CSS

现在您了解了原理，我们可以快速修复导航：

.navbar {
  padding: 0;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 50%);
}

.navbar-brand {
  padding: 0;
}

.navbar-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
}

.navbar-collapse {
  padding: 10px 15px;
}

@media (min-width: 992px) {
  .navbar-collapse {
    padding: 0;
  }
}

.navbar-toggler-icon {
  color: white;
}

上面的代码将正确地为navbar添加样式。您可以看到一切都很正常，而且没有太多的代码，甚至是响应式的部分。这就是 Bootstrap 的强大之处。如果我们比较一下我们为了使导航栏响应而做的工作，使用 jQuery 和所有媒体查询，我们写的代码比我们为第一个项目写的要少得多。现在让我们继续进行英雄部分的工作。

样式化英雄部分

现在我们了解了如何使用 Bootstrap，我们可以开始使用 Bootstrap 库中的其他组件：

<!-- HERO SECTION -->

    <div class="hero position-relative overflow-hidden d-flex align-items-center">
      <div class="container">
        <div class="col-md-7 my-auto">
          <p class="lead font-weight-normal">13.05.17</p>
          <h1 class="display-2 font-weight-normal custom-font-title">WAKEFIELD PARK</h1>
          <a class="btn btn-primary" href="#">Book now</a>
        </div>
      </div>
    </div>

<!-- END HERO SECTION -->

让我解释一下上面的代码片段。

对于第一个div，它如下所示：

  1. 我们首先设置了一个自定义类.hero，这样我们就可以在父元素中应用自定义代码。

  2. 我们添加了 Bootstrap 提供的实用类.position-relative和.overflow-hidden，这样我们就不必在 CSS 中应用它们。

  3. 类.d-flex将设置display: flex。

  4. 实用类.align-items-center将使子元素垂直居中对齐。

  5. 我们添加了一个自定义字体.custom-font-title，这样我们就可以为每个元素添加自定义字体。

然后我们应用了第二个div，使用.container类，这样我们就可以应用 Bootstrap 默认的container类。

以下类都是 Bootstrap 库的一部分。您可以在 Bootstrap 网站上看到它们。

接下来是自定义我们添加的.hero类：

.hero {
  width: 100%;
  height: 700px;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.4) 100%),
    url("../img/hero-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
}

保存，并查看我们的成果：

英雄部分的预览

现在让我们为其添加最后的修饰：

.custom-font-title {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
}

.btn-primary {
  font-size: 18px;
  letter-spacing: 4.5px;
  background: #BF0000;
  color: white;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  padding: 12px 22px;
  border: none;
  outline: none;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.btn-primary:hover {
  background: #A3171B;
}

.btn-primary:active {
  box-shadow: inset 0px 8px 4px rgba(0, 0, 0, 0.25);
  background: #A3171B!important;
  box-shadow: none!important;

}

.btn-primary:focus {
  box-shadow: inset 0px 8px 4px rgba(0, 0, 0, 0.25);
  background: #A3171B;
  box-shadow: none;
}

这将覆盖 Bootstrap 的默认样式，用于标题和主按钮：

！

我们最终的英雄部分

现在让我们开始博客部分。

美化博客部分

在我们之前建立的网站中，我们有自己的网格系统。然而，现在，我们可以简单地使用 Bootstrap 网格，这比我们创建的网格系统要好得多，更实用。

让我们从 HTML 开始：

<div class="blog py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog1.jpg">
              <div class="card-body">
                <small class="text-muted">09th January 2016</small>
                <h4 class="font-weight-bold">Racing Club Advan Neova Challenge Round 3 Update</h4>
                <p class="card-text">FINAL ROUND: Labour Day Trackday Wakefield Park. Last chance to compete in the Circuit Club Advan Neova Challenge 2016!
There was much anticipation with Jason's big power Evo competing at Round 3, however some suspected engi... </p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
      </div>
    </div>

在上面的代码中，您可以注意到有很多.py-5 .my-5类。这些类是间距类；它们已经添加到 Bootstrap 的最新版本中，因此您可以只用一个简单的类来添加间距。要了解如何使用它们，请转到文档的实用程序部分中的间距部分：

！

Bootstrap 中的间距实用工具

此外，您可能已经注意到我们为每个卡片使用了网格。一开始，网格有点难以理解，但是一旦理解了，它就非常强大和有用。最好的做法是尝试一下。您可以通过查看文档中提供的示例来尝试网格。 getbootstrap.com/docs/4.0/layout/grid/。

在这里，我们添加了.col-md-4类，因为我们希望三个相同宽度的相同块，Bootstrap 使用的是 12 列系统-12 除以 3 等于 4。此外，我们使用了md属性，以便仅在浏览器分辨率大于 768px 时应用。

现在让我们为我们的六篇博客文章复制卡片六次：

<!-- BLOG SECTION -->

    <div class="blog py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog1.jpg">
              <div class="card-body">
                <small class="text-muted">09th January 2016</small>
                <h4 class="font-weight-bold">Racing Club Advan Neova Challenge Round 3 Update</h4>
                <p class="card-text">FINAL ROUND: Labour Day Trackday Wakefield Park. Last chance to compete in the Circuit Club Advan Neova Challenge 2016!
There was much anticipation with Jason's big power Evo competing at Round 3, however some suspected engi... </p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog2.jpg">
              <div class="card-body">
                <small class="text-muted">09th January 2016</small>
                <h4 class="font-weight-bold">Hidden Behind the Scenes</h4>
                <p class="card-text">Originally posted by Narada Kudinar, 23.08.11.
At our Trackdays, we get a variety - owners with their girlfriends, owners with their mates, owners and their mechanics - but there is one combination I am truly at envy with. It's the owners and their Dads. </p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog3.jpg">
              <div class="card-body">
                <small class="text-muted">04th July 2013</small>
                <h4 class="font-weight-bold">Introducing Advan Trackdays!</h4>
                <p class="card-text">For the first time, Yokohama Advan Tyres are hosting their very own Trackdays, hosted by your's truly! The aim? To thank their loyal customers by providing a bargain event as well as introduce new Advan tyres to those who don't use them yet.. </p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog4.jpg">
              <div class="card-body">
                <small class="text-muted">03th January 2016</small>
                <h4 class="font-weight-bold">ANZAC Day Spots Running Out!</h4>
                <p class="card-text">FINAL ROUND: Labour Day Trackday Wakefield Park. Last chance to compete in the Circuit Club Advan Neova Challenge 2016!
There was much anticipation with Jason's big power Evo competing at Round 3, however some suspected engi… </p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog5.jpg">
              <div class="card-body">
                <small class="text-muted">02th January 2016</small>
                <h4 class="font-weight-bold">10 Year Anniversary Details Now Available!</h4>
                <p class="card-text">Originally posted by Narada Kudinar, 23.08.11.
At our Trackdays, we get a variety - owners with their girlfriends, owners with their mates, owners and their mechanics - but there is one combination I am truly at envy with. It's the owners and their Dads.</p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card mb-4">
              <img class="card-img-top" alt="Thumbnail Blog" src="img/blog6.jpg">
              <div class="card-body">
                <small class="text-muted">01th January 2016</small>
                <h4 class="font-weight-bold">Prepare for EPICNESS</h4>
                <p class="card-text">For the first time, Yokohama Advan Tyres are hosting their very own Trackdays, hosted by your's truly! The aim? To thank their loyal customers by providing a bargain event as well as introduce new Advan tyres to those who don't use them yet... </p>
                <a href="#" class="btn btn-outline-primary">Read more</a>
              </div>
            </div>
          </div>
      </div>
    </div>

    <!-- END BLOG SECTION -->

最后一件事是添加“显示更多”按钮。我们还需要水平居中按钮。为此，我们将使用.d-flex flexbox Bootstrap 类配合.align-items-center类：

<div class="row d-flex align-items-center py-5">
    <div class="mx-auto">
        <a href="#" class="btn btn-primary">Show more</a>
    </div>
</div>

最后，为了使其居中，我们只需要添加.mx-auto类，这样左右边距就会自动调整。

让我们来看看现在有什么：

！

正在进行中-博客部分

我们有一些相当不错的东西，完全没有样式。唯一剩下的就是自定义卡片和轮廓按钮，然后我们就可以开始了：

body {
    font-family: 'Roboto', sans-serif;
}

.btn-outline-primary {
  color: #BF0000;
  background-color: transparent;
  background-image: none;
  border-color: #BF0000;
}

.btn-outline-primary:hover {
  background: #A3171B;
  border-color: #A3171B;
}

.btn-outline-primary:active {
  box-shadow: inset 0px 8px 4px rgba(0, 0, 0, 0.25);
  background: #A3171B!important;
  box-shadow: none!important;
  outline: none;
  border-color: #A3171B!important;

}

.btn-outline-primary:focus {
  box-shadow: inset 0px 8px 4px rgba(0, 0, 0, 0.25);
  background: #A3171B;
  box-shadow: none;
  outline: none;
}

.card {
  border: none;
}

以下是设计的最终阶段：

！

博客部分的设计最终确定

就是这样；我们已经完成了博客部分。让我们开始关于我们部分。

美化关于部分

这一部分非常简单。我们将重用之前使用的相同类。您可以观察以下 HTML 代码：

<!-- ABOUT SECTION -->

    <div class="about position-relative py-5">
      <div class="container">
        <div class="row d-flex align-items-center py-5">
          <div class="col-md-6 my-auto">
            <h1 class="display-1 font-weight-normal custom-font-title text-white">The<br /> Love<br /> of car</h1>
          </div>
          <div class="col-md-6 my-auto">
            <h3 class="font-weight-normal custom-font-title text-white">About us</h3>
            <p class="lead font-weight-normal text-white">Circuit Club was founded in 2003 with one goal in mind, to make motorsport accessible through Trackdays. What started out simply as a bunch of mates with a love of cars and driving fast…</p>
            <a class="btn btn-primary" href="#">Learn more</a>
          </div>
        </div>
      </div>
    </div>

<!-- END ABOUT SECTION -->

我们使用的唯一新类是.text-white类。这是 Bootstrap 的一个实用类，可以让您使用一些主要颜色来着色字体。您可以在getbootstrap.com/docs/4.0/utilities/colors/上访问文档：

！

Bootstrap 中的文本颜色类。

对于 CSS，我们只需要添加背景和标题上的一点样式：

.about {
  background-image: url(../img/about-us-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.about h1.display-1::after {
  content: "";
  display: block;
  background: #BF0000;
  width: 90px;
  height: 2px;
  margin-top: 30px;
}

让我们看看它的样子：

！

关于我们部分

这个关于我们部分非常简单；让我们继续到合作伙伴部分。

美化合作伙伴部分

对于合作伙伴部分，我们将 HTML 设置为以下内容：

<!-- PARTNERS SECTION -->

    <div class="partners position-relative py-5">
      <div class="container py-5">
        <h3 class="display-3 custom-font-title text-white text-center">PARTNERS</h3>
        <div class="row d-flex justify-content-center py-5">
          <div class="my-auto text-center px-3">
            <img class="pb-2" src="img/partner1.png" alt="Partners Racing Club">
            <p class="font-weight-normal text-white">Advan Neova Cup</p>
          </div>
          <div class="my-auto text-center px-3">
            <img class="pb-2" src="img/partner2.png" alt="Partners Racing Club">
            <p class="font-weight-normal text-white">JDM Style Tuning</p>
          </div>
        </div>
        <div class="row d-flex align-items-center pb-5">
          <div class="mx-auto">
            <a href="#" class="btn btn-primary">Show more</a>
          </div>
        </div>
      </div>
    </div>

<!-- END PARTNERS SECTION -->

在上面的代码中，我们使用了.justify-content-center类来水平居中两个合作伙伴。其他的都很简单。

在 CSS 方面，我们唯一需要做的就是将背景颜色更改为黑色：

.partners {
  background: #000;
}

完成了！有多容易呢？：

！

合作伙伴部分

让我们进入最后一步，也就是页脚。

美化页脚

对于页脚，事情会变得更加复杂。HTML 将是这样的：

<!-- FOOTER -->
    <nav class="footer">
      <div class="container d-md-flex align-items-center py-md-5">
        <a class="navbar-brand" href="#"><img src="img/logo-footer.png" class="img-fluid pl-3" alt="Logo Racing Club"></a>
        <ul class="nav d-block d-md-flex pt-5 pt-md-0">
          <li class="nav-item"><a class="nav-link text-white" href="upcoming.html">Upcoming events</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="past.html">Past events</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="faq.html">FAQ</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="about.html">About us</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="blog.html">Blog</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="contact.html">Contact</a></li>
        </ul>

        <ul class="nav ml-auto d-block d-md-flex pb-5 pb-md-0">
          <li class="nav-item"><a class="nav-link text-white" href="login.html">Login</a></li>
          <li class="nav-item"><span class="nav-link"><iframe src="img/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden"></iframe></span></li>
        </ul>
      </div>
    </nav>
    <!-- END FOOTER -->

在许多 Bootstrap 类中，有一些响应式实用类可以应用，并且它们始终具有相同的引用：xs、sm、md和lg。例如，对于.d-flex类，您可以在需要时应用响应式实用类。通过添加.d-md-flex，您仅在中等屏幕上应用display:flex属性。这非常有用，并且可以应用于许多 Bootstrap 类。

通过良好使用类，我们需要编写的唯一 CSS 是以下内容：

.footer {
  background: #000;
}

.footer .nav-link {
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
}

这就是我们的页脚的样子：

我们的页脚部分

它是完全响应式的：

移动端的页脚部分

摘要

您看到了 Bootstrap 如何在开发阶段帮助您。如果您能掌握 Bootstrap 的使用，您就可以真正轻松高效地启动或实施任何项目。这就是为什么有这么多开发人员喜欢 Bootstrap，您也应该喜欢。

接下来呢？接下来，我们将介绍服务器端渲染以及为什么它是新的开发趋势。让我们开始吧。

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

自 Web 诞生以来，我们已经学到，显示 HTML 的传统方法是使用服务器端渲染。后者很棒；网站简单，不需要太多交互。然而，现在不再是这样了。单个网站上有很多应用程序；您需要消息传递，更新，购物，实时数据同步-最终用户总是想要更多。

在本章中，您将学到以下内容：

  • 什么是服务器端渲染？

  • 什么是客户端渲染？

  • 两者的优缺点

  • VueJS 简介

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

那么，什么是客户端渲染？客户端渲染是一种使用大多数 JavaScript 而不是服务器端语言（如 PHP，Python 或 Ruby）来渲染网站的新方法。

要理解区别，我们需要了解服务器端渲染的工作原理。

什么是服务器端渲染？

服务器端渲染是渲染网站的最常见方式。每当您访问一个网站时，都会向服务器发出请求，并在 HTML 中渲染网站。这通常需要几毫秒，但会取决于许多因素，如互联网速度，位置和访问者数量。

如果您想访问另一个网站，基本上要重新向服务器发出另一个请求，整个过程都要重复一遍。如果您的页面有一千行代码，像现在许多网站一样，这可能会很烦人。

然而，服务器端渲染对于 SEO 很有好处，因为 HTML 页面可以供机器人爬行，而客户端渲染做不到这一点，至少不像服务器端渲染那样简单。

什么是客户端渲染？

另一方面，客户端渲染是使用 JavaScript 渲染的。您不是单独获取 HTML，而是获取一个简单的 HTML 结构，但其中包含 JavaScript 来渲染浏览器中的其余 HTML。

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

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

它的缺点是在 SEO 方面非常糟糕，因为内容直到加载到浏览器中才会被渲染。这可以修复，但目前还不是一种简单的方式。

服务器端渲染的优缺点

接下来的两节是对每种方法的优缺点的简要总结，这样您就可以决定在每个项目中使用哪种方法。

服务器端渲染

优点：

  • 更好的 SEO，因为搜索引擎可以爬行网站

  • 初始页面加载更快

  • 适用于静态网站

缺点：

  • 频繁的服务器请求

  • 渲染较慢

  • 每次页面都必须重新加载

客户端渲染

优点：

  • 初始加载后更快的渲染

  • 适用于 Web 应用程序

  • 对服务器的请求较少

缺点：

  • 如果没有正确实现，SEO 不好

  • 初始加载可能需要更多时间

  • 大多数情况下需要外部库

介绍 VueJS

如果我们想构建一个客户端渲染的网站，我们可以使用许多 JavaScript 框架。ReactJS，AngularJS 和 VueJS 是最知名的框架之一-当你知道它们由谷歌和 Facebook 支持时，这一点也就不足为奇了。

VueJS 是最容易学习的之一。这就是为什么我们选择从这个开始的原因。在本书的最后一章，我们将快速介绍 VueJS，以便您了解它的工作原理和可能性：

VueJS 主页

VueJS 允许您创建从由 JavaScript 驱动的小部件到放入现有应用程序的中等大小的应用程序。通过 JavaScript 控制整个页面并因此重新渲染各个部分，使其非常具有反应性，一直到构建大型企业级应用程序，单页面应用程序，其中整个网页，多个页面（至少对用户来说是这样），都由 VueJS 驱动，它渲染 DOM 的重要部分，使其看起来像是加载了不同的页面，但最终 JavaScript 处理所有这些。

为什么选择 JavaScript？由于 JavaScript 在浏览器中运行，如果您只想重新渲染应用程序的部分，您无需访问任何服务器并等待任何响应。这使得应用程序非常具有反应性，感觉很好，并提供了出色的用户体验。

这就是您可以使用 VueJS 做的事情。那么，为什么选择 VueJS 而不是比如说 Angular 2 或 ReactJS，您可能已经了解并且执行类似操作的框架呢？首先，VueJS 非常精简，文件大小很小。我们说的是核心框架压缩后 gzip 格式只有 16 千字节。

这是一个非常专注和简洁的框架。但是，它不仅小巧，因此加载速度快，而且在运行时也很快，根据一些基准测试的结果，它甚至超过了 Angular 2 和 ReactJS。当然，这将始终取决于您的特定应用程序。

我想现在就开始使用 VueJS 并构建我们的第一个小应用程序，并看看我们如何实际设置它。

设置 VueJS

开始使用 VueJS 并创建您的第一个应用程序实际上非常简单。我们从vuejs.org开始，它的官方主页；在那里，您会注意到这个不错的“开始”按钮。让我们点击它。它会带您到官方文档，无论如何都值得一看，但在那里，我们想要去安装。现在，在这里，您有几种不同的选项，取决于您想要使用哪种设置：

VueJS 安装页面

有不同的选项可以下载 VueJS——我们可以下载文件或使用提供的 CDN。在这个练习中，我们将简单地使用 CDN。只需单击 VueJS 提供的链接，如下所示：

VueJS CDN

现在，我们不需要创建一个新的 HTML 项目，让我们去jsfiddle.net。

JSFiddle 是一个在线网络编辑器，因此您可以非常轻松地创建或测试一些东西：

JSFiddle

只需将 VueJS 的脚本复制并粘贴到 HTML 的block部分：

<script src="img/VueJS"></script>

您可以删除@2.5.16，只留下vue，这样它将始终获取最新版本：

<script src="img/VueJS"></script>

既然我们已经导入了 VueJS，我们现在就可以使用它及其所有功能。所以，让我们使用它并构建我们的第一个小应用程序。为此，我想添加一个段落，在其中我想说“你好，世界”：

<p>
Hello world!
</p>

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

 var app = new Vue({

 })

现在，我需要创建一个包含我的应用程序的div，因为我们不希望我们的<p>标签成为应用程序。我们将添加一个 ID app：

<div id="app">
    <p>
        Hello world!
    </p>
</div>

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

var app = new Vue({
    el: '#app',
})

现在，要将任何数据放入我们的应用程序，我们将需要data属性：

var app = new Vue({
       el: '#app',
       data: {
         title: "Hello World!"
       }
    })

我们可以称它为title。现在我们需要将它链接到我们的文本；为此，只需删除文本并添加{{ title }}或属性的名称。

让我们通过单击左上角的“运行”按钮在 JSFiddle 上运行这个：

第一个 VueJS 实例

现在，你可能会说这样做没有意义。还没有完成。让我们通过添加一个输入来扩展我们的 VueJS 应用程序，该输入将与<p>中显示的文本相关联：

<input v-model="title" type="text">

我们在输入中添加了v-model指令；这将把文本框绑定到 Vue 中的数据属性title。

你现在可以尝试添加任何文本；它将跟随你写的内容：

JSFiddle 练习结束

这个介绍现在已经结束。如果你在这一步遇到任何问题，你可以访问我的 JSfiddle https://jsfiddle.net/knee8oha/9/。

对我来说，学习的最好方式是通过实践。所以，让我们一起创建一个应用程序，让你熟悉 VueJS。

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

在这个练习中，我们将构建一个组件，用于在 VueJS 中显示位置的天气。这个组件将包括一个位置搜索文本框；然后将搜索openweathermap.org/，这是一个免费的天气 API，所以我们可以获取基于位置的搜索信息。

Vue Material

让我们创建一个简单的 HTML 文件。在这个练习中，我们将不使用 Bootstrap，而是使用另一个库，并看看它有多容易。我们将使用 Vue Material，这是一个基于 Google Material 设计的库。你可以在vuematerial.io/上查看它：

Vue Material

点击“入门”来查看他们的安装说明。幸运的是，他们提供了一个 CDN 和一个准备好使用的模板。让我们复制他们的模板并粘贴到我们的 HTML 文件中：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">
  </head>

  <body>
    <div id="app">
      <!-- Your code here -->
    </div>

    <script src="img/vue"></script>
    <script src="img/vue-material@beta"></script>
    <script>
      Vue.use(VueMaterial.default)

      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

让我们首先在<head>部分添加一个标题：

<title>Vue JS Weather App</title>

Vue Material 提供了方便的布局，我们可以重用。我们希望应用程序首先是移动端的，并带有一个标题。我们可以使用以下代码插入到我们的应用程序中：

<div id="app">
      <div class="page-container">
        <md-app md-waterfall md-mode="fixed-last">
          <md-app-toolbar class="md-primary">
            <div class="md-toolbar-row">
              <div class="md-toolbar-section-start">
                <span class="md-title">VueJS: Weather</span>
              </div>

              <div class="md-toolbar-section-end">
                <md-button class="md-icon-button">
                  <md-icon>more_vert</md-icon>
                </md-button>
              </div>
            </div>
          </md-app-toolbar>

          <md-app-content>
            <!-- OUR APP HERE -->
          </md-app-content>
        </md-app>
      </div>
    </div>

现在，在我们的<script>部分，我们将要挂载这个应用程序：

<script>

      Vue.use(VueMaterial.default)
      var weather = {
        el: '#app'
      }
      var app = new Vue(weather)
      app.$mount("#app")

    </script>

现在我们有一个准备好使用并完全响应的应用程序：

我们的 VueJS 应用程序

组件

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

  • 数据

  • 方法

  • 模板

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

  • weatherLocation：这将存储在输入中输入的位置

  • weatherApi：这是你的 OpenWeather API 密钥openweathermap.org/appid

  • weather：我们将在这个组件中存储 API 的结果

  • displayWeather：如果我们想要显示数据，我们将设置一个 true 或 false（布尔值）

为了调用 OpenWeather API，我们将使用 Vue 资源方法.get()。这个方法的结果将存储在天气数据点中，然后将displayWeather数据点设置为true。

OpenWeather API

要能够访问 API，我们需要注册并创建一个账户。话不多说，让我们在openweathermap.org/appid创建一个账户：

OpenWeather 注册页面

点击“注册”并按照流程进行。最后，你将访问一个带有 API 选项卡的会员仪表板。你可以复制提供的 API 密钥：

OpenWeather API

现在让我们看看如何调用 API 并获取结果。如果我们查看 OpenWeather 提供的文档(openweathermap.org/current)，你可以得到一个 API 调用的示例：

API 文档

URL 的组成如下：

API 调用 URL

我们从这个调用中得到的结果看起来像这样（你可以自己测试）：

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

提供的代码是 JSON 格式，通常用于显示数据。代码是被压缩的，所以很难阅读。让我们使用一个工具来解压缩它。我使用了unminify.com/。要做到这一点，只需粘贴代码并点击 Unminify：

{
    "coord": {
        "lon": -0.13, "lat": 51.51
    }
    ,
    "weather":[ {
        "id": 300, "main": "Drizzle", "description": "light intensity drizzle", "icon": "09d"
    }
    ],
    "base":"stations",
    "main": {
        "temp": 280.32, "pressure": 1012, "humidity": 81, "temp_min": 279.15, "temp_max": 281.15
    }
    ,
    "visibility":10000,
    "wind": {
        "speed": 4.1, "deg": 80
    }
    ,
    "clouds": {
        "all": 90
    }
    ,
    "dt":1485789600,
    "sys": {
        "type": 1, "id": 5091, "message": 0.0103, "country": "GB", "sunrise": 1485762037, "sunset": 1485794875
    }
    ,
    "id":2643743,
    "name":"London",
    "cod":200
}

现在代码更多了，你可以看到数据显示为id和value。我们可以使用任何一个。在这个练习中，我们将选择以下数据：

  • 平均温度

  • 最低温度

  • 最高温度

  • 天气描述

  • 日出和日落时间

让我们开始吧。

API 调用

首先，我们需要创建一个将包含所有内容的 HTML 标签。

让我们在我们的应用中创建一个 HTML 标签<weather>：

<md-app-content>
            <!-- OUR APP HERE -->
            <weather></weather>
          </md-app-content>

在script部分，让我们创建我们的第一个 Vue 函数：

Vue.component('weather', {

});

正如我们之前所说，我们需要数据、方法和模板来显示内容。让我们从数据开始：

Vue.component('weather', {

    data: function(){
            return {
                weatherLocation: '',
                weatherApi: '05911854df7aa0be884df72549a75fd9',
                weather: [],
                displayWeather: false
            }
        },

});

该函数将存储以下内容：

  • 用户设置的位置

  • 我们的 API 密钥

  • 从 API 中提取的数据

  • 一个布尔值，用于显示或不显示信息

接下来，我们需要添加方法，如下所示：

methods: {
            getWeather: function()
            {
                return this.$http.get('http://api.openweathermap.org/data/2.5/weather?q='+ this.weatherLocation +'&appid=' + this.weatherApi).then((response) => {
                    this.weather = response.body;
                    this.displayWeather = true
                }, (response) => {
                    this.weather = [];
                    this.displayWeather = false
                });
            }
        },

我们将设置getWeather函数，它将执行以下操作：

  • 使用我们的 API 密钥和用户设置的位置调用 API

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

  • 如果没有来自 API 的答案或内容，显示信息将设置为false

最后，模板将如下：

template: '<div id="weatherApp">' +
                  '<form v-on:submit.prevent="getWeather"><md-field> <md-icon>place</md-icon> <label>Location</label> <md-input type="text" name="weatherLocation" v-model="weatherLocation"></md-input></md-field>' +
                    '<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 与您的本地副本一起工作，可以在离线时执行：

  1. 每当您保存工作时，git 都会创建您文件的图像，也称为提交

  2. 每次创建此提交时，它都会链接到您的其他提交，这意味着文件上的所有活动都会发生变化

  3. 每当您（或团队中的其他人）进行更改时，您的提交都会记录下来

  4. 您可以使用它来撤消更改并返回到以前的提交

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/)

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

总结

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

posted @ 2024-05-24 11:13  绝不原创的飞龙  阅读(8)  评论(0)  编辑  收藏  举报