十八岁自学少年：我的个人网站是怎么做出来的

今天介绍的是一位仅18岁，年纪不大但艺惊四座的有为少年@DandyWeng ，是一个真正的 Homeschooler。爱好摄影、计算机和数码产品，他的个人简介上写着：整个世界都是我的学校，学自己之所想所爱。自由的身心定能使我成为一个一直朝前行走的行者 : ）这是他的文章，分享关于自己创建第一个网站的过程：

少年的网站：dandyweng

我个人网站（www.dandyweng.com）的 2013 版上线已经两个多月了，没想到这个网站受到了不少人的喜爱和专业设计师的抬爱。上线第一天，单日访问量超过了建站三年以来的总和。上线后，我一直都想写一篇博文，简述一下网站的建设过程。但因为种种原因，直到今天才有时间写这篇博文。

上线以来，常常都有人通过 Email 或微博问我："你的网站是怎么做出来的？"，这样的问题，还真不是三言两语就能说清楚的，希望这篇博文能够提供一些答案吧。

某一天的搜索引擎入口记录里，还见到了这样的关键词

我有个习惯，做网站到每一个关键点时都会截图留念，所以现在将所有图片贴在一起就可以展示出一个比较连续的建设过程。

建设过程

基本构想

国内外很多网页设计师都建议在开工之前先画草稿（线框）图，但我一般不用这种方法，只是在一个记事本里记下在脑海里一闪而过的想法。因为每次计划做 一个网站的时候，我脑子里就已经浮现出了它大概的样子，虽然很模糊，但我觉得它没必要太清晰。很多创意的灵感都是在做的过程中发现的，所以只要脑子里有一 个大概的方向就可以开工了，具体的细节部份一边做一边想即可，没必要一开始就把自己的思维给框住。根据大概的构想，我先整理出了一个大概的制作流程：

基本构想 → 设计规划 → 框架构建 → 优化文字 → 细节粗调 → Retina 处理 → 响应式处理 → 动画制作 → 细节微调 → 回迁上线 → 离线缓存和 Web App → 多语言版本

设计规划

谈到这个网站的设计，就必然要谈到 Bootstrap。这是我首次使用 Bootstrap 框架制作网站。其实开始我一直在犹豫要不要用它，因为它预置了很多 CSS 样式和框架，用起来太方便了，以致于我觉得会减少那种完全自己设计制作的成就感。后来由于开发时间有限，就采用了它，但主要只使用了它的框架系统，界面元 素部份以自己写的为主。页面由七个独立模块组成，按顺序分别是：简述、旅行、摄影、创造、Apple、联系和关于，每个模块都有它自己的特点。这种模块化 的设计也方便做响应式处理。

框架构建

解析测试版域名，挂一个简单的页面测试

引入 Bootstrap，测试

研究了一下 Bootstrap 的文档，做出了大概的框架，开始做地图的部份

细节粗调

这一步把所有的元素都摆到位，实现各元素基本的功能。

逐步录入地图的坐标点数据

坐标点数据录入完成，简单做一下完善地图的细节

给 header 换个背景看看

用简单的文字先拼出各个模块大概的样子

当时的记事本草稿

Retina 处理

Retina 也就算高清视网膜屏幕的支持，作为一个"果粉"，这点当然不能放过。技术方面，我先试用了一些 jQuery Retina 插件，但普遍都有加载速度慢的问题。看来还是不能偷懒，只有自己写。思路是用 JavaScript 检测 devicePixelRatio，若是 Retina 屏幕就将值写入 Cookie，然后刷新页面，再用 PHP 读取该 Cookie，输出对应的图片（高清或普通）。在 Retina 的 Macbook Pro 上测试还遇到了各种各样的奇葩问题，逐个修复后最终效果确实不错。后来发现 iPhone 等小屏幕 Retina 设备不需要使用针对 Retina Macbook / iPad 制作的大尺寸图片，只要将普通尺寸的图片缩小即可，所以再给 JS 增加了检测 screenwidth，PHP 再做相应的调整，提高了小屏幕 Retina 设备的加载速度。

响应式处理

其实我在响应式设计开始流行之前，就已经在试着应用了，到现在可以说已经比较熟悉了，所以没有遇到太多技术问题。

动画制作

动画的设计和制作花费了不少时间，既要有特色，又要够酷炫，又不可浮夸，还要考虑性能和兼容性等等。本来还设计了一些动画，但经过反复调试，发现容 易使在某些设备和浏览器崩溃，于是又移除掉了。但这个联系方式的交互还是我比较喜欢的，在一个邮箱地址中隐藏了几个不同的联系信息，可以分别切换显示。

细节微调

这里优化了不少细节，譬如字体、字色、阴影、纹理、滚动条等等，均是使用 CSS 3 来实现的，包括标题文字的渐变和倒影。最后 header 背景还是选了我在甘南的尕海拍的一幅作品。

有一些略为浮夸的设计也换掉了，比如下面这两个就是被换掉的头像彩色阴影和 Apple 模块的角标

回迁上线

测试完成，从测试服务器迁回主服务器，解析域名。把网站发给身处各地、使用不同网络的朋友们测试。

离线缓存和 Web App

说实话，这俩功能其实没有什么实际的意义。这毕竟不是什么功能型网站，绝大多数访客都只会访问一次，而这两个功能都是经常访问时才能发挥作用。但是 考虑到这两项技术我已经在别的网站已经应用过了，相对比较熟悉，搬到这上面来也用不了多少时间，所以顺手就做了，让大家体验一下 HTML 5 离线缓存在一秒内加载完一个网页是多爽的一件事。考虑到旅行模块的地图需要动态更新，所以没有缓存它，而是用 AJAX 在页面载入完成后再加载并渲染地图。

多语言版本

一开始的计划是要做多语言版本的，包括香港粤语繁体版、中国台湾正体版和英文版，但到现在还没有时间制作（其实也没啥必要，嘿嘿）。

常见问题 FAQ

最近常常有人问我一些问题，我在这里按问题出现的频率排序，一起回答一下吧。
如果你还有其他问题，也可以在此评论提出。不过如果是技术方面的问题，建议还是先在网上搜索一下吧，这样可以找到更全面的答案。

网页设计是怎么学的？

在这方面，我没怎么读过相关的书，只是先学习好基础知识之后，参考一些优秀网站的代码，遇到不懂问题的就上网搜索一下。我对感兴趣的事物有着较大的 好奇心，而且因为我是一个 homeschooler，能有比较多的时间来学习这方面的知识。不过，我毕竟不是专业设计师或程序猿，只是爱好而已，并没有系统地学习过这方面的知识， 在学习其他的知识和技能也占用了我不少时间，所以我的程序代码（特别是 JS 和 PHP）写得真是一般般，还需提高，见笑了，嘿嘿。

网站用了多长时间开发？

我的个人网站每年都会彻底地重新设计和制作一次。前几年的更新一般是在过年前完成，但今年事情太多，拖至四月中旬才开工，直到五月中旬才上线。平均每天大概忙活一两个小时，这期间还心血来潮做了一个智能手表 Pebble 的应用下载平台"Pebbapps"，后来发现实际意义不大，浪费了不少时间。真正花在个人网站制作上的时间应该在 20 多小时。

网站是用什么软件做的？

其实，理论上只要能进行文本编辑的软件都可以用作网站开发。我以前是用 Windows / Mac 自带的记事本，简简单单，没有复杂的功能，没有代码提示器也养成了我写代码比较严谨的习惯。后来做的网站程序类的代码多了，记事本就有点不太够用了，就开 始用 Office FrontPage，至少代码能上色和纠错了。后来在 Mac 上用 Dreamweaver 习惯之后，在 PC 上也开始用了，但也很少用那些高级功能，最喜欢它的一点就是可以把编辑器调成黑色背景，保护视力。

网站的加载速度怎么这么慢？

这有两个原因：
其一，网站本身的前端性能确实不够好，也是网站采用大量图片和动画的代价之一。我曾在加载速度和展示效果间做过权衡，后来考虑到这毕竟不是功能型网站，大 多数访客只会访问一次，所以还是将效果放在第一位。后来我也发现一些可以提高加载速度的改进方法，但现在暂时还没有时间实现；
其二，因为我还是未成年无法备案，无法将服务器放在国内，所以只能放在国外，并且它只有一个节点，所以我所有网站的访问速度都普遍较慢。
补充：9 月 8 日做了一个小更新，启用镜像 CDN 加速，优化了前端性能，加载速度现在基本上已经没有什么问题了。

网站能开源吗？

由于这个网站没有多少需要动态更新的内容，主要是以前端为主，没有多么复杂的后台，数据库也只是用于统计访问数据而已，所以用浏览器的开发者工具就能几乎看到全部有用的代码。
这个网站的代码可供学习或参考，但最好不要直接整个复制喔，那样学不到什么东西。并且希望你能注明来源、不要外链图片。

网站的地图里为什么没有中国台湾？

曾经主页上的地图里没有中国台湾，后来考虑到这个原本用地图为背景的模块、仅用于标示我旅行足迹的"地图"会刺激一部分爱国人士的神经，还是把宝岛台湾加上去了。

你真的才 17 岁？

惭愧惭愧，我也希望能再大一点。但这个还是假不了的，我又不是天一，嘿嘿嘿。

原文地址：dandyweng
 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。
设计微博：拥有粉丝量58万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：