网页设计规范总结

在网站建设过程中，网页页面设计是网站制作的前端基础工作，遵循以下网页制作标准，遵循W3C标准，兼容多浏览器，提升用户体验，增强用户粘度。
1.1网页基本设计要求（网站建设尺寸规范）
网站的页面分辨率要保证页面在1024*768分辨率下没有横向滚动条。
1.2 HTML文件结构
HTML结构参考：










页面内参考以下原则：
（1）静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰。
（2）页面一律采用UTF-8编码，避免因编码不一致而导致页面乱码。
（3）非特殊情况下必须把CSS外部链接放到页面的顶部（… 标签之间）。
（4）非特殊情况下必须把JS代码或外部链接放到页面的底部（标签之后），工具类JS嵌入的JS文件除外。
（5）书写链接地址时，必须避免重定向，例如：href="https://www.doczj.com/doc/fd8591104.html,/" ,即须在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和((左括号)之间应有一个空格。如果省略了空格,否则会让人感觉函数名叫作 function。
（9）变量名和方法名应以小写字母开头，与JS本身的命名一致。
（10）尽量使用{}代替new Object()。使用[]代替new Array()。
（11）eval是JavaScript中最容易被滥用的方法。避免使用它。
（12）不要使用Function构造器。
（13）不要给setTimeout或者setInterval传递字符串参数这种做法