前端交互页面设计要求

《前端交互页面设计要求》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、任我游门户前端交互页面设计要求项目名称任我游门户项目型号任我游门户前端交互页面设计要求文档编号：文档版本：　1.0拟制部门_____软件技术部______拟制_____李祖玉_2012_年_2_月1_日审核_________________年____月日标准化审查_年月日批准年月日9/9　　　　任我游门户前端交互页面设计要求文件更改记录版本号更改内容方式更改人更改日期1.0创建创建李祖玉2012-2-19/9　　　　任我游门户前端交互页面设计要求9/9　　　　任我游门户前端交互页面设计要求9/9　　　　任我游门户前端交互页面设

2、计要求目录1.规范说明62.编码方式63.注释64.页面结构布局64.1.使用HTML5标准74.2.采用DIV布局75.样式设计要求75.1.避免使用CSSexpressions75.2.合并样式中图片75.3.尽量引用外部的CSS75.4.CSS引用放在顶部76.JS设计要求86.1.统一使用Jquery框架86.2.JS尽量放在页面底部87.MyGou静态文件目录结构88.版本控制99.前端页面进度安排99/9　　　　任我游门户前端交互页面设计要求1.规范说明为规范管理前端页面设计，提高页面加载速度，改善用户体验，便于项

3、目的维护、更新和升级，特制定此标准。2.编码方式统一使用UTF-8编码3.注释HTML、CSS、JS文件都要写上注释。HTML注释：结构体比较大时，分别在开始标签和结束标签写上注释(如：…)；每个单独完整的结构体可以在开始和结束标签写上功能名称(如：…)。CSS注释：在css的文件的头部写上创建日期、修改内容等注释信息；每段HTML结构样式写上区

4、块名称（如：/******toolbarstart******/…/******toolbarend******/）。JS注释：在js的头部写上创建日期、修改内容等注释信息；在每个function写上注释说明；功能复杂的functon在内部注释说明。4.页面结构布局合理的结构布局可以提高页面的加载速度，使浏览器兼容性更强，可读性更好，有利于html元素结构的重用和封装。9/9　　　　任我游门户前端交互页面设计要求1.1.使用HTML5标准HTML5标准是目前web的发展方向，虽然HTML5中的元素目前并不为所有浏览器所支持，但

5、HTML5文档结构定义各浏览器都可以在标准模式下解析页面，而不需要指定某个类型的DTD。1.2.采用DIV布局页面统一使用DIV布局结构，谨慎使用表格（尽量不用），最少化iframe数量。2.样式设计要求2.1.避免使用CSSexpressions表达式计算开销很大，影响web加载性能；暴露了一个脚本执行环境，CSS表达式就构成了一个可能的脚本注入攻击方向；IE8的标准模式不再支持CSS表达式。2.2.合并样式中图片为了减少页面http的请求数量，加快web页面请求速度，特别是样式中使用的图片比较多

6、，给页面加载带来了负担。把样式中使用的图片归类并合并在一起，使用时用位置点来控制显示区域。2.3.尽量引用外部的CSS外部引用css文件有可能被浏览器缓存起来，不用每次都去服务器请求。内部引用css文件，有可能包含在动态的html文档结构中，每次都要从服务请求下载，影响了web加载速度。2.4.CSS引用放在顶部css放在页面要顶部，可以加快页面渲染速度，改善用户体验。9/9　　　　任我游门户前端交互页面设计要求1.JS设计要求1.1.统一使用Jquery框架Jquery是继prototype之后又一个优秀的Javascrīp

7、t框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。1.2.

8、JS尽量放在页面底部JS会阻塞页面加载，由于html文档是从上而下来渲染页面，JS放在底部，不会影响页面渲染，改善用户体验。2.MyGou静态文件目录结构MyGou静态文件目录结构为了规范和管理静态文件，页面中所有的静态文件以模块的方式存放在不同的文件夹中，便于日后的管理和维