码农如何快速打造一个有制作感的网站

英文原文：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开发的开源前端框架，它集成了很多 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 或Typekit字体服务，它们的字体更多，更多的字体搭配方案可以参考 Type Connection。

二. 纹理

知道如何让一个网站看起来更加高雅优雅一些吗？是的，纹理。就像 24WAY 的背景纹理一样。

　　但是这些纹理效果应该去哪里寻找呢？制作师 Atle Mo 的Subtle Patterns网站是个不错的去处，我们接下来就使用这个网站上的Cream Dust纹理。点击下载，将纹理图片保存到本地，然后放到根目录下的 /img/ 目录文件夹中，最后到 CSS 样式表中加入代码 body { background: url (/img/cream_dust.png) repeat 0 0;} 即可。(如果需要更多样式的纹理或纹理的其他用法的话可以看看 Smashing 的这篇文章)

添加纹理前后对比(大图)

注：相关网站制作技巧阅读请移步到建站教程频道。

版权所有：博久网络-高端网站建设公司
转载注明来源：码农如何快速打造一个有制作感的网站
本文版权网址：http://www.sosuoseo.com/news/201505/2045650.html