网页制作规范
1.页面元素标准（文件类）
1.1. 元素类型标准：
网页的元素以及文件限定如下表：
元素类型：
文件限制（后缀）
普通页面
.html
脚本文件：
.js
样式表文件：
.css
动画互动元素.
.swf/.gif
图片元素
.jpg /.gif/.png
视频元素
.asf/.mpg/.rm/.mpeg/.rmvb/.flv
音频元素
.mp3/.wma
1.2. 元素文件大小标准：
- 互动活动首页页面大小不超过300K，其他子页面大小不超过500K
- 图片元素，切图后保证单张图片体积大小应在100K 以内，图片格式包括：.jpg /.gif/.png
- 单个flash 元素不超过1M，flash 格式包括：.swf/
- 单个视频元素不超过4M ，视频格式包括：.asf/.mpg/.rm/.mpeg/.rmvb/.flv
- 单个音频元素不超过2M ，音频格式包括：.Mp3/.Wma/
- 动画互动元素菜单类大小必须限制在100K 以下。游戏类大小必须限制在1M 以下，超过500K
后必须制作loading 效果
1.3. 元素切割方式标准：
-
设计稿切图工具选择：制作前应根据设计师源文件，选择适合切图的工具，PSD 文件选择
Photoshop CS，PNG 文件选择Fireworks 8 -
设计稿页面导出文件设置：页面切图应导出.gif 或.jpg 两种文件格式，不推荐png、bmp 等
格式图片。像素图、矢量色块化图、黑白图选择gif 格式；颜色渐变的、图片内容结构丰富的、
色彩饱和度高的选择jpg 格式。原则上尽可能使用GIF 特别是带透明区域的图片。 -
一致性原则：按钮图片切图后，应保证按钮图片背景的透明性以及和整体页面的融合性。确
保与设计稿没有偏差。 -
可循环重复使用的背景图片不应切割成大图
-
严禁大量“一刀过”大图片（要符合文件大小标准）。
-
命名标准（文件类）
所有的文件命名要求只能包含：小写字母、数字、下划线。
2.1. 目录文件命名标准：
- images： 目录存放静态图片
- js： 目录存放JavaScript 脚本文件；
- swf： 目录存放Flash 文件
- css： 目录存放css 样式文件；
- Xml： 目录存放XML 文件，如Flash 的配置文件
注意： - 文件夹名、文件名及文件扩展名均为英文小写字母
- 一个项目最多2 个css 文件，基础css 和扩展css，css 文件不要写在页面中要统一放在.css
文件中
2.2. 页面文件命名标准：
- 图片命名原则：类型_描述_×.gif(jpg) 如：top_btn_help.gif 。
- 表格图片命名：同上，与标记命名相同。
- 网站栏目文件命名标准：功能名称-活动名称，例如：作品展示-******
A. 常用网站栏目文件名：
1.注册： register
2.首页index
3.作品列表gallery
4.个人页面profile
5.活动说明页面rule
6.获奖通知winner
7.游戏页面game
8.抽奖页面drawing
9.兑奖页面exchange
B. 其他程序相关的页面的命名都需与开发共同商讨确定。
- HTML 制作标准（代码类）
以下为具体须留意的部分要求，详细代码的单个属性等基本要求并未列出。代码检验的大原
互动活动网站制作规范
则是提交页面与开发人员或者直接上线时必须经过http://validator.w3.org/的检验；并且无
出现ERROR 错误。
为确保进度以及短时期的活动页面不在此限制范围。
对于互动活动网站验证遇到的错误（除CSS Hack），应尽量修复，以免造成浏览器解析不成
功
验证方法：
1、在线方式（http://validator.w3.org/）
2、本地方式（使用Dreamweaver）建议在本地建立站点，全站验证
3.1. 文件头标准：
3.1.1 DOCTYPE
释意：DOCTYPE 是document type(文档类型)的简写，用来说明XHTML 或者HTML 是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规
则，浏览器就根据定义的DTD 来解释页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE 声明是必不可少的关键组成部分；除非XHTML 确定了一个
正确的DOCTYPE，否则标识和CSS 都不会生效。
目前互动活动开发推荐使用3.1.1 的过渡型标准或3.1.2 的过渡型标准，即XHTML 的过渡型
标准或HTML4.01 的过渡型标准
页面切割建议使用3.1.1 的过渡型标准或3.1.2 的过渡型标准
以下列出的其他标准，仅供参考
3.1.1 XHTML 1.0 提供的三种DTD 声明为：
a. 过渡的(Transitional):要求非常宽松的DTD，它允许继续使用HTML4.01 的标识(但是要符合
xhtml 的写法) 。完整代码如下：
此标准为互动活动开发推荐使用的标准
b. 严格的(Strict):要求严格的DTD，原则上避免使用任何表现层的标识和属性，例如
。完
整代码如下：
c. 框架的(Frameset):专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这
种DTD。完整代码如下：
互动活动网站制作规范
因国内外支持XHTML1.1 的浏览器尚未普及以及特定的向下个别不兼容性，故在声明当中不使
用XHTML1.1 的声明。
3.1.2 HTML4.01 提供的三种DTD 声明为：
a. 过渡的(Transitional):要求非常宽松的DTD，它允许继续使用HTML4.01 以下版本部分标识
( 不一定全部符合HTML4.01 的写法) 。完整代码如下：
此标准为互动活动开发推荐使用的标准
b. 严格的(Strict):要求严格的DTD，不能使用任何向下所规定的不规则代码入不带引号的属性
设置。完整代码如下：
框架的(Frameset):专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这种
DTD 。完整代码如下：
3.1.3 此外还有的DTD 声明有：
HTML 2：
HTML 3.2：
3.1.2 HTML
说明：
由于xml 允许自己定义自己的标识，自己定义的标识和其他人定义的标识有可能相同，但表
示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML 采用
名字空间声明，允许通过一个网址指向来识别自己的标识。XHTML 是HTML 向XML 过渡的标识语言，
互动活动网站制作规范
版权所有腾讯网- 13 -
它需要符合XML 文档规则，因此也需要定义名字空间。又因为XHTML1.0 不能自定义标识，所以它
的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。
3.1.3 META
a. 编码设定：
3.1.4. LINK
a. 样式表：
外部导入文件
内部脚本
特别注意：script标签内，必须注明type=“text/javascript”
3.2. 文件通用标准：
3.2.1 所有的标记都必须要有一个相应的结束标记
以前在HTML 中，可以打开许多标签，例如
和
- 而不一定写对应的
- 和来关闭它
们。但在XHTML 中这是不合法的。XHTML 要求有严谨的结构，所有标签必须关闭。如果是单独不
成对的标签，在标签最后加一个"/"来关闭它。例如:
3.2.2 所有标签的元素和属性的名字都必须使用小写
与HTML 不一样，XHTML 对大小写是敏感的，和<title>是不同的标签。XHTML 要求所<br/> 有的标签和属性的名字都必须使用小写。例如：必须写成 。大小写夹杂也是不被认<br/> 可的，通常dreamweaver 自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。 3.3.3 所有的XML 标记都必须合理嵌套
同样因为XHTML 要求有严谨的结构，因此所有的嵌套都必须按顺序，这样的代码：/b> 必须修改为：
一层一层的嵌套必须是严格对称。 3.3.4. 所有的属性必须用引号""括起来 在HTML 中，可以不需要给属性值加引号，但是在XHTML 中，它们必须被加引号。例如: 互动活动网站制作规范 版权所有腾讯网- 15 -
3.3.5. 把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。3.3.6. 给所有属性赋一个值
必须修改为： 不要在注释内容中使“--” “--”只能发生在XHTML 注释的开头和结束，也就是说，在内容中它们不再有效。例如下 面的代码是无效的:
XHTML 规定所有属性都必须有一个值，没有值的就重复本身。例如：用等号或者空格替换内部的虚线。
3.3.7. 代码的优先使用级别
a. 列表型页面：
div 级别高于table。
所谓列表型页面就是如下图表格效果的页面
b. 拥有三个级别等级的内容分布情况下：
dl?dt?dd 级别高于ul/ol?li。
所谓三个级别等级的内容分布情况就是如下图表格效果的页面3.3. 特殊规定标准：
3.3.1. Cursor：hand
因为CSS2.0 当中并没有cursor：hand 属性；所以要显示此种效果时必须使用style 加载到
页面当中。
如：
关闭
建议使用cursor:pointer;
3.3.2. !important
在多种浏览器效果不一时，使用!important 处理个中差别。
如：
在Mozilla 中浏览时候，能够理解!important 的优先级，因此显示#60A179 的颜色：在IE 中浏览时候，不能够理解!important 的优先级，因此显示#0000FF 的颜色：
- CSS 制作标准（代码类）
以下为具体须留意的部分要求，详细代码的单个属性等基本要求并未列出。代码检验的大原
则是提交页面与开发人员或者直接上线时必须经过http://jigsaw.w3.org/css-validator/的检
验；并且尽可能不出现ERROR 错误。
对于互动活动网站验证遇到的错误（除CSS Hack），应尽量修复，以免造成浏览器解析不成功
验证方法：
1、在线验证（http://jigsaw.w3.org/css-validator/）：2、本地上传验证：
4.1. CSS 默认写入标准：
a. body 部分默认必须写入的代码为：
body {
text-align:center;
font-size: 12px;
line-height: 16px;
color: #666666;
margin: 0px;
font-family: “Lucida Grande”, Verdana, Lucida,sans-serif;;
/选择性加入/
word-break:break-all;
word-wrap: break-all;
/选择性加入/
}
说明：
Lucida Grande 字体适合Mac OS X；
Verdana 字体适合所有的Windows 系统；
Lucida 适合UNIX 用户
如果所列出的字体都不能用，则默认的sans-serif 字体能保证调用;
超级链接部分默认格式的代码为：
a :link{…}
a :visited{……}
a :hover{……}
a :active{……}
说明：
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，
必须按以上顺序写，否则显示可能和预想的不一样。记住它们的顺序是“LVHA”。
b. p 段落默认格式的代码为：
p {
display: inline;
}
说明：
以上语句领到术语中的“硬回车”变回软回车，确保如预期效果
c. 列表类默认格式的代码为：
ul,ol{
line-height: normal;
list-style-type: none;
margin: 0px;
}说明：
以上语句领到列表中的空白部分(ul 以及ol)无分行，确保如预期效果
d. 合并部分必须合并写入：
为了减少网络流量对于合并部分的CSS 必须合并写入如：
.ii_piclist ul,.ii_piclist li{
padding: 0px;
line-height: 20px;
list-style-type: none;
margin: 0px;text-align: left;
}4.2. 严禁出现的代码标准：
a. 颜色定义严禁出现英文简称：
如：black，red，blue 等
必须使用：#000000，#ff0000，#0000ff 代替
原则上不得出现选择性代码：
/选择性加入/
word-break:break-all;
word-wrap: break-all;
/选择性加入/
因此代码只适用于IE 在其余浏览器会无效，并且并不被W3C 的CSS2.0 认证所接受。除非限
制自动换行的显示效果。
b. 非单独模块不得使用以ID 命名的CSS：
如按钮、图标、模块背景必须使用：
.bt_photo 代替#bt_photo
.icon_photo 代替#icon_photo
.bg_title 代替#bg_title4.3. 分块管理注释标准：
a. CSS 于文件中的放置必须遵照以下级别分类的安排：
公用CSS 样式–〉模块CSS 样式–〉特殊CSS 样式：
公用CSS 样式包括body、p、ul、ol 等html 默认的标记的CSS 样式
模块CSS 样式包括可重复可循环使用的CSS 样式如三三表格、三一表格、按钮、图标等
注释使用英文
b. 分块后跟附注释：
如下：
/=三三格部分=/
.w{
margin: 4px 0px;
text-align: left;
width: 100%;
}
.l{
background-image: url(http://imgcache.qq.com/tmspace/1/table_t_l.gif);
height: 26px;
width: 6px;
margin: 0px;
top: 0px;
}- JAVASCRIPT 制作标准（代码类）
5.1. 命名标准
a. 变量命名标准
变量名必须使用其类型的缩写字符串开始。各种类型的缩写字符串如下：
整型变量：int
长整型变量：lng
浮点型变量：flt
双精度变量：dbl
对象引用变量：obj
字符串变量:str
Date 类型变量：dtm
变量名必须采用有意义的单词命名，如：strUserName、lngArrayIndex
变量名除首字母小写外，其他单词首字符必须大写
如果变量名过长可以使用单词缩写，除了被广泛了解的单词缩写以外，所有使用单词所写的
变量名必须在定义时给出注释,如：
var strAdName //用于表示Administrator 帐户的名称
var strAdminName //不用给出注释，Admin 被广泛了解
b. 对象命名标准
各种页面对象如text 输入框、按钮、下拉选择框在命名时必须使用以下对应前缀：
text 输入框:txt
button 按钮：btn
select 下拉选择框：sel
option 项:opt
form 表单：frm
frame 框架：fra
hidden 表单项：hdn
div 标记：div
span 标记:span
对话框对象:dlg
窗口对象：win
c. 函数以及子过程命名标准
说明：函数命名必须能够体现函数的功能,函数命名第一个单词的首字母小写，后面每一个单
词的首字母大写
d. 文件目录命名标准
所有的js 文件应放置在根目录下的js 目录中
如：/js/list.js
控制功能相似的函数应放到一个js 文件中，如控制表单交互的函数放在input.js 文件中，
控制显示功能函数放在show.js 文件中，控制选项卡显示的函数放在tag.js 中。5.2. 代码格式
a. 在HTML 中嵌入javascript
在b. 程序块要采用缩进风格编写，缩进的空格数为4 个。
c. 相对独立的程序块之间、变量说明之后必须加空行。
示例：如下例子不符合标准。
if (!valid)
{
… // program code
}
input_name = input_data[index].name;
input_value = input_data[index].value;
应如下书写if (!valid) { ... // program code } input_name = input_data[index].name; input_value = input_data[index].value;d. 不允许把多个短语句写在一行中，即一行只写一条语句。
示例：如下例子不符合标准。
qqId.name = 0; qqId.value = 0;
应如下书写qqId.name = 0; qqId.value = 0;e. if、for、do、while、case、switch 等语句自占一行，且if、for、do、while 等语句的执
行语句部分无论多少都要加括号{}。
示例：如下例子不符合标准。
if (userName == NULL) return;
应如下书写：if (userName == NULL) { return; }花括弧{ }要独占一行
示例：如下例子不符合标准。- 标准规范参考站点及检验站点：
6.1. 符合web 标准的站点
国外符合web 标准的站点非常多，最近新改版的大网站基本都采用CSS 布局，这里只列部分
比较知名的大站点：
http://www.macromedia.com/
http://www.k10k.net/
http://www.mp3.com/
http://www.blogger.com/
http://www.espn.com/
http://www.fyrebase.com/
更多国外站点可以阅读以下文章：
CSSVault 推荐的130 个CSS 布局站点[1-3 月]
CSSVault 推荐的128 个CSS 布局站点[4-6 月]
国内介绍web 标准站点
onestab:推动符合Web 标准的网站设计;展示最新设计技术，包括CSS, XHTML, HTML, XML;
介绍国外优秀网页制作和设计站点精品文章和大师访谈。
网页设计师:web 标准的教程站点，推动web 标准在中国的应用。6.2. 标准检验站点
6.2.1. WEB 检验
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
6.2.2. CSS 检验
http://jigsaw.w3.org/css-validator/
附：- 外包页面验证标准
外包页面验证标准.xls - 版权声明使用规范文档
版权声明使用规范.doc
- CSS 制作标准（代码类）
8908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
