前端交互页面设计要求

项目名称任我游门户项目型号任我游门户前端交互页面设计要求文档编号： 文档版本：1.0 拟制部门 _软件技术部 _拟 制 _李祖玉 _2012_年_2_月 1 _日审 核 _ _ _年_月 日标准化审查 _ 年 月 日批 准 年 月 日文件更改记录版本号更改内容方式更改人更改日期1.0创建创建李祖玉2012-2-1目录1.规范说明62.编码方式63.注释64.页面结构布局64.1.使用HTML5标准74.2.采用DIV布局75.样式设计要求75.1.避免使用CSS expressions75.2.合并样式中图片75.3.尽量引用外部的CSS75.4.CSS引用放在顶部76.JS设计要求86.1.统一使用Jquery框架86.2.JS尽量放在页面底部87.MyGou静态文件目录结构88.版本控制99.前端页面进度安排91. 规范说明为规范管理前端页面设计，提高页面加载速度，改善用户体验，便于项目的维护、更新和升级，特制定此标准。2. 编码方式统一使用UTF-8编码3. 注释HTML、CSS、JS文件都要写上注释。HTML注释：结构体比较大时，分别在开始标签和结束标签写上注释(如： )；每个单独完整的结构体可以在开始和结束标签写上功能名称(如： )。CSS 注释：在css的文件的头部写上创建日期、修改内容等注释信息；每段HTML结构样式写上区块名称（如：/* toolbar start*/* toolbar end */）。JS注释：在js的头部写上创建日期、修改内容等注释信息；在每个function 写上注释说明；功能复杂的functon在内部注释说明。4. 页面结构布局合理的结构布局可以提高页面的加载速度，使浏览器兼容性更强，可读性更好，有利于html元素结构的重用和封装。4.1. 使用HTML5标准 HTML5标准是目前web的发展方向，虽然HTML5中的元素目前并不为所有浏览器所支持，但HTML5文档结构定义各浏览器都可以在标准模式下解析页面，而不需要指定某个类型的DTD。4.2. 采用DIV布局页面统一使用DIV布局结构，谨慎使用表格（尽量不用），最少化iframe数量。5. 样式设计要求5.1. 避免使用CSS expressions表达式计算开销很大，影响web加载性能；暴露了一个脚本执行环境，CSS表达式就构成了一个可能的脚本注入攻击方向；IE8的标准模式不再支持CSS表达式。5.2. 合并样式中图片为了减少页面http的请求数量，加快web页面请求速度，特别是样式中使用的图片比较多，给页面加载带来了负担。把样式中使用的图片归类并合并在一起，使用时用位置点来控制显示区域。5.3. 尽量引用外部的CSS外部引用css文件有可能被浏览器缓存起来，不用每次都去服务器请求。内部引用css文件，有可能包含在动态的html文档结构中，每次都要从服务请求下载，影响了web加载速度。5.4. CSS引用放在顶部css放在页面要顶部，可以加快页面渲染速度，改善用户体验。6. JS设计要求6.1. 统一使用Jquery框架Jquery是继prototype之后又一个优秀的Javascrpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 6.2. JS尽量放在页面底部JS会阻塞页面加载，由于html文档是从上而下来渲染页面，JS放在底部，不会影响页面渲染，改善用户体验。7. MyGou静态文件目录结构MyGou静态文件目录结构为了规范和管理静态文件，页面中所有的静态文件以模块的方式存放在不同的文件夹中，便于日后的管理和维护。文件目录结构如下：目录结构说明static/mygou/(js|css|image|html|falsh)/common公共文件夹static/mygou/(js|css|image|html|falsh)/account帐号模块（用户注册、用户登录、忘记密码等）static/mygou/(js|css|image|html|falsh)/user用户模块（添加好友，删除好友，管理好友列表，管理好友分组，添加分组，删除分组，移动分组等）static/mygou/(js|css|image|html|falsh)/equip设备模块（添加设备，删除设备，设备升级提醒等）static/mygou/(js|css|image|html|falsh)/notice消息模块（管理消息列表，回复消息，删除消息等）static/mygou/(js|css|image|html|falsh)/waypoint航点模块（添加航点，删除航点，管理航点列表，航点分组，航点分组管理，管理航点分组列表等）8. 版本控制每次提交的版本，必须带有版本号，对每次提交的内容有较好的版本控制。9. 前端页面进度安排日期进度说明2013-02-06完成首页和一张内页设计稿供评审使用2013-02-08网站整体风格确认通过评审确认网站设计风格2013-02-27整个网站重构页面完成，可交开发使用重构页面从登录注册页面开始，再到各模块，具体安排与开发沟通。2013-03-06与开发一起调试、BUG修复完成修复各浏览兼容性问题，js脚本报错，局部样式调整等