你的网页将呈现什么样子?在你编写代码之前讨论好你的计划和设计工作,包括:“我的网页要呈现什么信息?” “我想要什么字体和颜色?” “我的网页有什么用处?”

第一步:做出计划

在做任何事之前,你需要一些主意。我的网页到底有什么作用?一个网页基本可以做任何事,但是你的第一次尝试应该让事情简单点。我们将以编写一个简单的网页开始,包括一个头部,一张图片和几个段落。

开始之前,你需要回答这些问题:

  1. 你的网页内容是什么?你喜欢狗狗,纽约或者吃豆人吗?
  2. 你的主题中要展示什么信息?编写一个标题和几个段落,再想几张你想展示出来的图片。
  3. 你的网页长得什么样?用高级一点的术语来说就是,你的背景颜色是什么?什么字体合适:正式的,卡通的,粗体的还是微小的?

提示:复杂的项目需要详细的参考手册,内容包括 颜色,字体,网页中各项目的间距。适合的编写规范等等。参考手册有时也被称为设计指导或者品牌手册,你可以在 Firefox OS Guidelines 查看一个参考手册。

为你的设计出一个草稿图

接下来,拿一支笔和一张纸然后粗糙地画出你希望你的网站呈现出来的样子。对于你的第一个简单网页,并没有什么好做的,但是你现在应该养成这样的习惯。这真的很有用——你并不需要成为下一个梵高!


提示:即使是在真正的复杂的网站中,设计团队也是首先在纸上画出草稿,然后在图形编辑器中或者使用Web技术作出数码模型;

Web团队通常包括一个图形设计师和 用户体验设计师 。图形设计师,很显然,是将网页视觉部分组合在一起。用户体验设计师则负责更具体的部分,如用户如何浏览和与网页交互。

选择你的内容

现在,最好以将最终将呈现在你网页上的内容放在一起开始。

文本

你应该还记得之前的段落和标题。

主题颜色

要选择一种颜色,访问 the Color Picker 找出你喜欢的颜色。当你在一种颜色上点击时,你会看到一个奇怪的六位编码像 #660066。这是十六进制编码,并且表示了你的颜色。拷贝下来并将它暂时保存在安全的地方。

图像

要选择一个图像,访问 Google Images 搜索合适的内容。

  1. 当你找到想要的图像时,在图像上单击。
  2. 按下 查看图像 按钮。
  3. 在下一页,右击图像(或者在Mac上 Ctrl + Click),选择 图像另存为..., 然后选择一个安全的位置存放你的图像。另外可选的方法是, 拷贝你的浏览器地址栏上的图像地址以便后来使用。

提示:大部分网络上的图片,包括 Google 中的都是有版权的。为了减少你盗用版权行为的可能,你可以使用 Google 许可过滤器。只需 1)点击搜索按钮,然后 2)选择使用权利:

字体

要选择一种字体:

 

  1. 访问  Google Fonts 并把列表一直往下翻直到你找到你想要的。你也可以使用左侧的控制栏来过滤结果。
  2. 点击“+”(增加)图标旁边的你想要的字体
  3. 点击页面底部面板的"* Family Selected"按钮(‘*’取决于你选择的字体数量)。
  4. 在弹出框中,你可以看到并且复制Google 给你的代码片段保存至你的文本编辑器以便后续使用。

 

文档标签和贡献者

标签: 
 最后编辑者: abc3660170,