前端之路——从视觉稿开始-2012.10

一直觉得要把一张视觉稿做成一个很炫的页面很难，也不知道该如何下手。通过这半个月来的学习的努力，自己终于把两个页面做出来了，虽然页面功能比较简单，但是在此期间自己也遇到了很多问题，特别是一些前端开发新手遇到的问题，所以整理一下和大家分享，希望对大家做前端开发有帮助。
总结一下，主要分为下面几点：

拿到视觉稿最先要做的事
选择栅格系统
PS切图技巧（取色、量宽高、保存为png-8）
盒模型
定位
样式的选用:背景图片Or <img>
浏览器兼容
代码质量（加载速度）
事件代理和事件绑定
第三方api和fdev控件的使用
和需求方的沟通（开发前、开发时、开发后）
经验之谈------------新人注意累积经验

1、拿到一个UED给的视觉稿第一件要做的事情：

a、看视觉稿是否合理、是否规范

b、挖掘惰性的设计（一个功能存在多个设计、模块和文本的间距无标准、交互上的问题），及时和UED沟通

c、找出性价比不高的设计，这个需要有一定的前端开发经验，并对公司fdev库有充分的了解

d、页面设计的组件和功能模块是否已有实现，有的话先标注出来

e、挖掘隐性需求，并及时和需求方确认

2、对视觉稿所有功能和需求点都清楚并理解之后，我们就可以开始构思网页应该怎么写了，第一件事情我觉得应该是选择栅格系统

打开PSD文件，看一下视觉稿属于哪种栅格。然后选择合适的栅格，先把页面主体布局好

3、PS切图技巧

个人觉得记下几个常用的快捷键会提高工作效率，特别是开的软件多，电脑有点卡的时候：ctrl+1：显示实际像素；i：取色、标尺等工具；m：选择区域；z：放大缩小......

其他PS技巧相信大家都懂的了，需要注意的一点就是切好图之后，怎么保存为png-8。我一开始就是傻傻地直接另存为，选择png格式文件，最后在ie6上面测试的时候，

才发现很多背景图片本来应该是透明的都变成了灰灰的。
正确的做法是：

a.色彩丰富的、大的图片切成jpg的；

b.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；如果在ie6下面还是灰灰的话，就需要用photoshop改为索引模式再保存就可以了。

c.半透明的切成png24。

4、盒模型

在真正动手写前端代码之前，我还以为盒模型很简单，就是一个外边距、边框、内边距和宽高，所以也没有多重视他。但是在做了一个demo并在ie6上面测试之后，才发现自己对做得很不好。

因为自己在写样式的时候没有认真算好每一个边距和宽高，虽然在高级浏览器上面是正常的，但是在ie6下样式就会错乱。后面调试一个一个改，导致返工情况比较严重。
正确做法是：

在动手写样式之前，要计算好外边距、边框、内边距和宽高，大脑很清楚每一个是多少，然后再去写,而且要和父层相对应，那样出现的问题才少。用汉军的一句话说，就是：写前端时你会发现很多时候你不是在写代码，而是在做数学计算。

5、定位

有些元素节点我们需要漂浮在页面上，或者悬浮在一个图层上某个位置，这时候就需要用到定位了。

定位分为相对定位和绝对定位。在学习定位之前，最好先把块级元素和行内元素弄清楚。
css的定位机制中需要注意的两点是：

a、块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来，有可能会合并

b、行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度

其他定位方面的相关知识比较简单，这里再说一下我在定位的时候遇到的一个问题吧。我在副导航条里面进行了相对定位，也就是position: relative，然后根据主导航条进行偏移。在ie6下面测试的时候发现问题出来了，辅导航条跳离了上级<div>的区域，后来经过排查，发现我在这个定位之前在顶级节点加了一个属性：position:relative，把那属性删除后就正常了。

所以每次使用定位的时候一定要注意，该用的时候再用，不需要用到定位的节点就不要随便加position这个属性，用绝对定位的时候一定要处理好，是相对于父节点绝对定位还是对页面绝对定位。想好这些之后，再动手写样式，相信不会遇到什么问题。这里绝对定位有一点要注意的就是，如果你连续好几个子节点都是相对同一个父节点绝对定位的，而且还都有float属性的，最好加上clear:left，避免层层叠加后在ie6上面看不到。

6、样式的选用:背景图片还是<img>

视觉稿有时候有些地方可以使用背景图片来解决问题，有时候也可以使用<img>标签，我们在写网页的时候要先想好这个模块怎么实现，考虑业务场景，如有些地方的图片需要经常更换的，肯定是用<img>，有些标签按钮是在一个页面出现很多次的，选择css来写则比较省事。

7、浏览器兼容

因为JS代码都是用jQuery写的，没有用到javascript原生方法和属性，所以JS导致的浏览器兼容比较少，更多时候是因为css样式没写好，导致在ie6下错乱，所以建议写前端的时候，完成一个功能模块就到ie6下测试一下。

8、代码质量

前端也需要注意代码质量的，好的代码会提高页面加载速度，节省更多的资源。因为自己才开始写前端，这方面体会不深，写的代码质量也一般，以后继续好好学习吧。

9、事件代理和事件绑定

写JS代码前一定要把这个理解，理解什么时候用代理，什么时候用绑定，用绑定的话在哪里进行绑定更加合适等等，剩下的事情就是到jQuery API那边去看看自己应该使用那些方法，代理或者绑定的时候命名空间不要写太长。

10、第三方api和fdev控件的使用

在做这次的需求中，主要在网上找了一个旋转木马的组件（http://fredhq.com/projects/roundabout

），其他的控件都是使用fdev封装的，感觉使用起来太方便了。像视频播放器，一开始不知道fdev里面有，所以就copy了优酷的视频播放器代码，但是发布的时候发现那个代码在线上是没有用的。然后才改成fdev库里面的控件。以后有空要经常看一下fdevlib，要清楚里面都有哪些控件，以后在开发中就能更快更好地实现一些功能。

11、和需求方的沟通（开发前、开发时、开发后）

和需求方的沟通真的太重要了，特别是前端开发的时候，需要注意的地方很多，需要和UED沟通确认的地方也很多。我就是在开前没有和UED进行足够的沟通，需求挖掘得不够深入，导致首页一个热点阅读的功能模块理解错误，而在开发前和开发时都没有问过UED这个模块的相关功能，视觉稿给的信息很少，自己的主观导致最后这个模块需要进行重写。所以以后在开发过程中一定要和需求方保持良好的沟通，有疑问及时问，不能想当然。

12、经验之谈------------新人注意累积经验

在调试的过程中，我发现一些很难解决的问题，自己可能要花一两个小时都找不到根源的一个问题，汉军一下子就能定位并提出解决方案了。等别人把解决方案拿出来之后，自己方才觉得，原来这个问题这么简单的。这就是经验之谈了。刚开始我们可能没什么经验，遇到的问题特别多，这时候就需要我们进行经验积累了，把我们遇到的问题都记下来，然后以后再遇到的时候就知道该怎么解决了。路还很长，我们积累经验的目的就是为了让后面的路更加平坦，要学的东西还有好多，继续加油。