WEB规范.docx

1、WEB规范WEB标准化页面制作规范 目 录1. 引言 51.1. 制作规范编写目的及原则 51.2. 制作规范适用的工作人员 51.3. 制作规范制定的范围 51.4. 制作规范适用的产品范围 52. 站点目录结构 62.1. 目录名称的命名 62.2. 站点目录层次结构 63. HTML代码编写部分 73.1. 页面文件的大小 73.2. 页面文件内容显示时长 73.3. 代码的编写格式 73.4. 文件名称的命名 73.5. 文件的标准名称 83.6. DOCTYPE声名 83.7. xmlns命名空间声明 93.8. meta标签描述 93.9. title页面标题 93.10. 引入C

2、SS样式文件 103.11. 引入script脚本文件 103.12. 代码的结构 103.13. 表格代码定义 103.14. 标签属性值定义 113.15. 标签属性的缩写 113.16. 引入图片的定义 113.17. 页面内容的长度定义 113.18. 代码的测试 123.19. 代码的校验 134. CSS代码编写部分 134.1. 文件的大小定义 134.2. 代码的编写格式 134.3. 文件名称的命名 134.4. 基本文件 134.5. 文件的编码 144.6. id和class命名的规范 144.7. 注释的写法 154.8. 代码书写样式 154.9. 通用样式定义标准

3、165. 内容制作部分 165.1. 图片大小 165.2. 图片的名称 175.3. 关于1像素透明图片 175.4. 图片的应用格式 175.5. 内容宽度的适应 185.5.1. 可拉伸的内容定义 185.5.2. 适当拉伸的内容定义 185.5.3. 不可拉伸的内容定义 191. 引言W3C是“World Wide Web Consortium”的缩写，中文名称为“万维网组织”。W3C主要工作是研究和制定开放的规范 (事实上的标准) ，以便提高web相关产品的互用性。WEB标准是由W3C和ECMA制定的一系列标准的集合。WEB标准化的网页主要由三部分组成：结构（Structure）、表

4、现（Presentation）和行为（Behavior）： 结构化标准语言主要包括：XHTML1.0； 表现标准语言主要包括：CSS2.0； 行为标准主要包括： ECMAJavaScript。XHTML是The Extensible Hypertext Markup Language可扩展标识语言的缩写，是一种增强了的HTML。是Cascading Style Sheet 的缩写，译作层叠样式表单，简称样式表。是用于增强和控制网页内容样式并允许将样式信息与内容相分离的一种标记性语言。1.1. 制作规范编写目的及原则本文档是作为WEB页面制作的一个规范性的文件，可以帮助提高部门页面制作人员建立相

5、关部门的页面制作规范文件。制作原则：缩减文件大小，减少文件内容向服务器的请求1.2. 制作规范适用的工作人员本文档主要面向WEB页面制作人员，页面设计人员和页面开发人员也可以参阅了解相关内容，阅读本文档需要掌握相关基础知识：1. 掌握html4.0和Xhtml1.0相关标准和用法； 2. 掌握css2.0相关标准和属性；3. 对script脚本的作用和用法有一定程度的了解。1.3. 制作规范制定的范围本文档对目录建立、XHTML文件编写、CSS样式编写以及制做中的方法进行了规范化定义。对于本文档中一些需要掌握的技术技能和技术知识本文档不做详细描述，请另外阅读相关技术知识文档。1.4. 制作规范

6、适用的产品范围本文档适用于基于HTML页面的产品。2. 站点目录结构2.1. 目录名称的命名【规则内容】采用小写的英文单词或拼音、下划线、数字，长度不超过20个字符，名称要能反映目录的内容，起到语义化效果。【补充说明】不要使用数字、下划线做目录名的开头，不要采用中文字符和特殊字符命名目录。【示例内容】图片目录（images）2.2. 站点目录层次结构目录建立的原则：以文件类型来分别建立相应的目录。【规则内容】以下为站点目录结构： css文件目录： 存放CSS 样式文件 flash文件目录： 存放.swf文件 html 文件目录： 存放分栏目内容页面 images文件目录： 存放图片文件 jav

7、ascript文件目录：存放JS文件 language文件目录： 存放多种语言文件 library文件目录： 存放库文件 templates文件目录： 存放模板页面 index.html 首页文件 product.html 产品内容文件【补充说明】 目录的层次深度 = 3层 ； 如果是综合门户和产品类型的站点，则可以在html目录中建立相应目录，将各分栏目的页面文件分别存放其中； 如果有换肤效果时，则可以在CSS目录中再建立换肤目录，将所有换肤样式存放其中； 如果单个分栏目的html页面超过50页时，则可以在html目录中建立分栏目的目录； 如果以上目录没有所需要的目录类别，可自建立新目录，名

8、称要尽量语义化； 以上目录根据需要选择建立，但是一个站点只允许有一个上述的目录存在。【示例内容】图片目录（images）3. HTML代码编写部分3.1. 页面文件的大小页面文件的大小直接关系到下载时的速率，所以一定要控制文件的大小。【规则内容】单个页面的字节大小： 代码 + 文字内容 = 30K 图片 + flash = 120K 代码 + 文字内容 + 图片 + flash = 150K【补充说明】无【示例内容】无3.2. 页面文件内容显示时长【规则内容】52K网络带宽的情况下：首页面时，50%的页面内容显示的时间= 3秒，否则要有loading条提示。二级页面时，50%的页面内容显示的时

9、间 首选参数 (preferences) 状态栏(status Bar) 连接速度(connection)在右下角状态栏会显示计算结果：3.3. 代码的编写格式【规则内容】所有HTML标签和属性名，在XHTML 文档中必须采用小写格式。【补充说明】无【示例内容】 正确代码格式： 错误代码格式：3.4. 文件名称的命名【规则内容】采用小写的英文单词或拼音、下划线、数字，名称长度= 20字符 名称要语义化。【补充说明】 不要使用数字、下划线做目录名的开头，不要采用中文字符和特殊字符命名； 两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词；例：name_edit.html；

10、XHTML文件名的后缀必须为 “.html”。【示例内容】 首页文件名：index.html 二级页文件：name.html 二级页关联 添加 文件：name_add.html 二级页关联 修改 文件：name_edit.html 二级页关联 查看 文件：name_view.html 二级页关联 删除 文件：name_del.html 二级页关联 其它 文件：name_*.html3.5. 文件的标准名称【规则内容】首页文件名称：index.html登录文件名称：login.html帮助文件名称：help.html【补充说明】无【示例内容】无3.6. DOCTYPE声名每一个符合WEB标准的页

11、面必须在文件代码的最顶部添加一个DOCTYPE声明，用来说明此文件的类型是XHTML。【规则内容】 普通页面文件采用过渡型(Transitional)声明 框架页面文件采用此声明 模板页面文件采用此声明【补充说明】无【示例内容】无3.7. xmlns命名空间声明xhtml是html向xml过渡的标识语言，它需要符合xml文档规则，因此需要定义命名空间。【规则内容】 【补充说明】必须添加xmlns命名空间声明【示例内容】无3.8. meta标签描述 meta标签用来描述一个HTML网页文档的属性，例如字符编码、网页描述、关键词、日期等信息。meta标签内容直接关系到对搜索引擎的友好度，所以一定要

12、建立好相关信息。【规则内容】【补充说明】前台制作与后台开发的编码格式一定要一致 字符编码：国际化的项目采用编码：UTF-8； 字符编码：简体中文项目采用编码：GB2312； 字符编码：繁体中文项目采用编码：GBK；【示例内容】无3.9. title页面标题【规则内容】页面内容标题【规则内容】 非框架类型的文件，则要在每个页面中title写明与内容对应的标题。 框架类型的文件，附属的文件在其页面中可不用添写title内容。 title内容要简洁、明确，不要超过20个字符。【示例内容】无3.10. 引入CSS样式文件页面中的样式定义要全部放入CSS样式文件中，采用引入至XHTML文件中方法来应用。

13、【规则内容】【补充说明】特例：综合类型的站点首页，可以考虑将CSS样式代码直接嵌入页面代码开始处，以减少页面请求次数，加快页面显示速率。【示例内容】无3.11. 引入script脚本文件【规则内容】【补充说明】 为加快页面显示速度，可以将JS代码放在页面代码最末尾处。 要确保脚本文件的兼容性，在不同的浏览器中能正常使用。 禁止添加language 属性，因其在XHTML1.0中不被支持。【示例内容】无3.12. 代码的结构【规则内容】代码的结构要保持完整性，单个标签必须关闭。【补充说明】无【示例内容】 成对标签必须有结束标签代码格式：错误代码： 单个标签必须关闭代码格式： 、错误代码： 、3.

14、13. 表格代码定义【规则内容】表格的嵌套= 3层。【补充说明】确保代码层次分明；表格样式要使用CSS文件进行控制。【示例内容】3.14. 标签属性值定义【规则内容】属性值要使用双引号“”。【补充说明】无【示例内容】代码格式：错误代码：3.15. 标签属性的缩写【规则内容】属性值禁止缩写【补充说明】无【示例内容】代码格式：错误代码：3.16. 引入图片的定义【规则内容】Img 标签中必须添加 alt属性，文字表述要清晰。【补充说明】alt属性说明有利于搜索引擎的检索； 当图片没有显示时，alt属性会标示出此图片的说明。【示例内容】3.17. 页面内容的长度定义【规则内容】页面内容不要太长，以免

15、影响浏览者对内容的接收质量。【补充说明】 产品类：首页的纵向滚屏 = 1024*768分辨率下的1屏二级页纵向滚屏 = 1024*768分辨率下的4屏 门户类：首页的纵向滚屏 = 1024*768分辨率下的3屏二级页纵向滚屏 = 1024*768分辨率下的4屏【示例内容】无3.18. 代码的测试【规则内容】制作完的页面一定要通过IE6、IE7和Firefox浏览器的测试。【补充说明】禁止在1024*768分辨率下出现水平横滚动条。 测试的浏览器：(2007.11月统计)市场占有率前三名：IE6（87%）、IE7（10%）、Firefox2.0（2%）图示：2007.11统计 测试的分辨率：市场

16、使用率：1024768（77%）、1280800（8%，此为宽屏分辨率）图示：2007.11统计【示例内容】无3.19. 代码的校验【规则内容】制作完的页面一定要校验代码是否符合W3C的标准。【补充说明】代码验证路径：http:/validator.w3.org/#validate_by_upload【示例内容】无4. CSS代码编写部分4.1. 文件的大小定义【规则内容】样式文件 = 25K （单位：每CSS文件）【补充说明】如有多个CSS文件时，要考虑载入XHTML文件时的平衡性，不要加载过多的CSS文件。【示例内容】无4.2. 代码的编写格式【规则内容】所有CSS代码要采用小写格式，不包

17、括class和id名称【补充说明】无【示例内容】无4.3. 文件名称的命名CSS文件命名的指导思想是：短小、语义化名称，这样可以使自己和工作组的每一个成员能够方便的理解和记忆文件的意义，方便查找、修改、替换、移植等操作，提高工作效率。.【规则内容】采用小写的英文单词或拼音、下划线、数字，长度=20个字符【补充说明】 不要使用数字、下划线做目录名的开头，不要采用中文字符和特殊字符命名目录。 两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词。【示例内容】公共样式文件：common.css4.4. 基本文件【规则内容】 通用样式文件名：common.css（必选，不可修改此文

18、件名）负责页面整体布局的样式和公共样式，必须采用此文件名，具有唯一性。 可扩展的样式文件：module.css (可选，可修改此文件名)只适用于单个模块的样式，不具有通用性，文件名可以自己定义。【补充说明】无【示例内容】个性模块 = module.css字体模块 = module_font.css颜色模块 = module_color.css内容专栏 = module_columns.css页面文字 = module_text.css页面表单 = module_forms.css打印模块 = module_print.css4.5. 文件的编码如果项目对编码有要求，则需遵守指定的编码要求。【规

19、则内容】代码格式：charset 编码，前台制作与后台开发的编码格式一定要一致。【补充说明】 国际化的项目采用编码：UTF-8； 简体中文项目采用编码：GB2312； 繁体中文项目采用编码：GBK；【示例内容】无4.6. id和class命名的规范如果项目对编码有要求，则需遵守指定的编码要求。【规则内容】采用英文单词、拼音作为其名称，两个单词时第二个单词的首字母要大写，不超过20个字符长。【补充说明】 不要使用ID来进行样式定义，如有特殊情况请标明缘由。 禁止用数字开头命名，禁止用中文命名，禁止用特殊字符命名； 同一类型的id和class名称第一个单词要一致。【示例内容】示例一： 两个单词CL

20、ASS名称：.productList 三个单词CLASS名称：.productListLeft示例二： 字 体：.font 红色字体：.fontRed 绿色字体：.fontGreen 加粗字体：.fontBold4.7. 注释的写法【规则内容】CSS文件编写时要添加注释内容，完成后进行对外发布时，可将注释内容去掉，以减少文件的大小【补充说明】具体注释格式采用以下格式： CSS文件中必须有如下信息放在文件中最上部分/* * file name：common.css* personnel：* date：2007-1-10* contact：010-58022828 name* content：页面

21、制作样式库文件* */ 个性模块内容样式信息 （有个性模板时选择此格式）/* content star */个性模块内容区注释样式 /* content end */ 单个样式的注释信息/* content */ CSSHack注释使用了CSSHack，一定要添加注释，并且要写明为什么使用此CSSHack【示例内容】无4.8. 代码书写样式【规则内容】代码要采用固定的格式【补充说明】无【示例内容】/* content */.test width：100%；（前面空白的地方使用TAB键 空一格）.testLeft width：100%；（前面空白的地方使用TAB键 空一格）4.9. 通用样式定义

22、标准在每个CSS文件定义的公共内容中，都要初始化定义以下内容【规则内容】 整个站点的背景色（background）：缺省时定义为白色； 中文大小(font-size)：12px； 中文字体(font-family)：宋体； 英文字体(font-family)：Arial, Helvetica, sans-serif； 表单值(form)：0px； 空白(margin)：0px； 间隙(padding)：0px； 字体链接颜色：a:link、a:visited、a:active、a:hover 图片边框(img)：border:0px； 输入框定义(input) 按钮定义(button)【补充说

23、明】在定义样式文件时，一定要注意默认值这个问题，因为不同浏览器对默认值的解释都不一样，所以在定义属性时，要考虑默认值的影响问题【示例内容】无5. 内容制作部分5.1. 图片大小【规则内容】 图片的字节数大小 = 12K（单个图片） 背景图字节数大小 = 10K（单个图片） 首 页：图片 + flash = 120K（单位：每XHTML页） 二级页：图片 + flash = 100K（单位：每XHTML页）【补充说明】图片字节大小要压缩至最小化【示例内容】图片的字节数计算公式: K=（l * S / 5800）*1.80 （当L300） 许可误差9.0k K=（l * S / 3200）*1.6

24、5 （当200L300） 许可误差4.0k K=（l * S / 2000）*1.50 （当100L200） 许可误差2.0k K=（l* S / 1800）*1.40 （当50L100） 许可误差1.0k K=（l * S /1300）*1.25 （当L50） 许可误差0.5k 注：L= 图片长度； S = 图片宽度； K = 图片大小（k）5.2. 图片的名称【规则内容】采用英文单词、拼音、数字、下划线，要保持语义化。【补充说明】 不要使用数字、下划线做目录名的开头，不要采用中文字符和特殊字符命名目录。 两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词。【示例内容】

25、 企业标识 - logo.gif5.3. 关于1像素透明图片【规则内容】禁止添加1像素透明图片【补充说明】 在制作页面时，需要控制页面分区的间距，采用1像素的透明图片虽然可以起到一定效果，但在修改时容易出错，而且不易察觉。所以不要使用此方法进行间隔，可以采用CSS的定义padding和margin来进行控制。【示例内容】用1像素透明图片去撑开页面间距。5.4. 图片的应用格式【规则内容】 图像色彩不丰富，色值 = 256的图片采用JPG格式【补充说明】除GIF和JPG格式以外，不得采用其它的图片格式【示例内容】无5.5. 内容宽度的适应5.5.1. 可拉伸的内容定义内容在不同宽度的分辨率中显示时，布局要整齐、排版比例要协调。【规则内容】内容拉伸后不影响内容排版比例的，则可以让其自由拉伸【补充说明】内容会随着分辨率的变化而正常变化，同时也符合人的