网站制作设计规范.docx

资源描述

网站制作设计规范.docx

《网站制作设计规范.docx》由会员分享，可在线阅读，更多相关《网站制作设计规范.docx（18页珍藏版）》请在冰点文库上搜索。

网站制作设计规范.docx

网站制作设计规范

前言

本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。

但是，请大家千万不要随意更改规范。

如果有任何问题，请及时与项目负责人沟通。

第一部分文件的命名和放置

一、文件的命名

1、除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。

尽量用一些大家都能看懂的词汇。

使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。

而且当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

例：

images（存放图形文件），flash（存放Flash文件），style（存放CSS文件），scripts（存放Javascript脚本），inc（存放include文件），link（存放友情链接）,media（存放多媒体文件）等。

2、图片的命名原则名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。

放置在页面顶部的广告、装饰图案等长方形的图片取名：

banner

标志性的图片取名为：

logo

在页面上位置不固定并且带有链接的小图片我们取名为button

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：

装饰用的照片我们取名：

pic

不带链接表示标题的图片我们取名：

title

例：

banner_sohu.gif

banner_sina.gif

menu_aboutus.gif

menu_job.gif

title_news.gif

logo_police.gif

logo_national.gif

pic_people.jpg

pic_hill.jpg.

（如果某一类图片过多，我们可以在images文件夹下再建立一个文件如：

pic，来存放大量pic图片。

）

3、动态文件命名以及静态文件命名规则：

性质_描述，描述可以有多个单词，用”_”隔开，性质一般是该页面得概要。

例：

register_form.asp，register_post.asp,topic_lock.asp,Sale_car.asp

下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明静态html文件的命名原则：

☆第一条缺省新闻取名index.htm

☆所有属于“国内新闻”的新闻依次取名为：

china_1.htm,china_2.htm,…

☆所有属于“国际新闻”的新闻依次取名为：

internation_1.htm,internation_2.htm,…

☆如果文件的数量是两位数，请将前九个文件命名为：

china_01.htm,china_02.htm以保证所有的文件能够在文件夹中正确排序。

4、首页命名必须为index.htm、index.asp，来仅仅作为跳转页和meta标签页。

主内容页为main.htm，main.asp。

二、文件的放置

1、在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个image的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。

例：

image（存放图片）

db（存放数据库）

main（存放主页面文件）

admin（存放后台页面文件）

news（存放新闻栏目相关文件）而new目录下又存放如下文件

image（news文件的相关图片）

file（news文件的相关文挡）

2、index.asp，index.htm要放在根目录下及所有子目录之外。

最好是根目录下只放index.asp，index.htm，其他文件都放在子目录里。

3、主目录下应有一个help目录,存放说明文件。

说明文件包括：

目录说明

文件列表说明：

存放位置、文件名称、功能及处理逻辑描述、所涉及的库表、调用关系。

（以便日后看不懂文件名用来查看）

数据库说明：

数据库位置、空间分配要求、表设计、关系设计、视图设计、存储过程设计等。

其他说明以及用户帮助文挡。

文档编写采用Word

4、网站css文件要放到根目录image下或者style目录下，供其它文件调用，如子栏目较多也可分别copy到自己目录下，使网站风格统一。

第二部分首页HEAD区规范

一、公司版权注释

---ThesiteisdesignedbyMaketown,Inc06/2000--->

二、网页显示字符集

简体中文：

繁体中文：

英语：

三、网页制作者信息

四、网站简介

五、搜索关键字

六、网页的css规范

CSS定义规范及CSS文件的格式样例代码

用css定义字体大小、行间距（建议使用"外部链接"方式，将css的设定作成一个单独的文件，在每个页面里都调用它）；

例：

—

p{text-indent:

2em;}

body{font-family:

"宋体";font-size:

9pt;color:

#000000;margin-top:

0px;margin-right:

0px;margin-bottom:

0px;margin-left:

0px}

table{font-family:

"宋体";font-size:

9pt;line-height:

20px;color:

#000000}

link{font-size:

9pt;color:

#FFFFFF;text-decoration:

none}

visited{font-size:

9pt;color:

#99FFFF;text-decoration:

none}

hover{font-size:

9pt;color:

#FF9900;text-decoration:

none}

active{font-size:

9pt;color:

#FF9900;text-decoration:

none}

-->

为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。

七、网页的标题

xxxxxxxxxxxxxxxxxx

八、可以选择加入的标签

1.设定网页的到期时间。

一旦网页过期，必须到服务器上重新调阅。

21:

57GMT">

2.禁止浏览器从本地机的缓存中调阅页面内容。

3.用来防止别人在框架里调用你的页面。

4.自动跳转。

（5指时间停留5秒）。

5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

CONTENT的参数有all,none,index,noindex,follow,nofollow。

默认是all。

6.收藏夹图标

所有的javascript的调用尽量采取外部调用.

第三部分网页尺寸规范

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，就不会出现水平滚动条，高度则视版面和内决定。

3、在photoshop里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右。

4、注意在photoshop里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而photoshop中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象。

5、1024*768下网页的尺寸:

width=955,height=600

800*600下网页的尺寸:

width=760,height=420

页面标准按800*600分辨率制作，实际尺寸为778*434px，页面长度原则上不超过3屏，宽度不超过1屏．

每个标准页面为A4幅面大小，即8.5X11英寸

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

468*60全尺寸BANNER大小<15K

392*72全尺寸带导航条BANNER

234*60半尺寸BANNER

125*125方形按钮

120*90按钮#1

120*60按钮#2

88*31小按钮大小<7K

120*240垂直BANNER

第四部分页面制作规则

一、表格

1、最外层表格要用绝对像素，以免浏览器分辨率不同时表格产生变形。

一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。

如果必须这样做，请使用标记，以便能够使这个大表格分块显示。

里层表格尽量使用相对像素，方便格式统一和代码修改。

2、在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免两个标记，经验表明，这两个标记会带来许多麻烦。

3、大家都知道Table的默认水平对齐方式（align）为左对齐。

但是在某些特殊的情况下，IE会把默认的左对齐理解为居中对齐，从而导致页面的排版出现问题，所以大家在做页面的时候一定要习惯性的设置表格的align属性，不要偷懒跳过这步，对页面的表现来说，这所谓的多此一举绝对有益无害。

4、在写

互相嵌套时，严格按照的规范，对于单独的一个

来说，

对齐，

缩进两个半角空格，

中如果还有嵌套的表格，也缩进两个半角空格，如果结束标记应该与

而应该是这样的：

这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：

属于同一个级别的

中没有任何嵌套的表格，

处于同一行，不要换行。

如我们注意在源代码中不应有这样的代码：

一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px的单元格应该在之间写一个，如果高度小于12px,则应该在之间插入一个1*1大小的透明的gif图片，这是因为某些浏览器认为空单元格非法而不会予以解释。

5.Width和height的写法也有统一的规范，一般情况下只有一列的表格，width写在

和

的标签内，只有一行的表格，height写在

的标签内，多行多列的表格，width和height写在第一行或者第一列的

标签内。

总之遵循一条原则：

不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。

做到这一条不容易，需要较长时间的练习和思考。

二、图片

1、图片采用gif,jpg压缩格式，以减小页面下载数据量。

每幅图片要有本图片的说明文字（alt=””），这样如果图片不能正常显示，也可知道图片处代表什么意思。

标记要增加width,height，以免图像不能正常显示时，出现页面混乱现象。

2、颜色丰富或渐变的图片（如产品图片等），建议用JPG格式；颜色单调的图片（如LOGO、文字按钮等），建议用GIF格式。

3、在不影响图片效果的前提下合理压缩图形文件。

三、其他页面规范

1、如页面采用动画活跃网页，须避免动画过大，尽量减少用户浏览等待时间。

整页用到flash动画，要考虑到flash与页面的融合统一。

2、每一相对独立的栏目首页一般也要求在40K容量以内，如特殊要求也不得超过60K；每个网页（本网首页除外）都要有返回主页和返回上级的图标或文字链接。

3、网页制作字体要求使用国家简化字。

4、为了保证网站能够与下一代的web语言xml标准兼容，要养成良好习惯，所有的HTML标签的属性都要用单引号或者双引号括起，即我们应该写而不是。

5、排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:

2em;}然后给每一段加上

标记，注意，一般情况下，请不要省略

结束标记。

6、不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

7、所有的字号都应该用样式表来实现，禁止在页面中出现

>标记。

8、请不要在网页中连续出现多于一个的，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。

9、中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。

10、行距建议用百分比来定义，常用的两个行距的值是line-height:

120%/150%。

11、网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：

而应该这样：

12、“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。

用户喜欢快的不是新奇的站点。

对于解调器用户，网页大小保持在34K以下为合适。

第五部分ASP编码规范

一、　变量命名使用规范

1、变量命名规范

*变量名必须采用有意义的单词命名，如：

　　strUserName、lngArrayIndex

　　*变量名除首字母小写外，其他单词首字符必须大写

　　*如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词缩写的变量名必须在定义时给出注释,如：

　　varstrAdName//用于表示Administrator帐户的名称

varstrAdminName//不用给出注释，Admin被广泛了解

2、常用变量命名规范：

说明：

包含在[]中的部分为可省略部分

*Connection对象：

conn[Name]。

Name为所连接数据库的服务器名字

*Recordset变量命名规范：

rs[Name]。

Name为自定义的同rs存储内容有关的英文单词组合

*Command对象：

cmd[Name]。

Name为自定义的同command目的有关的英文单词组合

*SQL语句字符串变量：

strSql[CommandName]。

CommandName为自定义的同Sql语句功能相关的英文单词组合，如：

strSqlUpdateModify

strSqlInsertUser

3、变量使用规范

*变量使用前必须定义。

没有定义的变量禁止使用

　*变量的使用尽量缩小到小的作用域。

如循环使用

　　for（varI=0;I<12;I++）{

}

　　而不是：

　　varI;

　　for（I=0;I<12,I++）{

}

二、Request、Session、Application使用规范

*所有需要放入Session、Application中的对象，必须采用有意义的英文名字。

除了被广泛了解的单词缩写以外，不得采用单词缩写。

如：

　　Session（“cp”）=strCurrentUserIP‘不允许

　　Session（“CurrentUserIP”）=strCurrentUserIP

　　Session（“Pwd”）=strPwd‘允许，Pwd被广泛了解为密码

　　*所有需要在代码内用到的Request、Session、Application中的元素，必须在代码头部赋值给代码内声明的变量。

　　*如果获得Form中提交的内容，必须使用Request.Form（“itemName”）.

　　*如果获得QueryString中提交的内容，必须使用Request.QueryString（“itemName”）

　　*不得在代码中出现Request（“”）这样的引用方式

三、函数使用原则

*尽量使用函数封装代码块

*连续代码块尽量不要超过50行。

最多不得超过70行

*尽量使用局部变量。

*如有涉及到全局的资源，如Connection，尽量作为函数的参数传入

*所有在函数内部创建打开的资源，在退出函数前必须关闭释放。

如：

Recordset，Command

四、HTML同服务器端脚本混合使用原则

　　*服务器端脚本标记“<%”必须同其上一行紧邻的标记左对齐，如：

　　dowhilenotrs.eof

　　rs.movenext

　　loop

text

*服务器端脚本标记“<%”同其后的代码不得在同一行书写

*“%>”同其前面的代码不得在同一行书写

*服务器端脚本标记”%>”同其最近的”<%”标记对齐

*服务器端内部的HTML代码依据静态文件的HTML缩进规则编写，不遵循服务器端脚本缩进规则

*HTML标记内部的代码，依据服务器端脚本的缩进规则，不遵循HTML代码缩进规则。

五、客户端程序部分

1、错误提示信息的处理

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

"错误：

"+提示信息+"！

2、成功提示信息的处理

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

"成功：

"+提示信息+"！

3、页面的返回

所有需要返回上一页的时候使用history.back（）;不使用history.go（-1）;

需要返回前n页（n>1）时使用history.go（-n）；

所有返回都使用连接的方式而不是button。

4、提交前数据的判断

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

是否为数字：

使用函数isNaN（）

长度判断:

长度要判断去掉前后空格后的实际长度

为空判断：

所有不容许为空的输入字段都要在去掉前后空格后进行判断，同时如果该字段为查询条件则必须不能为空

如果判断条件发现数据错误，则通过（2-1）提示错误信息，然后通过方法focus（）聚焦错误字段。

5、删除数据前的提示

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

六、服务器端程序部分

1.数据的取得

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

2.数据的判断

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

3.对象的关闭

所有数据库和文件对象都要在使用后尽可能早的close，同时赋nothing。

4.提示信息

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

涉及数据库Update，Del，Insert的操作成功都要提示。

5.变量的使用

所有变量在使用前都需要声明，并且赋初值。

6.变量的命名

采用变量类型缩写（小写）+英文单词（第一个字母大写）的方法。

开发中变量基本涉及一下几类

整数：

小数：

字符:

布尔：

日期：

特殊的：

循环依次采用i，j，m，n；

数组用ary

指针p，q

临时变量tmp

七、SQL语句

1.排序

order时应该尽量提前使用建立索引或者主键的字段排序。

2.select

select时避免使用*，即使需要所有字段也应尽量一个一个按照使用的顺序罗列出来。

3.尽量避免使用in和notin

八、控件规则

1.img控件

alt：

所有展示类图片都要具有能简要描述图片内容的文字说明。

2.Input控件

maxlength：

所有INPUT控件都需要制定maxlength属性，默认值为数据库中对应的字段的长度。

readonly：

所有不可更改的

展开阅读全文