你的网站看起来是什么样的？在你编写代码之前讨论好你的计划和设计工作，包括：“我的网页要呈现什么信息？”，“我想要什么字体和颜色？”，和“我的网页有什么用处？”。
第一步：做出计划
在做任何事之前，你需要一些主意。我的网页到底有什么作用？一个网页基本可以做任何事，但是你的第一次尝试应该简单点。我们将以编写一个简单的网页开始，包括一个头部，一张图片和几个段落。
开始之前，你需要回答这些问题：
- 你的网页内容是什么？你喜欢狗狗，纽约或者吃豆人吗？
- 你的主题中要展示什么信息？编写一个标题和几个段落，再想几张你想展示出来的图片。
- 你的网页长得什么样？用高级一点的术语来说就是，你的背景颜色是什么？什么字体合适：正式的，卡通的，粗犷的，还是精细的？
提示：复杂的项目需要详细的参考手册，内容包括颜色，字体，网页中各项目的间距，合适的编写规范等等。参考手册有时也被称为设计指南或者品牌手册，你可以在 Firefox OS Guidelines 查看一个参考手册的例子。
为你的设计出一个草稿图
接下来，拿一支笔和一张纸然后粗略地画出你希望你的网站呈现出来的样子。对于你的第一个简单网页，并没有什么好做的，但是你现在应该养成这样的习惯。这真的很有用——你并不需要成为下一个梵高！
提示：即使是在真正的复杂的网站中，设计团队也是首先在纸上画出草稿，然后在图形编辑器中或者使用 Web 技术作出数码模型；
Web 团队通常包括一个图形设计师和 用户体验设计师 。图形设计师的作用很明显是将网页视觉部分组合在一起。用户体验设计师则拥有一个某种更抽象的角色来解决用户如何浏览和与网站交互。
选择你的内容
在这个时候就可以开始将最终呈现在你的网页上的内容放在一起了。
文本
你应该还记得之前的段落和标题，确保它们在身边。
主题颜色
要选择一种颜色，访问 the Color Picker 找出你喜欢的颜色。当你在一种颜色上点击时，你会看到一个类似于 #660066 的奇怪的六位编码。这是十六进制编码，并且表示了你的颜色。复制下来并将它暂时保存在安全的地方。
图像
要选择一个图像，访问 Google Images 搜索合适的内容。
- 当你找到想要的图像时，在图像上单击。
- 按下 查看图像 按钮。
- 在下一页，右击图像（或者在 Mac 上 Ctrl + 点击），选择 图像另存为...，然后选择一个安全的位置存放你的图像。另外你也可以复制你的浏览器地址栏上的图像地址以便后来使用。
提示：大部分网络上的图片，包括 Google 中的都是有版权的。为了减少你盗用版权行为的可能，你可以使用 Google 许可过滤器。点击工具按钮，然后在使用权限的选项下选择可再利用之类的选项：
字体
要选择一种字体：
- 访问 Google Fonts 并把列表一直往下翻直到你找到你想要的。你也可以使用左侧的控制栏来过滤结果。
- 点击你想要的字体旁边的 “+”(添加) 图标。
- 点击页面底部面板的 "* Family Selected" 按钮（ "*" 取决于你选择的字体数量）。
- 在弹出框中，你可以看到 Google 给你的代码片段并且复制至你的文本编辑器并保存以便后续使用。
