码农如何快速打造一个有的设计感网站.pdf

码农如何快速打造一个有设计感的网站 [核心提示] 还在用 WordPress 建站吗?落后了亲!赶紧试试 Twitter Bootstrap 吧。 注：拥有属于自己的网站是很多人的梦想，但大多数人只能借助像 WordPress 这样的 CMS 实现，甚至很多公司网站也是这样。但这些网站大多数 看起来都比较缺乏设计感，通俗来讲就是有点“土”。那么对于像程序员以及其 他对设计比较小白们来说，如何能让你的网站看起来更加前卫，有范，有设计感 呢?极客公园编译了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 为您提供解决方法。 像我这样的程序员来说经常被“设计”这个词吓到，因为我是一名程序员而 不是设计师，我拥有的是计算机学位证，另外我对 Comic Sans 字体并不介意。 (注：Comic Sans 字体是 Win95 附带的一种漫画字体，设计行业极为排斥，设 计师或那些拥有美学情结的人不屑与之为伍。更多查看这篇为什么不要使用 Comic sans 字体) 虽然只是一名程序员，但我还是想让自己的网站看起来更加吸引人，一方面 出于虚荣，因为这样可以显得我更加“专业”，而另一方面是出于现实，因为研 究机构调查发现用户会更加信任那些网站“看起来”很好的网站。但是因为很长 时间一直从事的是编程工作，对设计并不是熟悉，甚至害怕，因为在我这个外行 看来设计是由很多只能感受不能言传身教的规则以及所谓的设计感悟组成的，知 识壁垒比较高。 但是不久之前我决定要尽我最大努力让我网站看起来显得更加专业一点，即 使比不上真正由设计师操刀做出来的效果，但对像我这种没有设计能力的人来说 还是很有帮助的。 1. 使用 Bootstrap 如果你还没有使用 Bootstrap 的话那么赶紧开始吧，这个来自 Twitter 的 开源项目使得网站设计真正进入大众化时代。 本质上 Bootstrap 是一种隔栅系统，由两名 twitter 员工 Mark Otto 和 Jacob Thornton 开发的开源前端框架[注：想了解更多请查看什么是 Twitter Bootstrap?]，它集成了很多 CSS 样式的合集，可以帮助那些不懂或者不擅长 CSS 的开发人员快速的建立一个外观看起来很不错的网站。 使用 Bootstrap 的另一个好处就是网站本身就是自适应的(Responsive)， 可以省去各种为移动设备等的适配工作。此外，Bootstrap 还是可定制的，可以 根据你的需求自己配置。(注：英文不好的可以查看中文版的 Bootstrap 文档或 Bootstrap 中文网) 2. Bootstrap 定制指南 决定使用 Bootstrap 是迈出的重要一步，相比其他可以在前端开发上节省 很多精力，但有利有弊，如果你决定使用 Bootstrap 的话就意味着很有可能会 和其他人“撞框架”，就像默认的 WordPress 皮肤一样，如果大家都完全用 Bootstrap 的样式的话，会让不少见得多的人心生厌烦。 所以，如果实在抽不出时间的话可以去Wrap Bootstrap 购买一份主题皮 肤，这些主题皮肤都是由专业的设计师设计的，虽然不会成为唯一定制的，但已 经看起来相当不错了，而且这种方法是最快速的。接下来就是以 Narrow marketing 这个模板(下图)为例教你如何自己定制一份完全属于你自己的 Bootstrap 。 一. 字体 修改网页字体是让网站看起来更有特色、有现代感的捷径，我们可以去谷歌 的字体服务(免费正版)中随意挑选自己喜欢的字体，但是要注意字体间的搭配， 在这里我们选择由 DesignShack 推荐的谷歌字体搭配中的一种：Cardo(用于标 题) 和 Nobile(用于主体内文)。 在网页头部中加入此代码： 在 CSS 样式表 custom.css 中加入以下代码：h1, h2, h3, h4, h5, h6 {font-family: Corben, Georgia, Times, serif;} p, div {font-family: Nobile, Helvetica, Arial, sans-serif;} 添加完后刷新即可查看效果了，现在我们的网站样式已经变成下面这样了， 看起来比默认好多了。 此外，除了谷歌的字体服务外还可以使用像 Fontdeck 或 Type