WEB前端w3标准化页面制作规范_第1页
WEB前端w3标准化页面制作规范_第2页
WEB前端w3标准化页面制作规范_第3页
WEB前端w3标准化页面制作规范_第4页
WEB前端w3标准化页面制作规范_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、web标准化页面制作规范目录3.7. 引言3 制作规范编写目的及原则3 制作规范适用的工作人员3 制作规范制定的范围4 制作规范适用的产品范围43.8. 站点目录结构4 目录名称的命名4 站点目录s次结构43.9. html代码编写部分5 页而文件的人小5 页而文件内容显示时长5 代码的编写格式5 文件名称的命名6 文件的标准名称6 doctype 声名6 xmlns命名空间声明7 meta标签描述7 title页面标题7 引入css样式文件8 引入script脚本文件8 代码的结构8 表格代码定义9 标签属性位定义9 标签属性的缩写9 引入w片的定义9 页而内容的长度定义10 代码的测试10

2、 代码的校验113.10. css代码编写部分11 文件的人小定义11 代码的编写格式11 文件名称的命名11 基本文件12 文件的编码12 id和class命名的规拖13 注释的写法13 代码书写样式14 通用样式定义标准143.11. 内容制作部分15 閔片大小15 閔片的名称15 关于1像素透明网片15 图片的应用格式16 lal客宽度的适应16可拉仲的内容定义16适当拉伸的内容定义16不川拉伸的内容定义171. 引言w3c是“world wide web consortium”的缩写，中文名称为“万维网组织”。w3c主耍工作是研究和制定开放的规范(事实上的标准)，以便提高web相关产品

3、的互用性。 web鉍准足由w3c和ecma制定的一系列«准的集合。web标准化的m页主要由三部分组成：结构(structure)、表现(presentation)和行为 (behavior)：结构化标准语言主要包拈：xhtml1.0；表现标准语言主要包拈：css2.0；行为标准主耍包括：ecmajavascript。xhtml a： the extensible hypertext markup language 可扩展杯识语言的缩写，楚一种增强了 的 html。c s s是cascading style sheet的缩写，译作层叠样式表单，简称样式表。是用于 增强和控制网页内容样式

4、并允许将样式信息与内容相分离的一种记性语言。3.2. 制作规范编写目的及原则木文档是作为web页而制作的一个规范性的文件，可以帮助提高部门页側制作人员建立相关 部门的贝而制作规范文件。制作原则：缩减文件人小，减少文件内矜服务器的请求3.3. 制作规范适用的工作人员木文档主要ifti向web页衡制作人虬页iftf设计人m和贞曲'开发人m也可以参阅y解相关内容， 阅读本文档志耍掌握相太基础知识：掌握htmw.o和xhtmh.0相关标准和川法；掌握css2.0相关标准和属性；对script脚本的作用和用法有一定程度的了解。3.4. 制作规范制定的范本文捫对目录建立、xhtml文件编写、css

5、样式编写以及制做中的方法进行了规范化定义。 对于木文裆中一些需要掌握的技术技能和技木知识木文档不做详细描述，请：w外阅读相关技术知识文裆。3.5. 制作规范适用的产品范本文档适用于基于html页面的产品。2. 站点目录结构2.1. 目录名称的命名【规则内界】采川小写的英文单词或拼音、k划线、数字，长度不超过20个字符，名称要能反 映r录的闪容，起到语义化效果。【补充说明】不要使用数字、下划线做目录名的开头，不要采用中文字符和特殊字符命名目录。 【示例内界】图片0录（images ）2.2. 站点目录层次结构目录建立的原则：以文件类型来分别建立相应的目录。【规则内容】以下为站点目录结构：z cs

6、s文件r录：存放css样式文件ii、css tr"! flashflash文件鬥录：存放.swf文件htmlhtrnl文件鬥录：存放分内容贝而i, images images 文件 0 录javascript文件鬥录:存放图片文件存放js文件lp j avascriptlc language _librarylanguage 文件 0隶：存放多种语言文件lr templates1 ibrary文件門录：存放库文件查index, htmltemplates文件目录:存放模板页面product, html j pro duct add. htmlindex.html首页文件product

7、_edi t. ktmlproduct, html产品内容文件国 readme, txt【补充说明】z fi录的层次深度=3层；如果是综合门户和产品类型的站点，则可以在html目录巾建立相应目录，将 各分栏目的页而文件分别存放屮；z如果有换肤效果时，则可以在css目录中再建立换肤目录，将所有换肤样式存放其屮；z 如果单个分栏目的html页面超过50页时，则可以在html鬥录中建立分栏目 的目录；z如果以上目录没冇所需要的目录类别，可肖建立新h录，名称要尽fi语义化; z 以上目录根据需要选择建立，但是一个站点只允许冇一个上述的fi录存在。【示例内容】图片目录(images )3. html代码

8、编写部分3.1.页面文件的大小页面文件的大小直接关系到下载时的速率，所以一定要控制文件的大小。 【规则p、j容】单个页面的字节大小：代码+文字内界=30k图片 + flash = 120k代码+文字闪容+阁片+ flash = 150k【补充说明】无 【示例内容】无页面文件内容显示时长【规则闪容】52k网络帯宽的情况下：苗页面时，50%的页面内界显示的吋间=3秒，否则要有loading条提示。 二级页谢时，50%的页側内容显示的时间=2秒，否则要冇loading条提示【补充说明】无【示例内容】测算工具：dreamweaver根拋贞*jfti的整个闪容(包柄所有镀接对象，例如图像和插件) 來计算

9、大小选择编钳(edit)首选参数(preferences) 状态栏(status bar) 连接速度(connect ion)在右下角状态栏会显示计算结果：| v q, 100%1251 x 437x( ik/lsec3.3.代码的编写格式【规则闪容】所有html标签和属性名，在xhtml文捫巾必须采用小写格式。 【补充说明】无 【示例内容】正确代码格式：<body></body>z错误代码格式：<body></body>3.4.文件名称的命名【规则内容】采用小写的英文单词或拼音、下划线、数字，名称长度=20字符名称耍语义化。 【补充说明】不要使

10、用数字、下划线做n录名的幵失，不要采用中文字符和特殊字符命名；两个以上单词表达吋，川卜*划线“_”分开两个单词，最多不要超过三个以上 单词；例:name_edit.html;z xhtml文件名的a缀必须为“.html”。【示例内容】0页文件名：index.html z 二级页文件：name.htmlname_add.htmlname_edit.htmlname_view.htmlname_del.htmlname*.html二级页关联添加文件: 二级页关联修改文件: 二级页关联杏看文件: 二级页关联删除文件: 二级页关联其它文件:3.5.文件的标准名称【规则内容】首页文件名称:index.h

11、tml 登录文件名称：login.html 帮助文件名称:help.html【补充说明】无 【示例内界】无3.6. doctype 声名每一个符合web标准的贝而必须4:文件代码的最顶部添加一个doctype声明，用来说明此 文件的类型是xhtml。【规则内容】，普通页面文件采川过渡型(transitional)声明 <! doctype html public "-/w3c/dtd xhtml 1.0 transitional/en""/tr/xhtml1/dtd/xhtml1-transitional.dtct>z框

12、架页面文件采用此声明<! doctype html public "-/w3c/dtd xhtml 1.0 frameset/en""/tr/xhtml1/dtd/xhtml1-frameset.dtd">z模板页面文件采川此声明<!doctype html public "-/w3c/dtd xhtml 1.0 transitional/en" "/tr/xhtml1/dtd/xhtml1-transitional.dtd">

13、【补充说明】无 【示例内容】无xmlns命名空间声明xhtml是html xml过渡的标识语言，它需要符合xml文档规则，w此需要定义命名空1川。 【规则内容】<html xmlns=h/1999/xhtml"> </html>【补充说明】必须添加xmlns命名空问声明 【示例内容】无meta标签描述meta标签川来描述-个html网页文档的属性，例如字符编码、网页描述、关键词、h 期等信息。meta标签内容直接关系到对搜索引擎的友好度，所以一定要建立好相关信息。 【规则内容】<meta http-equiv="

14、content-type" content="text/html; 01361=字符编码"/><meta name=”description" content="网页描述” /><meta name="keywords” content="关键词"/>【补充说明】前台制作与盾台开发的编码格式一定要一致 z字符编码：国际化的项目采用编码：utf-8；字符编码：简体屮文项s采川编码：gb2312；z字符编码：繁体中文项目采用编码：gbk;【示例p、j容】无title页面标题【规则内界】&l

15、t;title>页而内容标题</title>【规则內容】z非框架类型的文件，则要在毎个页而中title写明与容对应的标题。 z框架类型的文件，附属的文件在k页面屮可不用添写title内容。 z title內容要简洁、明确，不要超过20个字符。【示例内界】无引入css样式文件贝而中的样式定义耍全部放入css样式文件中，采用引入至xhtml文件中方法来应用。 【规则內容】clink rel="stylesheeth type="text/css" href=" css 文件路径"/>【补充说明】特例：综合类型的站点首贝，讨以

16、考虑将css样式代码直接嵌入页而代码幵始处, 以减少页面谘求次数，加快页面显示速率。【示例内容】无引入script脚本文件【规则内容】script type="text/javascript" src=*'script 文件路径"></script>【补充说明】为加快页面显示速度，可以将js代码放在页面代码最末尾处。要确保脚木文件的兼容性，在不同的浏览器中能正常使用。禁止添加language属性，因其在xhtml1. 0中不被支持。【示例内界】无代码的结构【规则内容】代码的结构耍保持完整性，单个标签必须关闭。【补充说明】无 【示例内界】成

17、对标签必须冇结束标签代码格式：<div>.错误代码：<div>.</div>单个标签必须关闭代码格式：<br/、<hr/>、<img/>、input/、<meta/>错误代码：<br>、<hr、<img、input、<meta>3.13.表格代码定义【规则p、j容】表格的嵌套<=3层。【补充说明】确保代码层次分明；表格样式耍使用css文件进行控制。【示例內容】<table><th><td>.</td></th><

18、;tr><td>.</td></tr></table>3.14.标签属性值定义【规则内容】属性值耍使川双引兮“”。【补充说明】无【示例内稗】代码格式:input type="checkbox" name="shirt. value="medium" checked=”checked”/> 错误代码：input type="checkbox name="shirt value=medium checked=checked />3.15.标签属性的缩写【规则内容】

19、属性值禁止缩写 【补充说明】无 【示例内界】代码格式:<input type="checkbox" name="shirt" value="medium" checked="checked"/> 错误代码:input type="checkbox" name="shirt" value=medium" checked />3.16.引入图片的定义【规则内界】tmg标签十必须添加alt属性，文字表述要清晰。 【补充说明】心屈性说明有利于搜索引擎的检索

20、；当图片没有显示时，alt属性会标示出此图片的说明。【示例内容】<img src=倒片路径"alt=，片说明n /3.17.页面内容的长度定义【规则p、j容】页而a容不要人长，以免影响浏览者对内容的接收质m。 【补充说明】产品类：首页的纵向滚屏 二级页纵向滚屏门户类：首页的纵向滚屏 二级页纵h'd滚屏<=1024*768分辨率下的1屏 <=1024*768分辨率下的4屏<=1024*768分辨率下的3屏 <=1024*768分辨率下的4屏【示例内容】无3.18.代码的测试【规则闪容】制作完的页而一定要通过ie6、ie7和firefox浏览器的测试

21、。【补充说明】禁止在1024*768分辨率下出现水平横滚动条。测试的浏览器：(2007.11月统计)市场占有率前三名：ie6 (87%)、ie7 (10%)、firefox2.0 (2%) 图示:2007.11统计卿震代 ms ie6.0 ms ie7.0 firefox2.0 其他87%测试的分辨率.市场使用率:1024x768 (77%)、1280x800 (8%,此为宽屏分辨率) 图示:2007.11统计 1024x768 1280x800 1280x1024 800x600 1440x900 1152x864 1280x76877%【示例pl容】无3.19.代码的校验【规则内容】制作完

22、的页面一定要校验代码足否符合w3c的标准。【补充说明】代码验i正路径：http:/validator.w3.org/#validate by upload【示例a容】无4. css代码编写部分5.5.2. 文件的大小定义【规则p、j容】样式文件=25k （单位：每css文件）【补充说明】如有多个css文件时，要考虑载入xhtml文件吋的平衡性，不要加载过多的 css文件。【示例p、j容】无5.5.3. 代码的编写格式【规则内容】所冇css代码要采用小写格式，不包括class和id名称 【补充说明】无 【示例内界】无5.5.4. 文件名称的命名css文件命名的指导思想是：短小、语义化名称，这样可

23、以使自己和工作组的每一个成员 能够方便的理解和记忆文件的意义，方便杏找、修改、替换、移植等操作，提岛工作效率。.【规则内界】采川小写的英文单词或拼音、k划线、数字，长度=20个字符 【补充说明】z不要使用数字、下划线做目录名的丌头，不要采用屮文字符和特殊字符命名 目录。两个以上单词表达时，用下划线“分丌两个单词，最多不要超过三个以上 单词。【示例内容】公井样成文件：common.css4.4.基本文件【规则內界】通用样式文件名：common, css （必选，不xt修改此文件名）负责页面整体布局的样式和公共样式，必须采用此文件名，具右唯一性。xt扩屁的样成文件：module, css （xt选

24、，w修改此文件名）只适用于单个模块的样式，不具有通用性，文件名可以自己定义。【补充说明】无【示例内容】个性模块=module.css字体模块=module_font.css颜色模块=module_color.css内容专栏=module_columns.css页jftf文字=modulc_tcxt.css災面表单=module_forms.css打印模块=moduleprint.css4.5.文件的编码如果项h对编码有要求，则需遵4指定的编码要求。【规则内界】代码格式：chanset”编码”，前台制作与后台开发的编码格式一定要一致。 【补充说明】国际化的项目采用编码：utf-8；简体屮文项b采

25、川编码：gb2312；繁体中文项目采川编码：gbk;【示例内容】无4.6. id和class命名的规范如果项n对编码冇耍求，则耑遒守指定的编码耍求。【规则内容】采川英文单词、拼音作为其名称，两个单词时第二个单词的首字母要大写， 不超过20个字符忪。【补充说明】不要使用id来进行样式定义，如有特殊情况请标明缘由。禁止用数字开尖命名，禁止用中文命名，禁止用特殊字符命名；同一类型的id和class名称第一个单词要一致。【示例闪界】示例一：z 两个单词 class 名称：.productlistz 三个单词 class 名称：productlistleft示例二：z 字 体：.font z 红色字体：

26、fontred绿色字体：.fontgreen 加粗字体：fontbold4.7.注释的写法【规则内界】css文件编写时要添加注释内各，完成后进行对外发布吋，可将注释内界去掉， 以减少文件的大小【补充说明】其体注释格式采用以卜格式：z css文件中必须冇如下信息放在文件中域上部分*z巾 ，;，巾巾，;，屮巾，巾屮巾，;，巾屮巾，个，7,巾，巾巾巾ri，巾巾巾ri，巾，y，*7*屮巾，y，*7*file name： common.csspersonnel： *date： 2007-1-10contact：namecontent：:奴面制作样式库文件*?* *1* *1*

27、 *1* *?* （z7/z个性模块a容样式信息（冇个性模板时选择此格式）个性模块内容区注释样式/*本冰* content end */z单个样式的注释信息 /* content */z csshack 注释使用了 csshack，一定要添加注释，并且要写明为什么使用此csshack 【示例pl容】无4.8.代码书写样式【规则闪容】代码要采用阀定的格式 【补充说明】无 【示例闪容】/* content */.test width： 100%；(前面空白的地方使用tab键空一格).testleft width： 100%；(前面空白的地方使用tab键空一格)4.9.通用样式定义标准在毎个css文

28、件定义的公共n容中，都要初始化定义以卜p、j容 【规则內界】盤个站点的v?景色(background)：缺省时定义为白色; 巾文大小(font-size): 12px；巾文字体(font-family):宋体；英文字体(font-family): arial, helvetica, sans-serif； 表单值(form): opx；空白(margin): opx；间隙(padding): opx；字体链接颜色:a:link、a:visited、a:active、a:hover 图片边框(img): border:()px；输入框定义(i叩ut)z按钮定义(button)【补充说明】在定义样

29、式文件时，一定要注意默认值这个问题，因为不同浏览器对默认值的解 释都不一样，所以在定义属性吋，要考虑默汄值的影响问题【示例内容】无5.内容制作部分5.1.图片大小【规则内容】阁片的字节数大小<=12k （单个阁片）背景图字节数人小<=10k （单个图片）首页：图片+ flash <= 120k （单位：每xhtml页）二级页：图片+ flash <= 100k （单位：每xhtml页）【补充说明】图片字节人小要压缩至最小化【示例内容】图片的字节数计算公式：k= （l *s/58oo） *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= （1*s/ 1800） *1.40 （当 50彡l<100）许可误差 1.

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论