《 网站与应用 》系列课程，您慢慢看

我们一起学了很多，有时又会感觉什么也没学到，有天我听了一个广播受到点启发，这种迷惘地感觉其实是因为没有目标，没有终点，因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标，然后完成，这样感觉会好一些，可以验证所学，也可以接受一些挑战。

先从一个商业网站开始吧，功能不会太难，需求又很大，又可以很好地展示网站从设计到开发再到部署的整个过程。我觉得商业网站的主要任务就是去讲故事给目标客户听，让他们了解，接受，使用网站提供的产品与服务，这其实也是任何网站与应用都需要有的功能。

模仿

为了更真实一点，开始我想假装某国际公司找到我们，要求设计与开发一个网站。我还我问过一位在上海某家 Web 开发机构工作的大哥，咨询他想要做的这个网站的报价，如果是机构做的话，大概 30 万左右，个人做大概是 8 万左右。我给这家公司发了邮件，请求使用他们网站的图片与文字。对方非常客气地拒绝了。所以，我们得低调点，偷偷地用一小部分。

我尽量让网站的设计与开发更普遍化，因为大部分商业网站或者说任何网站都有一些共用的东西：导航，幻灯片，图文列表，产品页面 ...   所以不管你以后是不是要做商业网站，也可以学到一些你需要的东西。

设计

我喜欢简洁有效的设计，所以你不会看到我去做多么复杂，多么炫酷的视觉效果。我认为设计要为目的服务，如果一个页面的目的是讲个产品故事，那我们的设计就应该流畅自然地讲完这个故事。如果一种效果或一个设计元素可以帮助我们更好地讲这个故事，那就用一下。如果没有帮助，那就很可能是一种干扰，应该考虑去掉它。

我们真的会拿起设计工具，甚至有个视频我专门去买了一个设计应用（Sketch）。先把最终要展示出来的页面用设计图的形式表示出来。这个设计图是你跟客户或团队的其他成员之间的很好的交流工具。

流程应该像这样：草图 - 线框图 - 设计 - 原型 - 开发。草图是你最初的想法，很可能是在一张白纸或脑子里完成。线框图可以展示页面大体的样子，线框图不会包含具体的内容，用一些形状表示页面上出现的元素。然后去设计具体的元素。完成以后做出原型，原型会带交互，比如点了哪里链接到哪里，页面切换的效果等等，原型非常接近网站与应用最终的样子。最后一步是去开发。我跳过了草图与原型。

我用的这个设计应用（Sketch）目前只能在 macOS 上运行。如果你正好用的也是这种操作系统，并且愿意花 99 美金买一个这样的应用，可以跟着做一下。如果您不愿意花钱去买这个应用，或者用的是 Windows 平台，或者您已经有了自己已经习惯的设计工具，那可以跳过这部分内容。

开发

有了设计，我们会先一点一点把它用 HTML + CSS + JavaScript 的形式表示出来，做出静态的页面，也就是用浏览器能懂的方式把页面表示出来。这部分内容会用到一些样式框架，一些 JavaScript 库，我们也会自定义一部分样式，也会写几行 JavaScript 。这一步还会用到一套完整的工作流程，这个工作流程又会用到一些工具，所以在第一集里我就介绍了这套工作流程，还有它里面包含的工具。了解一下这些工具，非常有必要，这样再遇到它们的时候你就不会怕了。

网站与应用还得有个后台，可以管理内容，可以动态地生成用户请求的页面。后台框架可以选择的就非常多了，WordPress，Drupal，Laravel，Rails，Express  ...   任何能让你完成目的的框架都可以。我会先选择其中的Drupal。首先 Drupal 是有品牌的，有数不尽的大型组织为他背书，所以你很容易说服你的客户使用 Drupal 。还有，Drupal 拥有非常好的社区，不管到哪儿，你都不会感到孤单。另外，他也非常适合我们要做的东西。

部署

我们会一起亲手搭建服务器，把做好的网站部署到服务器上。

工具

我会尽量减少使用的工具。称得上工具的东西，它就是给我们提供帮助地，不是来吓唬我们地。我不算勤快，所以，你得相信有懒病的人（我），他不会喜欢去做不必要的工作。如果由于我得愚蠢，把事情弄复杂了，请你一定要救救我。

慢慢说

我会慢慢说，尽量让大伙都能看懂我在干什么，所以非常适合新手看。虽然如此，如果你是完全的新手，将会听到大量的陌生词汇，这会让你非常头痛，我还没有太好的方法解救你。不过，如果你能坚持跟着做，我保证过了一段时间，等你慢慢熟悉了这些陌生的东西，一定会豁然开朗。这很可能没有快捷方式，一定是要等一段时间才会这样。或许我们的脑袋就是这么工作地。

附注

1. 《 网站与应用：商业》1：https://ninghao.net/course/4688

如果您之前看过宁皓的课程，并且认同我们的风格，不用想太多，应该马上订阅我们。遇到合适的太难了，真的。