Web界面设计规范说明.docx
- 文档编号：23622528
- 上传时间：2023-05-19
- 格式：DOCX
- 页数：34
- 大小：86.07KB
Web界面设计规范说明.docx
《Web界面设计规范说明.docx》由会员分享，可在线阅读，更多相关《Web界面设计规范说明.docx（34页珍藏版）》请在冰豆网上搜索。
Web界面设计规范说明
Web界面设计规范
DesignSpecificationforWebUI
（仅供内部使用Onlyforinsideof****）
作者：
********
日期：
2005年5月31日
****财务HFS
版权所有不得复制
Copyrightby****2005,Allrightsreserved
Web界面设计规范－文档修改记录
DesignSpecificationforWebUI—RevisionHistory
版本号日期所修改页注记修改人
VersionRevisionDateRevisionPagesSummary/CommentSignature
1.0
2005/5/31
ALL
Create
Ben
1.1
2005/6/6
5-10
增加部分规范
XY
一、目的3
二、适用范围3
三、文件命名规范3
四、控件命名规范4
五、控件外观规范5
六、界面设计规范6
6.1字体6
6.2颜色6
6.3
边距...................................................................................................................................
6
6.4
尺寸单位...........................................................................................................................
6
6.5
表格排版规范...................................................................................................................
6
6.5.1
表格代码对齐.......................................................................................................
6
6.5.2
表格高宽...............................................................................................................
7
6.5.3
表格其他规范.......................................................................................................
7
七、其他规范...................................................................................................................................
7
7.1
网站目录结构...................................................................................................................
7
7.2
排版规范...........................................................................................................................
8
7.2
客户端脚本.......................................................................................................................
8
7.3
状态管理...........................................................................................................................
9
一、目的
为了使最终设计出来的Web界面风格一致化，开发者之间相互协作更轻松，特制定此Web界面设计规范！
回目录
二、适用范围
1.
此规范适合所有WebForm的UI设计。
2.
有关WindowsForm
的UI设计请参考＜＜Windows
界面设计规范＞＞。
回目录
三、文件命名规范
WebForm
扩展名
描述
前缀
ExtensionFileName
Description
Prefix
.aspx
/
.ascx
Web用户自定义控件
wuc
回目录
四、控件命名规范
控件类型
前缀
例子
ControlType
Prefix
Example
Label
lbl
lblTip
TextBox
txt
txtName
Button
btn
btnOK
LinkButton
lbtn
ImageButton
ibtn
HyperLink
hlk
DropDownList
ddl
ListBox
lst
DataGrid
grd
DataList
dlst
Repeater
rep
CheckBox
chk
CheckBoxList
chklst
RadioButtonList
rdolst
RadioButton
rdo
Image
img
Panel
pan
PlaceHolder
plh
Calendar
cld
AdRotator
adr
Table
tbl
RequireFieldValidator
rfv
CompareValidator
cpv
RangeValidator
rgv
RegularExpressionValidator
rev
CustomValidator
cstv
ValidationSummary
vls
Xml
xml
Litteral
ltl
CrystalReportViewer
crv
回目录
五、控件外观规范
说明：
{50px|文本宽度}，表示该参数可以的取值为：
“50px”或者“文本宽度”
控件类型
ControlType
宽度（像素）高度（像素）备注
Width（px）Height（px）Remark
Label
TextBox
Button
LinkButton
ImageButton
HyperLink
DropDownList
ListBox
DataGrid
DataList
Repeater
CheckBox
CheckBoxList
RadioButtonList
RadioButton
Image
Panel
PlaceHolder
Calendar
AdRotator
Table
RequireFieldValidator
CompareValidator
RangeValidator
RegularExpressionValidator
CustomValidator
ValidationSummary
Xml
Litteral
CrystalReportViewer
{适应文本}
{150px|100%|超短|超宽}
{50px|文本宽度}
{适应文本}
{适应图片}
{适应文本}
{150px|100%|适应文本}
{150px|100%|适应文本}
{按需}
{按需}
{按需}
{适应文本}{适应文本}{适应文本}{适应文本}{适应图片}
{适应内部控件|按需}{适应内部控件|按需}{按需}
{按需}
{按需}
{适应文本}{适应文本}{适应文本}{适应文本}{适应文本}{默认}
{默认}
{默认}
{默认}
{适应文本}{默认值}
{默认值}
{适应文本}{适应图片}{适应文本}{默认值}
{100px|适应项目数|
按需}
{按需}
{按需}
{按需}
{默认值}
{适应项目}{适应项目}{默认值}
{适应图片}
{适应内部控件|按需}{适应内部控件|按需}{按需}
{按需}
{按需}
{默认}
{默认}
{默认}
{默认}
{默认}
{默认}
{默认}
{默认}
{默认}
回目录
六、界面设计规范
6.1字体
所有Web界面基准字体大小一律为：
9pt。
字体序列为：
Verdana,Arial,Helvetica,Sans-Serif。
所有字体设定应在CSS中完成。
6.2颜色
颜色应以清爽简洁为准，所有色彩设定应在CSS中完成。
6.3边距
页，表格都应该有边距，避免紧贴边沿的情况发生，最小边距值为“
3px”，默认边距值
应在CSS中设定。
页边距
单元格间距
cellspacing
单元格衬距
cellpadding
6.4尺寸单位
所有字体尺寸一律采用“pt”作为单位，对象和线条的尺寸一律用“px”作为单位。
6.5表格排版规范
6.5.1表格代码对齐
在写
| 缩进一个TAB， | 中如果还有嵌套的表格，
|
《公务员财产申报制度》.docx
