信息加速发展的互联网时代，越来越多的科技公司为了专注核心竞争力业务以及降低软件项目成本，开始将项目中的部分业务模块分发给第三方外包公司来完成。而这样是否就意味着大幅度地降低成本了？

事实告诉我们，并没有。

本文作者作为一名外包商，以自身的经历告诉我们本可以在3天之内完成了的一个报价仅为 1500 美元的静态 HTML 页面，是如何被大型企业硬是拖成了一个为期 7 周且需要耗费 18000 美元（约为人民币12万）项目的。

不久前，我作为承包商工作，经常从一个项目跳到另一个项目。有些是短期的，工作一周左右，可很快提交我的工作成果。也有的项目会持续几个月，这期间我会攒一些钱用以休息一段时间。

我更喜欢短期工作，因为这样的工作使我可以在单位时间内收取更高的费用。这样不仅我感觉是在为自己打工，而且我觉得我不需要太努力工作就能过上还算体面的生活了。我的最高费率仍然在合理的范围之内，而且我总是提供高质量的服务。这就是我和一家大公司定下这个项目之前我的工作状态。

这家公司联系我的时候显得很着急，经理告诉我他们现在就需要一个人来搞定这件事。需要一个不怎么需要公司培训就能马上上手，而且能交付最大性能的人。不管怎么说，这刚好是我的座右铭。这个项目正是我喜欢的工作类型。它内容简短，很快就能做好，而且报酬很高。

在谈判确定好合适的费率后，我收到了一封包含说明的电子邮件。他们给了我更多关于这个项目的背景。他们的开发人员在没有事先告知的情况下就离开了，并且从未跟任何其他人汇报过项目的进展。

我们需要您毫不分心地完成此项目。在合同期限内，您将只与我们合作，并及时交付成果。我们会对给您造成的麻烦进行补偿。

任务说明很简单：阅读这些需求然后估计完成这个项目需要多长时间。这是我职业生涯中遇到的一个那类比较容易的项目之一。这是一个HTML页面，包含一些简单的动画和几个嵌入的视频。我花了一个晚上研究需求并在脑中模拟实施。这些年来，我已经学会了在能确定收到报酬之前不为客户写任何代码。

我确定了这个项目充其量也就是一天的活儿。但为了保持谨慎，我上报了20个小时，总计1500美元。毕竟这只是一个HTML页面而已，我也只能收取这么多费用。他们让我到25英里外的卫星办公室去。在为他们工作的那三天里我必须天天开车去那儿。

第二天，我到了卫星办公室。在一个购物中心，然后通过一扇秘密的门进入了一个秘密的世界，一些工作人员在他们的小隔间里安静地工作着。接待员给我看了一个我将用它来工作的全新MacBook Pro，我必须从零开始设置环境。我的确更偏向于使用公司的笔记本电脑，因为他们经常要求承包商安装一些可疑的软件。（我可不想装到自己电脑上。）

我花了一天时间下载我的工具包，设置电子邮件、SSH密钥和请求服务的授权。换句话说，我什么都没做。这就是为什么我上报了20个小时，还没开始写代码呢，光前期设置就耗费了8个小时。

第二天，我准备开始真正地干活了。有了MacBook Pro，我用它发了一封电子邮件给经理。我告诉他我已经准备好工作了，正在等待上述的资源。那天，我在我柔和灯光下的工位上待着，玩着手指，直到太阳落山。

我再次计算了一下。根据我的估计，我还只剩4个小时的时间来完成这项工作，这对单个HTML页面来说也不是不可能。但不用说，第二天，我把这剩下的4个小时花在了吃公司赞助的午餐上，伙食很不错，而且我与其他员工玩得很开心。

当预计的20小时到期时，我确保向经理发送了另一封电子邮件，让他知道我确实人一直在公司，但我没有收到我需要的资源。当然，那封电子邮件被无视了。

接下来的星期一，我犹豫地开过了这25英里。令我惊讶的是，经理已经来到卫星办公室，并热情地问候了我。他是个三十来岁，很随和很不错的人。我很不解，他并不像当初要雇我的那时候那么着急了。我们进行了友好的交谈，没有提到任何工作。后来，我们去吃午餐，他付了钱。这是美好的一天。完全没工作。

好吧你可以说我很容易形成习惯，但如果你供我吃喝并每天呵护我，我会习惯这一切。这变成了一个例程。

我来上班，花一些时间在网上阅读以及看视频。我每天发一封电子邮件，所以他们知道我确实去了公司。

然后，我会去吃午饭并和碰见的有趣的人一起玩耍。在一天结束时，我站起来，伸个懒腰，打一个当之无愧的哈欠，然后开车回家。

我习惯了。事实上，我在期待这些。当我终于收到一封带有指向我需要的资源的链接的电子邮件时，我反而有点失望。我重新开始脚踏实地，变回自己工作时的严肃脸。但是，在花了几分钟查看Zip文件后，我才注意到它缺少了我需要的大部分内容。设计师给我发了一些Adobe Illustrator文件，我无法在MacBook上打开它。

我回复了电子邮件来解释我的疑虑，而且一并问了一些其他问题以节省时间。那时，我当初上报的20个小时时间早都已经过了。我现在真的想要完成这项工作了。

点击发送后不久，我收到了一封电子邮件。只有一句：“转发给Alex”，然后Alex得到了这封电子邮件的抄送。

Alex回答说他转发给了Steve。Steve回答说Michelle是设计师，她会了解得更多一些。

Michelle的自动回复称她正在度假，所有询问都应该直接告诉她的经理。

她的经理回复说“谁是Ibrahim？(我的名字)”我的经理回复说他很抱歉还没有向大家介绍我。

作为承包商，在人们注意到我在那里工作之前，我通常就已经完成我的工作并离开那家公司了。但这次，我收到了大量欢迎的电子邮件。这样的邮件持续了一段时间，而我被迫回复那些友好地过了头的邮件。有些人很想跟我本人见面。当我说我在加利福尼亚州，离得远着呢，他们有点失望。以及羡慕，他们说他们羡慕加州美好的天气。

他们很有礼貌地无视我的电子邮件，用抄送来转移我的问题，把我问过的任何事情归为垃圾邮件。我花了很多时间，像一位考古学家在深深的电子邮件之沟内挖掘，希望找到我问题的答案。

你可以想象每当我想起我唯一的任务是构建一个静态HTML页面时，我感觉到的冒名顶替综合症（心虚，怀疑自己的回报不是理所应得的）的程度之深。原本虚报了的20个小时的项目变成了为期7周的冒险，期间我享受免费午餐，每天开车50英里，并翻看电子邮件。

当我最终完成项目时，我在GitHub上将它发送给了团队。

在不久之后，我收到了邀请，整个团队会用Google Hangout开视频会议对我的代码进行Code Review。

我花了一个多月的时间来写一个静态HTML页面，而现在整个团队都要评价我的工作？

那个什么，我要为自己说句话，这个页面也包含一些JavaScript交互，是响应式的，还包括CSS动画......好吧我真的觉得自己像个来冒名顶替的。

当然，视频会议的时间又重新安排了几次。当它终于发生时，我和我的工作已经不是会议的主题了。他们都坐在纽约某个地方的同一个房间里，像一个紧密团结的团体一样聊了一会儿。事实上，他们所说的关于我做的项目的所有内容只有：

• 人1：嘿，有人在做这个赞助页面吗？
• 人2：是的，我认为已经完成了。
• 人1：太好了，我今晚合并吧。

那天晚上回家的时候，我意识到自己正面临另一个挑战。我在这家公司工作了7个星期，而我的原始报价为1,500美元。这相当于每年11,100美元或每周214美元。或者直接说，每小时5.35美元。

这几乎还不够我付油钱的。所以，我给他们发了一张发票，我按照原来的每小时费率给他们报了7个星期，总额达18,000美元。我当然感到羞耻，但我还能怎么办呢？

就像我预期的那样，我没有收到回复。如果所有大公司都有什么相同之处，那就是他们并不急于按时支付账单。这么简单的工作要价这么多，我觉得自己像一个骗子，但话又说回来了，我又不是来做慈善的。我每天开车50英里来做这项工作，如果工作没有完成，那不是因为我不想。这是因为他们回复太缓慢了。

接下来的一周我得到了回复。这是一封来自经理的冷邮件，他把我每天的工作日分成不同的时间段。然后他把我工作的那部分时间高亮了，每天标记一个小时的午休时间。最后他用我们商定的小时费率做了一些计算。

显然，我算错了。我错误估算了总数。调整后，他们欠我的总金额是21,000美元。

请确认重新调整后的小时数，以便财务可以给您写个支票。

我很快回复了确认。

原文：https://idiallo.com/blog/18000-dollars-static-web-page

作者简介：Ibrahim Diallo，具有多年开发经验的软件工程师。

本文为 CSDN 翻译

多学员在学习的过程中都遇到过这样的问题：为什么老师讲的我都能听懂，然而做起来却总是诸多问题？千锋重庆校区老师告诉你，其实这是正常现象，谁也不能几天就成为大师，你的实践还太少了！练习多了，经验多了，静态网页自然也就手到擒来。

静态的网页其实就是由两部分组成，一个是底层结构HTML，另外一个就是负责修饰结构的CSS。其实书写静态网页就像小时候过家家，首先得把需要的家庭成员找齐了，即首先考虑要做一个什么样的网站，例如一个综合类网站包括：搜索框、导航、文章类别模块、文章标题以及一部分广告板块；一个博客主页包括：导航、文章缩略、文章搜索、文章导航以及没有显示但可能会有的评论区。

写页面的时候是有剧本的，这个剧本指网页设计图，或者某个现有网页，建议大家在模仿网上现有网页的时候利用浏览器自带的截图功能，把整个完整的页面截取下来，QQ浏览器，360浏览器都可以做到。这样的优点在于可以利用PS自己一步步测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。

按照设计好的剧本接着就可以找对应的成员了，例如百度网页从上往下分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同类型的页面，布局要复杂一些。

当看到一个网页时，需要在脑海当中对页面进行一个简单的扫描，如果把页面当成一张纸，要怎么样从大到小一点点分割。当有了初步的认识之后，就可以把这些东西转化成HTML结构，所有不同颜色的框框在写的时候用的都是DIV。

从上往下，从大到小一点点先把某个模块以不同的颜色色块利用代码堆积出来。保证大的模块布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input、文字、超链接a、列表ul li，这时候简单的页面结构就出来了。

接下来要把写好的结构进行美化，不然页面就会一团乱麻，没有美感，而网页当中润色部分是用CSS来做的。这个环节需要更加细心，例如百度首页导航红色框整体在绿色框的右边，需要给红色框添加float：right；红色框里面文字的字号大小，字体，字体颜色，水平间距，垂直间距都需要一点点写。如果在写的过程中遇见了问题，可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，CSS看右边，看看CSS属性有没有显示，有没有划掉，有没有黄色报错等等。

在做页面时，需要大量的练习，才可以熟能生巧。一个页面写完之后，总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样解决，深入思考这个模块的这个效果可不可以用其他的方法来实现，以做到举一反三。

千锋重庆HTML5大前端培训，配合实战项目讲解网站页面布局，让你从容应对HTML、CSS的学习，基础打好了，才能更有信心面对之后的挑战。