HTML页面编写的点点感受小结

进入口碑也已经有三四个月的时间了，感觉在工作过程中收获最大的是在编写HTML页面上，从视觉稿到网页DEMO，没办法，基本都在做这样的工作。从最初的wap整站、杭州首页、bug需求到广州首页、上海首页、店铺大全等页面改版，到当下的口碑卡频道首页改版的DEMO的编写。心情从最初的烦躁、枯燥的调试到轻松自如，到当下的信手拈来、游刃有余，摆脱了IE6、7 Fuck bug的束缚，每次尝试到不用写一个hack来完成整个页面布局的滋味，记忆犹新。

在公司同事中学到了不少的经验，也总结出来了自己的一套开发步骤：

整体分析页面布局
归纳统一、分类，切图（CSS Sprites）
拆分模块、规划HTML结构、规划并编写CSS
组合成页面（得益于YUI的页面布局生成器组件）
第一步：整体分析页面布局。
当拿到视觉稿的时候，不是着手去想怎么编写HTML、CSS代码，而是先从整体上分析页面的布局，观察页面各个模块的间距差别、划分header，body，footer、CSS Sprites、切图事宜、页面色调、背景如何设置等等，之后再细化到每个模块的布局，从外到内，逐步细化。可以说，这一步是非常关键的，它给了下面将要进行的代码编写一个整体的框架布局。

第二步：归纳统一、分类，切图（CSS Sprites）
整体分析过后，就是归类、组合模块的时候了。这一步还是的需要从整体来看，分析页面哪些模块的样式相似（常见的就是ul列表，以及一些图文编排），包括颜色、样式、修饰、背景、宽度、padding、margin、border等等。将相似的模块的样式归类，这为接下来编写CSS代码大有好处，可以最大化的精简CSS代码。

第三步：拆分模块、规划HTML结构、规划并编写CSS
在前期工作都做了之后，这步就改到了动手写代码的时候了，我喜欢将每个模块或者列拆分开来编写，这样做的好处是我可以先不管整体布局，从HTML语意化的角度架构HTML结构，此时HTML代码较少，在编写CSS以及查看HTML代码的时候不用花费太多时间了（痛恨HTML代码多了，上下拉滚动条，累人！）

第四步：组合成页面。
在每个模块都编写好之后，借助页面布局生成器（幸亏有了它，效率第一啊！缺点是HTML结构复杂，-_-），将每个拆分的模块整合起来，同时也清理CSS文件的代码，整合CSS代码也有一些些技巧的：在CSS Sprites里设置HTML元素的背景的时候，把全部的元素都写在一处：

/* background url */
.rhs-bd,.business-join h1,.yk-mod-content .business-join p a,.business-open-flow ul,.business-case-list ul li,
.kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li,
.recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;}

这样相应的元素只需要设置background-position就OK了，代码整洁，结构清晰，重构维护成本小。还有一点就是慎用margin，在IE6、7下margin会引发很多问题，所以在编写CSS和规划HTML布局的时候，需要考虑到需要使用margin还是使用padding，各有各的好处，margin能保持HTML结构比较简洁，而padding原理是在当前HTML元素的子元素中设置padding来实现布局（当然也可以在当前元素下，但是它会改变宽度和高度，需要重新调整宽高）。所以我的经验是：在模块的HTML和CSS编写方面，都会尽量使用padding，特别是涉及到float的时候，使用padding会避免很多问题。有句话说的好：既然明知道这样做会引发bug，那就尽量不这样做。

上面的开发步骤因人而已，偶是喜欢并且习惯这样的一个思索开发过程，正在体验它的乐趣。

最新评论