中软UI规范内部Word文件下载.docx
《中软UI规范内部Word文件下载.docx》由会员分享，可在线阅读，更多相关《中软UI规范内部Word文件下载.docx（14页珍藏版）》请在冰豆网上搜索。
由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再利用也更加方便灵活；
（一）目录结构及命名规则
目录结构规范
1、目录建立的原则：
以最少的层次提供最清晰简便的访问结构。
2、根目录一般只存放index.htm以及其他必须的系统文件
3、在根目录中原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片
4、所有JS,ASP,PHP等脚本存放在根目录下的scripts目录
5、所有CGI程序存放在根目录下的cgi-bin目录
6、所有CSS文件存放在根目录下style目录
7、每个语言版本存放于独立的目录。
例如：
简体中文gb
8、所有flash,avi,ram,quicktime等多媒体文件存放在根目录下的media目录
9、temp子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。
文件和目录命名规范
1、文件命名的原则：
以最少的字母达到最容易理解的意义。
2、每一个目录中包含的缺省html文件，文件名统一用index.htm
3、文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符
4、尽量按单词的英语翻译为名称。
feedback（信息反馈），aboutus（关于我们）不到万不得已不要以拼音作为目录名称
5、多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。
news_01.htm。
注意，数字位数与文件个数成正比，不够的用0补齐。
例如共有200条新闻，其中第18条命名为news_018.htm
图片的命名规范
1、名称分为头尾两两部分，用下划线隔开。
2、头部分表示此图片的大类性质。
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：
banner；
标志性的图片我们取名为：
logo；
在页面上位置不固定并且带有链接的小图片我们取名为button；
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：
menu；
装饰用的照片我们取名：
pic；
不带链接表示标题的图片我们取名：
title依照此原则类推。
3、尾部分用来表示图片的具体含义，用英文字母表示。
banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpgpic_hill.jpg.
4、有onmouse效果的图片，两张分别在原有文件名后加"
_on"
和"
_off"
命名
其它文件命名规范
1、js的命名原则以功能的英语单词为名。
广告条的js文件名为:
ad.js
2、所有的CGI文件后缀为cgi。
所有CGI程序的配置文件为config.cgi
（二）html编写规则
一般原则
1、在编写模版文件，排布结构表格之前，要思考一个最佳方案，表格的嵌套尽量控制在三层以内；
要考虑程序套用的可实现性、通用性、灵活性、预见性，所有内容均采用积木式组织，可替换和删除，并对总体结构不会造成破坏性影响
2、尽量避免<
colspan>
<
rowspan>
两个标记，经验表明，这两个标记会带来许多麻烦
3、一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内。
因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。
如果必须这样做，请使用<
tbody>
标记，以便能够使这个大表格分块显示
4、排版中经常会遇到需要进行首行缩进的处理，不要使用全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:
2em;
}然后给每一段加上<
p>
标记，注意，一般情况下，请不要省略<
/p>
结束标记
5、原则上，我们禁止用<
imgwidth=?
height=?
>
来人为干预图片显示的尺寸，而且建议<
img>
标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；
但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，务必在最后给<
附上width和height属性
6、为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用<
br>
来人工干预分段
7、不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号
8、为贯彻结构层和表现层分离的原则，严禁使用传统的HTML3.2/4.0控制表现的标签，例如<
font>
<
b>
，还有本意用于结构后来被滥用于控制表现的标签，例如：
<
h1>
table>
等。
所有的字号都应该用样式表来实现，禁止在页面中出现<
fontsize=?
标记，<
?
/b>
<
/h1>
标记，严禁在结构页面写表现标签
9、不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。
10、中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体
11、行距建议用百分比来定义，常用的两个行距的值是line-height:
120%/150%
12、系统中的路径全部采用相对路径
13、为保证系统和浏览器的兼容性，当设置背景图片时，要坚持用双引号。
14、“网页大小”为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。
页面大小保持在34K以下为合适
代码规则
head区标识（head区是指首页HTML代码的<
head>
和<
/head>
之间的内容）
1、公司版权注释
!
--
Generator:
中软融鑫
CreationData:
2005-8-1
OriginalAuthor:
张三
-->
2、网页显示字符集
简体中文：
META.HTTP-EQUIV="
Content-Type"
CONTENT="
text/html;
charset=gb2312"
繁体中文：
charset=BIG5"
英语：
charset=iso-8859-1"
3、简介
META.NAME="
DESCRIPTION"
这里填您网站的简介"
4、网页的css文件定义，所有css文件尽量采用外部调用
LINKhref="
style/style.css"
rel="
stylesheet"
type="
text/css"
5、网页标题
title>
这里是你的网页标题<
/title>
7、所有的javascript脚本尽量采取外部调用
SCRIPT.LANGUAGE="
javascript"
SRC="
script/xxxxx.js"
/SCRIPT>
head区可以选择加入的标识
7、设定网页的到期时间。
一旦网页过期，必须到fwq上重新调阅。
expires"
Wed,26Feb199708:
21:
57GMT"
8、禁止浏览器从本地机的缓存中调阅页面内容。
Pragma"
no-cache"
9、用来防止别人在框架里调用你的页面。
Window-target"
_top"
10、自动跳转。
Refresh"
5;
URL="
5指时间停留5秒。
11、网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
robots"
none"
CONTENT的参数有all,none,index,noindex,follow,nofollow。
默认是all。
12、收藏夹图标
linkrel="
ShortcutIcon"
href="
favicon.ico"
13、搜索关键字
keywords"
关键字1,关键字2,关键字3,..."
head区以下的标记
1、body标记
为了保证浏览器的兼容性，必须设置页面背景
bodybgcolor="
#FFFFFF"
2、table标记
在写<
互相嵌套时，严格按照的规范，对于单独的一个<
来说，<
tr>
，<
td>
各缩进两个半角空格，结束标记和开始标记平齐。
中如果还有嵌套的表格，<
也缩进两个半角空格，如果<
中没有任何嵌套的表格，<
/td>
结束标记应该与<
处于同一行，不要换行。
正确写法：
a\
tablewidth="
100%"
border="
0"
cellspacing="
cellpadding="
&
nbsp;
/tr>
/table>
b\
imgsrc=”../images/sample.gif”>
错误写法
a\
b\
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
于同一个级别的<
一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px的单元格应该在<
和<
之间写一个&
，如果高度小于12px,则应该在<
之间插入一个1*1大小的透明的gif图片，这是因为某些浏览器认为空单元格非法而不会予以解释。
如果代码顺序较乱，在DW中可以通过command->
applysouceformatting进行重新整理！
3、Width和height标记
一般情况下只有一列的表格，width写在<
的标签内，只有一行的表格，height写在<
的标签内，多行多列的表格，width和height写在第一行或者第一列的<
标签内。
总之遵循一条原则：
不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。
A、只一列的表格的width标记
b、只一行的表格的height标记
height="
30"
c、多行多列表格的width和height标记
tableborder="
tdwidth="
100"
200"
300"
4、table的width属性
为遵循页面结构灵活性、通用性原则，table的width属性原则上全部写成100％或者不写width属性，不推荐写成其他非100％宽度属性。
留空显示效果通过其给外部td施加style的padding属性实现。
1"
bgcolor="
#FF0000"
style="
padding:
20px;
"
table宽度100％<
需要说明的是这里td的style虽然是css的写法，但不属于表现层的内容，而是属于结构层的内容，所以可以直接写在html标记中间。
5、数据列表表格代码写法
表格外加上一个<
div>
，并对<
赋一个id，即<
divid=list>
，然后通过样式表对这个id下的所有html元素进行控制，
用<
th>
表示表头
设置每列宽度的位置在表头对应的<
中，其中列表项中，字数最多或者字数不定的一项不设置宽度。
宽度的值依据列表项内容的多少来定，2个字的30px，三个字40px，时间、年月日（比如2004-11-11）80-120px,
类似于标题的列表项，表格对齐方式为左对齐（align=left）,时间，人名一般居中对齐，数据一般右对齐（align=right）。
对齐页面内容时不要用div来对齐，直接在td或th中写align=…
表头文字一般不折行，方法是在<
中加上nowrap,或者通过样式表来控制
thwidth="
nowrap>
选择<
/th>
thalign="
left"
标题<
80"
发表人<
120"
时间<
40"
大小<
tdalign="
center"
right"
（三）css编写规则
css文件调用写法
1、所有的CSS的尽量采用外部调用，特殊情况才允许使用内置html写法。
css文件结构组织
1、文件提头，css文件名称、时间、作者
/*--------------------------------------------------------------------
*CRM系统的标准样式
*DateTime:
2005-1-28v1.1
*author:
lizhi
*--------------------------------------------------------------------*/
2、将不同目的和效果的CSS选择符分别编组，编组分层级使结构清晰，便于查对。
并恰当地成块注释，注释要说明施加的页面文件的对象。
顶级注释用*TOP*打头，次级注释不用。
/*TOP*head文件的风格--------------------------------*/
/*head导航文字风格*/
.headtext{
font-size:
14px;
color:
#ffffff;
font-weight:
bold;
}
.headtexta:
link{
text-decoration:
none;
}
visited{
hover{
FED078;
none;
/*客户简明信息文字风格*/
#clientcard{
align:
left;
升级会员 