HTML标准化页面制作规范.doc

WEB 标准化页面制作规范 编写人 郭福恩 MSN fuen2005 目 录 1 前言前言 5 1 1 制作规范编写目的及原则 5 1 2 制作规范适用的工作人员 5 1 3 制作规范制定的范围 5 1 4 制作规范适用的产品范围 6 2 站点目录结构站点目录结构 6 2 1 目录名称的命名 6 2 2 站点目录层次结构 6 3 HTML 代码编写部分代码编写部分 7 3 1 页面文件的大小 7 3 2 页面文件内容显示时长 8 3 3 代码的编写格式 8 3 4 文件名称的命名 9 3 5 文件的标准名称 9 3 6 DOCTYPE 声名 9 3 7 XMLNS命名空间声明 10 3 8 META标签描述 10 3 9 TITLE页面标题 11 3 10 引入 CSS 样式文件 11 3 11 引入SCRIPT脚本文件 11 3 12 标签要有结束符 12 3 13 表格代码定义 12 3 14 标签属性值定义 13 3 15 标签属性的缩写 13 3 16 引入图片的定义 14 3 17 页面内容的长度定义 14 3 18 NAME属性的定义 14 3 19 代码的调试工具 15 3 20 代码的测试 15 3 21 代码的校验 16 4 CSS 代码编写部分代码编写部分 16 4 1 文件的大小定义 16 4 2 代码的编写格式 16 4 3 文件名称的命名 17 4 4 基本文件 17 4 5 文件的编码 18 4 6 ID和CLASS命名的规范 18 4 7 注释的写法 18 4 8 代码书写样式 19 4 9 通用样式定义标准 20 5 内容制作部分内容制作部分 21 5 1 图片大小 21 5 2 图片的名称 21 5 3 关于 1 像素透明图片 21 5 4 图片的应用格式 22 5 5 内容宽度的适应 22 5 5 1 可拉伸的内容定义 22 5 5 2 适当拉伸的内容定义 23 5 5 3 不可拉伸的内容定义 24 6 意见反馈意见反馈 24 1 前言前言 W3C 是 World Wide Web Consortium 的缩写 中文名称为 万维网组织 W3C 主要工作是研究和制定开放的规范 事实上的标准 以便提高 web 相关产品的互用性 WEB 标准是由 W3C 和 ECMA 国际 前身为欧洲计算机制造商协会 制定的一系列标准的集 合 WEB 标准的核心标准的核心 结构结构 Structure 表现表现 Presentation 和行为行为 Behavior 相分离 结构化标准语言主要包括 XHTML 和 XML 表现标准语言主要包括 CSS2 0 行为标准主要包括 对象模型 如 W3C DOM ECMAScript 等 XHTML 是 The Extensible Hypertext Markup Language 可扩展标识语言的缩写 是一种增强 了的 HTML CSS 是 Cascading Style Sheet 的缩写 译作 层叠样式表单 简称 样式表 是用于增强 和控制网页内容样式并允许将样式信息与内容相分离的一种标记性语言 ECMAScript 是一种由 ECMA 国际 European Computer Manufacturers Association 通过 ECMA 262 标准化的脚本程序设计语言 这种语言在万维网上应用广泛 它往往被称为 JavaScript 或 JScript 但实际上后两者是 ECMA 262 标准的实现和扩展 1 1 制作规范编写目的及原则制作规范编写目的及原则 本文档是作为 WEB 页面制作的一个规范性的文件 可以帮助提高页面制作人员的工作质量和 效率 原则 规范代码的编写 提高代码的质量 提升编写的效率 增加界面的浏览速度 1 2 制作规范适用的工作人员制作规范适用的工作人员 本文档主要面向 WEB 页面制作人员 视觉设计人员 WEB 开发人员也可以参阅了解相关内 容 阅读本文档需要掌握相关基础知识 1 掌握 html4 0 和 Xhtml1 0 相关标准和用法 2 掌握 css2 0 相关标准和属性 3 对 JavaScript 脚本的有一定程度的了解 1 3 制作规范制定的范围制作规范制定的范围 本文档对站点目录的建立 XHTML 文件编写 CSS 样式编写以及制作中的方法进行了规范化 定义 行为方面的 JavaScript 规则不在此列 对于本文档中一些需要掌握的技术技能和技术知识本文档不做详细描述 请另外阅读相关技术 知识文档 1 4 制作规范适用的产品范围制作规范适用的产品范围 本文档适用于基于 HTML 页面的产品 2 站点目录结构站点目录结构 2 1 目录名称的命名目录名称的命名 规则内容 采用小写小写的英文单词或拼音 长度不超过 20 个字符 10 个汉字 名称要能反 映目录的内容 具有语义化效果 易于理解和认知 补充说明 不要不要采用中文字符 下划线 数字和特殊字来符命名目录名称 目录名称也直接关系到 搜索引擎搜索引擎 的友好度 示例内容 图片目录 images 应用方法 达到规范定义推荐采用以下的方法 1 参照此规范文件来建立自己的目录名称 2 将常用的目录建立为模板 重复使用 2 2 站点目录层次结构站点目录层次结构 以文件类型文件类型来划分页面内容 建立相应的目录结构 规则内容 无换肤要求的无换肤要求的目录结构 目录结构 css 文件目录 存放 CSS 样式文件 flash 文件目录 存放 swf 文件 html 文件目录 存放分栏目内容页面 images 文件目录 存放图片文件 javascript 文件目录 存放 JS 文件 language 文件目录 存放多种语言文件 library 文件目录 存放库文件 templates 文件目录 存放模板页面 index html 首页文件 product html 产品内容文件 有换肤要求的目录结构 有换肤要求的目录结构 html 文件目录 存放分栏目内容页面 images 文件目录 存放非换肤用图片文件 skin 换肤目录 存放换肤样式和图片 skin1 皮肤 1 目录 img 文件目录 皮肤 1 的图片 自定义 style1 css 皮肤 1 的样式 自定义 skin2 皮肤 2 目录 img 文件目录 皮肤 2 的图片 自定义 style2 css 皮肤 2 的样式 自定义 script 文件目录 存放 JS 文件 index html 首页文件 product html 产品内容文件 补充说明 目录的层次深度 3 层 如果是综合门户和产品类型的站点 则可以在 html 目录中建立相应目录 将各分栏目的页面文件分别存放其中 如果有换肤效果时 则可以在 CSS 目录中再建立换肤目录 将所有换肤样式 存放其中 如果单个分栏目的 html 页面超过 50 页时 则可以在 html 目录中建立分栏 目的目录 如果以上目录没有所需要的目录类别 可自建立新目录 名称要尽量语义化 以上目录根据需要选择建立 但是一个站点只允许有一个上述的目录存在 示例内容 图片目录 images 应用方法 达到规范定义推荐采用以下的方法 1 参照此规范文件来建立自己的目录 2 将常用的目录建立为模板 重复使用 3 HTML 代码编写部分代码编写部分 3 1 页面文件的大小页面文件的大小 页面文件的大小直接关系到下载时的速率 所以一定要控制文件的大小 规则内容 单个页面的字节大小 代码 文字内容 30K 图片 flash 120K 代码 文字内容 图片 flash 150K150K 补充说明 无 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 减少废代码 2 压缩所用的图片大小 3 压缩所用的 FLASH 动画大小 4 减少 JS 效果 3 2 页面文件内容显示时页面文件内容显示时长长 规则内容 52K 网络带宽的情况下 首页面时 50 的页面内容显示的时间 3 秒 否则要有 loading 条提示 二级页面时 50 的页面内容显示的时间 首选参数 preferences 状态栏 status Bar 连接速度 connection 在右下角状态栏会显示计算结果 应用方法 达到规范定义推荐采用以下的方法 1 减小文件大小 2 优化代码结构 实现分块显示内容 3 3 代码的编写格式代码的编写格式 规则内容 所有 HTML 标签和属性名 在 XHTML 文件中必须采用小写小写格式 补充说明 无 示例内容 正确代码格式 错误代码格式 应用方法 达到规范定义推荐采用以下的方法 1 尽量采用手工编写代码 2 如果使用工具软件生成或拷贝的代码 要认真检查一下代码格式 3 4 文件名称的命名文件名称的命名 规则内容 采用小写小写的英文单词或拼音 下划线 数字 名称长度 20 字符 名称要语义 化 补充说明 不要使用数字 下划线做目录名的开头 不要采用中文字符和特殊字符命名 两个以上单词表达时 用下划线 分开两个单词 最多不要超过三个以 上单词 例 name edit html XHTML 文件名的后缀必须为 html 示例内容 首页文件名 index html 二级页文件 name html 二级页关联 添加 文件 name add html 二级页关联 修改 文件 name edit html 二级页关联 查看 文件 name view html 二级页关联 删除 文件 name del html 二级页关联 其它 文件 name html 应用方法 达到规范定义推荐采用以下的方法 1 用英文单词或拼音来概括文件内容 同时要控制其名称长度 2 以文件内容进行分类 方便对文件进行管理 3 5 文件的标准名称文件的标准名称 规则内容 首页文件名称 index html 登录文件名称 login html 帮助文件名称 help html 补充说明 无 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 直接使用此规范定义名称 3 6 DOCTYPE 声名声名 每一个符合 WEB 标准的页面必须在文件代码的最顶部添加一个 DOCTYPE 声明 用来说明此 文件的类型是 XHTML 规则内容 普通页面文件采用过渡型过渡型 Transitional 声明 框架页面文件采用此声明 模板页面文件采用此声明 补充说明 无 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 根据文件类型采用合适的声明 2 直接利用 Adobe Dreamweaver 工具软件生成 DOCTYPE 3 7 xmlns 命名空间声明命名空间声明 xhtml 是 html 向 xml 过渡的标识语言 它需要符合 xml 文档规则 因此需要定义命名空间 规则内容 补充说明 必须添加 xmlns 命名命名空间声明 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 直接利用 Adobe Dreamweaver 工具软件生成 3 8 meta 标签描述标签描述 meta 标签用来描述一个 HTML 网页文档的属性 例如字符编码 网页描述 关键词 日 期等信息 meta 标签内容直接关系到对搜索引擎搜索引擎的友好度 所以一定要建立好相关信息 规则内容 补充说明 前台制作与后台开发的编码格式一定要一致 字符编码 国际化的项目采用编码 UTF 8 字符编码 简体中文项目采用编码 GB2312 字符编码 繁体中文项目采用编码 GBK 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 字符编码 利用 Adobe Dreamweaver 工具软件进行转换 3 9 title 页面标题页面标题 规则内容 页面内容标题 20 规则内容 非框架类型的文件 则要在每个页面中 title 写明与内容对应的标题 框架类型的文件 附属的文件在其页面中可不用添写 title 内容 title 内容要简洁 明确 不要超过 20 个字符 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 添加标题性内容 内容简洁 3 10 引入引入 CSS 样式文件样式文件 页面中的样式定义要全部放入 CSS 样式文件中 采用引入至 XHTML 文件中方法来应用 规则内容 补充说明 特例 综合类型的站点首页 可以考虑将 CSS 样式代码直接嵌入页面代码开始 处 以减少页面请求次数 加快页面显示速率 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 将所有的样式定义单独存入 CSS 文件中 然后再引用到 HTML 文件中 3 11 引入引入 script 脚本文件脚本文件 规则内容 补充说明 为加快页面显示速度 可以将 JS 代码放在页面代码最末尾处 要确保脚本文件的兼容性 在不同的浏览器中能正常使用 禁止添加 language 属性 因其在 XHTML1 0 中不被支持 使用安全的 JS 脚本文件 采用 WEBX 组发布的效果文件 如果库中没有所 要内容 推荐使用 UE 的 JQ 效果库内容 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 尽可能的将 JS 脚本放入单独文件中 进行引用 2 用不同浏览器测试 JS 效果的可用性 3 12 标签要有结束符标签要有结束符 规则内容 成对出现的标签要有结束符号 单个标签则必须要关闭 补充说明 无 示例内容 成对标签必须有结束标签 代码格式 错误代码 单个标签必须关闭 代码格式 错误代码 应用方法 达到规范定义推荐采用以下的方法 1 编写代码时一定要添加结束符号 3 13 表格代码定义表格代码定义 规则内容 请正确使用以下表格元素 表格的嵌套 3 层 表格标题 caption 组合定义表格内容 thead 表头分组 tfoot 表注分组 和 tbody 主体分组 元素 表头单元格 th 补充说明 确保代码编写层次分明 表格样式要使用 CSS 文件进行控制 示例内容 这是我的表格标题 表头单元格 1 表头单元格 2 Sum 180 January 100 February 80 应用方法 达到规范定义推荐采用以下的方法 1 不要用 table 进行布局定义 2 用 CSS 定义来控制表格的样式 3 将内容进行分块定义 不要都嵌套在一个表格内 3 14 标签属性值定义标签属性值定义 规则内容 属性值要使用双引号 补充说明 无 示例内容 代码格式 错误代码 应用方法 达到规范定义推荐采用以下的方法 1 编写代码时一定要添加结束符号 3 15 标签属性的缩写标签属性的缩写 规则内容 属性值禁止缩写 要将属性名称和值都写全了 补充说明 无 示例内容 代码格式 错误代码 应用方法 达到规范定义推荐采用以下的方法 1 将标签的属性和值写完整 3 16 引入图片的定义引入图片的定义 规则内容 Img 标签中必须添加 alt 属性 文字表述要清晰 补充说明 alt 属性说明有利于搜索引擎的检索 当图片没有显示时 alt 属性会标示出此图片的说明 装饰类的图片 可以不添加文字说明 值可以为空 示例内容 应用方法 达到规范定义推荐采用以下的方法 1 根据图片内容添加 alt 属性内容 以保证图片没有下载完时 可以看到文字说明 3 17 页面内容的长度定义页面内容的长度定义 规则内容 页面内容不要太长 以免影响浏览者对内容的接收质量 补充说明 产品类 首页的纵向滚屏 1024 768 分辨率下的 1 屏 二级页纵向滚屏 1024 768 分辨率下的 4 屏 门户类 首页的纵向滚屏 1024 768 分辨率下的 3 屏 二级页纵向滚屏 1024 768 分辨率下的 4 屏 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 在制作内容前要考虑浏览者对内容的接收质量 缩短页面内容展示的长度 3 18 name 属性的定义属性的定义 规则内容 name 属性在静态制作页面期间 不要去定义内容 补充说明 添加 JSP 程序时 会传值给 name 属性 所以之前尽量少使用此属性 示例内容 应用方法 达到规范定义推荐采用以下的方法 1 编写页面代码时将 name 属性置为空 3 19 代码的调试工具代码的调试工具 规则内容 针对 IE 浏览器和 Firefox 浏览器的 HTML 代码调试工具 IE 浏览器 采用 IE Developer Toolbar Firefox 浏览器 采用 Firebug 补充说明 无 示例内容 无 应用方法 无 3 20 代码的测试代码的测试 规则内容 制作完的页面一定要通过 IE6 IE7 IE8 和 Firefox3 0 浏览器的测试 补充说明 禁止在 1024 768 分辨率下出现水平横滚动条 测试的浏览器 2009 9 月统计 市场占有率 IE 67 Firefox 23 图示 09 7 月 上图 和 8 月 下图 两个月的统计 数据来源 Net Applications 研究机构 测试的分辨率 市场使用率 1024 768 77 1280 800 8 此为宽屏分辨率 图 示 2007 11 统计 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 编写代码时考虑不同浏览器对相同代码解释的差异 2 非正常显示时 可考虑使用 CSS Hack 写法 参见 附件 CSS Hack 汇总 doc 3 21 代码的校验代码的校验 规则内容 制作完的页面一定要校验代码是否符合 W3C 的标准 补充说明 代码验证路径 http validator w3 org validate by upload 示例内容 无 应用方法 无 4 CSS 代码编写代码编写部分部分 4 1 文件的大小定义文件的大小定义 规则内容 样式文件 25K 单位 每 CSS 文件 补充说明 如有多个 CSS 文件时 要考虑载入 XHTML 文件时的平衡性 不要加载过多的 CSS 文件 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 减少代码的重复定义 增加样式代码的重用性 2 对部分样式定义值采取缩写方法 比如色值 ffffff 可缩写为 fff 4 2 代码的编写格式代码的编写格式 规则内容 所有 CSS 代码要采用小写格式 不包括 class 和 id 名称 补充说明 无 示例内容 无 应用方法 无 4 3 文件名称的命名文件名称的命名 CSS 文件命名的指导思想是 短小 语义化的名称 这样可以使自己和工作组的每一个 成员能够方便的理解和记忆文件的意义 方便查找 修改 替换 移植等操作 提高工作效率 规则内容 采用小写的英文单词或拼音 下划线 数字 长度 20 个字符 补充说明 不要使用数字 下划线做目录名的开头 不要采用中文字符和特殊字符命名 目录 两个以上单词表达时 用下划线 分开两个单词 最多不要超过三个以 上单词 示例内容 公共样式文件 common css 应用方法 达到规范定义推荐采用以下的方法 1 用能反映文件内容的单词或拼音来进行概括 4 4 基本文件基本文件 规则内容 通用样式文件名 common css 必选 不可修改此文件名 负责页面整体布局的样式和公共样式 必须采用此文件名 具有唯一性 可扩展的样式文件 module css 可选 可修改此文件名 只适用于单个模块的样式 不具有通用性 文件名可以自己定义 补充说明 无 示例内容 个性模块 module css 字体模块 module font css 颜色模块 module color css 内容专栏 module columns css 页面文字 module text css 页面表单 module forms css 打印模块 module print css 应用方法 达到规范定义推荐采用以下的方法 1 将规范定义的文件名称作为模板使用 4 5 文件的编码文件的编码 如果项目对编码有要求 则需遵守指定的编码要求 规则内容 代码格式 charset 编码 前台制作与后台开发的编码格式一定要一致 补充说明 国际化的项目采用编码 UTF 8 简体中文项目采用编码 GB2312 繁体中文项目采用编码 GBK 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 编码 利用 Adobe Dreamweaver 工具软件进行编码定义或进行转换 4 6 id 和和 class 命名的规范命名的规范 如果项目对编码有要求 则需遵守指定的编码要求 规则内容 采用英文单词 拼音作为其名称 两个单词时第二个单词的首字母要大写 不超过 20 个字符长 补充说明 不要使用 ID 来进行样式定义 如有特殊情况请标明缘由 禁止用数字开头命名 禁止用中文命名 禁止用特殊字符命名 同一类型的 id 和 class 名称第一个单词要一致 示例内容 示例一 两个单词 CLASS 名称 productList 三个单词 CLASS 名称 productListLeft 示例二 字 体 font 红色字体 fontRed 绿色字体 fontGreen 加粗字体 fontBold 应用方法 达到规范定义推荐采用以下的方法 1 使用英文或拼音来概括所定义的内容 4 7 注释的写法注释的写法 规则内容 CSS 文件编写时要添加注释内容 完成后进行对外发布时 可将注释内容去掉 以减少文件的大小 对于界面代码 要进行增加 修改及删除操作时 修改人员要进行注释 保留原 有代码的定义 注释内容要包括修改人和时间 界面将要上线时 可以将所修改的注释内容删除 补充说明 具体注释格式采用以下格式 CSS 文件中必须有如下信息放在文件中最上部分 file name common css personnel date 2007 1 10 contact 010 58022828 name content 页面制作样式库文件 个性模块内容样式信息 有个性模板时选择此格式 content start 个性模块内容区注释样式 content end 单个样式的注释信息 content 修改代码的注释样例 modified by yang start 20090903 width 100 原有代码 width 900px 修改后的代码 modified by yang end 20090903 CSSHack 注释 使用了 CSSHack 一定要添加注释 并且要写明为什么使用此 CSSHack 示例内容 无 应用方法 无 4 8 代码书写样式代码书写样式 规则内容 代码要采用固定的格式 补充说明 无 示例内容 content test width 100 前面空白的地方使用 TAB 键 空一格 testLeft width 100 前面空白的地方使用 TAB 键 空一格 应用方法 无 4 9 通用样式定义标准通用样式定义标准 在每个 CSS 文件定义的公共内容中 都要初始化定义以下内容 规则内容 整个站点的背景色 background 缺省时定义为白色 中文大小 font size 12px 中文字体 font family 宋体 英文字体 font family Arial Helvetica sans serif 表单值 form 0px 字体链接颜色 a link a visited a active a hover 图片边框 img border 0px 输入框定义 input 按钮定义 button 补充说明 在定义样式文件时 一定要注意默认值这个问题 因为不同浏览器对默认值的解 释都不一样 所以在定义属性时 要考虑默认值的影响问题 定义注意 尽量不要使用此定义全局 CSS 样式文件 因为会影响编辑器发 布的内容 示例内容 无 应用方法 达到规范定义推荐采用以下的方法 1 将规范定义内容做成模板 进行引用和修改 5 内容制作内容制作部分部分 5 1 图片大小图片大小 规则内容 图片的字节数大小 12K 单个图片 背景图字节数大小 10K 单个图片 首 页 图片 flash 120K 单位 每 XHTML 页 二级页 图片 flash 100K 单位 每 XHTML 页 补充说明 图片字节大小要压缩至最小化 示例内容 图片的字节数计算公式 K l S 5800 1 80 当 L 300 许可误差 9 0k K l S 3200 1 65 当 200 L 300 许可误差 4 0k K l S 2000 1 50 当 100 L 200 许可误差 2 0k K l S 1800 1 40 当 50 L 100 许可误差 1 0k K l S 1300 1 25 当 L 50 许可误差 0 5k 注 L 图片长度 S 图片宽度 K 图片大小 k 应用方法 达到规范定义推荐采用以下的方法 1 使用色值少的图片 2 利用工具软件 adobe photoshop 对图片进行压缩处理 5 2 图片的名称图片的名称 规则内容 采用小写小写英文单词 拼音 数字 下划线 要保持语义化 补充说明 不要使用数字 下划线做目录名的开头 不要采用中文字符和特殊字符