大踏步走

2010年7月25日

hzhjun — Sun, 25 Jul 2010 21:51:18 +0800

很久很久没有更新了，一片空白。。。

一年了，也是这样，一片空白。。。

暂无相关日志

PageCookery打造属于自己的微博客

hzhjun — Thu, 22 Apr 2010 16:21:58 +0800

时值当下，微博已泛滥成灾，你手头是否有twitter、t.sina、t.sohu、t.163、t.qq等等账号呢？虽然现在某些微博的邀请码一码难求，但形式基本还是一样的。如果你在为选择用哪个微博而纠结，那干脆一个都不用，自己弄一个岂不是更好？这个想法很不错。。。

现在就推荐一款很好的个人微博程序，让你也拥有一个属于自己的mblog。

PageCookery是一款国产的微博客，采用Php+Mysql架构而成，是国内首款公开发行的单用户版Mblog程序，目前已支持jiwai.de双向同步，官方暂时未提供全自动安装器。

虽然需要个人手动安装来完成，但如果你折腾过个人网站，这个安装就相当容易了，下面就简单介绍下安装过程：

一、上传安装文件。和其他博客程序一样，到官网下载PageCookery的最新安装程序，通过FTP上传到主机空间，当然还需要设置访问该微博的二级域名或者是二级目录，至于用哪个可根据自己情况来选择；

二、修改config.php配置文件。根据文件中的注释说明填写相关内容，当然前提是你已经创建一个数据库；微博的Title也是在这里设置，最后保存。需要注意的是必须将该文件保存为utf-8格式；

三、设置目录和文件权限。设置cache目录，rss.xml，music.json，photos.json文件为属性权限为 777；

四、导入数据表。登录到已经创建的数据库中选择导入（import），浏览sql/install/database.sql，设置文件字符集为utf-8。执行成功后，将有7张表导入到数据库中；

五、安装。准备就绪，接下来就访问你设置的地址进行安装吧。输入一个用户名和密码登录即可进入系统，还等什么，赶快来一条试试吧。

就这样简单，想试试就赶快动手吧~

最后分享下：

PageCookery官方网站：http://www.pagecookery.com

PageCookery官方网站下载地址：http://www.pagecookery.com/downloads/

预览效果：http://t.iqianduan.com

更换域名后的连锁反应

hzhjun — Tue, 06 Apr 2010 18:20:26 +0800

今天，在qq空间看网站订阅内容是，有朋友提到说Google Pr值更新了。于是查了下自己的www.iqianduan.com，还真是：从0一下跳到了4，终于有了点变化。

二月份更换了域名，虽然做了301重定向，但效果却不甚满意，二个多月的统计，如下表所示：

上图中，2010月2月5号是原域名最后一次统计，其他的是更换域名后不定期的数据。最明显的变化就是新域名的排名和Pr统计全部重新开始，没有继承原域名的数据，以前在网上看到有朋友说通过301跳转是可以将原域名的这些数据保留的，难道是我操作方法的问题？时至今日，这个已不再重要，让他重新开始！

各搜索引擎的收录情况也很不相同，Google的反映最快，当天就收录，随之收录量逐渐增多；Baidu给我的反映很难捉摸，更新慢不说，收录还得看他心情，时多时少，到目前还没有更新到原有收录的一半，其他几家搜索引擎还算比较正常，没有多大的出入；

反向链接的收录情况一直是很惨的，因为我对网站的推广实在是少之又少，基本就是在自己经常去的一些论坛和博客签名或留言，没有将推广当个很重要的事情来抓，说到这一点，不得不提到卢松松，他的方法和坚持，让我五体投地！虽然我也经常关注一些朋友写的推广方法，但我觉得还是要结合自身的情况来定，合适才是最重要的。而且我觉得推广不仅单纯的为了网站，其实对自己也是一种锻炼。比如SEO的学习和应用，虽然工作中用的比较少，但这跟我的工作是紧密相关的，以后也会用的上。那现在通过学习既可以在小站上练手，又是一种知识的累积；再说网站推广，这其实就是一个交际和沟通的过程，在qq群里与其他博友交流或是论坛里发帖撰文，都可以认识很多朋友，与他们的交流，就是一个很好的学习、锻炼的过程。

到现在，我的站还是比较纯粹的，一直没有放广告。因为自己知道就目前的状态和自己投入的精力，即使放了也不会有很大的收益，反而招经常来的朋友的嫌，干脆不放。如果以后发展好了，抑或通过广告来鞭策自己去更新、维护、推广，那时或许可以考虑了，因为目前还不期待通过网站能带来多大的收益，不过未来未可知，期望一切可以向好的方向发展。。。

以上就是这两个月来对本站的小小总结，不管怎样，都应以平常心对待。不过最后还是要提醒朋友一下，如果要建站，对域名的选择一定要慎重，否则带来的影响可能无可估量！

新的域名，新的征程 (35)

第六期WEB标准化交流会之会后总结

hzhjun — Mon, 29 Mar 2010 11:18:07 +0800

2010年3月27日，第六期WEB标准化交流会如期举行，本期交流会的报名相当火爆，网上报名者有141人，感谢这么多朋友们对交流会的关注和支持，但无奈场地的原因，只能有部分拿到邀请函的朋友来参加，非常感谢北京腾讯为我们提供的场地、饮料、公仔和热情的服务。

言归正传，本期讨论的话题是前端开发在研发流程中与其他岗位协作效率的提升，很切实的主题，作为前端们，这是我们工作中很重要的一部分工作。下面就根据自己的情况谈谈关于工作流程和沟通方面的内容。

一般来说，一个项目的实施，不是一个人可以完成的，更多的包括产品经理（一般会兼项目经理）、设计师、前端开发、后台开发、测试人员等角色，那这些角儿是如何参与到项目中的呢，基本工作流程如下图所示：

按照习惯的流程，每个环节整个工作都完成后再交个下个人，下个人把自己负责的部分全部完成后再给下下个，直到整个项目上线。这样的流程，一环接一环，看似很不错，但是，实施过程中，到最后却经常出现这样的问题：

1、前期耽误的时间太长，如果按照预期进度，则整个项目周期要加长，影响上线时间；

2、后一个环节的工作无法预先开展，只能等前一环节完成了才开始，但再后面的环节还在等着开发，在有限时间内这样的后果就是加班加点完成，或者完成的质量无法保证。如果后期又要投入到新的开发，没有时间跟进进行优化处理，那整个项目又会陷入恶心循环。

看似正常的工作流程却有如此多的潜在问题，有没有一种更优化的流程呢？其实从上一种流程我们可以看出，每个环节都是相对独立的，如果我们在工作过程中，以项目为中心点，先把每个角色都聚在一起，让每个角色都围绕这个中心点同时进行不同的工作或准备，这样会不会更好些呢？一个需求确定后，产品经理根据需求完成产品原型图，确定项目成员后，召开一个小会，让大家都明白将要开展的是一个什么样的项目，每个人需要完成的工作有哪些，让每个人都心中有数（根据框图，设计师明白页面需要的设计风格，前端大概预估完成时间，后台需要实现的功能）。然后将整个项目分阶段进行划分，这个划分的依据是什么呢？主要有两方面：一是客户最希望先看到的东西，比如一个网站改版，那一般首页是优先要完成的；二就是根据功能需求来划分。

通过这个小会，每个人都理解了需求，接下来就更加明确的需要做些什么了，定期进行碰头会，了解进度。所有阶段都完成后，那整个项目也基本完成。

这样有什么好处呢？

1、每个人都明白自己的职责，可以在每个阶段都做好准备，更高效、优质的完成工作；

2、每个阶段都有给迭代期，这样无形中增加了每个人的工作时间，而整个项目的周期却大大缩短；

当然这样的流程也有很大的风险，需要整个团队配合的很好，如果项目经理协调不好，反而会使整个项目陷入一团糟的境地。这其中一个很重要的技巧，就是沟通。

个人觉得，沟通三种方式：

1、直接沟通。这是最有效的方法，可以通过两个人交流，讨论或者邮件的形式，但要讲求度和技巧，不要让矛盾激化。比如，后台在套页面的时候无意中将某个结束标签删掉了，或者他直接在页面中用style定义样式，这样的问题，虽然是对方引起的，但也不能一上来就指责对方，否则问题解决了，但以后两个人合作起来可能会产生芥蒂；

2、间接沟通。举个例子：程序员在实现某个功能的时候，需要一个弹出层的页面，但是设计师没有设计这个弹出层的效果，程序员往往最先找的是前端，他的潜意识里这是前端来实现的。作为前端，他既不能立即回绝程序员，说没有设计图我不干！也不好直接找设计师让设计师做。这时候最合适的方法应该找项目的负责人，由他来协调这个问题，就不会出现沟通不顺的问题了。

3、分享式沟通。每个项目完成后，总会有一些想法，好的经验，心得、暴露的问题等话题，都可以在项目团队中分享；或者看了某好书、学到了新的技术这些都可以在团队中分享。大家畅所欲言，相互PK，瓜子饮料，在这种轻松的氛围下，即学到了新的东西，又增进了各成员间的阶级感情。这个不是空想的，我所在的公司部门就一直有，每个人都有机会为大家做分享。而我们现在坐在一起的交流会也是一种很好的沟通方式，虽然大家不在同一个团队里，但通过交流会，每次都可以学到好多东西，认识很多人，这就是一种收获。

讲到沟通，会上有朋友提到“我们为什么要沟通？”，腾讯的页面组leader说，“沟通是我们对成员进行业绩考核的一个标准…”，也有其他朋友从不同方面讲沟通，其实我们都明白沟通的重要性，为了让工作更高效，团队成员之间更和谐，个人更顺心。。。

交流会上，每个人朋友都从不同角度分享了自己的观点和实际工作的经验，很多是自己没有想过的问题，受益匪浅。感觉自己考虑的面太窄了，只是从很小的点来考虑问题，这也是自己的一个不足之处，以后得慢慢改正了。还有克军出的那道题，虽然看似很简单，但真正能将答案回答的很完美的却没有几个人，这也告诫自己什么时候都不能忽视基础的东西，细节决定高度！

本期有很多精彩的发言，像敏捷、请客吃饭、灰色地带、杯子理论、换家互联网公司等有力的话语一定会让大家记忆深刻。会后的聚餐吃的也很爽，不过餐前着实让我们运动了一番，来回走了两大圈，让大家都有了很好的胃口。最后还是要感谢整个交流会组织的工作人员，线上线下他们都花费了很多自己的时间和精力来为交流会筹备。自己虽然还不是这其中的一份子，但很乐意为交流会做一些自己力所能及的事情，也希望支持交流会的朋友们都动起手来，一起努力！

JavaScript学习之认识DOM（二）

hzhjun — Mon, 15 Mar 2010 17:47:17 +0800

已经很久没有更新了，现在让我们再回到JavaScript学习上来。

上回在《JavaScript学习之认识DOM》中介绍了DOM的基本概念、节点类型和几个常用的方法，接下来，再更近一步学习几个DOM属性。

1、childNodes 属性

该属性是将指定的某个元素下所有的子元素都检索出来，返回一个数组。表现为：

element.childNodes

例如，我们希望检索某个文档中body元素下所有子元素，可以这样写：

var bodyNodes = document.body.childNotes;

具体是多少个呢？可以使用length来获取。

var bodyNodes = document.body.childNotes; alert(bodyNotes.length);

需要说明的是，我们检索出的子元素是所有元素的集合，包括元素节点、属性节点和文本节点等。那如何判断分别是属于那种类型的呢？这就需要我们用到下面这个属性：nodeType

2、nodeType 属性

该属性可以判断某个元素的节点类型，具体格式为：

node.nodeType

所有元素都包括很多节点，甚至一个空格和换行符也是。nodeType共有12个取值，但经常使用到的、有实际意义的包括三类：元素节点的nodeType是1；属性节点的nodeType是2；文本节点的nodeType是3。

3、nodeValue 属性

如果希望改变某个文本节点的值，那可以用到这个属性了，nodeValue的作用就是检索或改变文本节点的值，具体格式为：

node.nodeValue

需要说明的是，nodeValue可以改变的只是文本节点的值，如果为文本节点，那返回的是null值，而不是想要的结果。

4、firstChild 和 lastChild 属性

一般来说，我们在获取某个元素的第一个子节点可以用node.childNodes[0]来使用，但DOM中提供一个更加简单的属性：firstChild。直接使用node.firstChild就可以获取，完全等价于node.childNodes[0]，而且前者更具有可读性。

与firstChild相对应的还有一个lastChild属性，它表示为childNodes[]最后一个元素，也等价于node.childNodes[node.childNodes.length-1]。代码可读性一目了然。

说了这么多理论的东西，觉得太枯燥啦，现在实践一小下。上期我们举了一个照片浏览的例子，点击小图可以在当前页面显示大图。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片浏览</title> <style type="text/css"> </style> <script type="text/javascript"> function showPic(whichpic) { var source = whichpic.getAttribute("href"); //获取属性节点 var placeholder = document.getElementById("placeholder");//获取元素节点 placeholder.setAttribute("src",source);//修改属性节点 } </script> </head> <body> <h1>Photo Shots</h1> <ul> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt01.jpg" title="pic1" onclick="showPic(this); return false;">pic1</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt02.jpg" title="pic2" onclick="showPic(this); return false;">pic2</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt03.jpg" title="pic3" onclick="showPic(this); return false;">pic3</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt04.jpg" title="pic4" onclick="showPic(this); return false;">pic4</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt05.jpg" title="pic5" onclick="showPic(this); return false;">pic5</a></li> </ul> <img id="placeholder" src="http://www.diy168.com/wordpress/wp-content/themes/WordPress%20BBtheme%20CMS/images/leftad.jpg" alt="" /> </body> </html>

提示：你可以先修改部分代码再运行。

接下来，在点击小图显示大图的同时，我们还希望显示出图片的标题（title），这如何修改呢？其实很简单，利用今天我们学到的几个属性即可实现，基本思路就是首先获取每个图片的标题，然后再获取指定显示图片标题的标签元素，最后动态改变显示这个标题的标签元素的文本内容即可。具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片浏览</title> <style type="text/css"> </style> <script type="text/javascript"> function showPic(whichpic) { var source = whichpic.getAttribute("href"); //获取属性节点 var placeholder = document.getElementById("placeholder");//获取元素节点 placeholder.setAttribute("src",source);//修改属性节点 var text = whichpic.getAttribute("title");//获取属性节点 var describe = document.getElementById("discribe");//获取元素节点 describe.firstChild.nodeValue = text;//修改文本节点内容 } </script> </head> <body> <h1>Photo Shots</h1> <ul> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt01.jpg" title="pic1" onclick="showPic(this); return false;">pic1</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt02.jpg" title="pic2" onclick="showPic(this); return false;">pic2</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt03.jpg" title="pic3" onclick="showPic(this); return false;">pic3</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt04.jpg" title="pic4" onclick="showPic(this); return false;">pic4</a></li> <li><a href="http://www.diy168.com/wordpress/wp-content/uploads/ppt/ppt05.jpg" title="pic5" onclick="showPic(this); return false;">pic5</a></li> </ul> <img id="placeholder" src="http://www.diy168.com/wordpress/wp-content/themes/WordPress%20BBtheme%20CMS/images/leftad.jpg" alt="" /> <h2 id="discribe">pic title</h2> </body> </html>

提示：你可以先修改部分代码再运行。

很简单吧，只是增加了3行代码就实现了这样很实用的功能，你也试试看！

在QQ广播中认领自己的博客

hzhjun — Thu, 04 Mar 2010 11:03:15 +0800

今天在QQ邮箱阅读空间中查看卢松松发布的广播时，发现在他的资料里，多了一项：已认领的博客：卢松松博客。觉得很有意思，于是也试着添加下。

认领后有什么好处呢？按照官方说法：“成为认证博主，认领自己的博客，让自己博客的读者看到您的广播，并与您交流；让您广播的关注者也来订阅您的博客”。其实这也是对自己博客推广的一种方法。那如何认领自己的博客，成为认证博主呢？其实具体操作很简单：

1、在QQ邮箱阅读空间里订阅自己的博客，然后在“我的订阅”里选择已经订阅的博客，点击“认领此博客”。
2、确认博主身份，需要在你认领的博客中发布一条新博文，在标题或者内容中包含指定的内容。发布完成后，继续在该页面输入验证码并点击下方按钮提交认领申请。
3、接下来就是等通知了，通过后就可以将博文中包含的指定内容删除了。

现在的我就是在等消息，所以利用这点时间写出来分享下，如果朋友们感兴趣，也可以试试。文中涉及到卢松松的个人资料，如果卢兄介意，我会马上删除的，多谢啦~

IE6下背景捉迷藏问题

hzhjun — Tue, 02 Mar 2010 17:38:00 +0800

其实这个问题之前出现过，也已经处理了；今天在检查其他页面的时候，又出现了，主要是在IE6浏览器下，很诡异。于是一个个的排查，终于发现问题的所在了。

下面先看一个简单的结构：

<ul class="serviceExplain">
<li>一个很简单的结构，只是一个列表，每项前有个项目图标的背景图；</li>
<li>如果仅仅是这样，什么问题都没有。。。</li>
</ul>

只是这样一个结构，再加上样式如下：

提示：你可以先修改部分代码再运行。

浏览显示没有任何问题，但一个网站的结构要复杂的多，有很多上下级包含与被包含着，接来下我们再增加一层结构。

<div class="serviceSupport">
<ul class="serviceExplain">
<li>一个很简单的结构，只是一个列表，每项前有个项目图标的修饰图；</li>
<li>如果仅仅是这样，什么问题都没有。。。</li>
</ul>
<p>我是打酱油的。。。</p>
</div>

样式书写如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6下背景捉迷藏问题</title> <style type="text/css"> /*=== 全局定义 ===*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,b,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td {margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;} img,fieldset {border:0; vertical-align:top;} ul,ol,li {list-style:none;} .serviceSupport {width:990px; background:url(http://www.iqianduan.com/wp-content/uploads/demo/ie6bgbug/images/content_bg.png) no-repeat; position:relative;} .serviceExplain{padding:20px;} .serviceExplain li {background:url(http://www.iqianduan.com/wp-content/uploads/demo/ie6bgbug/images/icon_page.png) no-repeat 0 -196px; color:#000; line-height:30px; padding-left:15px;} </style> </head> <body> <div class="serviceSupport"> <ul class="serviceExplain"> <li>一个很简单的结构，只是一个列表，每项前有个项目图标的修饰图；</li> <li>仔细观察我前面的修饰图标</li> </ul> <p>我是打酱油的...</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

再在IE6下浏览，奇怪的事情发生了，每个li的修饰图标消失了，不断刷新浏览器，时显示时不显示，仍然有这样的情况。只是增加了一层div结构，问题肯定出在这。

与width的定义应该没有关系，难道是background-image有冲突？去掉div中的背景图，无效；这就是剩下position:relative了，有这个属性是因为其子元素有需要绝对定位，那先去掉试试，绝了，去掉后显示正常！！这是为什么呢？如果说定义position:relative后div无法撑开，那其背景已经显示出了，不成立呀~还有如果定义页面中的p足够的高度，但向下拖动垂直滚动条，是ul部分被掩盖，然后在显示出来，这时候li标签的小图标也可以显示了，很奇怪。。。

产生的原因还有待于进一步分析，这应该是IE6的一个bug，目前想到的解决的方法：

1、直接去掉position:relative，可行性比较小；
2、给ul定义高度，撑开li就可以显示，但这样又不太灵活；
3、给ul也定义position:relative，相对来说这种方法最好，但不知道会不会对其子元素又产生其他的bug，有兴趣的朋友可以一起研究下~

回来了，继续。。。

hzhjun — Sun, 21 Feb 2010 09:55:18 +0800

又回来了，感觉这年过的真快！北京的清晨还是那么迷人，好久没看到过初升的太阳了，特别耀眼；拥挤的人们走着各自的步子，行色匆匆。。。

回到住处，第一件事就是打开电脑，看看朋友们，你们都好吧！

这新年也就过完了，今天再懒下，明天得上班了。同样的，又是一年新的开始，希望有个好兆头，将上一年的遗憾补上，并开始新的征程，向所有朋友也向自己大声说一声：加油！

虎年好

hzhjun — Fri, 12 Feb 2010 10:31:06 +0800

再过两个小时，这2009年最后一班就上完了，坚持在最后的同事没几个了，大家都各干着事情，不过心里应该都在想着同一件事，赶快下班吧。。。

晚上11点03，我就要坐车回家了，今年是这么多年来回去最晚的一次，回家的心情尤为强烈。

在这不多几天假期里，上网应该很少，所以提前给朋友们拜年了，祝您及家人春节快乐、阖家幸福、万事大吉！在新的一年里，给你虎虎的祝福，虎虎的甜蜜，虎虎的运气，虎虎的健康，虎虎的快乐，虎虎的心情，虎虎的欣慰，虎虎的顺利，虎虎的幸福，虎虎的人生！！

关于前端开发合理化的讨论

hzhjun — Sat, 06 Feb 2010 22:26:44 +0800

又有很久没有更新，让朋友们惦记了。其实这句话是写在1月29号的，一直没能写完，每次敲键盘的时候，总停下不知道想表达些什么，于是就放弃了，也许我陷入了一个博客瓶颈期。。。

就在刚才想写些什么的时候，键盘里又被灌进了水，好几个按键没有了反应。。。

从上周一开始就事情不断，新项目启动，预示着这放假前将不轻松。其实工作忙并不是一件坏事，既可以让时间过的很快，有可以在工作中找到那种充实感。

谈到工作，作为一个前端开发者，越来越觉得现在的工作重心已不再是页面制作本身，而是要把这整个页面开发阶段的工作处理好，以便让下一个环节更好的进行。当然如何能更好的完成这个工作呢？

现在遇到的问题：

1、一个人开发，工期紧，无法让完成的页面达到比较满意的效果，后期又投入到其他页面开发，无法跟进优化工作；

2、多人开发呢，如何分工？页面完成后的整合工作，样式和图片命名的冲突，相同部分重复制作又可能造成代码冗余使后台开发套程序出现混乱等等；

这些还是可以想象的到的问题，如果再遇到一些特殊情况，比如页面有大的调整，又会是整个计划陷入困局。。。

如何解决这个问题呢？

如果是单人开发，一定要评估好各个页面的完成时间，并在此基础上最好能有些多余的时间来应对突发情况，当然没有是最好的，提前完成谁都高兴。这里面关键因素就是个人的能力问题，一般要先完成常规性的东西，如果有比较难实现的效果或者不确定的地方可以放在最后完成，这样既不耽误整个项目的完成又可以轻松应对那些难题。

多人开发的难点在于页面的整合。前期一定要根据产品框图对所有页面有很好的了解，哪些部分是共用的？哪些页面是相类似的页面？哪些页面有隐藏功能等？了然于胸后就可以进行分工：共用的部分一定要一个人来完成，整个项目只有一套这样的东西共同使用；每个人的分工根据页面的情况，最好相类似的页面或者一个频道部分由一个人来完成，这样比较统一。大的分工完成，接下来就要涉及到具体的工作。

一、样式部分

1、css reset 必不可少，而且要共用一套，这个reset的产生一定要小组成员都通过明白才行，否则会发生重复或丢失熟悉的问题;
2、css模块化，即成型的css框架。css框架的好处不言而喻，即节省开发成本，又可以使页面代码统一避免重复出错。所以项目过程中一定要有一个人来完成制定框架的任务，然后发给大家，讲清楚包涵那些部分，如何应用再进行接下来的工作；结合页面的模块化，大致包括：头部、版权、整个页面大的框架布局、边框、字体颜色定义、form表单统一定义等，这个根据实际情况来指定。
3、css样式和图片存储命名的规范。彼此如何区分命名，前期要达成一致，然后根据规范来操作。整个命名尽量语义化，英文化，命名要容易理解，不要过段时间连自己都不认识是什么意思了，这样无疑增加了后期维护成本。具体关于css命名书写部分，可以详细查看我之前写的《最新整理的CSS命名与书写》。
4、样式文件的分类。根据项目的大小来进行分类，尽量少的文件以较少http请求数。

二、页面部分

页面部分注意的问题比较少，主要是定义好的模块要统一使用。最近完成的项目就因为这个问题而返工，由于没有沟通好，两个人各自完成了一套相同布局的页面，后期我在整合的时候，怎么都觉得不合适，于是只能将自己写的舍弃掉，费力将另一套整合到自己的页面中。

在写页面结构的时候，尽量减少不必要的嵌套，增加的时候没所谓，真正要去剪的时候，问题就可能冒出来。保证页面的语义化、合理化布局，是一个前端开发者最基本的要求。

还有就是必要的注释，当然在css样式中也是必不可少的。。。

三、沟通

良好的沟通，可以减少至少一半问题的出现。与产品经理沟通功能模块、与设计师确认页面效果、与后台开发讨论功能实现难易程度，当然还有与你的合作者保持同步。

所有的一切，从大的角度讲，是为了各个角色紧密工作、整个项目的顺利进行；从个人角度讲呢，是对自己工作经验的累积和提升，能力展示、操作技巧、沟通协调这些方面的进步，不管你以后再哪个单位，都是宝贵的财富。依托这些财富，用我们的双手，努力实现心中的梦想，不是一件很快乐的事情吗？