『飞秋』小项目心得交流
2010-08-01 20:20
211 查看
『飞秋』小项目心得交流
<!--[endif]-->
最近网站首页改版，我负责前台页面的编写，一个很小的任务，从中我却学习到了很多东西，现总结一下
和大家分享一下，希望对大家有用，也希望能得到进一步的提高。
<!--[endif]-->
总结index:
1. 本次首页改版前期的策划还算细致完整
2. 美工、前台、后台大家分工合作其乐融融*美工和前台是十分密切的，美工的人要懂前台，前台的人要了解美工，这是必须要做到的
3. 兼容是王道，但是为了兼容不能不择手段
4. 合理利用库和框架，提高编码的效率
5. 代码问题汇总
index扩展:
<!--[endif]-->
一．策划是重头戏
1. 一个项目的进行没有一个完整的细致的规划是不可能顺利的实现的，一个网站后期的运营与前期的实现是密不可分的。
2. 好的策划对于编码的实现和日后的维护以及功能拓展等方面都是至关重要的。
那么怎么写好一份策划呢？对于此本人铁拐李也不是很在行，希望有强势的能够积极加入进行支援。
我只说说自己的想法（只做参考与改正的对象）：
1. 首先你要明确为什么要改版。是页面风格不美观还是网站性能欠缺还是双方面的问题，如果问题过多那可以改名字叫网站重建了。
2. 要对症下药，针对你改版的侧重点来实行有效的措施。比如网站是因为页面架构要升级而改版，那么我们的侧重点就要放在美工上，做出一个符合改版要求的设计图，如果是性能上要改版，那么侧重点要放在代码的规范上。
3. 功能想的全一些，为日后维护铺好路。
二．分工要明确，合作要密切
网站的建设绝对不是一个人可以搞定的事情，所以明确的分工很重要，俗话说“术业有专攻”几个更好和起来可能就是“最好”了。但是分工不代表分开工作，其实大家是紧密联系的，只有密切的合作才能是开发进行的更为顺利。比如前台与美工的关系，美工的出图要规范，要利于代码的书写，不能“想当然”的去进行艺术创作，那么前台要明白美工的设计思想与意图，只有两人的设计思路统一了开发才会事半功倍，我们本次改版的时候就出现了类似的问题：美工不知道png图片在IE6下是不会透明的（需要修复），但是修复的效果不好，导致后期代码书写成了问题，后来就是因为这个地方浪费了很多时间。还有就是我作为一个前台开发者没有很好的理解美工的意图，导航的地方美工的意图是width：100%，而我理解成了固定宽度，于是又是纠结了一下，浪费了时间。所以：交流、合作是至关重要的
三．如何兼容？
作为一个前台的开发者，大家可能一直深受各种浏览器的“摧残”，为了保证兼容往往要采取一些措施，js修复、hacks等等各种手段一拥而上，最后只能说是效果实现了。书写要规范，这句话说起来轻飘飘，做起来十分的艰难，有得问题是你无法预料的，除非你已经足够的老道。想要三列高度一样怎么办？js修复？还是采用什么等高度自适应hack？简单一点吧，来个固定高度吧。
四．合理使用js库，提高了效率，增强了兼容性。
本次开发我第一次正式的使用jQuery，感觉用起来非常的方便，省了很多麻烦，也不必为某些兼容问题去苦恼了。不过初学还是用纯js的好，毕竟要学好一门语言，光学API
是不行的。
<!--[endif]-->
五．代码问题1两说：
1. 如何让父元素透明而子元素不透明呢？
效果预览：
可能你会这样做：
<!--[endif]-->
<!--[endif]-->
1 <body>
2 <div id="box">
3 <div id="imgBox">
4 <img src="首页项目（新精简）/images/ad2.png" />
5 <div id="text">//背景透明
6 //下面的文字域不透明
7 <h4>标题</h4>
8 <p>内容内容内容内容内容内容内容、。。</p>
9 </div>
10 </div>
11 </div>
12 </body>
css:
1 <style type="text/css">
2 #box {
3 width:500px;
4 margin:200px auto;
5 }
6 #imgBox {
7 position:relative;
8 width:212px;
9 height:225px;
10 }
11 #text {
12 position:absolute;
13 top:0;
14 right:0;
15 width:100px;
16 height:100%;
17 color:#FFF;
18 background-color:#000;
19 opacity:.5;
20 filter:alpha(opacity=50);
21 }
22 #text h4, #text p {
23 opacity:1;
24 filter:alpha(opacity=100);
25 background:none;
26 }
27 </style>
<!--[endif]-->
运行一下，似乎没有达到预期的效果。。。怎么回事呢？看来作为#text的子元素是难逃被“透明”的厄运了，既然如此我们变一下：
Html：
1 <body>
2 <div id="box">
3 <div id="imgBox">//z-index:1
4 <img src="首页项目（新精简）/images/ad2.png" />
5 <div id="text">//z-index:3
6 <h4>标题</h4>
7 <p>内容内容内容内容内容内容内容、。。</p>
8 </div>
9 <div id="textInner"></div>//背景层放到#text外边，与他是兄弟关系，彼此互不影响,z-index:2
10 </div>
11 </div>
12 </body>
css:
1 <style type="text/css">
2 #box {
3 width:500px;
4 margin:200px auto;
5 }
6 #imgBox {
7 position:relative;
8 width:212px;
9 height:225px;
10 z-index:1;
11 }
12 #text {
13 position:absolute;
14 top:0;
15 right:0;
16 width:100px;
17 height:100%;
18 color:#FFF;
19 z-index:3;
20 }
21 #textInner {
22 position:absolute;
23 top:0;
24 right:0;
25 width:100px;
26 height:100%;
27 background-color:#000;
28 opacity:.5;
29 filter:alpha(opacity=50);
30 z-index:2;
31 }
32 </style>
<!--[endif]-->
2. ***提升性能
雅虎的14条准则相信大家都听说过，这也是提升一个网站性能的关键，平时要注意这些细节。感谢king！前辈在我做项目时给我的指点与帮助。
飞秋官网：http://www.freeeim.com/
<!--[endif]-->
最近网站首页改版，我负责前台页面的编写，一个很小的任务，从中我却学习到了很多东西，现总结一下
和大家分享一下，希望对大家有用，也希望能得到进一步的提高。
<!--[endif]-->
总结index:
1. 本次首页改版前期的策划还算细致完整
2. 美工、前台、后台大家分工合作其乐融融*美工和前台是十分密切的，美工的人要懂前台，前台的人要了解美工，这是必须要做到的
3. 兼容是王道，但是为了兼容不能不择手段
4. 合理利用库和框架，提高编码的效率
5. 代码问题汇总
index扩展:
<!--[endif]-->
一．策划是重头戏
1. 一个项目的进行没有一个完整的细致的规划是不可能顺利的实现的，一个网站后期的运营与前期的实现是密不可分的。
2. 好的策划对于编码的实现和日后的维护以及功能拓展等方面都是至关重要的。
那么怎么写好一份策划呢？对于此本人铁拐李也不是很在行，希望有强势的能够积极加入进行支援。
我只说说自己的想法（只做参考与改正的对象）：
1. 首先你要明确为什么要改版。是页面风格不美观还是网站性能欠缺还是双方面的问题，如果问题过多那可以改名字叫网站重建了。
2. 要对症下药，针对你改版的侧重点来实行有效的措施。比如网站是因为页面架构要升级而改版，那么我们的侧重点就要放在美工上，做出一个符合改版要求的设计图，如果是性能上要改版，那么侧重点要放在代码的规范上。
3. 功能想的全一些，为日后维护铺好路。
二．分工要明确，合作要密切
网站的建设绝对不是一个人可以搞定的事情，所以明确的分工很重要，俗话说“术业有专攻”几个更好和起来可能就是“最好”了。但是分工不代表分开工作，其实大家是紧密联系的，只有密切的合作才能是开发进行的更为顺利。比如前台与美工的关系，美工的出图要规范，要利于代码的书写，不能“想当然”的去进行艺术创作，那么前台要明白美工的设计思想与意图，只有两人的设计思路统一了开发才会事半功倍，我们本次改版的时候就出现了类似的问题：美工不知道png图片在IE6下是不会透明的（需要修复），但是修复的效果不好，导致后期代码书写成了问题，后来就是因为这个地方浪费了很多时间。还有就是我作为一个前台开发者没有很好的理解美工的意图，导航的地方美工的意图是width：100%，而我理解成了固定宽度，于是又是纠结了一下，浪费了时间。所以：交流、合作是至关重要的
三．如何兼容？
作为一个前台的开发者，大家可能一直深受各种浏览器的“摧残”，为了保证兼容往往要采取一些措施，js修复、hacks等等各种手段一拥而上，最后只能说是效果实现了。书写要规范，这句话说起来轻飘飘，做起来十分的艰难，有得问题是你无法预料的，除非你已经足够的老道。想要三列高度一样怎么办？js修复？还是采用什么等高度自适应hack？简单一点吧，来个固定高度吧。
四．合理使用js库，提高了效率，增强了兼容性。
本次开发我第一次正式的使用jQuery，感觉用起来非常的方便，省了很多麻烦，也不必为某些兼容问题去苦恼了。不过初学还是用纯js的好，毕竟要学好一门语言，光学API
是不行的。
<!--[endif]-->
五．代码问题1两说：
1. 如何让父元素透明而子元素不透明呢？
效果预览：
可能你会这样做：
<!--[endif]-->
<!--[endif]-->
1 <body>
2 <div id="box">
3 <div id="imgBox">
4 <img src="首页项目（新精简）/images/ad2.png" />
5 <div id="text">//背景透明
6 //下面的文字域不透明
7 <h4>标题</h4>
8 <p>内容内容内容内容内容内容内容、。。</p>
9 </div>
10 </div>
11 </div>
12 </body>
css:
1 <style type="text/css">
2 #box {
3 width:500px;
4 margin:200px auto;
5 }
6 #imgBox {
7 position:relative;
8 width:212px;
9 height:225px;
10 }
11 #text {
12 position:absolute;
13 top:0;
14 right:0;
15 width:100px;
16 height:100%;
17 color:#FFF;
18 background-color:#000;
19 opacity:.5;
20 filter:alpha(opacity=50);
21 }
22 #text h4, #text p {
23 opacity:1;
24 filter:alpha(opacity=100);
25 background:none;
26 }
27 </style>
<!--[endif]-->
运行一下，似乎没有达到预期的效果。。。怎么回事呢？看来作为#text的子元素是难逃被“透明”的厄运了，既然如此我们变一下：
Html：
1 <body>
2 <div id="box">
3 <div id="imgBox">//z-index:1
4 <img src="首页项目（新精简）/images/ad2.png" />
5 <div id="text">//z-index:3
6 <h4>标题</h4>
7 <p>内容内容内容内容内容内容内容、。。</p>
8 </div>
9 <div id="textInner"></div>//背景层放到#text外边，与他是兄弟关系，彼此互不影响,z-index:2
10 </div>
11 </div>
12 </body>
css:
1 <style type="text/css">
2 #box {
3 width:500px;
4 margin:200px auto;
5 }
6 #imgBox {
7 position:relative;
8 width:212px;
9 height:225px;
10 z-index:1;
11 }
12 #text {
13 position:absolute;
14 top:0;
15 right:0;
16 width:100px;
17 height:100%;
18 color:#FFF;
19 z-index:3;
20 }
21 #textInner {
22 position:absolute;
23 top:0;
24 right:0;
25 width:100px;
26 height:100%;
27 background-color:#000;
28 opacity:.5;
29 filter:alpha(opacity=50);
30 z-index:2;
31 }
32 </style>
<!--[endif]-->
2. ***提升性能
雅虎的14条准则相信大家都听说过，这也是提升一个网站性能的关键，平时要注意这些细节。感谢king！前辈在我做项目时给我的指点与帮助。
飞秋官网：http://www.freeeim.com/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 项目需求和客户交流的心得体会
- 项目需求和客户交流的心得体会
- 项目需求和客户交流的心得体会
- 项目需求和客户交流的心得体会
- 小项目心得交流
- 开源项目live555学习心得
- 项目中的一些个人心得
- MapXtreme 2005 学习心得 了解新建MapXtreme项目结构(二)
- 转 项目经理管理心得体会与经验
- Xcode使用心得02:如何在项目中关闭ARC特性
- 分享：游戏项目开发中的心得！
- 项目管理心得（转自mypm)
- (六)项目管理的相关心得(71)
- 1219 项目个人心得总结
- 项目使用jspatch在线修复的一些心得
- 项目管理学习心得1
- 项目管理心得体会（一）
- 接手别人项目，自己的心得。
- 无尽的爱――开源项目DNN研究心得
- 【188期推荐】浅谈多年来的HIS系统维护心得，交流讨论