If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

网页设计

我们已经向您展示了如何制作网页,但我们可能还没有向您展示如何让网页更美观。当然,怎样更美取决于观看者,所以最终是由您——和您的用户——来决定怎样的网页设计更悦目。
除了美观,您可能还希望您的网页不同于其他网页,使它可以从一众页面中脱颖而出。
这往往是最困难的部分——让您的网页看起来既美观又与众不同。也许您可以通过用斑马条纹覆盖一切并全部使用64像素大小的字体来让其变得不同,但您会这样做吗?

选择正确的字体

默认情况下,浏览器会为网页提供通用衬线字体,这往往会给访问者传达比较正式的感觉。您可能会想更换为无衬线字体,或者您可以指定一种大多数用户计算机上都具备的字体,比如微软雅黑或仿宋。
若要使网页具有更独特的外观,还可以使用自定义网页字体。例如,可汗学院所有页面都使用了Lato字体,这是一种不错的无衬线字体:
一个可汗学院的标题截图
当您使用一种网页字体时,实际上是让用户的浏览器将字体文件下载到用户的计算机,以便您可以从CSS引用该字体文件。这些是浏览器的额外下载内容,所以您应该注意不要使用过多,而且您不应该加入任何您不会实际使用的字体。一个很好的免费网络字体来源是 谷歌字体。这是一个可汗学院的 示例网站 ,该网站使用了两种谷歌字体。
无论您从哪里获取您的字体,您应该注意字体过多。一般来说,您不应该在您的页面上使用超过两个或三个字体,而且您使用的字体应该很好的搭配在一起。这个 网站 提供了一些能够很好搭配在一起的谷歌字体的例子。

选择合适的颜色

在设计网页的时候,您可能会选取一个主色调——一系列能够很好地互相搭配并且可以被用于网页各部分的颜色。这些颜色可能来源于您公司的徽标,或者与当前页面的主题有关,又或者它们只是搭配起来很好看。
需要帮助挑选主色调吗?如果您已经决定了几个需要在调色板中的颜色,您可以去 Paletton网站,它可以让您体验不用类型的主色调: 单色调,三色调,邻近色,和四色。
绿色主色调的截图
如果您要从头开始,您可以在 COLOURLovers 上挑选几种颜色搭配。这是一个由热爱色彩的人组成的,共享色彩搭配和想法的社区。这是一个叫做巨型金鱼的调色板:
蓝色和橙色主色调的屏幕截图
一旦您选好了您的颜色,您就可以进行最困难的部分了:为网页每个部分决定适合的颜色。网页标题应该是什么颜色?链接呢?正文呢?背景呢?Paletton 最方便之处就在于它为您提供了使用主色调的示例:
使用绿色主色调的示例网站的屏幕截图
在决定您要如何将您的主色调转换为css的时候,请考虑以下几点:
  • 如果您将链接的样式从默认的样式更改太多,用户可能不会意识到它们是链接。
  • 文本的前景色和背景色应该有足够高的对比度,这样用户就不用仔细盯着显示屏了。您可以使用这个 对比度检查工具.
  • 有很多人有视觉障碍,有的颜色搭配对他们来说没有的对比度。在此 色盲模拟器 中检查您的颜色。
如果您不确定您使用的颜色是否合适,把它发个几个朋友,征求一下他们的意见。他们能很容易的阅读所有内容吗?他们知道哪些内容可以点击吗?有任何的颜色让他们不爽吗?他们喜欢哪些颜色?

合理使用空白

我曾经问过我的同事——他现在是谷歌的设计师——他成功设计的秘诀是什么。他的回答?空白!
空白指的是两个元素之间的任何间隔,而且在CSS中,它经常来自于 padding (填充),margin (边距) 和 line-hieight (线高) 等属性。
我的朋友是对的——空白会对您网页的美观程度和可读性产生巨大的影响。我的设计师朋友经常花费几个小时调整空白来将它调整合适,因为他知道空白有多重要。
举一个极端的例子,以下是一个课程页面边栏有空白和没空白的比较:
具有不同空白的可汗学院的屏幕截图
这对您意味着什么?很难给出关于空白的硬性和快速的规则。每当您有一个元素位于另一个元素旁边时,请考虑他们之间的边距有多大。如果您有一个具有背景或边框的元素,请考虑它们有多少填充。在创建段落和列表时,请考虑额外的线高是否会提供一些额外的阅读空间。

从模板和框架开始

您可能在阅读了所有这些准则后被吓倒,特别是当您认为您不具备艺术眼光的时候。别担心,您不需要成为一个设计大师来制作一个精美的网页。您可以先从模板入手,享受其他设计师的设计成果。
模板是看起来已经像是一个完整的网页的HTML和CSS,里面通常已经填充了一些展示内容。您可以从 W3Schools或通过网页搜索找到“免费网页模板”,希望您需要的那些都是免费的!下载模板后,您可以替换内容并继续修改CSS以满足您的需求。
两个网页模板的截图
CSS 框架是 CSS 规则的集合。它为您创造华丽的网页提供了一个很好的起点。有很多流行的 CSS 框架可以使您更便捷地创建一个精美的网站—Twitter BootstrapZURB Foundation, Pure CSSTopcoat 以及很多。 您可以在可汗学院查看 Twitter BootstrapZURB foundation 的例子。
一旦您下载了 CSS 框架以后,您就可以浏览 CSS 文档来查找示例——它们经常也包含模板!——并且找出哪个 CSS 类名称里包含了您所希望的外观。
当您使用模板或框架时,您将面临和其他网站看起来完全相同的风险,从而无法获得用户的重视。若要避免这种情况,请添加您自己的标志,并更改一些关键元素比如字体或者背景色。

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.