前端交互页面设计要求

任我游门户前端交互页面设计要求

文档编号：

文档版本： 1.0

拟制部门_____软件技术部______

拟制_____李祖玉_2012_年_2_月 1 _日

审核_____ _______ _____年____月日

标准化审查_ 年月日

批准年月日上海易罗信息科技有限公司

文件更改记录

任我游门户前端交互页面设计要求3 / 9

任我游门户前端交互页面设计要求

5 / 9目录

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)

1.规范说明

为规范管理前端页面设计，提高页面加载速度，改善用户体验，便于项目的维护、更新和升级，特制定此标准。

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放在页面要顶部，可以加快页面渲染速度，改善用户体验。

7 / 9

6.JS设计要求

6.1. 统一使用Jquery框架

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即可。

6.2. JS尽量放在页面底部

JS会阻塞页面加载，由于html文档是从上而下来渲染页面，JS放在底部，不会影响页面渲染，改善用户体验。

7.MyGou静态文件目录结构

MyGou静态文件目录结构

为了规范和管理静态文件，页面中所有的静态文件以模块的方式存放在不同的文件夹中，便于日后的管理和维护。

文件目录结构如下：

任我游门户前端交互页面设计要求

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

脚本报错，局部样式调整等9 / 9