WEB规范.docx
- 文档编号:4765964
- 上传时间:2022-12-08
- 格式:DOCX
- 页数:20
- 大小:276.63KB
WEB规范.docx
《WEB规范.docx》由会员分享,可在线阅读,更多相关《WEB规范.docx(20页珍藏版)》请在冰豆网上搜索。
WEB规范
WEB标准化页面制作规范
目录
1.引言5
1.1.制作规范编写目的及原则5
1.2.制作规范适用的工作人员5
1.3.制作规范制定的范围5
1.4.制作规范适用的产品范围5
2.站点目录结构6
2.1.目录名称的命名6
2.2.站点目录层次结构6
3.HTML代码编写部分7
3.1.页面文件的大小7
3.2.页面文件内容显示时长7
3.3.代码的编写格式7
3.4.文件名称的命名7
3.5.文件的标准名称8
3.6.DOCTYPE声名8
3.7.xmlns命名空间声明9
3.8.meta标签描述9
3.9.title页面标题9
3.10.引入CSS样式文件10
3.11.引入script脚本文件10
3.12.代码的结构10
3.13.表格代码定义10
3.14.标签属性值定义11
3.15.标签属性的缩写11
3.16.引入图片的定义11
3.17.页面内容的长度定义11
3.18.代码的测试12
3.19.代码的校验13
4.CSS代码编写部分13
4.1.文件的大小定义13
4.2.代码的编写格式13
4.3.文件名称的命名13
4.4.基本文件13
4.5.文件的编码14
4.6.id和class命名的规范14
4.7.注释的写法15
4.8.代码书写样式15
4.9.通用样式定义标准16
5.内容制作部分16
5.1.图片大小16
5.2.图片的名称17
5.3.关于1像素透明图片17
5.4.图片的应用格式17
5.5.内容宽度的适应18
5.5.1.可拉伸的内容定义18
5.5.2.适当拉伸的内容定义18
5.5.3.不可拉伸的内容定义19
1.引言
W3C是“WorldWideWebConsortium”的缩写,中文名称为“万维网组织”。
W3C主要工作是研究和制定开放的规范(事实上的标准),以便提高web相关产品的互用性。
WEB标准是由W3C和ECMA制定的一系列标准的集合。
WEB标准化的网页主要由三部分组成:
结构(Structure)、表现(Presentation)和行为(Behavior):
●结构化标准语言主要包括:
XHTML1.0;
●表现标准语言主要包括:
CSS2.0;
●行为标准主要包括:
ECMAJavaScript。
XHTML是TheExtensibleHypertextMarkupLanguage可扩展标识语言的缩写,是一种增强了的HTML。
CSS是CascadingStyleSheet的缩写,译作「层叠样式表单」,简称「样式表」。
是用于增强和控制网页内容样式并允许将样式信息与内容相分离的一种标记性语言。
1.1.制作规范编写目的及原则
本文档是作为WEB页面制作的一个规范性的文件,可以帮助提高部门页面制作人员建立相关部门的页面制作规范文件。
制作原则:
缩减文件大小,减少文件内容向服务器的请求
1.2.制作规范适用的工作人员
本文档主要面向WEB页面制作人员,页面设计人员和页面开发人员也可以参阅了解相关内容,阅读本文档需要掌握相关基础知识:
1.掌握html4.0和Xhtml1.0相关标准和用法;
2.掌握css2.0相关标准和属性;
3.对script脚本的作用和用法有一定程度的了解。
1.3.制作规范制定的范围
本文档对目录建立、XHTML文件编写、CSS样式编写以及制做中的方法进行了规范化定义。
对于本文档中一些需要掌握的技术技能和技术知识本文档不做详细描述,请另外阅读相关技术知识文档。
1.4.制作规范适用的产品范围
本文档适用于基于HTML页面的产品。
2.站点目录结构
2.1.目录名称的命名
【规则内容】采用小写的英文单词或拼音、下划线、数字,长度不超过20个字符,名称要能反
映目录的内容,起到语义化效果。
【补充说明】不要使用数字、下划线做目录名的开头,不要采用中文字符和特殊字符命名目录。
【示例内容】图片目录(images)
2.2.站点目录层次结构
目录建立的原则:
以文件类型来分别建立相应的目录。
【规则内容】以下为站点目录结构:
✓css文件目录:
存放CSS样式文件
✓flash文件目录:
存放.swf文件
✓html文件目录:
存放分栏目内容页面
✓images文件目录:
存放图片文件
✓javascript文件目录:
存放JS文件
✓language文件目录:
存放多种语言文件
✓library文件目录:
存放库文件
✓templates文件目录:
存放模板页面
✓index.html首页文件
✓product.html产品内容文件
【补充说明】
✓目录的层次深度<=3层;
✓如果是综合门户和产品类型的站点,则可以在html目录中建立相应目录,将各分栏目的页面文件分别存放其中;
✓如果有换肤效果时,则可以在CSS目录中再建立换肤目录,将所有换肤样式存放其中;
✓如果单个分栏目的html页面超过50页时,则可以在html目录中建立分栏目的目录;
✓如果以上目录没有所需要的目录类别,可自建立新目录,名称要尽量语义化;
✓以上目录根据需要选择建立,但是一个站点只允许有一个上述的目录存在。
【示例内容】图片目录(images)
3.HTML代码编写部分
3.1.页面文件的大小
页面文件的大小直接关系到下载时的速率,所以一定要控制文件的大小。
【规则内容】单个页面的字节大小:
✓代码+文字内容<=30K
✓图片+flash<=120K
✓代码+文字内容+图片+flash<=150K
【补充说明】无
【示例内容】无
3.2.页面文件内容显示时长
【规则内容】52K网络带宽的情况下:
首页面时,50%的页面内容显示的时间<=3秒,否则要有loading条提示。
二级页面时,50%的页面内容显示的时间<=2秒,否则要有loading条提示。
【补充说明】无
【示例内容】测算工具:
✓Dreamweaver根据页面的整个内容(包括所有链接对象,例如图像和插件)来计算大小选择编辑(edit)>首选参数(preferences)>状态栏(statusBar)>连接速度(connection)
在右下角状态栏会显示计算结果:
3.3.代码的编写格式
【规则内容】所有HTML标签和属性名,在XHTML文档中必须采用小写格式。
【补充说明】无
【示例内容】
✓正确代码格式:
……✓错误代码格式:
……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
3.5.文件的标准名称
【规则内容】首页文件名称:
index.html
登录文件名称:
login.html
帮助文件名称:
help.html
【补充说明】无
【示例内容】无
3.6.DOCTYPE声名
每一个符合WEB标准的页面必须在文件代码的最顶部添加一个DOCTYPE声明,用来说明此文件的类型是XHTML。
【规则内容】
✓普通页面文件采用过渡型(Transitional)声明
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
✓框架页面文件采用此声明
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
✓模板页面文件采用此声明
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
【补充说明】无
【示例内容】无
3.7.xmlns命名空间声明
xhtml是html向xml过渡的标识语言,它需要符合xml文档规则,因此需要定义命名空间。
【规则内容】
//www.w3.org/1999/xhtml">