第四课 前端交互页面设计要求.docVIP

项目名称 任我游门户 项目型号 任我游门户前端交互页面设计要求 文档编号：文档版本： 拟制部门 ___________ 拟 制 ______2012_年__月_日 审 核 ____________ _____年____月 日 标准化审查 _ 年 月 日 批 准 年 月 日 文件更改记录 版本号 更改日期 目录 1. 规范说明 6 2. 编码方式 6 3. 注释 6 4. 页面结构布局 6 4.1. 使用HTML5标准 7 4.2. 采用DIV布局 7 5. 样式设计要求 7 5.1. 避免使用CSS expressions 7 5.2. 合并样式中图片 7 5.3. 尽量引用外部的CSS 7 5.4. CSS引用放在顶部 7 6. JS设计要求 8 6.1. 统一使用Jquery框架 8 6.2. JS尽量放在页面底部 8 7. MyGou静态文件目录结构 8 8. 版本控制 9 9. 前端页面进度安排 9  规范说明 为规范管理前端页面设计，提高页面加载速度，改善用户体验，便于项目的维护、更新和升级，特制定此标准。 编码方式 统一使用UTF-8编码 注释 HTML、CSS、JS文件都要写上注释。 HTML注释：结构体比较大时，分别在开始标签和结束标签写上注释(如：!--- container start --- … !--- container end ----)；每个单独完整的结构体可以在开始和结束标签写上功能名称(如：!--- 添加航点分组弹层 start --- … !---- 添加航点分组弹层 start -----)。 CSS 注释：在css的文件的头部写上创建日期、修改内容等注释信息；每段HTML结构样式写上区块名称（如：/****** toolbar start******/…/****** toolbar end ******/）。 JS注释：在js的头部写上创建日期、修改内容等注释信息；在每个function 写上注释说明；功能复杂的functon在内部注释说明。 页面结构布局 合理的结构布局可以提高页面的加载速度，使浏览器兼容性更强，可读性更好，有利于html元素结构的重用和封装。 使用HTML5标准 HTML5标准是目前web的发展方向，虽然目前并不为所有浏览器所支持!doctype html各浏览器可以在标准模式下解析页面，而不需要指定某个类型的DTD。表达式计算开销很大暴露了一个脚本执行环境，CSS表达式就构成了一个可能的脚本注入攻击方向IE8的标准模式不再支持CSS表达式query框架 Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的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即可。JS会阻塞页面加载，由于html文档是从上而下来渲染页面，JS放在底部，不会影响页面渲染，改善用户体验。 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 设备模块（添加设备，删除设备，设备升级提醒等） sta