1.1网页基本设计要求(网站建设尺寸规范)
网站的页面分辨率要保证页面在1024*768分辨率下没有横向滚动条。
1.2 HTML文件结构
HTML结构参考:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<wbr><wbr><wbr> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br> <title></title><br><wbr><wbr><wbr> <meta /><br> </head><br> <body><br><wbr><wbr><wbr><br> </body><br> </html><br> 页面内参考以下原则:<br> (1)静态页面XHTML代码应采用自动缩进的形式编写,这样代码层次结构清晰。<br> (2)页面一律采用UTF-8编码,避免因编码不一致而导致页面乱码。<br> (3)非特殊情况下必须把CSS外部链接放到页面的顶部(<head>… </ head>标签之间)。<br> (4)非特殊情况下必须把JS代码或外部链接放到页面的底部(</ body>标签之后),工具类JS嵌入的JS文件除外。<br> (5)书写链接地址时,必须避免重定向,例如:href="<a href="http://www.5fad.com/">http://www.5fad.com/</a>" ,即须在URL地址后面加上“/”。<br> (6)在页面中尽量避免使用XHTML标签的样式属性,即style="…"。<br> (7)应给每个页面的TITLE进行命名,所有中文页面TITLE设置为本页面的内容描述<br> (8)尽量减少DIV的嵌套层数。<br> (9)统一域名下的项目页面链接使用相对路径。<br> (10)给区块代码和套程序的循环的第一条数据加上注释。<br> (11)每个页面必须宣告使用哪一种DTD,目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><br> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">)<br> (12)所有XHTML代码必须全部小写。<br> (13)XHTML标签的属性值必须用双引号(””)括起来,并且一定要有值,不能简写缩写。<br> (14)双标记签都要有开始和结束标签,单标记标签的后面一定要加“/”,例如:<br />等,并且有正确的层次。<br> (15)非特殊情况下要求表现和内容分离,代码中不要涉及任何表现的元素,例如:style、font等。<br> (16)id属性,同一页面不要重复使用同一id。<br> (17)给重要图片加上alt属性;给重要的元素和截断的元素加上title。<br> (18)行距建议用百分比来定义,常用的行距的值是line-height: 150%。<br> (19)表格的嵌套尽量控制在三层以内。<br> (20)为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用<br />来人工干预分段。<br> (21)网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象,非必须情况下请保持在34K以下。<br> (22)为了保证浏览器的兼容性,必须设置页面背景<body<wbr> bgcolor="#FFFFFF">。<br> (23)超过三屏的内容,应在头部设提纲,直接链接到文内锚点 。</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
1.3 CSS结构
<wbr>对于每个项目的CSS开发必须采用分层的设计思想,主要为三个大的层次:全局样式、通用元素和结构布局、具体的块状表现区域。对于层次的划分再做一次扩充:<br> 前端固定结构内可进一步细分到:导航系统(包括:菜单,导航,面包屑,站点地图),辅助系统(提示,指南,FAQ),全局通用性功能模块(搜索功能块,登入/登出功能块)。<br> CSS结构参考以下设计:<br> 常用CSS类/ID名参考:<br> (1)页面结构<br> 容器: container<br> 页头:header<br> 内容:content/container<br> 页面主体:main<br> 页尾:footer<br> 导航:nav<br> 侧栏:sidebar<br> 栏目:column<br> 页面外围控制整体布局宽度:wrapper<br> 左右中:left right center<br> (2)导航<br> 导航:nav<br> 主导航:mainbav<br> 子导航:subnav<br> 顶导航:topnav<br> 边导航:sidebar<br> 左导航:leftsidebar<br> 右导航:rightsidebar<br> 菜单:menu<br> 子菜单:submenu<br> 标题: title<br> 摘要: summary<br> (3)功能<br> 标志:logo<br> 广告:banner<br> 登录:login<br> 登录条:loginbar<br> 注册:regsiter<br> 搜索:search<br> 功能区:shop<br> 标题:title<br> 加入:joinus<br> 状态:status<br> 按钮:btn<br> 滚动:scroll<br> 标签页:tab<br> 文章列表:list<br> 提示信息:msg<br> 当前的: current<br> 图标: icon<br> 注释:note<br> 指南:guild<br> 服务:service<br> 热点:hot<br> 新闻:news<br> 下载:download<br> 投票:vote<br> 合作伙伴:partner<br> 友情链接:link<br> 版权:copyright</wbr>
1.4 图像约定
(1)图片采用 gif , jpg 压缩格式,以减小页面下载数据量。<img />标记要增加width, height,以免图像不能正常显示时,出现页面混乱现象。
(2)在页面尽量少使用图片,只在必要的情况下使用图片,图片大小最好不要超过8KB。
(3)图片统一放在images文件夹下面。
<wbr></wbr><wbr></wbr>
1.5 多媒体元素约定
(1)如页面采用动画活跃网页,须避免动画过大,尽量减少用户浏览等待时间。整页用到flash动画或SilverLight程序,要考虑到flash动画或SilverLight程序界面与页面的融合统一。
1.6 网页布局
(1)各主要栏目之间要求使用一致的布局,包括一致的页面元素,一致的导航形式,使用相同的铵钮,相同的顺序,可跟首页有变化。
<wbr></wbr>
1.7 网页注释
1.7.1、HTML注释注释规范
所有的注释文字一律使用简体中文。注释格式为<!--这里是注释-->感叹号后面2个横线,结束时2个横线,不要在注释内容中使“--”,“--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是错误的:
<!--这里是注释-----------这里是注释-->
<!-----------这里是注释-----------这里是注释----------->
<wbr></wbr>
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编码,避免因为编码问题而造成页面结构混乱。
<wbr></wbr>
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和((左括号)之间应有一个空格。如果省略了空格,否则会让人感觉函数名叫作 function。
(9)变量名和方法名应以小写字母开头,与JS本身的命名一致。
(10)尽量使用{}代替new Object()。使用[]代替new Array()。
(11)eval是JavaScript中最容易被滥用的方法。避免使用它。
(12)不要使用Function构造器。
(13)不要给setTimeout或者setInterval传递字符串参数这种做法