总 论
本规范针对从事大型WEB站点开发设计人员，要求使用者具有一定的HTML、CSS基础知识，对原代码具有较强的控制能力。本规范的目的是为了开发出通用的、易于维护的高效率的WEB界面。
基 本 要 求
1．网站目录命名规则
所有目录名称使用小写英文字母的组合，绝对禁止包含汉字、空格和特殊字符，可以添加数字或下划线的组合，禁止大小写混用。
2．在网站根目录中开设images、common、三个子目录，根据需要再开设media 子目录，images目录中放网站所有页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放Css、JavaScript、Asp、Php、include 等公共文件；media 子目录中放flash, avi, quick time 等多媒体文件 。
3．在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
4．temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
5．针对 dreamweaver 的用户还有模板目录与库目录。
6．针对 dreamweaver & fireworks studio 的用户还得再开设一个resource目录存放fireworks的png文件。
7．在非网站目录里还得有backup目录，按日期进行整个站点的备份。禁止在dreamweaver的控制范围进行网站备份。
8．doc 子目录放客户提供的各种文字图片等等原始资料，杜绝非网站内容上网
脚 本 编 写
为了协同合作及日后修改维护的方便，我们应该有一个脚本整体风格一致的概念，以便于其他协作者能够快速的理解你的文档脚本。
1、Html 文件的通用模板：
<html>
<script>
…………
//客户端Javascript 函数定义及初始化操作
</script>
</head>
<body bgcolor="#FFFFFF">
……
</body>
</html>
2、补充：
为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href= ="url"> > 而不是 <a href=url>
3、关键字等META信息
允许全文检索的页面，为了使Internet 上的搜索引擎能够有效检索，在网站首页及各频道首页的html的<head></head>之间应该加入Keywords 和Description 元标记，但仅使用在首页，其它页面并非必须。
4、CSS 文件的书写
样例：
body { font-family: "宋体"; font-size: 12px; color: #000000; background-image: url( http://www.blueidea.com/images/bg01.gif ) }
td { font-family: "宋体"; font-size: 12px; color: #000000;}
p { text-indent: 2em; text-align: justify}
a:link { color: #FFFFFF; text-decoration: none}
a:visited { color: #99FFFF; text-decoration: none }
a:active { color: #FF9900; text-decoration: underline }
a:hover { color: #FF9900; text-decoration: underline}
a.biglink:link{ font-size: 14.8px;color: #99FFFF; text-decoration: none }
a.biglink:visited { font-size: 14.8px;color: #99FFFF; text-decoration: none }
a.biglink:active { font-size: 14.8px;color: #FF9900; text-decoration: underline }
a.biglink:hover { font-size: 14.8px;color: #FF9900; text-decoration: underline}
.bigfont{ font-size: 14.8px;}
说明：
CSS定义的顺序为：重定义的最先，伪类其次，自定义最后，以便于他人阅读；
除非需要，一般不特别定义文字的行高；
对于伪类CSS定义，请严格按照以上顺序格式，即a:hover放在最后，以便使其不会被其他定义覆盖；
为了保证不同浏览器上字号保持一致，字号建议用点数（pt）和像素（px）来定义，使用pt单位时一般使用中文宋体的9pt和10.5pt，使用px单位时一般使用中文宋体12px 和14.8px 。字体需要作为标题显示时，一般选用10.5pt或14.8px 的字号比较合适；
为了使得英文字体浏览时更加美观，建议制作完成后，上传的CSS文件中将字体定义修改为中英文兼容的格式（例如：font-family: "Verdana","宋体";）， 之所以编辑时不采用此种定义方式是由于在使用所见即所得的网页编辑器中会出现中文字体无法自动换行的错误，因此编辑时请保证字体定义中“宋体”为首选字体；
如果CSS定义较为繁琐，致使CSS文件大小超过3K，建议书写CSS时使用速记格式，例如：body { font: 12px/16px "宋体"; color: #000000; background: #FFFFFF url( http://www.blueidea.com/images/bg01.gif )}；
5、单一的表格应用
样例：
<table border="0" cellpadding="0" cellspacing="0" width="777" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</table>
基本原则：
单一的表格不使用表格边框形式，即不得设置bordercolordark和bordercolorlight属性，如果需要表格边框颜色，则在CSS中设置Border属性或者使用表格嵌套格式，此两种方式均可兼容IE5和NC6；
当浏览时单元格中无内容时，在原代码中必须保证其代码不为空，可以使用 或者透明GIF图片填充；
表格中单元格不同数目时，建议使用<colspan>和<rowspan>，以保证表格能够正确排列，并方便他人阅读表格代码；
对于表格一般不建议使用除center外的align属性，即 left或right ；不知道作何理解，我通常表格内的位置，都是用td的对齐属性以减少代码。
Width 和height 的写法：一般情况下Width 和height 写在 <table> 的标签内；多行多列的表格，单元格的width写在每一列的第一个 <td> 标签内，不再书写height标签。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。
6、注意在源代码中不应有这样的代码：
<td><img src=”../images/sample.gif”>
</td>
而应该是这样的：
<td><img src=”../images/sample.gif”></td>
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
<td><img src=”../images/sample.gif”> </td>
7、表格的嵌套
表格嵌套的原则是：嵌套层数不超过三，能不嵌套的尽量不要使用嵌套；
制作人员与美工设计合作时，应尽可能地将美工的设计图做拆分，以避免在网页中将所以内容嵌套在一个大的表格中。因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>（此标签仅限IE）标记，以便能够使这个大表格分块显示；
嵌套的表格大小尽量给定Width 和height数值，单位尽量为px，以便于浏览器加快解释的速度，如采用自适应性页面布局，可统筹考虑使用%还是px单位。
制 作 原 则
1.文字排版
文章分段请使用 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记；
排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } ；
<p>的CSS设置中请选定text-align: justify方式，以保证文字左右均对齐排列，尽量避免锯齿现象的发生（此方式仅限IE，最好少用，最好删除）；
为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段；
不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号；
2.插入图形
网页中插入的图形文件除程序自动调用的以外，必须指定其大小，即必须书写为<img width=? height=?>，这样在图形文件未被读取时，保证浏览器预留图形占用的空间，防止网页最终显示时出现抖动现象；
带有连接的图形文件必须设置border=”0”，以避免图形被加入边框颜色；
3.所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。
4.请不要在网页中连续出现多于二个 的 也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
5.中英文混排时，我们尽可能的将英文和数字定义为verdana 或arial 两种字体（参看CSS定义部分）。
6.网站内的文件连接的路径全部采用相对路径，即格式为<a href=”/index.htm”> 。一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而可以这样：<a href=”aboutus/”>
7.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在70K以下为合适。40K以下更好
文 件 的 命 名
1.每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm
2.文件名称统一用小写的英文字母、数字和下划线的组合。
3.命名原则
指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作 ，因此文件命名原则为“栏目名_分类名_日期_序号”。
4.下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则 ：
在根目录下开设news目 录；
新闻首页取名index.htm；
所有属于“国内新闻”的新闻依次取名为：news_china_20010303_001.htm, news_china_20010303_002.htm, ………；
所有属于“国际新闻”的新闻依次取名为：news_internation_20010303_001.htm, news_internation_20010303_002.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.
6.首页logo链接的图，尽量链接到原网站上，方便对方更新，减轻自己的工作量。如果担心对方网站失效可以lowsrc到本站。
扫一扫
4212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
