您的网站会是什么样子？
您的网站会是什么样子？ 讨论了在编写代码之前，您需要为您的网站进行的规划和设计工作，包括“我的网站提供什么信息？”，“我想要什么字体和颜色？”，以及“我的网站是做什么的？”。
| 预备知识 | 对你的计算机操作系统、用于构建网站的基本软件和文件系统有基本了解。 |
|---|---|
| 学习成果 |
|
首先：规划
在做任何事情之前，您需要一些想法。您的网站究竟应该做什么？网站基本上可以做任何事情，但是，第一次尝试时，您应该保持简单。我们将从创建一个简单的网页开始，其中包含一个标题、一张图片和几段文字。
首先，您需要回答以下问题
- 您的网站是关于什么的？ 您喜欢狗、纽约还是吃豆人？
- 关于该主题，您呈现了哪些信息？ 写一个标题和几段文字，并想一张您想在页面上展示的图片。
- 简单来说，您的网站看起来像什么？ 背景颜色是什么？什么样的字体是合适的：正式、卡通、粗犷响亮、还是微妙？
注意： 复杂的项目需要详细的指南，其中包含颜色、字体、页面项目之间的间距、合适的写作风格等等所有细节。这有时被称为设计指南、设计系统或品牌手册，您可以在 Firefox Acorn 设计系统 中找到示例。
草绘您的设计
接下来，拿起笔和纸，大致勾画出您希望您的网站看起来的样子。对于您的第一个简单网页，没有太多需要勾画的，但您应该养成现在就做这件事的习惯。这真的很有帮助——您不必成为梵高！
注意： 即使是真实的、复杂的网站，设计团队通常也会从纸上的草图开始，然后在后期使用图形编辑器或 Web 技术构建数字模型。
Web 团队通常包括一名 平面设计师 和一名 用户体验 (UX) 设计师。平面设计师负责网站的视觉呈现。UX 设计师的角色更为抽象，负责处理用户将如何体验和与网站互动。
此时，最好开始整理最终会出现在您网页上的内容。您应该仍然保留之前准备好的段落和标题。将它们放在手边。
选择主题颜色
让我们为您的页面选择一个背景颜色。
- 转到 颜色选择器，找到您喜欢的颜色。
- 当您选择颜色时，您会看到一个奇怪的六字符代码，例如
#660066。这被称为十六进制代码（十六进制的缩写），代表您的颜色。暂时将代码保存在安全的地方。
选择一张图片
现在是时候为您的网站找到一张图片了。
-
转到 Google 图片。
-
请注意，网上大多数图片，包括 Google 图片中的图片，都受版权保护。为了降低侵犯版权的可能性，您可以使用 Google 的许可过滤器。点击工具按钮，然后在出现的使用权限选项下进行选择。您应该选择知识共享许可选项。
-
搜索合适的图片。
-
找到您想要的图片后，点击图片以查看放大视图。
-
右键单击图片（Mac 上按住 Ctrl + 点击），选择图片另存为…，然后选择一个安全的位置保存您的图片。
选择一种字体
有一组称为网页安全字体的字体——例如 Arial、Times New Roman 或 Courier New——这些字体通常在大多数计算机系统上都可用。如果您在网站上使用这些字体之一，浏览器将加载用户计算机上可用的字体文件。
但是，如果您想使用设备上通常不提供的其他字体，您需要将它们与您的网站文件一起包含，或者从第三方字体服务引用字体文件，以便浏览器可以按需下载它们。Google Fonts 就是这样一个提供多种字体访问的服务。
让我们使用 Google Fonts 为您的网站选择一种字体
- 转到 Google Fonts。
- 向下滚动字体列表，直到找到您喜欢的字体。如果您找不到喜欢的，可以使用另一列中的过滤器来缩小搜索范围。
- 点击您选择的字体，然后在下一页点击“获取字体”按钮。
- 在下一页，点击“获取嵌入代码”。
- 复制提供的两个代码块，并保存在安全的地方供以后使用。
注意： 与图片一样，许多字体都受许可保护，这意味着您不一定能在商业网站上自由使用它们。现在在学习示例时没有问题，但在为真实网站选择字体时请记住这一点。