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

1. 使用 Bootstrap

本质上 Bootstrap 是一种隔栅系统，由两名 twitter 员工 Mark Otto 和 Jacob Thornton 开发的开源前端框架，它集成了很多 CSS 样式的合集，可以帮助那些不懂或者不擅长 CSS 的开发人员快速的建立一个外观看起来很不错的网站。

使用 Bootstrap 的另一个好处就是网站本身就是自适应的（Responsive），可以省去各种为移动设备等的适配工作。此外，Bootstrap 还是可定制的，可以根据你的需求自己配置。

2. 网站设计Bootstrap 定制指南

决定使用 Bootstrap 是迈出的重要一步，相比其他可以在前端开发上节省很多精力，但有利有弊，如果你决定使用 Bootstrap 的话就意味着很有可能会和其他人“撞框架”，就像默认的 WordPress 皮肤一样，如果大家都完全用 Bootstrap 的样式的话，会让不少见得多的人心生厌烦。

一. 字体

修改网页字体是让网站看起来更有特色、有现代感的捷径，我们可以去谷歌的字体服务（免费正版）中随意挑选自己喜欢的字体，但是要注意字体间的搭配。

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

在 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 字体服务，它们的字体更多。

二. 纹理

知道如何让一个网站看起来更加高雅优雅一些吗？是的，纹理。但是这些纹理效果应该去哪里寻找呢？设计师 Atle Mo 的 Subtle Patterns 网站是个不错的去处。

三. 图标

这里的图标并不是指那些透明的 PNG 图片图标，而是图标字体，其加载方式和字体一样，由 CSS 样式控制，比起图片图标来说这种图标字体加载速度更加，对资源的消耗也更低。对于 Bootstrap 框架来说，整合的图标字体是Font Awesome，和谷歌的字体服务一样也是免费开源的。要使用它只需将其下载下来，然后在根目录下创建 /fonts/ 文件夹，将其放进去。然后再将 font-awesome.css 文件放到 /css/ 目录文件夹。接着将引用写入网页头部中，代码为 ，这时候我们可以随时在网站上任意地方自由使用这些图标字体了。

四. CSS3

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

五. jQuery

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

六. 色调

到这几乎差不多已经完成调整了，但如果你够细心的话会发现按钮以及导航菜单的颜色还是 Bootstrap 默认的蓝色系。在有着设计师存在网站，设计师都会负责进行网站色调的调整，为了保证网站的一致性，所有按钮和导航一般是三到四种颜色。