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

出处：http://www.geekpark.net/topics/176891

注：拥有属于本身的网站是不少人的梦想，但大多数人只能借助像 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（用于主体内文）。

1. 在网页头部中加入此代码：

2. 在 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 的这篇文章)

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

三. 图标

这里的图标并非指那些透明的 PNG 图片图标，而是图标字体，其加载方式和字体同样，由 CSS 样式控制，比起图片图标来讲这种图标字体加载速度更加，对资源的消耗也更低。在去年 24WAY 曾经有一篇如何在网站中使用图标字体的文章。

对于 Bootstrap 框架来讲，整合的图标字体是Font Awesome(Shifticons也是一个不错的选择)，和谷歌的字体服务同样也是免费开源的。要使用它只需将其下载下来，而后在根目录下建立 /fonts/ 文件夹，将其放进去。而后再将 font-awesome.css 文件放到 /css/ 目录文件夹。

接着将引用写入网页头部中，代码为 ，这时候咱们能够随时在网站上任意地方自由使用这些图标字体了，如要想将一个卡车图标添加到注册按钮的话只需声明一下就能够， Sign up today。同时为了防止加入图标字体后引发按钮拉伸变形，还须要一点点额外的工做，将按钮宽度加大一点（.jumbotron .btn i { margin-right: 8px; }）。最后效果以下：

四. CSS3

将上面都搞定后接下来要作的就是再加点 CSS3 特效了，若是时间不够的话简单的添加上盒阴影box-shadow和字体阴影text-shadow就可让网站增色很多，CSS 代码以下。

h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }

若是时间足够的话还能够添加一个放射渐变填充效果，可让标题的显示效果更重一些，以下面对比图所示。(若是想要更多 CSS 效果的话能够去学习一下 CodeSchool 的在线教程)

五. jQuery

其实到这里了话网站看起来已经很不错了，但为了让它更加个性化，还须要再添加上一张背景图片。对不少程序员来讲这一步是比较难以进行的，那么应该如何选择一张设计师可能会使用的图片呢？答案就是去iStockPhoto或相似的付费图库中去寻找。

这里咱们将使用 Winter Sun 这张照片，为了让网站保持自适应布局，还须要使用 Backstretch 这个 jQuery 插件让背景图能够随时自动调整大小。

1. 首先须要付费下载背景图片，而后放到 /img/ 文件目录中去。

2. 将此图片设置为的背景图(background-p_w_picpath): $.backstretch("/img/winter.jpg");

3. 加入背景图后网页主题部分会产生遮挡，因此可让其透明，这样网站效果看起来会更加现代、有设计感。这里可使用这个技巧将网站变得透明，代码见右边，.container-narrow {background: url(/img/cream_dust_transparent.png) repeat 0 0;}

 效果

六. 色调

到这几乎差很少已经完成调整了，但若是你够细心的话会发现按钮以及导航菜单的颜色仍是 Bootstrap 默认的蓝色系。在有着设计师存在网站，设计师都会负责进行网站色调的调整，为了保证网站的一致性，全部按钮和导航通常是三到四种颜色(更多能够查看极客公园之间的文章小按钮大学问)。

在这里，虽然不可能像大公司网站那样取色严谨，但仍是有一些快速的方法使网站看起来很搭配的。

1. 使用 GIMP 的取色器读取背景图片的主题颜色，确认其 GBR 十六进制值；

2. 使用 Color Scheme Designer确认与差别大但同时又互补的颜色；

3. 最后根据肯定的颜色来制定按钮，能够用[Bootstrap Buttons][]等在线直接生成。

这样首页上那个大大的注册按钮就搞定了，接下来是修改导航菜单的颜色，这个比较简单，写入代码 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 便可。看看咋样。

结语

若是经历过了上面所说的流程的话，相信你已经能够在比较短的时间内制做出了一个还能拿得出手的网站了。