泉州V23网络为您的企业打造精品网站:  800元起"网站建设+精美网页设计+搜索引擎推广"服务!! 7*24咨询:13559567956
网站建设客户中心联系我们网站地图
 
V23首页网站制作网站推广域名空间付款方式联系我们
网站建设相关文章

网站技术规范

 一、前言 

编写"网站技术在线"网站技术规范的目的是为自己提供网站建设和维护的技术规范,改善"网站技术在线"网站的总体质量和更新效率。不仅为此,我想为各位网友展示网站建设的标准化(当然我也只是提供一个参考)。个人网站有自己的风格与爱好,也正是个性的存在体现出网站的魅力,但如果过分的自由发挥,想到什么做什么,将给整个网站日后的管理和维护带来混乱,这就好象当年面向过程编程思想出现前,程序设计陷入了紊乱的泥潭,无数优秀程序员在其中苦苦挣扎,还是被其淹没一样,网站的管理和维护将陷入无休止的修补中。 
本文提到的规范并非一成不变的,可根据具体情况变通的,随着web技术的发展,新的技术应用,规范也会随之变化的。 
 
二、网站的总体组织结构 

为了便于网站的维护,以下是网站的总体组织结构的规范: 
 
1、网站的组织 

一个组织结构良好的网站既是一个便于管理的网站。网站的预先规划一定要做好,文件、目录的命名既要符合www服务器的规定,又要清晰有逻辑性。如有的网站后缀要求为“.html”,而非“.htm”。 
.目录结构不要太深,因为太深的目录结构会导致较长的URL。 
.强烈建议有页面增加简短注释语。便于以后的更新和增加网页的易读性。而注释并不会下载至客户端,不影响浏览速度. 
.多数页共有的部分置于SSI(Server Side Include)包含文件中,如每页的头部、尾部导航条,版权信息和广告条。这样做的目的是方便以后的更改,如要更改导航条的链接,只需修改SSI文件即可,提高了效率。由于个人网站不能够自己确定SSI包含文件,它需要服务器端配置,所以可以用Dreamweaver提供的Library库文件的包含功能,达到相同的效果。 
.采用外链的CSS(Cascading Style Sheet),对CSS的引用统一为<link rel=stylesheet"/etc/81channel.css">。 
.建议多数页面共有的javascript或Vbscript采用外链。这样可以减少浏览器读代码的时间。 
.不要用嵌套超过3层的表格和太复杂的表格.嵌套表格太多,浏览器解释html代码的时间越长,正确显示页面的时间越长.我们可以注意到很多网站先显示上面部分,再逐渐显示下面的内容,其实就是用表格造成的. 

2、目录结构 

.原则上,相近的内容放在同一目录下,目录名总以小写的英文字符串命名且不含空格和特殊字符(下划线和破折号除外),最好不要超过8个字符。 
.网站根目录下包含以下几个目录: 
library 本网站的共享文件如所有的SSI、CSS和Librsry文件置于本目录下。 
images 本网站的共享的图片及主页的图片置于本目录下。 
scripts 本网站所有的asp、php等脚本和cgi程序置于此目录中。 
zh_cn 本网站的简体中文版置于此目录下。 

下面对zh_cn目录结构做详细分解: 

column_name 本网站某频道的相关内容置于此目录下(其下可以填加如images的图片子目录) 

右边为网站目录结构的图示: 
http://go5.163.com/~wtonline/zh_cn/web/images/stucture.gif 

.对目录级资源的引用在url的尾部要有下划线,以避免服务器的重定向,从而节省时间。如: 
<a href="dirctory/">next</a> 

3.文件、目录命名规则: 

.所有的文件、目录的命名总以小写的英文字符串命名且不含空格和特殊字符(下划线和破折号除外),最好不要超过8个字符。 
.所有的html文件后缀统一为“.htm”,其它文件的后缀使用相应的格式,如:.php、.jpg等。 
.文件名用代表其含义的英文单词,不易翻译的用关键字拼音。 

4、url链接 

.概念定义: 

带域名的绝对路径链接,如: 
<a href="http://www.81channel.com/index.htm";>81Channel首页</a> 
不带域名的绝对路径链接,如: 
<a href="/zh_cn/index.htm">81Channel首页</a> 
(注意路径前有“/”) 
相对路径链接,如: 
<a href="zh_cn/index.htm">81Channel首页</a> 
.本网站引用网站内部的资源采用的相对路径链接,引用别的资源采用带域名的绝对路径链接,尽量不用不带域名的绝对路径链接,因为我不能了解提供个人主页的网站的设置,为保险起见。 
.链接别的资源采用域名而不用IP地址的形式。非要用IP地址的话,这IP地址必须是Internet的合法地址。 
.绝对不能用下列形式的链接(图片的src也不能用此形式): 
<a href="file:///c%7c/my document/test.htm">测试链接</a> 
----以上链接用的是file://本地驱动器,对用户而言是不可见的。 

5、信息的反馈 

由于个人网站一般不支持asp、php或cg缓i,既是表单提交只好采用邮件地址链接的形式,如:action="mailto:wtonline@chinese.com" 

三、页面设计规范 

整个页面的设计可分为7部分:网站标识(logo),频道标题,日期,导航,广告,内容区,版权信息。 

1、标识(logo) 

标识是品牌的象征,突出网站鲜明的个性、整体的构思,标识统一置于左上角,文件名为"\images\logo.jpg",各频道可以有自己的logo标识,要突出频道的特色。 

2、频道标题(title) 

采用图片形式,其链接采用热点地图链接,在dreamweaver中可以非常方便的设置热点链接. 

3、日期 

日期部分采用javascript脚本编程显示; 

4、导航 

.导航要简单、清晰、开放、逻辑性强,不要用超过3层的链接,又不是做商业网站追求PV,节省用户宝贵的时间。 
.用于导航的文字要简明扼要,含盖的范围不要太广,且应限制在一行以内。 
.保证每页都有到网站首页的链接,利?*** istory面版返回,不要堆砌太多的链接,让用户无所侍从。 
.突出最近更新的信息,可以加上更新时间或New标识。 
.页面顶部和尾部导航条代码放在Library库文件highchannel.lbi和lowchannel.lbi中,分别引用。 

5、广告 

由于本网站是个人网站,所以必须有提供空间的网站的广告,如163、263的logo,尽量把它放置于一单独的弹出式窗口中,如下形式调用:window.open(para参数表) 

6、内容区(content) 

.正文内容全部定义为9pt大小(不能为默认),标题为加粗的10pt,其字体为默认字体(让用户自己决定)。 

7、版权信息 

纯粹是为了避免下面的内容太空,加上它,不仅充实了内容,而且使网站看上去比较规范。 

8、其它注意事项 

.设计工具用Dreamweaver3.0、Flash、Photoshop等。 
.页面要兼容两种浏览器,但以IE为主。(像Layer层技术就不能用了,Netscape不支持) 
.整个页面布局合理,保持均衡,但又要突出重点。 
.一般,页面背景用浅色和纯色且直接用16进制颜色定义,不要用色图定义。 
.每个页面都要定义简明准确的Title。 
.保持干净的html代码,可以自动和手动清除多余tag。 
.页面的长度<=3屏,建议采用锚链接(anchor)到其它页或用分页显示,并增加“上一页”、“下一页”等的链接 
.页面的宽度<=1屏。 
.建议整个页面大小(含图片)<60k,html代码部分<40k,测试其下载时间<=15秒(33.6kb/s) 
.图片的尺寸<150*150像素,从性能角度考虑,分别采用.jpg和.gif格式。同时,图片要用Firework等专用工具“减肥”处理,其大小<=6k。 
.图片要与文本内容相关,图片的尺寸大小要与内容文本保持均衡。 
.正在建设的网页,不开通其链接,不要链接到“正在建设中”等一类的页面。 
.不要使用BLINK标记。 

四、Html编码规范 

.建议采?*** TML4.0规范。 

1、meta标记 

meta提供一些搜索引擎可以利用的信息,搜索引擎主要使用两个属性Description和Keywords,如: 
.<meta name="description" content="在这里描述网站的特性"> 
.<meta name="keywords" content="关键字、关键字、etc..."> 
.另外还有三种非常有用的meta标记: 
.<meta http-equiv="content-type" content="text/html;charset=gb2312"> __定义字符集 
.<meta http-equiv="pragma" content="no-cache">    __禁止使用页面缓存 
.<meta http-equiv="refresh" content="10;URL=http://www.163.com"> __10秒钟后自动重定向到http://www.163.com 

2、专用标记的使用规定 

为了保证页面对浏览器的兼容性,不要使用某种浏览器专用的标识,如:marquee,layer,nobr等等。 

3、Frame 

不建议使用Frame帧结构,因为Frame不便于维护且容易迷惑用户,只有在使用比如聊天室之类的特殊页面时才采用。 

4、表格 

.再次强调不要使用太多的嵌套表格和复杂的表格。 
.表格的定义使用像素。不要采用百分比,因为它会因为屏幕的大小自动调整。 

5、图片 

.所有的图片都要定义高度和宽度,并加替代文本即要定义Alt="替代文本",同时替代文本要与主题一致。 
.在使用<a href=...这样的标识时,如果包含图象,中间不要加回车符,应使之保持在一行内。 

五、高级Web技术使用规范 

在使用一些先进的Web技术时,原则是:保证下载速度,浏览器兼容性,照顾多数的用户。 

.不限制javascript或Vbscript的使用,但是不同浏览器对其支持不同,注意其兼容性,并做测试。 
.复制外来的javascript时,要检查其安全性。 
.使用cgi是要考虑其安全性和效率,尤其使用某些免费的cgi程序是,一定要先反复测试。 
.cookie用于识别、跟踪和支持访问者,通过cookie你可以了解用户的访问路径,收集和存储用户的喜好,但要考虑到用户关闭cookie的情况处理,非要用cookie,应提供全面的解决办法。 
.强烈推荐使用flash动画,不仅生成的文件小,而且效果很好。 
.Java是一种跨平台的面向对象的编程语言,它在Web中的应用主要是Java Applet,但是Java Applet的下载速度较慢,谨慎使用。 
.php是一种跨平台的服务器端嵌入式脚本语言,将php模块编译进Web服务器,执行效率较高,建议使用。 
.在服务器端,最好打开SSI解析,但不要使用过多的SSI嵌套。不能使用SSI时,可以用include Library(包含库文件)代替,效果要差一些。 
.网站采用外链CSS文件81channel.css,便于统一网站的风格和修改风格。 

六、质量保证 

网站设计好后,在没改版前,所有的变动仅限于主页的正文栏目和相应的内容细节文档,内容细节文档是在模版可编辑区上变动。模版一旦设计好后,所有的工作都应在模版上进行。 

.谨慎对首页、频道和内容细节模版的改动。 

1、频道发布的流程 

.在Wps2000上对原始文档进行生成、编辑,得到beta 1,拷贝到剪贴版中。 
.在Dreamweaver上打开内容细节模版,使用Ctrl+shift+V粘贴beta 1,进一步进行编辑,另存为文档。 
.打开首页、频道模版,填加相应的文档链接,保存即可。 
.清理多余的图片和HTML代码,并用Dreamweaver初检链接情况,注意链接的问揭蟆? 
.测试环境(即服务器环境)为Win2000+IIS5.0或Linux+Appache环境,分别测试其具体表现。 

2、重点测试项目 

.下载时间测试,采用33.6kb/s的modem,主要对首页测试,建议下载时间<=20秒。 
.浏览器兼容性测试,主要是IE4.0/5.0,NETSCAPE4.0以上。 
.链接测试,主要在编辑时就做好链接测试。 
.导航、页面布局、内容合法和正确性等项目测试。 

3、网站更新 

.日常网站的更新只能用Dreamweaver的模版功能,保证生成页面的规范性和代码的简洁。(目前我在准备用php编一个内容编辑器,类似商业网站的新闻编辑器,有兴趣或有相关资料的朋友请与我联系,谢谢!) 
.更新模版时要对原始模版备份,便于失误后及时的恢复。 
.当网站有大的改变时,如页面风格、导航、功能的变化,应及时备份和测试。