网站制作规范

来源:百度文库 编辑:神马文学网 时间:2024/03/29 03:34:54
   网站制作规范  

本规范针对网页开发人员编写,在阅读前请先了解一些XHTML、CSS的基本知识,以方便理解编写的内容。本规范的目的是为了方便大家在开发过程中,通用的、易于维护、高效率的制作WEB界面。由于本规范编写者个人水平的局限,可能会出现 错误 与 个人习惯差异的地方,敬请个人读者多提宝贵见意来完善本规范的内容。

  
一 命名规则:

01. 目录:
   除非有特殊情况外,目录 应使用 小写字母(包含 数字 下划线) 的组合,并且以字母开头其中不得包含汉字、空格与特殊字符,否则在网页读取过程中可能会出现错误;
   目录命名 请尽量以 英文为指导,不到万不得已不要以拼音作为目录名称,经验证明用拼音命名的目录往往连一个月后的自己都看不懂;
   以下为一些常用目录的推荐英文名称:

images 放网站不同栏目的页面都要用到的公共图片
medias 放 flash、avi、quick time 等多媒体文件
commons 放 js、include 等公共文件
styles 放 css 样式文件
temps 放一些策划与设计中使用的原始资料与备份文件
  
    在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个 images 和 medias 的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
   temps目录中的文件与网上无关,请杜绝非内容的上传。
  
02. 文件:
   除非有特殊情况外,文件命名 应使用 小写字母(包含 数字 下划线) 的组合, 并且以字母开头其中不得包含汉字、空格与特殊字符;
   文件命名 请尽量以 英文 为指导,不到万不得已不要以拼音作为目录名称;
   内容不同但属于同类的,且需定期更新的页面文件或文本采用,请使用名称缩写+(年份)+月份+日期+序号,如:detail_news060101.html
   以下为一些常用文件命名的格式推荐:

首页类文件 index(_xxxxxx).后缀名 [index_wealth.html]
列表类文件 list(_xxxxxx).后缀名 [list.jsp]
内容类文件 detail(_xxxxxx).后缀名 [detail.jsp]
表单类文件 post(_xxxxxx).后缀名 [post.jsp]
表单反馈类文件 result(_xxxxxx).后缀名 [result.jsp]
图片类文件 文件类型_xxxxx(图片序号)(背景).后缀名 (详见以下)
广告图片动画类文件 xxxxxx_widthxheight.后缀名 (详见以下)
  
03. 图片文件:
   透明的1x1像素图片名称为:c.gif
   图片的分类及命名规则:

广告类 banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf
标志类 logo logo.gif | logo_newyear2007.gif
按钮类 button button_01.gif | button_01bg.gif
菜单类 menu menu_aboutus.gif | menu_job.gif
装饰类 pic pic_01.gif | pic_02.gif
栏目类 title title_top01.gif | title_top02bg.gif
  
二 设计规范:

01. 整体规范:
   主体框架页面、内容页尽量采用方型结构。禁用长距离的斜线及弧线结构,可允许小范围内的斜线及弧线。但封面页、专题页可不受此限制。
  设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧,拐角可以有曲线变化。拐角块最大不得超过18像素。同一页面弧度尽量保持一致。
   统一按显示器分辨率暂为 1024×768px 来设计页面,所以使用最大宽度 900px进行设计。
  网站页面长度建议1屏半到2屏。原则上长度不超过3屏,宽度不超过1屏。根据用户习惯和网站需要,站点首页、分栏首页可设计超过3屏。
   设置模块外间距与内间距的时候,建设使用5px来设置。
  
02. 图片标准尺寸:
   除了布局类文件没有限制外,其它的广告、产品等图片,基本满足以下三种规格:

  1x1 => 正方比例;
  4x3 => 黄金比例;
  另外还有一种的特定图片尺寸。
  
   以下为一些常见图片的推荐尺寸:

  全尺寸banner => 468×60px;
  半尺寸banner => 234×60px;
  产品缩略图片 => 100×75px;
内容图片 => 50×50px 120×90px
  
   图片文件大小一般保持在 5k 以内;大尺寸的banner文件大小保持在15k 以内。
   图片文件在设计新注意,尽量使用单一的尾数值0与5,比如:325 410。这样有利于提高工作效率。
  
03. 文字规范:
   网页中总体上使用:

字体 font-family:Arial, Helvetica, sans-serif
字号 font-size:12px
字色 color:#000
  
  大字体设置上请多使用双尾数值,比如 12px 14px 16px 22px:

一般标题宋体 粗体12px
模块标题宋体 粗体14px
内容标题宋体 粗体16px
  
   文字的行间距也请多使用双尾数值:

12号字体常用行间中距 18px│20px│22px
14号宋体常用行间中距 24px│26px│28px
  
   文字的颜色请使用216安全色,方便定义和规范颜色,即类似于 "#000000 | #CC6666 | #66CCFF"
  
04. 链接规范:
   新闻、信息类通常用新开窗口方式打开。
   顶部导航、底部导航通常采取在本页打开,特殊栏目和功能可新开窗口。
   链接带下划线为链接通常的默认风格,顶部导航或特殊位置为了观赏性可用样式表取消下划线。
  链接的颜色可配合主题颜色风格改变,通常为蓝色、暗蓝色、黑色,但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。
  
三 XHTML制作规范: 01. 制作规范总论:
  每个网页都应注明 DTD 版本信息,并且放在网页的最上面。
   所有xhtml标签都必须使用小写,并且必须有属性值,且加双引号。
   所有xhtml标签都必须闭合。
   "网页大小"定义为网页的所有文件大小的总和,包括html文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户,网页大小保持在70K以下为合适,40K以下更好。
   为了更好的控制代码长度与代码的可读性,尽量使用手写代码来完成书写,并且使用tab来控制代码缩进(严禁使用空格键)。
   所有的文件联接与链接都使用绝对路径的形式,如:/news/detail.asp?id=1111
  在制作页面时,请先全局性的了解一下页面的结构,然后按粗放到细致的顺序去完成页面。最后是同一栏目使用同时制作,从而减少CSS的代码量。
  
02. 网页文件通用模板:

   
  
  
  
  
  
  
  
  
  
  
03. 页首head区代码规范:

   网站简介:
   搜索关键字:
   搜索机器人: (all,none,index,noindex,follow,nofollow)
   网页著作者:
   网页版权注释:
   网页定时跳转:

   网页间转换时加入效果:
  
  收藏夹图片:
  
  RSS文件代码:
  
  
04. CSS调用规范:

  
   所有的css的尽量采用外部调用:
   代码较长的首页和重要栏目首页可直接内嵌css,避免调用时间太长,使页面未及时调用css风格而显得凌乱。
   某些独立存在的单页也可以使用以上的方法。
   在类似换模板的css调用时,请遵守前后顺序的规定。
  
05. JS调用规范:

  
   所有的javascript脚本尽量采取外部调用:
   某些独立存在的单页也可以使用直接内嵌JS。
   JS的编写每个人都有自己的习惯用法,这是没有办法统一的,所以请在编写时多加一点注释信息,以方便其它同事可以读懂与修改。
  
06. img标签规范:

  
   所有img标签除了程序控制宽高值外,都应该 width="" height="",这样在图形文件未被读取时,保证浏览器预留图形占用的空间,防止网页最终显示时出现抖动现象。
   所有带链接的img标签都应该 border="0"。
   一般img标签都应该设置 alt="",alt的内容尽量贴近图的内容。
  
07. a标签规范:


   所有a标签都应该有 title="" 的值,title的内容尽量贴近链接的内容。
   除了默认的链接CSS,其它的特别链接都应该有自己的class值,以方便其它链接调用。
   希望可以使用三段式的CSS设置,未点前 | 点击中 | 已点后 这三种状态,以方便用户可以清楚的知道那些是已经点过的。
   一般链接到某一目录下的缺省文件的链接路径不必写全名,如:
可以写为
  
08. form标签与表单相关标签规范:
  
ion="">


maxlength="" // 允许输入的最大宽值
checked="checked" // radio checkbox类型中的选中
disabled="disabled" // 灰色不可选
readonly="readonly" // 只读

size="" // 拉长转为高度状态
multiple="multiple" // 可复选

selected="selected" // 默认值

rows="" // 高度
cols="" // 宽度


  
   其中灰色文字代表的是可以选择性输入的部分。
   所有form标签都应该有 method="" 的值,默认请使用post。
   可以使用label标签来关联表单标签。
   可以使用table标签来控制表单的内容形式。
  请尽量把form标签放在table中间使用,如:

  
09. table标签规范:
  























  
   使用div+css并不代表不可以再使用table,只是table不在用于结构与布局。
    除了以下几个table标签属性外,其它的table标签属性最好放弃使用,因为其存在兼容性问题。
   以下为表格的嵌套格式:
  1.) 对于单独的一个来说,
对齐,的
缩进一个tab。
   2.) 对于存在
来说,
与对齐,缩进一个tab。
  3.) 如果结束标记应该与
中没有任何嵌套的表格,处于同一行,不要换行。
  4.) 如果
中出现嵌套表格,下面的缩进一个tab。
  5.) 如果下内有一个来设置表头。
   可以使用来设置表体。
   可以使用来设置表尾。
  
10. 列表相关标签规范:
  













  •   
       使用
  • 等格式控制时必须加注
      ,不准单独使用

    •    在一般情况下,列表中的margin padding 都应该在css中设置为0,list-stype设置为none。
         文字 + 行高 + 列表头控制 + 列表头图片 统一写入样式,列表头符号不加链接。
        
      11. 其它:
         为swf设置一个 就可以解决swf总是浮动在总最上面的问题了,但同时在制作swf动画时,按实际需要设置一个实色的底色框。
         因为marquee的兼容性问题,所以请暂停使用本标签,可以使用javascript来完成滚动。
         font标签也已经被w3c抛弃,所以建议用CSS来替换使用。
        
      四 CSS制作规范:
      01. 一般常用CSS样式的范本:
        
        * { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
        ul, ol, menu, dl { list-style:none; }
        p {text-indent:2em;}
        a:link { color:#333; text-decoration:none; }
        a:visited { color:#333; text-decoration:none; }
        a:hover { color:#C60; text-decoration:underline; }
        a:active { color:# C60; text-decoration:underline; }
        
      02. 常用CSS缩写形式:
         字体缩写:
        font : font-style || font-variant || font-weight || font-size || line-height || font-family
        font:normal normal normal 12px/18px 宋体;
        
         背景缩写:
        Background : background-color || background-image || background-repeat || background-attachment || background-position
        background:red url(images/bg.gif) repeat-y top right;
        
         列表缩写:
        list-style : list-style-image || list-style-position || list-style-type
        list-style:url(images/icon.gif) 0 0;
        
         边框缩写:
        border : border-width || border-style || border-color
        border:1px solid black;
        
         Box模形缩写:
        (上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 这几种表现方式。
        
         color缩写:
        如果使用216安全色,就可以使用 #FFF, #F06这样的表达形式了。
        
      03. 常用布局形式:

        为了兼容IE6、Firefox,在布局的时候请使用以下格式:
         居中:margin:0 auto;
         居右:margin:0 0 0 auto;
         居左:margin:0 auto 0;
         左浮动:float:left; clear:left;
         右浮动:float:right; clear:right;
        
      04. CSS语意性设置:

        

      可以设置为与网页的 title 一样,不过可以通过 display:none; 隐藏,这样做可以方便搜索引擎的提取;
        

      可以设置文章的标题;
        

      可以用于分栏目的标题;
        

      可以放置文章的内容;
        

      可以用来做一层的菜单;
        
      可以用来做二层的菜单;
        
      05. CSS常用命名规则:

        命名 含义 命名 含义 命名 含义
        header 头部 container 内容部分 footer 尾部
        nav 导航 menu 菜单 crumb 当前位置
        left 左侧部分 center 中间部分 right 右侧部分
        login 登录 regsiter 注册 search 搜索
        
        
      06. CSS设置的注意事项:

         Hack的问题:您永远也不知道下一次浏览器升级,它是否还不支持或支持原来的hack代码,所以为了考虑兼容的问题,请不要使用hack来设置CSS。
         !important的问题:同上,现ie7已经支持!important了。
        应当十分注意兼容性,应当在ie6、ie7、firefox、opera浏览器上测验通过。(需要解决ie7与ie6共存的问题)
         可以多使用CSS的子对象的继承关系,但希望继承关系不超出三层。
        
      07. CSS设置小技巧:

        在使用border来设置box的时候,在ie中会出现外边框消失的问题,所以请在xhtml中设置box的高度,这样就可以解决这个问题。另外box设置高度也可以解决原来需要通过数据来撑开box的问题。
         在使用padding来设置box的时候,其实际宽度 = width + padding[左右]。
         在图片的菜单中,可以放入文字的内容,并通过text-indent:-999 隐藏,这样可以让不使用CSS的浏览器也可以使用菜单的内容,同时也方便了搜索引擎的提取。
         可以在使用span标签来实现一些排版的辅助,如:
        

          
      • 商务新版上线测试2007.03.09

      •   
      • 商务新版上线测试2007.03.09

      •   

      然后在CSS定义span为右浮动,来实现日期与标题的分栏显示效果。
        
      五 搜索引擎优化:

        使用flash或者图片作为导航菜单的时候,会影响搜索引擎对其内容的搜索,所以可以使用图片替换文字的方式来做导航菜单,方法见(四06)
         每个分栏都应该精心设计其的meta标签、meta关键字。
        
      六 其它:
      01. 通用字符字体:
      实体 表现 含义 实体 表现 含义
      " " 引号 & & &号
      < < <号 > > >号
      版权所有 ? ? 注册
      空格

    • ,并且没有任何嵌套,可以让
      都处于同一行中。
         原则上,不赞同使用超过三次的table嵌套,如出现这样的样式,都尝试使用div等其它方式。
        嵌套的表格大小尽量给定width和height数值,以便于浏览器加快解释的速度,以下为设置宽高的基本原则,一行或一列都只存在一个width或height的值,做到只需修改一个值就可以让页面出现变化:
        1.) 对于宽,可以只设置第一行的td宽。
        2.) 对于高,可以只设置第一列的td高。
         td有背景颜色,但无实质性内容的设置:
        1.) 定义width<10px 且 不定义height 时,写入

        2.) 不定义width 且 定义height<10px 时,写入""。
        3.) 定义width<10px 且 定义height<10px 时,写入""。
         可以使用
      来设置表的描述。
         可以使用