我把我写出的一些规范发出来,大家提提建议好吗?
1.1 目录结构规范
q 目录建立的原则:以最少的层次提供最清晰简便的访问结构。
q 目录的命名以小写英文字母,下划线组成。(参照命名规范)
q 根目录一般只存放Default.aspx或者Index.html以及其他必须的系统文件。
q 每个主要栏目开设一个相应的独立目录。
q 根目录下的images用于存放各页面都要使用的公用图片,子目录下的images目录存放本栏目页面使用的私有图片。
q 所有JS脚本存放在根目录下的scripts目录。
q 所有CSS文件存放在根目录下style目录。
q 所有flash, avi, ram, quicktime等多媒体文件存放在根目录下的media目录。
1.2 文件命名规范
q 文件命名的原则:以最少的字母达到最容易理解的意义。
q 一般文件及目录命名规范:每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm。
q 文件名称统一用小写的英文字母、数字和下划线的组合,尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们),多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm。
q 图片的命名规范 :名称分为头尾两两部分,用下划线隔开。头部分表示此图片的大类性质。例如: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner ;标志性的图片我们取名为:logo;在页面上位置不固定并且带有链接的小图片我们取名为button;在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu;装饰用的照片我们取名:pic;不带链接表示标题的图片我们取名:title 依照此原则类推。尾部分用来表示图片的具体含义,用英文字母表示。例如:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.。有onmouse效果的图片,两张分别在原有文件名后加"_on"和"_off"命名。
q 其它文件命名规范:js的命名原则以功能的英语单词为名。例如:广告条的js文件名为:ad.js。
1.3 首页代码规范
q 首页的代码关键在head区,head区是指首页HTML代码的<head>和</head>之间的内容。head区必须加入的标识。比如,网页显示字符集——简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">;原始制作者信息 <META name="author" content="webmaster@yoursite.com"> ;网站简介 <META NAME="DESCRIPTION" CONTENT="这里填您网站的简介"> ;搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2,关键字3,..."> ;网页的css规范 <LINK href="style/style.css" rel="stylesheet" type="text/css"> ;网页标题 <title>网页标题</title>;如果使用的是母版页也应该设置Title属性。
q 设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 。
q 禁止浏览器从本地机的缓存中调阅页面内容。<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 。
q 用来防止别人在框架里调用你的页面。<META HTTP-EQUIV="Window-target" CONTENT="_top"> 。
q 自动跳转。<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">。5指时间停留5秒。
q 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。<META NAME="robots" CONTENT="none"> CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
q 收藏夹图标。<link rel = "Shortcut Icon" href="favicon.ico"> 。
q JS调用规范。所有的javascript脚本尽量采取外部调用。 <SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT> 。
q CSS书写规范。所有的CSS的尽量采用外部调用。 <LINK href="style/style.css" rel="stylesheet" type="text/css"> 。
q 书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived 要按照顺序写)便于自己和他人阅读。
q 为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。
q 推荐使用主题。
q CSS推荐模板。
<style type="text/css">
<!—
p { text-indent: 2em; }
body { font-family: "宋体"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: "宋体"; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #0000FF; text-decoration: none}
a:visited { font-size: 9pt; color: #990099; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9900; text-decoration: none}
.blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
</style>
q body标识。为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF">
1.4 尺寸规范
q 屏幕设置为800*600/1024*768。
q 页面长度原则上不超过3屏,宽度不超过1屏。
q 全尺寸banner(横幅)为468*60px,半尺寸banner为234*60px,小banner为88*31px,另外120*90,120*60也是小图标的标准尺寸。
q 每个非首页静态页面含图片字节不超过60K,全尺寸banner(横幅)不超过14K。
q 为了优化性能,尽量使用Css来美化页面。页面上尽量不使用图片,尤其是大图,需要使用图片,尽量将大图切成小图。
q 导航要简单、清晰,建议不超过3层的链接。
q 用于导航的文字要简明扼要,字数限制在一行以内。
q 首页,各栏目一级页面之间互链,各栏目一级和本栏目二级页面之间互链。
q 超过三级页面,在页面顶部设置导航条,标明位置。
q 突出最近更新的信息,可以加上更新时间或New标识。
q 连续性页面应加入上一页,下一页按钮。
q 超过一屏的内容,在底部应有go top按钮。
q 超过三屏的内容,应在头部设提纲,直接链接到文内锚点。