网页制作规范

最新推荐文章于 2024-04-10 09:35:10 发布

会飞得猪

最新推荐文章于 2024-04-10 09:35:10 发布

阅读量606

点赞数 1

文章标签：网页制作规范

网页制作规范

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 的配置文件 json
注意：
文件夹名、文件名及文件扩展名均为英文小写字母
一个项目最多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 的写法) 。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

此标准为互动活动开发推荐使用的标准

b. 严格的(Strict):要求严格的DTD，原则上避免使用任何表现层的标识和属性，例如
。完

整代码如下： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

c. 框架的(Frameset):专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这

种DTD。完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

互动活动网站制作规范

因国内外支持XHTML1.1 的浏览器尚未普及以及特定的向下个别不兼容性，故在声明当中不使

用XHTML1.1 的声明。

3.1.2 HTML4.01 提供的三种DTD 声明为：

a. 过渡的(Transitional):要求非常宽松的DTD，它允许继续使用HTML4.01 以下版本部分标识

( 不一定全部符合HTML4.01 的写法) 。完整代码如下： <!DOCTYPE HTML PUBLIC "-

//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd”>

此标准为互动活动开发推荐使用的标准

b. 严格的(Strict):要求严格的DTD，不能使用任何向下所规定的不规则代码入不带引号的属性

设置。完整代码如下： <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这种

DTD 。完整代码如下： <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”

“http://www.w3.org/TR/html4/frameset.dtd”>

3.1.3 此外还有的DTD 声明有：

HTML 2：

HTML 3.2：

3.1.2 HTML

说明：

由于xml 允许自己定义自己的标识，自己定义的标识和其他人定义的标识有可能相同，但表

示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML 采用

名字空间声明，允许通过一个网址指向来识别自己的标识。XHTML 是HTML 向XML 过渡的标识语言，

互动活动网站制作规范

它需要符合XML 文档规则，因此也需要定义名字空间。又因为XHTML1.0 不能自定义标识，所以它

的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。

3.1.3 META

a. 编码设定：

此两句编码的作用相同，制定页面的编码形式为：Unicode 码。

b. 允许搜索机器人搜索站内所有链接。如果想某些页面不被搜索，推荐采用robots.txt 方法

c. 设置站点作者信息

d. 设置站点版权信息

e. 站点的简要介绍(推荐)

f. 站点的关键词(推荐)

注：以上部分均为虚拟项目设定。

3.1.4. LINK

a. 样式表：

b. 收藏夹图标：

SCRIPT;

外部导入文件

内部脚本

特别注意：script标签内，必须注明type=“text/javascript”

3.2. 文件通用标准：

3.2.1 所有的标记都必须要有一个相应的结束标记

以前在HTML 中，可以打开许多标签，例如

和

而不一定写对应的
和来关闭它
们。但在XHTML 中这是不合法的。XHTML 要求有严谨的结构，所有标签必须关闭。如果是单独不

成对的标签，在标签最后加一个"/"来关闭它。例如:

3.2.2 所有标签的元素和属性的名字都必须使用小写

与HTML 不一样，XHTML 对大小写是敏感的，和<title>是不同的标签。XHTML 要求所

有的标签和属性的名字都必须使用小写。例如：必须写成。大小写夹杂也是不被认

可的，通常dreamweaver 自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。

3.3.3 所有的XML 标记都必须合理嵌套

同样因为XHTML 要求有严谨的结构，因此所有的嵌套都必须按顺序，这样的代码：

/b>
必须修改为：

一层一层的嵌套必须是严格对称。

3.3.4. 所有的属性必须用引号""括起来

在HTML 中，可以不需要给属性值加引号，但是在XHTML 中，它们必须被加引号。例如:

互动活动网站制作规范

版权所有腾讯网- 15 -

<height=80>

必须修改为：

<height=“80”>

特殊情况需要在属性值里使用双引号，可以用"，单引号可以使用，例如：

<alt=“sayhello”>

3.3.5. 把所有<和&特殊符号用编码表示

任何小于号（<），不是标签的一部分，都必须被编码为& l t ;

任何大于号（>），不是标签的一部分，都必须被编码为& g t ;

任何与号（&），不是实体的一部分的，都必须被编码为& a m p;

注：以上字符之间无空格。

3.3.6. 给所有属性赋一个值

XHTML 规定所有属性都必须有一个值，没有值的就重复本身。例如：

必须修改为：

checked=“checked”>

不要在注释内容中使“–”

“–”只能发生在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 的颜色：
1. 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_title

4.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;

}
1. 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

在

的用户的混乱。

多数情况下，最好把

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;

}

花括弧{ }要独占一行

示例：如下例子不符合标准。
1. 标准规范参考站点及检验站点：
  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/

附：1. 外包页面验证标准

外包页面验证标准.xls
1. 版权声明使用规范文档
  版权声明使用规范.d

会飞得猪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页制作规范

网页制作规范1.页面元素标准（文件类）1.1. 元素类型标准：网页的元素以及文件限定如下表：元素类型：文件限制（后缀）普通页面 .html脚本文件： .js样式表文件： .css动画互动元素. .swf/.gif图片元素 .jpg /.gif/.png视频元素 .asf/.mpg/.rm/.mpeg/.rmvb/.flv音频元素 .mp3/.wma1.2. 元素文件大小标...
复制链接

扫一扫