《HTML标准化页面制作规范》由会员分享，可在线阅读，更多相关《HTML标准化页面制作规范（23页珍藏版）》请在金锄头文库上搜索。
1、WEB标准化页面制作规范编写人：郭福恩MSN： 目 录1.前言51.1.制作规范编写目的及原则51.2.制作规范适用的工作人员51.3.制作规范制定的范围51.4.制作规范适用的产品范围62.站点目录结构62.1.目录名称的命名62.2.站点目录层次结构63.HTML代码编写部分73.1.页面文件的大小73.2.页面文件内容显示时长83.3.代码的编写格式83.4.文件名称的命名93.5.文件的标准名称93.6.DOCTYPE声名93.7.xmlns命名空间声明103.8.meta标签描述103.9.title页面标题113.10.引入CSS样式文件113.11.引入script脚本文件113
2、.12.标签要有结束符123.13.表格代码定义123.14.标签属性值定义133.15.标签属性的缩写133.16.引入图片的定义143.17.页面内容的长度定义143.18.name属性的定义143.19.代码的调试工具153.20.代码的测试153.21.代码的校验164.CSS代码编写部分164.1.文件的大小定义164.2.代码的编写格式164.3.文件名称的命名174.4.基本文件174.5.文件的编码184.6.id和class命名的规范184.7.注释的写法184.8.代码书写样式194.9.通用样式定义标准205.内容制作部分215.1.图片大小215.2.图片的名称215.
3、3.关于1像素透明图片215.4.图片的应用格式225.5.内容宽度的适应225.5.1.可拉伸的内容定义225.5.2.适当拉伸的内容定义235.5.3.不可拉伸的内容定义246.意见反馈24 1. 前言W3C是“World Wide Web Consortium”的缩写，中文名称为“万维网组织”。W3C主要工作是研究和制定开放的规范（事实上的标准），以便提高web相关产品的互用性。WEB标准是由W3C和ECMA国际（前身为欧洲计算机制造商协会）制定的一系列标准的集合。WEB标准的核心：结构（Structure）、表现（Presentation）和行为（Behavior）相分离：l 结构化标
4、准语言主要包括：XHTML和XML；l 表现标准语言主要包括：CSS2.0；l 行为标准主要包括：对象模型（如W3C DOM）、ECMAScript等。XHTML是The Extensible Hypertext Markup Language可扩展标识语言的缩写，是一种增强了的HTML。CSS是Cascading Style Sheet 的缩写，译作层叠样式表单，简称样式表。是用于增强和控制网页内容样式并允许将样式信息与内容相分离的一种标记性语言。ECMAScript是一种由ECMA国际（European Computer Manufacturers Association）通过ECMA-2
5、62标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。1.1. 制作规范编写目的及原则本文档是作为WEB页面制作的一个规范性的文件，可以帮助提高页面制作人员的工作质量和效率。原则：规范代码的编写、提高代码的质量、提升编写的效率、增加界面的浏览速度。1.2. 制作规范适用的工作人员本文档主要面向：WEB页面制作人员、视觉设计人员，WEB开发人员也可以参阅了解相关内容，阅读本文档需要掌握相关基础知识：1. 掌握html4.0和Xhtml1.0相关标准和用法； 2. 掌握css2.0相关标准和属性
6、；3. 对JavaScript脚本的有一定程度的了解。1.3. 制作规范制定的范围本文档对站点目录的建立、XHTML文件编写、CSS样式编写以及制作中的方法进行了规范化定义。行为方面的JavaScript规则不在此列。对于本文档中一些需要掌握的技术技能和技术知识本文档不做详细描述，请另外阅读相关技术知识文档。1.4. 制作规范适用的产品范围本文档适用于基于HTML页面的产品。2. 站点目录结构2.1. 目录名称的命名【规则内容】采用小写的英文单词或拼音，长度不超过20个字符（10个汉字），名称要能反映目录的内容，具有语义化效果，易于理解和认知。【补充说明】 不要采用中文字符、下划线、数字和特殊
7、字来符命名目录名称。 目录名称也直接关系到“搜索引擎”的友好度。【示例内容】图片目录（images）【应用方法】达到规范定义推荐采用以下的方法：1. 参照此规范文件来建立自己的目录名称。2. 将常用的目录建立为模板，重复使用。2.2. 站点目录层次结构以文件类型来划分页面内容，建立相应的目录结构。【规则内容】无换肤要求的目录结构： css文件目录：存放CSS 样式文件 flash文件目录：存放.swf文件 html 文件目录：存放分栏目内容页面 images文件目录：存放图片文件 javascript文件目录：存放JS文件 language文件目录：存放多种语言文件 library文件目录：存
8、放库文件 templates文件目录：存放模板页面 index.html 首页文件 product.html 产品内容文件有换肤要求的目录结构： html 文件目录： 存放分栏目内容页面 images文件目录： 存放非换肤用图片文件 skin换肤目录： 存放换肤样式和图片 skin1(皮肤1目录)u img文件目录 皮肤1的图片(自定义)u style1.css 皮肤1的样式(自定义) skin2(皮肤2目录)u img文件目录 皮肤2的图片(自定义)u style2.css 皮肤2的样式(自定义) script文件目录： 存放JS文件 index.html 首页文件 product.html
9、 产品内容文件【补充说明】 目录的层次深度 = 3层 ； 如果是综合门户和产品类型的站点，则可以在html目录中建立相应目录，将各分栏目的页面文件分别存放其中； 如果有换肤效果时，则可以在CSS目录中再建立换肤目录，将所有换肤样式存放其中； 如果单个分栏目的html页面超过50页时，则可以在html目录中建立分栏目的目录； 如果以上目录没有所需要的目录类别，可自建立新目录，名称要尽量语义化； 以上目录根据需要选择建立，但是一个站点只允许有一个上述的目录存在。【示例内容】图片目录（images）【应用方法】达到规范定义推荐采用以下的方法：1. 参照此规范文件来建立自己的目录。2. 将常用的目录建
10、立为模板，重复使用。3. HTML代码编写部分3.1. 页面文件的大小页面文件的大小直接关系到下载时的速率，所以一定要控制文件的大小。【规则内容】单个页面的字节大小： 代码 + 文字内容 = 30K 图片 + flash = 120K 代码 + 文字内容 + 图片 + flash = 150K【补充说明】无【示例内容】无【应用方法】达到规范定义推荐采用以下的方法：1. 减少废代码；2. 压缩所用的图片大小；3. 压缩所用的FLASH动画大小；4. 减少JS效果。3.2. 页面文件内容显示时长【规则内容】52K网络带宽的情况下：首页面时，50%的页面内容显示的时间= 3秒，否则要有loading
11、条提示。二级页面时，50%的页面内容显示的时间 首选参数 (preferences) 状态栏(status Bar) 连接速度(connection)在右下角状态栏会显示计算结果：【应用方法】达到规范定义推荐采用以下的方法：1. 减小文件大小；2. 优化代码结构，实现分块显示内容；3.3. 代码的编写格式【规则内容】所有HTML标签和属性名，在XHTML 文件中必须采用小写格式。【补充说明】无【示例内容】 正确代码格式： 错误代码格式：【应用方法】达到规范定义推荐采用以下的方法：1. 尽量采用手工编写代码；2. 如果使用工具软件生成或拷贝的代码，要认真检查一下代码格式。3.4. 文件名称的命名
12、【规则内容】采用小写的英文单词或拼音、下划线、数字，名称长度= 20字符 名称要语义化。【补充说明】 不要使用数字、下划线做目录名的开头，不要采用中文字符和特殊字符命名； 两个以上单词表达时，用下划线“_”分开两个单词，最多不要超过三个以上单词；例：name_edit.html； XHTML文件名的后缀必须为 “.html”。【示例内容】 首页文件名：index.html 二级页文件：name.htmln 二级页关联 添加 文件：name_add.htmln 二级页关联 修改 文件：name_edit.htmln 二级页关联 查看 文件：name_view.htmln 二级页关联 删除 文件：
13、name_del.htmln 二级页关联 其它 文件：name_*.html【应用方法】达到规范定义推荐采用以下的方法：1. 用英文单词或拼音来概括文件内容，同时要控制其名称长度；2. 以文件内容进行分类，方便对文件进行管理。3.5. 文件的标准名称【规则内容】首页文件名称：index.html登录文件名称：login.html帮助文件名称：help.html【补充说明】无【示例内容】无【应用方法】达到规范定义推荐采用以下的方法：1. 直接使用此规范定义名称。3.6. DOCTYPE声名每一个符合WEB标准的页面必须在文件代码的最顶部添加一个DOCTYPE声明，用来说明此文件的类型是XHTML。【规则内容】 普通页面文件采用过渡型(Transitional)声明 框架页面文件采用此声明! DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Frameset/
