为体现设计的专业化、保证客户网站的安全性以及条理清晰的反映制作情况。现将网站规范制定如下： 本规范既是一个开发规范，也是一个参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时沟通。
在目录下建立一个“企业网站”文件夹，下设“过程文件”和“正式文件”目录，过程文件－客户网站制作中所有的使用到、创建、收集的过程文件，每个客户以企业名称为目录名单独命名；正式文件－网站完成后需上传到空间中的文件，每个客户以企业名称为目录名单独命名；
▲ 静 态 页 面 制 作 注 意 事 项
．主要页面要写title（主页要写上企业中英文名称）
．主要页面meta字段便于搜索引擎查找。
．不使用过小的字体不使用过大的图片、动画、声音.不使用过长的滚屏
．及时删除无用文件，防止无谓的下载速度减慢
．严格区分文件大小写!所有文件全部以小写字母命名，包括图形文件.禁止用中文作文件名。
． 页面以800X600屏幕设置营为主（实际尺寸为778*434px），但也应注意在1024X800 屏幕设置的浏览效果； 即在800X600分辩率下应在浏览器中不出现横向的流动条；以1024 X768的分辨率时候要在页面设置提示。
．通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左；
▲ 文 件 命 名 规 则 与 目 录 结 构 规 则
． 首页面必须以“index.htm 、index.asp命名的文件。
． HTML文件扩展文件名一律用 .htm
． 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个image 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
． 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。
．网站css文件要放到根目录css下，供其它文件调用，如子栏目较多也可分别copy到自己目录下，使网站风格统一。
．l共用的模板文件应放在根目录的Templates文件夹下（此为dreamweaver的默认路径，如用其它软件开发者也需遵守此规则）。
▲ 页 面 制 作 规 则
1． 表格尽量用绝对像素，以免浏览器分辨率不同时表格产生变形。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。
2． 样式定义使用CSS定义规范
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，加粗时，一般选用11pt和14.7px 的字号比较合适。
3． 图片采用 gif , jpg 压缩格式，以减小页面下载数据量。每幅图片要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。<img >标记要增加width, height，以免图像不能正常显示时，出现页面混乱现象。
4． 如页面采用动画活跃网页，须避免动画过大，尽量减少用户浏览等待时间。整页用到flash动画，要考虑到flash与页面的融合统一。FLASH文件比较大时候必须做loading过程。
5．每个网页（首页除外）都要有返回主页和返回上级的图标或文字链接。 返回连接使用相对路径，尽量不使用绝对路径。如：../index.htm
6．页面底部版权声明统一“版权所有：**公司 技术支持：南昌市先索信息产业有限公司”
▲head区代码规范_
．注释 <!--- 日期与设计师姓名 ---> * 是否需要
<!--- 日期与修改者(编辑)姓名 ---> *
．网站简介 <META NAME="DESCRIPTION" CONTENT="网站简介">
．搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2,关键字3">
．css规范 <LINK href="style/style.css" rel="stylesheet" type="text/css">
．搜索机器人<META NAME="robots" CONTENT="">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
．js规范 <script language="javascript" type="text/javascript" src="menu.js"></script>
▲ 程 序 开 发 注 意 事 项
主目录下应有一个help目录,存放说明文件。说明文件包括：
目录说明
文件列表说明：存放位置、文件名称、功能及处理逻辑描述、所涉及的库表、调用关系。
数据库说明：数据库位置、空间分配要求、表设计、关系设计、视图设计、存储过程设计等。
1． 网站系统要连接一个数据库(sql),所以要连接数据库，不允许作多个头包含连接，整个系统只有一个，以便将来更改数据库密码时很方便的更改本系统，同时，移植也很方便。
2． 头包含要做成例如*.asp的文件，这样用户不会发现密码及数据库，如果有acess数据库，扩展名一定要改成例如*.asp的样子，以便保护数据。
3． 所有的各个子模块，都要有一个readme.asp（readme.txt----改成àreadme.asp，什么都不显示）文件，里面详细叙述本子模块用到的表，表结构，每个字段的意义及大小，SQL 建表脚本语言（用SQL 工具导出），每个程序文件的功能。
4． 建表要有一定的意义，其字段也要有意义，如4967班的表学生，表名 ：table_4967_student字段：姓名,年龄table_4967_student_name，table_4967_student_age等等。同时，要有5个人上的扩展字段，以便将来扩充功能。
5 ．要有注释，以便维护。删除测试时候的无用代码，使程序清晰明了。
6． 要用相对路径，坚决禁止用绝对路径。
7 ．后台管理程序要整合到一个页面上，而且要有权限，只能是有权限的用户登录后才能进行系统管理。
8 ．不要开设不必要的session变量，以免浪费资源，同时，能一次性用sql语句解决的问题就用sql语句，避免多次进行数据库检索，反馈，再检索等等，以免影响速度，致使大量的时间浪费在网络连接上。
9 ．程序开发时不要用已投入运行的网站进行测试，请自己搭建环境。
10 ．要有错误捕获处理，提醒用户如何操作造成错误。
11 ．删除信息时要有确认，毕竟是删除，确认后再行删除。
12． 各个模块间要条例分明，不要混乱一片。每个模块要有自己的目录（放到主目录下）。
13． 该用js验证合法的就要验证，坚决避免服务器端进行验证，以免加大服务器负担，同时，影响网页反应的速度。
14． 编程人员测试程序时要用上界限外值，合法值，下界限外值进行测试。
15． 显示数据库信息时候，应考虑到段落层次，各标点符号的正常显示，记录比较多可以考虑分页，避免过长的页面出现。
16 ．所有模块内部测试通过后再交往上级进行测试及验收。
17． 所有的功能完成后，要进行整合测试。
网页设计规范
一. 规范有效期：从PSD源文件到HTM页面交付给客户为止；
二. 面向的对象：所有的设计人员及编辑人员；
三. 生成HTM文件的命名
1. 网站结构
生成大于两个页面的网站时必须有以下结构.
例: (citk.net)
index.htm 根目录
/common 公司用件夹(swf/js/css)文件存放处
/images 网站使用图片
/Templates DW自动生成的模版目录
/news * 是否使用二级目录结构 *
...
/service * 是否使用二级目录结构 *
2. 模版的命名
一般情况下设计出来的网页一般有三个两种版式(推荐使用下面这三个文件命名)
index.dwt (可选, 一个网站只要有一个index件)
list.dwt
memo.dwt
3. 模版的可编辑区命名(待定)
4. 关于模版的套用
希望网站中(除了index外)所的网页(HTM文件)都应该对应一个模版(dwt文件)
5. 关于链接
除了标注的几个链接(如: http://zf.91.com)外，其他页面禁止使用绝对链接(就是使用http://开头的链接格式)
6. 关于CSS
生成页面时，请重新定义 <TD> 样式标签
css定义（待定)
7. 网站首页head区代码规范_ (是否由编辑来填)
注释 <!--- 日期与设计师姓名 ---> * 是否需要
<!--- 日期与修改者(编辑)姓名 ---> *
网站简介 <META NAME="DESCRIPTION" CONTENT="网站简介">
搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2,关键字3">
css规范 <LINK href="style/style.css" rel="stylesheet" type="text/css">
搜索机器人<META NAME="robots" CONTENT="">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
js规范 <script language="JavaScript" type="text/JavaScript" src="menu.js"></script>
其他由ps or ir 自动生成
四. 注意事项
1. 编辑大于三个页面的网站，请使用DW站点管理器；
2. 在生成页面时，尽量把网页的内容模块化；
3. 在生成页面时，要求使用已经存在的元素(图片,Js,样式)
4. 页面的头部及底部使用(ifarme)内嵌页面
编者注：事实上，我觉得个人网站没有必要这样规范，遵循一般的命名规则即可。但对于团队协作者，规范还是非常有必要的。
网站开发规范
总 论
本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
基 本 要 求
1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂，
脚 本 编 写
我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。
1. Html 文件的通用模板：
<html>
<!--
Generator: Sub Design Studio ( http://www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author: eastline
-->
<head>
<title> 文档标题 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
其他meta 标 记
<link rel="stylesheet" type="text/css" href="style/style.css">
样式表定义
客户端javascript 函数定义及初始化操作
</head>
<body bgcolor="#ffffff">
… …
</body>
补充：
为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href=”url”> 而不 是 <a href=url>.
2. 允许全文检索的页面，为了使Internet 上的搜索引擎能够有效检索，在频道的首页的html的<head></head>之间应该加入Keywords 和Description 元标记，例如 ：
<meta name=”keywords” content=”东方新干线，汽车，买车”>
<meta name=”description” content=”东方新干劲线，全球中文汽车信息第一站”>
3. CSS 文件的格式样例代码 ：
<style type="text/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}
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
.blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
</style>
这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行，
如我们注意在源代码中不应有这样的代码：
<td><img src=”../images/sample.gif”>
</td>
而应该是这样的：
<td><img src=”../images/sample.gif”></td>
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
<td><img src=”../images/sample.gif”> </td>
属于同一个级别 的 <table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 <td> 和 </td> 之间写一 个 如果高度小于12px, 则应该 在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->apply souce formatting进行重新整理！
5. Width 和height 的写法也有统一的规范，一般情况下只有一列的表格，width 写在<table> 的标签内，只有一行的表格，height 写在 <table> 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。
一 般 原 则
1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦。
2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。
3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记 。
4. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。
5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。
6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
7. 所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。
8. 请不要在网页中连续出现多于一个 的 也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>
12、嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。
13、“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。
文 件 命 名 原 则
1. 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm
2． 件名称统一用小写的英文字母、数字和下划线的组合。
3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作 。
4. 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则 ：
☆ 在根目录下开设news目 录
☆ 第一条缺省新闻取名index.htm
☆ 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, …
☆ 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, …
☆ 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。
5. 图片的命名原则遵循以下几条规范 ：
☆ 名称分为头尾两两部分，用下划线隔开。
☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等 。
☆ 一般来说:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner
标志性的图片我们取名为：logo
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu
装饰用的照片我们取名：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.
目录建立的原则：以最少的层次提供最清晰简便的访问结构。
根目录。
根目录指DNS域名服务器指向的索引文件的存放目录。
服务器的ftp上传目录默认为html
根目录文件
根目录只允许存放index.html和main.html文件，以及其他必须的系统文件。
每个语言版本存放于独立的目录。已有版本语言设置为：
简体中文 /gb
繁体中文 /big5
英 语 /en
日 语 /jp
每个主要功能(主菜单)建立一个相应的独立目录。
根目录下的images为存放公用图片目录，每个目录下私有图片存放于各自独立images目录.
例如：/menu1/images
/menu2/images
所有的js文件存放在根目录下统一目录/script
所有的CSS文件存放在根目录下的style目录
所有的CGI程序存放在根目录并列目录/cgi_bin目录
head区是指首页HTML代码的<head>和</head>之间的内容。
必须加入的标签
1.公司版权注释<!--- The site is designed by Maketown,Inc 06/2000 --->
2.网页显示字符集
简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
3.网页制作者信息
<META name="author" content="webmaster@maketown.com">
4.网站简介
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
5.搜索关键字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
6.网页的css规范
<LINK href="style/style.css" rel="stylesheet" type="text/css">
(参见目录及命名规范)
7.网页标题
<title>xxxxxxxxxxxxxxxxxx</title>
.可以选择加入的标签
1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
2.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3.用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
4.自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指时间停留5秒。
5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
6.收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
附<body>标签：
<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">
网站文件命名规范
文件命名的原则：以最少的字母达到最容易理解的意义。
索引文件统一使用index.html文件名(小写)
index.html文件统一作为"桥页"，不制作具体内容，仅仅作为跳转页和meta标签页。主内容页为main.html
按菜单名的英语翻译取单一单词为名称。例如：
关于我们 /aboutus
信息反馈 /feedback
产 品 /product
所有单英文单词文件名都必须为小写，所有组合英文单词文件名第二个起第一个字母大写；
所有文件名字母间连线都为下划线
图片命名原则以图片英语字母为名。大小原则写同上。
例如：网站标志的图片为logo.gif
鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如：menu1_on.gif/menu1_off.gif
五. 其它文件命名规范
1.js的命名原则以功能的英语单词为名。
例如：广告条的js文件名为:ad.js
2.所有的CGI文件后缀为cgi
所有CGI程序的配置文件为config.cgi
网站项目管理规范手册
一.概念
网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。
二.需求分析
项目立项
我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。
客户的需求说明书
第一步是需要客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚，需要您不断引导和帮助分析。曾经有一次，我问客户：“您做网站的目的是什么？”他回答：“没有目的，只是因为别人都有，我没有！”。这样的客户就需要耐心说明，仔细分析，挖掘出他潜在的，真正的需求。 配合客户写一份详细的，完整的需求说明会花很多时间，但这样做是值得的，而且一定要让客户满意，签字认可。把好这一关，可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。那么需求说明书要达到怎样的标准呢？简单说，包含下面几点：
1.正确性：每个功能必须清楚描写交付的功能；
2.可行性：确保在当前的开发能力和系统环境下可以实现每个需求；
3.必要性：功能是否必须交付，是否可以推迟实现，是否可以在削减开支情况发生时"砍"掉；
4.简明性：不要使用专业的网络术语；
5.检测性：如果开发完毕，客户可以根据需求检测。
三.系统分析
网站总体设计
在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体设计，详细设计，出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：
1.网站需要实现哪些功能；
2.网站开发使用什么软件，在什么样的硬件环境；
3.需要多少人，多少时间；
4.需要遵循的规则和标准有哪些。
同时需要写一份总体规划说明书，包括：
1.网站的栏目和版块；
2.网站的功能和相应的程序；
3.网站的链接结构；
4.如果有数据库，进行数据库的概念设计；
5.网站的交互性和用户友好设计。
网站建设方案
在总体设计出来后，一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统，而且在客户需求不是十分明确的情况下提交方案，往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解，在明确需求并总体设计后提交方案，这样对双方都有益处。网站建设方案的包括以下几个部分：
1.客户情况分析；
2.网站需要实现的目的和目标；
3.网站形象说明；
4.网站的栏目版块和结构；
5.网站内容的安排，相互链接关系；
6.使用软件，硬件和技术分析说明；
7.开发时间进度表；
8.宣传推广方案；
9.维护方案；
10.制作费用；
11.本公司简介：成功作品，技术，人才说明等。
当您的方案通过客户的认可，那么恭喜你！您可以开始动手制作网站了。但还不是真正意义上的制作，你需要进行详细设计：
网站详细设计
总体设计阶段以比较抽象概括的方式提出了解决问题的办法。详细设计阶段的任务就是把解法具体化。详细设计主要是针对程序开发部分来说的。但这个阶段的不是真正编写程序，而是设计出程序的详细规格说明。这种规格说明的作用很类似于其他工程领域中工程师经常使用的工程蓝图，它们应该 包含必要的细节，例如：程序界面，表单，需要的数据等。程序员可以根据它们写出实际的程序代码。
四. 项目实施
整体形象设计
在程序员进行详细设计的同时，网页设计师开始设计网站的整体形象和首页。
整体形象设计包括标准字，Logo，标准色彩，广告语等。 首页设计包括版面，色彩，图像，动态效果，图标等风格设计，也包括banner，菜单，标题，版权等模块设计。首页一般设计1-3个不同风格，完成后，供客户选择。
记住：在客户确定首页风格之后，请客户签字认可。以后不得再对版面风格有大的变动，否则视为第二次设计。
开发制作
到这里，程序员和网页设计师同时进入全力开发阶段，需要提醒的是，测试人员需要随时测试网页与程序，发现Bug立刻记录并反馈修改。不要等到完全制作完毕再测试，这样会浪费大量的时间和精力。项目经理需要经常了解项目进度，协调和沟通程序员与网页设计师的工作。
调试完善
在网站初步完成后，上传到服务器，对网站进行全范围的测试。包括速度，兼容性，交互性，链接正确性，程序健壮性，超流量测试等，发现问题及时解决并记录下来。
为什么要记录文档呢？其实本软件工程本身就是一个文档，是一个不断充实和完善的标准。通过不断的发现问题，解决问题，修改，补充文档，使这个标准越来越规范，越来越工业化。进而使得网站开发趋向规范，趋向合理。
宣传推广
宣传推广的基本方法有：
1.网页里设置适当的META标签；
2.各搜索引擎登录；
3.准备新闻稿件在各新闻公告板发表；
4.合理使用Email邮件列表；
5.广告条交换；
6.付费广告。
至此，网站项目建设完毕，将有关网址，使用操作说明文档等提交客户验收。如果需要维护，另行签定维护项目。
维护
网站成功推出后，长期的维护工作才刚刚开始，我们需要做到的是
1.及时响应客户反馈；例如可以采取Email自动回复功能，然后在1-3个工作日里解决问题，再次回复；
2.网站流量统计分析和相应对策；
3.尽量推广和使用您的网址；
4.网站内容的及时更新和维护。
五.遵循的规范
1.网站建设目录规范
2.网站文件命名规范
3.网站建设尺寸规范
4.网站首页head区代码规范
5.网站连接结构规范
网站建设尺寸规范
页面标准按800*600分辨率制作，实际尺寸为778*434px
1024*768分辨率实际尺寸为：1002*603PX
页面长度原则上不超过3屏，宽度不超过1屏
每个标准页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px
另外120*90，120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K .
CSS的命名规范及部分简写说明
以下结构可以组合使用，例如：左列标题lefttitle；底部导航footernav
书写原则是：
1.一律小写；
2.尽量用英文；
3.不加中杠和下划线；
4.尽量不缩写，除非一看就明白的单词 ；
5.如果可以话，最好加上中文说明；
----------------------------------------------------------------------------------------------
页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright
----------------------------------------------------------------------------------------------
下面是CSS缩写性质的列表以及它们所表示的常规性质。
Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复 （在设置水平和垂直的时候如果参数不是数值话，所有的属性是没有先后关系的，可以随排）
Border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停
减少空白
CSS命名规范
最近和一程序员合作项目。弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来。结果我打开他的页面，看了看,从头第一个开始就是contentCommon，下面全部是content****. 我说明了我的理由，过了半会，似乎是接受了，却突然来一句：“不要用H标签嘛！还有不要用UL来定义导航等“。对于很多合作过的程序员，大多都是这样，命名规范大多是自成一派。对于制作标准更是视而不见。抱着只照顾IE正常浏览的态度叫嚣着”让FIREFOX和SAFARI见鬼去吧！“
命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如content-title
直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
top-panel
horizontal-nav
left-side
center-column
right-col
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。
结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
branding
main-nav
subnav
main-content
sidebar
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。
惯例
最常用类/id名称的示例列表：
header
content
nav
sidebar
footer
常用标签：
div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助
h1-h6：标题
h1-h6 根据重要性依次递减
h1位最重要的标题
label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西
引用内容 <label for="user-password">密 码</label>
<input type="password" name="password" id="user-password" />
(XHTML 1.0 Strict 下不能通过，可以使用"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre",
"address", "fieldset", "ins", "del" )
dl dd dt 定义列表,当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签
引用内容
<dl>
<dt>猫
<dd>一种可供饲养的小宠物。
<dt>蜥蜴
<dd>通常可在干燥区域发现的爬行动物。
</dl>
1.忘记设置背景颜色
很多朋友在制作白色背景的网页时，不设置背景颜色为#FFFFFF;,也许大家看到的页面没什么问题。可是当我们在电脑的显示属性里将窗口的颜色换成白色以外的颜色时，再看看你的页面会变成什么样？
2.链接的样式设定
熟悉CSS的朋友一定知道，链接样式a属于伪类（Pseudo-Classes）。其a有4种属性，他们分别为: link ，: hover ， : active， : visited
程序代码: link （设置 a 对象在未被访问前的样式）
: hover （设置对象在其鼠标悬停时的样式）
: active（设置对象在被用户激活（在鼠标点击与释放之间发生的事件)时的样式）
: visited（设置 a 对象在其链接地址已被访问过时的样式）
当然大多朋友都会去设置a:link的样式和a:hover的样式。可是往往忽略: active， : visited的样式。:active有助于提示用户此链接已被激活，将马上响应链接地址。而：visited有助于提示用户哪些已经被访问过了，无须再给用户带来思考的时间。当然，这一点，我也做的不好。也许你会说，明明知道为什么不去做呢？我这里给你一个牵强的回答：因为我不希望网页上颜色过多。
3.文档类型声明
有些朋友们不喜欢将网页头部那一长串字符留在网页里。
如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
而只是留下一个标签<html>
如果不指定文档类型，你的HTML不是合法的HTML，并且大部分浏览器会用“怪癖模式（quirks mode）”来处理页面，这意味着浏览器认为你自己也不知道究竟做什么，并且按浏览器自己的方式来处理你的代码。
注意!DOCTYPE必须大写
而文档类型声明有4类：
程序代码XHTML 1.0 Strict（严格）的文档声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1的文档声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.0 Transitional（过渡型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset（框架）文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4.代码书写问题
4.1 关闭符号的书写
任何标签都必须关闭，很多书籍这样对我们说到。
例如：<p></p>,<div></div>…………
4.2 闭合时的空格
在HTML里一共有100多个标签。什么时候标签闭合时候需要空格，什么时候不需要呢？
例如：<col />，<br />,<area />,<base />,<basefont />,<bgsound />…………等等~
总之只要有起始标签的（如<div>,<p>,<b>)关闭时，不需要空格，且关闭符号在前面（如</div>,</p>,</b>)
没有起始标签的必须在标签字符后空格，然后关闭
4.3 所有标签必须小写
5.类class和标识id选择符
网页中最常用的元素标识方法有三种，它们是id、class和name，id表示给单个元素标识，而class用于给同类型的命名，而name给一般元素命名
我曾经看到一个网页里的标签全部是id，这样好吗？
首先需要说明的是：id和class不同之处在于，id用在唯一的元素上，而class则用在不止一个的元素上。
也就是说class可以重复使用，而id不可以。
还有一部分朋友在重构页面里，全部使用id或者是class.全部使用class的我可以理解。但是全部换上id，我就有些纳闷了。我再重申一次：id需要具有唯一性，并且尽量在外围使用。而class具有可重复性，并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的class都成为id的子级或是孙级。
所以在实际运用的XHTML结构中，大结构一定是用id。比如标志、导航、主体内容、版权,而在书写的时候，最好以父级为头，这样比较容易修改，分类。
6.图片的替换值
图片的替换值也就是HTML里的alt内容，很多人不会去添加图片的说明内容。
这样也许会给访问者带来不必要的麻烦，当访问者将鼠标移上图片时，空空如也。如果图片没有显示出来，他就是一个红XX了，人们都不知道这张图片展示给大家的大概是个什么内容。
7.到底是表格还是层布局
随着web 2.0的热浪，大家都在研究div+css.但是是否你全部使用div就是达到标准，达到优化的目的了呢？NO！我的好友Clear这样说道：Div+CSS ≠ Standard。
div+css就是王道的误区，clear遇到过~我也遇到过，相信很多研究它的人都遇到过这样的误区。
应该合理文档结构，让所有页面在所有浏览终端上（电脑浏览器，移动设备等）表现一致，提高开发质量与效率的同时，节约开发资金。
在需要使用表格的时候一定要使用表格。虽然我不用一个table也能实现表格的效果。
8.在网页里找不到关于作者以及网站的一切资料
没有作者的资料，也就意味着大家都不知道这个网页是谁的？我想大家都不希望吧！
其实这也是个SEO问题。
例如：
程序代码<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (设置或获取用于将 META 标签的 content 绑定到 HTTP 响应头的信息）
<meta http-equiv="Content-Language" content="UTF-8" /> (语言编码）
<meta name="robots" content="all" /> （表示所有的搜索引擎,你也可以针对某个具体搜索引擎写为name=”BaiduSpider”）
<meta name="author" content="piggy1221@sohu.com,Kenny" /> （所有者的联系方式以及姓名）
<meta name="Copyright" content="omspace" /> (版权信息）
<meta name="keywords" content="design,music,kenny" /> （搜索引擎关注的关键词）
<meta name="description" content="〓★ OM-Space ★〓 - " /> （网站说明）
9.标题的使用
你会在你的网页里使用标题么？你的回答一定是肯定的！我也相信。不会有人在写网页内容时不写标题的
当然，我这里所说的是你会运用到标题标签么？标题标签有什么作用呢？
举个简单的例子，当你的网速慢时，网页的CSS还没读出来~你的布局全没了~至少现在你还能清楚的分辨出哪是标题，哪是内容。
常用的标题标签在我们熟知的office里就已经见过了：h1,h2,h3,h4,h5,h6
h1至h6是由大到小排列的，h1最大，h6最小。不同浏览器对h的定义值不一样。当然，我们可以去定义h标签的字体大小以及样式
h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的。其他的h标签可以重复使用。
10.表格的控制
很多人都会设置表格的样式，可他们的方法大多是<table bgcolor="#333333">或者是<table class="xxx">
一个多行多列表格下来，每一个tr,每一个td后都跟着样式。复杂的代码看的让人心烦。为什么我们不能直接定义tr和td呢，
我们可以直接定义tr，让每一行都可以有单独的颜色或者是样式。
而对于列，我们则可以用<col />来定义列的样式。
这里，我是想到什么说的什么，如果有错误的地方还请纠正。当然还有很多值得注意的地方，如</ br>的滥用等等，欢迎大家跟贴说出自己的心得。！您可以开始动手制作网站了。但还不是真正意义上的制作，你需要进行详细设计：