WEB开发规范初稿

WEB开发规范初稿

目录

一整体页面效果 (2)

二表单类 (4)

三表格类 (5)

四控件外观类 (6)

五代码类 (8)

六SQL类 (9)

七命名类 (10)

八自行测试类 (11)

一整体页面效果

1 所有页面都要具有和本页标题相同的title。

2 所有中文页面都要加上语言设置语句。

3 所有页面要在1024*768 1440*900两种分辨率下运行通过，其中宽屏如客户无特殊要求采用居中方式不变形即可。

4 所有页面要在IE6.0以及7.0下运行通过没有脚本程序错误。

5 界面设计原则：风格必须统一，界面风格依据美工原始效果图。

6 B/S结构开发原则：使用框架。

7 页面使用表格（Table）进行格式设置：表格百分比定宽，居中，隐藏边框。

8 主页面Body设置：bgcolor="#FFFFFF"。

9 框架子页面Body设置：bottomMargin="0" leftMargin="0"。

10 冒号必须是在中文输入状态下键入。

11 控件外观在CSS内设置，主要包括：链接，表格，文本框，数据集。

12 一般性项目开发的主框架是三个，其命名规则如下：

顶部框架：_topFrame

左侧框架：_leftFrame

主框架：_mainFrame

13登录界面完成用户身份和权限识别的功能，要求界面简单明了，美观大方。界面功能键包括登录、取消和重置。若输入密码有问题，需要提示重新输入，提示规范请参考下一节。部分项目提供图形验证码功能。

14 整体界面背景颜色设为白色，大部分字体采用黑色。整个WEB程序采用统一的CSS样式表来控制界面风格。

15 字体一般情况下中文采用楷体；英文采用Arial。

16 字形一般情况下应采用常规字型，仅当特殊需要时才考虑其他字型(如下划线、粗体字、斜体字等)。

17 按钮形状统一由CSS样式表控制。

18 相同类别的按钮应放在一起，组成按钮组，按钮组之间保持适当的距离，“确定”、“取消”、“退出”等按钮归为一类；“新增”、“修改”、“保存”、“删除”等按钮归为一类；“查询”、“打印”、“下载”等按钮归为一类；“各类按钮按以上列出的顺序从左向右排放，例如第一类中“确定”按钮放在最左边、“退出”按钮放在最右边、“取消”按钮放中间。按钮的排放

顺序遵循常用和重要的放左边的原则。

19 菜单层次一般采用两层菜单。设计原则是将常用的、需单独处理的功能模块作为主菜单；将可归并为主菜单上的某一项、功能上相近或相关的作为二级菜单。

20 滚动条采用自动方式，只在窗口的宽度和长度小于数据显示所需宽度或长度时才滚动条，而且只在主框架和左侧框架中出现，顶部框架不允许出现滚动条。

21 界面布局统一为“顶部和左侧的嵌套框架”形式进行界面设计，顶部框架放置LOGO、BANNER和一些公共功能，如返回主页、退出等，左侧框架放置系统菜单和各子菜单，右侧框架作为主显示窗口。每个框架的显示内容都应占据整个页框架的可用部分，不应留下空白。22顶部框架占页面高度的15-20%。

23左侧框架占页面宽度的15-18%，呈目录树结构。

24 主框架要求：

主框架第一行显示当前选择的功能界面名称且尽量按导航方式显示。

按钮放在框架的底部中间或右侧。

字段排列的优先顺序为从左到右，从上到下。

需要用户输入或点选操作的字段应优先排放，并要求按主关键字、索引关键字、其他字段的顺序依次排放，使用频率高的字段排在前面，按TAB键的时候能按次序跳到下一个字段。

不允许用户输入或点选的字段应明显表示，采用背景变灰的方式。

25 链接路径全部采用相对路径。

26用DreamWeaver设计网页的时候，自动产生的代码可能比较乱，可以用“适应源文件格式”来进行整理。

27所有的字号都应该用样式表来实现，禁止在页面中出现 标记。

28页面，表格都应该有边距，避免紧贴边沿的情况发生，最小边距值为“3px”，默认边距值应在CSS中设定。

29 页面内容信息应铺满整个框架页面并适当留白方便阅读，严禁出现大片空白的页面设计。

二表单类

1 输入类控件textbox都需要制定maxlength属性默认值为数据库中对应的字段的长度或该类型字段常规长度。

2 所有不可更改的信息都要使用readonly属性。

3 所有form都要指定提交前需要的检查程序或对应JS校验代码。

4 所有form都要有对应的reset button。

5 控件的命名采用控件类型缩写（小写）+英文单词（第一个字母大写）的方法。比如button：btn+英文单词。

6 所有控件的属性值都要使用双引号或者单引号包括起来。

7所有错误信息全部使用中文提示错误信息，标点使用中文半角符号，格式如下："错误："+提示信息+"！" 。

8所有成功信息全部使用中文提示成功信息，标点使用中文半角符号，格式如下："成功："+提示信息+"！"

9 所有进行过增、删、改的操作按钮必须给出操作成功或错误的信息提示。

10 所有需要有返回的页面须有页面的返回链接，使用链接不用按钮。

11 保证提交前的数据都会通过JavaScript进行数据类型以及长度的判断。

12 所有涉及删除的操作，在用户选定以后都要再进行一次确认操作后方可执行删除操作。

13 通过Get，Post，连接传递过来的数据在使用前都要通过trim去掉数据前后的空格。

14 通过request的得到的参数数据需要再次进行空，类型，和长度的判断。

15 所有参数传递须进行防SQL注入校验。

16 所有错误提示信息使用JavaScript弹出窗提示信息，保证使用者看不到任何内部错误信息。

17 控件要求：

字段类型为文本、数字时，控件使用文本框

字段类型为布尔值时，控件使用单项选择按钮或下拉框

字段内容在固定的几个值中选择时（不论其类型），控件使用下拉框

字段类型为日期时间时，控件使用文本框+按钮（按钮可以选择日期）

字段为其它表的外键且属于基本资料的，控件使用下拉框。

字段为其它表的外键且不是属于基本资料的，控件使用文本框+按钮（按钮用于跳出查询窗口）。