前端交互页面设计要求_第1页
前端交互页面设计要求_第2页
前端交互页面设计要求_第3页
前端交互页面设计要求_第4页
前端交互页面设计要求_第5页
免费预览已结束，剩余5页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、项目名称任我游门户项目型号任我游门户前端交互页面设计要求文档编号：文档版本：1.0拟制部门软件技术部拟 制李祖玉2012年_2_月 1日审 核 7 日标准化审查 年 月 日批 准 年 月 日上海易罗信息科技有限公司文件更改记录版本号更改内容方式更改人更改日期1.0创建创建李祖玉2012-2-1任我游门户前端交互页面设计要求# / 9任我游门户前端交互页面设计要求目录1. 规范说明 62. 编码方式 63. 注释 64. 页面结构布局 64.1. 使用HTML曲准 74.2. 采用DIV布局 75. 样式设计要求 75.1. 避免使用 CSS expressions 75.2. 合并样式中图片

2、75.3. 尽量引用外部的 CSS 75.4. CSS引用放在顶部 76. JS设计要求 86.1. 统一使用 Jquery框架 86.2. JS尽量放在页面底部 87. MyGo屏态文件目录结构 88. 版本控制 99. 前端页面进度安排 9#/ 9由任我游门户前端交互页面设计要求1. 规范说明为规范管理前端页面设计，提高页面加载速度，改善用户体验，便于项目的维护、更新和升级，特制定此标准。2. 编码方式统一使用UTF-8 编码3. 注释HTML、 CSS、 JS 文件都要写上注释。HTML1释：结构体比较大时，分别在开始标签和结束标签写上注释(如：<!-container start

3、 -><!- container end ->);每个单独完整的结构体可以在开始和结束标签写上功能名称(如：<!-添加航点分组弹层 start -><! 添加航点分组弹层start >)。CSS注释：在css的文件的头部写上创建日期、修改内容等注释信息；每段HTML吉构样式写上区块名称(如：/* toolbar start*/* toolbar end*/ )。JS 注释：在js 的头部写上创建日期、修改内容等注释信息；在每个function 写上注释说明；功能复杂的functon 在内部注释说明。4. 页面结构布局合理的结构布局可以提高页面的加载速度

4、，使浏览器兼容性更强，可读性更好，有利于html 元素结构的重用和封装。4.1. 使用HTML5标准HTML5标准是目前web的发展方向，虽然HTML5中的元素目前并不为所有浏览器所支持， 但HTML双档结本勾定义<!doctype html> 各浏览器都可以在标准模式下解析页面，而不需要 指定某个类型的 DTD4.2. 采用DIV布局页面统一使用DIV布局结构，谨慎使用表格（尽量不用），最少化 iframe数量。5. 样式设计要求5.1. 避免使用 CSS expressions表达式计算开销很大，影响web加载性能；暴露了一个脚本执行环境，CSS表达式就构成了一个可能的脚本注入

5、攻击方向；IE8的标准模式不再支持 CSS表达式。5.2. 合并样式中图片为了减少页面http的请求数量，加快web页面请求速度，特别是样式中使用的图片比较 多，给页面加载带来了负担。把样式中使用的图片归类并合并在一起， 使用时用位置点来控 制显示区域。5.3. 尽量引用外部的CSS外部引用css文件有可能被浏览器缓存起来，不用每次都去服务器请求。内部引用 css 文件，有可能包含在动态的 html文档结构中，每次都要从服务请求下载，影响了 web加载 速度。5.4. CSS引用放在顶部css放在页面要顶部，可以加快页面渲染速度，改善用户体验。6. JS设计要求6.1. 统一使用Jquery框

6、架Jquery是继prototype 之后又一个优秀的 Javascr pt框架。它是轻量级的js库（压缩 后只有21k）,它兼容CSS3还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera9.0+） 。 jQuery使用户能更方便地处理 HTML documents、events、实现动画效果，并且方 便地为网站提供 AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各 种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在 html里面插入一堆js来调用

7、命令了，只需 定义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帐号模块（用户注册、用户登录、 忘记密码等）9 / 9任

8、我游门户前端交互页面设计要求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网站

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论