客户端编南码规范.docVIP

客户端页面开发规范 第一部分 目的 1、确保产品前后课程的统一； 2、确保实现方式的专业性、和企业实际开发一致； 第二部分 UI界面和编码规范 一、网站目录结构的规划 1、网站目录结构规范 1.1目录建立的原则：以最少的层次提供最清晰、最简便的访问结构； 1.2每个主要栏目开设一个相应的独立目录； 1.3目录的命名以小写英文字母、下划线组成（对于类似VS2008 开发工具，则采用自动生成的结构，保证大小写统一即可）； 1.4通用的目录结构命名规范及存放内容： 中大型项目（较大的项目案例、阶段项目、毕业设计、贯穿案例） 根目录：只存放网站主页文件（如index.html）及其他必须的系统文件 images：根目录下的images用于存放各页面都使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片； templates：存放为保持风格统一的模板页，例如：header页、footer页等。 include：存放为代码重用的源码文件，例如：通用函数（方法）、类的源码等； css：存放各类样式文件； js：存放JavaScript脚本文件； admin：管理后台文件夹，只存放管理后台的程序逻辑文件，不存放模板。 language：语言文件夹，存放不同语言显示文字与变量对应的文件。 plugins：存放扩展插件文件，每个插件一个子目录； upload：存放用户上传头像等； media：存放flash、avi等多媒体文件 小型项目（平时章节学习用的小案例或小的项目案例） 根目录：存放组织结构页面，如index.htm，header页、footer页等； js：存放JavaScript脚本文件； images：存放网站图片，其下可再分类存放各类图片； css：存放css文件； 说明：以上只规定通用的文件夹，至于网站的各栏目，则需要在根目录下创建相应的文件夹进行单独存放。 2、网页文件命名的规范 2.1文件命名的原则：必须具有语义化，在此基础上以最少的字母达到最容易理解的意义； 2.2文件名统一采用小写英文字母、数字，用下划线体现层次，层次最多不超过三层；例如：“index.html”、 “search_header.html”； 2.3 多个同类型文件加下划线和数字命名，不够两位数用0补齐。例如：news_01.htm、news_02.htm； 2.4 通用的文件名及其含义： index.html 首页 header.html 顶部 footer.html 底部 login.html 登录 register.html 注册页 search.html 搜索页 buy.html购买页 说明：网页文件名（动态网页则改文件名后缀，例如：buy.jsp）。 3、图片文件命名的规范 3.1图片命名的规定：取名必须有意义，并分类存放在对应版块images目录下 ； 3.2通用的图片文件名及其含义： （1）网站修饰外观图标： 全局背景图，bg.gif 全局小图标，icon.gif 说明： 推荐将网站用到的多个小图标放到1个背景图中，然后使用背景偏移量技术截取各小图标进行显示，例如右图背景图和下图的显示效果。 源码示例：见附件-导航小图标的流行做法。 （2）局部背景图：h_bg.jpg（h为header缩写） （3）网站中内容图片： 网站Logo标志：logo.jpg 登录图标：login.gif 关闭图标：close.gif 只有在紧邻并列图片中使用数字：如首页产品图片用promote_01.jpg,promote_02.jpg等 二、网站布局的规范 1、整体布局的规范 1.1除个别特殊情况外（需各方向负责人确认），均采用DIV+CSS主流布局，尽量少用表格布局；表格仅用于表单布局、规则的结构化数据显示 ； 1.2 网站设计推荐使用如下的基本框架结构，在此基础上进行扩展或精简； 说明： （1）推荐在最外层添加整体的容器层container （2）各区块及区块下细分的小块，命名要遵守如下通用命名，因为W3C已将部分命名纳入为HTML5的常用标签了： container：整个页面容器层 header:顶部 main:中间块的内容主体 sidebar：左/右侧栏 content:：内容 footer：底部 logo：公司标志 copyright：版权部分 完整源码示例：见VSS ：$/ACCP6.0/3.课程设计/3.课程内容/S1/3.HTML+CSS/案例代码- 1.3 区域分块使用ID命名；区域中的小块使用class命名，示例如下： 区域分块的命名采用ID区域内小块的命名采用clasdiv id=container 区域分块的命名采用ID 区域内小块的命名采用clas div id=header