网页制作应当遵守的一些规范.doc

1.1网页基本设计要求（网站建设尺寸规范）网站的页面分辨率要保证页面在1024*768分辨率下没有横向滚动条。1.2 HTML文件结构HTML结构参考： 页面内参考以下原则：（1）静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰。（2）页面一律采用UTF-8编码，避免因编码不一致而导致页面乱码。（3）非特殊情况下必须把CSS外部链接放到页面的顶部（ 标签之间）。（4）非特殊情况下必须把JS代码或外部链接放到页面的底部（标签之后），工具类JS嵌入的JS文件除外。（5）书写链接地址时，必须避免重定向，例如：href=/ ,即须在URL地址后面加上“/”。（6）在页面中尽量避免使用XHTML标签的样式属性,即style=。（7）应给每个页面的TITLE进行命名，所有中文页面TITLE设置为本页面的内容描述（8）尽量减少DIV的嵌套层数。（9）统一域名下的项目页面链接使用相对路径。（10）给区块代码和套程序的循环的第一条数据加上注释。（11）每个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：)（12）所有XHTML代码必须全部小写。（13）XHTML标签的属性值必须用双引号（”）括起来,并且一定要有值,不能简写缩写。（14）双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：等，并且有正确的层次。（15）非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等。（16）id属性，同一页面不要重复使用同一id。（17）给重要图片加上alt属性；给重要的元素和截断的元素加上title。（18）行距建议用百分比来定义，常用的行距的值是line-height: 150%。（19）表格的嵌套尽量控制在三层以内。（20）为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用来人工干预分段。（21）网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象，非必须情况下请保持在34K以下。（22）为了保证浏览器的兼容性，必须设置页面背景。（23）超过三屏的内容，应在头部设提纲，直接链接到文内锚点 。1.3 CSS结构 对于每个项目的CSS开发必须采用分层的设计思想，主要为三个大的层次：全局样式、通用元素和结构布局、具体的块状表现区域。对于层次的划分再做一次扩充：前端固定结构内可进一步细分到：导航系统（包括：菜单，导航，面包屑，站点地图），辅助系统（提示，指南，FAQ），全局通用性功能模块（搜索功能块，登入/登出功能块）。CSS结构参考以下设计：常用CSS类/ID名参考：（1）页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center （2）导航导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary （3）功能标志：logo 广告：banner 登录：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright 1.4 图像约定（1）图片采用 gif , jpg 压缩格式，以减小页面下载数据量。标记要增加width, height，以免图像不能正常显示时，出现页面混乱现象。（2）在页面尽量少使用图片，只在必要的情况下使用图片，图片大小最好不要超过8KB。（3）图片统一放在images文件夹下面。 1.5 多媒体元素约定（1）如页面采用动画活跃网页，须避免动画过大，尽量减少用户浏览等待时间。整页用到flash动画或SilverLight程序，要考虑到flash动画或SilverLight程序界面与页面的融合统一。1.6 网页布局（1）各主要栏目之间要求使用一致的布局，包括一致的页面元素，一致的导航形式，使用相同的铵钮，相同的顺序，可跟首页有变化。 1.7 网页注释1.7.1、HTML注释注释规范所有的注释文字一律使用简体中文。注释格式为感叹号后面2个横线，结束时2个横线，不要在注释内容中使“-”，“-”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是错误的： 1.8 CSS编码规范（1）为了保证不同浏览器上字号保持一致，字号尽量采用点数（pt）和像素（px）来定义，使用pt单位时一般使用中文宋体的9pt和10.5pt，使用px单位时一般使用中文宋体12px 和14.8px 。字体需要作为标题显示时，一般选用10.5pt或14.8px 的字号比较合适；字体定义中尽量使用“宋体”为首选字体；中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。（2）原则上尽量采用CSS缩写。以下是CSS缩写性质的列表以及它们所表示的常规性质。background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复border（边框）：边框颜色、边框风格、边框宽度border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度cue（声音提示）：前提示、后提示font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型margin（空白）：顶部空白、右侧空白、底部空白、左侧空白outline（大纲）：大纲颜色、大纲样式、大纲宽度padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙pause（暂停）：后暂停、前暂停示例：padding-top:1px;padding-left:2px;padding-bottom:3px;padding-rigth:4px可缩写为：padding:1px 4px 3px 2px;（3）、CSS文件一律采用UTF-8编码，避免因为编码问题而造成页面结构混乱。 1.8 JS编码规范（1）尽量采用轻量级的Js框架：例如：ProtoType、jQuery、MooTools，推荐使用jQuery。（2）JS文件一律采用UTF-8编码，避免出现编码不一致的问题。.（3）JavaScript程序尽量保存在后缀名为.js的文件中，以方便缓存以及压缩。（4）Js文件导入的标签应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。（5）缩进的单位为四个空格或一个Tab键长度。（6）所有的变量必须在使用前进行声明，将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行,并加上注释说明。所有变量按照字母排序。JavaScript没有块作用域（只有函数级的作用域），所以在块里面定义变量很容易引起C/C+/Java程序员们的误解。在函数的首部定义所有的变量。尽量减少全局变量的使用。不要让局部变量覆盖全局变量。（7）变量名应由26个大小写字母(A.Z,a.z),10个数字(0.9),和_(下划线)组成。避免使用国际化字符(如中文),因为它们不是在任何地方都可以被方便的阅读和理解。不要在命名中使用$(美元符号)或者(反斜杠)。不要把_(下划线)作为变量名的第一个字符。它有时用来表示私有变量,但实际上JavaScript并没提供私有变量的功能。如果私有变量很重要, 那么使用私有成员的形式。应避免使用这种容易让人误解的命名习惯。（8）函数名与左括号之间不应该有空格。右括号与开始程序体的左大括号之间应插入一个空格。函数程序体应缩进四个空格或一个Tab键长度。右大括号与声明函数的那一行代码头部对齐。如果函数是匿名函数,则在function和(左括号)之间应有一个空格。如果省