网站技术规范

1、附录（四）网站技术规范目录： 一、前言 二、网站的总体组织结构 三、页面的设计规范 四、html编码规范 五、高级web技术的应用规范 六、质量保证 一、前言 编写"网站技术在线"网站技术规范的目的是为自己提供网站建设和维护的技术规范，改善"网站技术在线"网站的总体质量和更新效率。不仅为此，我想为各位网友展示网站建设的标准化（当然我也只是提供一个参考）。个人网站有自己的风格与爱好，也正是个性的存在体现出网站的魅力，但如果过分的自由发挥，想到什么做什么，将给整个网站日后的管理和维护带来混乱，这就好象当年面向过程编程思想出现前，程序设计陷入了紊乱的泥潭，无数

2、优秀程序员在其中苦苦挣扎，还是被其淹没一样，网站的管理和维护将陷入无休止的修补中。 本文提到的规范并非一成不变的，可根据具体情况变通的，随着web技术的发展，新的技术应用，规范也会随之变化的。 二、网站的总体组织结构 为了便于网站的维护，以下是网站的总体组织结构的规范： 1、网站的组织 一个组织结构良好的网站既是一个便于管理的网站。网站的预先规划一定要做好，文件、目录的命名既要符合www服务器的规定，又要清晰有逻辑性。如有的网站后缀要求为“.html”，而非“.htm”。 n 目录结构不要太深,因为太深的目录结构会导致较长的URL。 n 强烈建议有页面增加简短注释语。便于以后的更新和增加网页的

3、易读性。而注释并不会下载至客户端,不影响浏览速度. n 多数页共有的部分置于SSI（Server Side Include）包含文件中,如每页的头部、尾部导航条，版权信息和广告条。这样做的目的是方便以后的更改，如要更改导航条的链接，只需修改SSI文件即可，提高了效率。由于个人网站不能够自己确定SSI包含文件，它需要服务器端配置，所以可以用Dreamweaver提供的Library库文件的包含功能，达到相同的效果。 n 采用外链的CSS（Cascading Style Sheet），对CSS的引用统一为<link rel=stylesheet"/etc/81channel.css

4、">。 n 建议多数页面共有的Java或Vb采用外链。这样可以减少浏览器读代码的时间。 n 不要用嵌套超过3层的表格和太复杂的表格.嵌套表格太多,浏览器解释html代码的时间越长,正确显示页面的时间越长.我们可以注意到很多网站先显示上面部分,再逐渐显示下面的内容,其实就是用表格造成的. 2、目录结构 原则上，相近的内容放在同一目录下，目录名总以小写的英文字符串命名且不含空格和特殊字符（下划线和破折号除外），最好不要超过8个字符。 n 网站根目录下包含以下几个目录： n library 本网站的共享文件如所有的SSI、CSS和Librsry文件置于本目录下。 n images 本

5、网站的共享的图片及主页的图片置于本目录下。 n s 本网站所有的asp、php等脚本和cgi程序置于此目录中。 n zh_cn 本网站的简体中文版置于此目录下。 下面对zh_cn目录结构做详细分解： column_name 本网站某频道的相关内容置于此目录下（其下可以填加如images的图片子目录） 右边为网站目录结构的图示： .对目录级资源的引用在url的尾部要有下划线，以避免服务器的重定向，从而节省时间。如： <a href="dirctory/">next</a> 3.文件、目录命名规则： n 所有的文件、目录的命名总以小写的英文字符串命名且不

6、含空格和特殊字符（下划线和破折号除外），最好不要超过8个字符。 n 所有的html文件后缀统一为“.htm”，其它文件的后缀使用相应的格式，如：.php、.jpg等。 n 文件名用代表其含义的英文单词，不易翻译的用关键字拼音。 4、url链接 .概念定义： 带域名的绝对路径链接，如： <a href=" 不带域名的绝对路径链接，如： <a href="/zh_cn/index.htm">81Channel首页</a> (注意路径前有“/”) 相对路径链接，如： <a href="zh_cn/index.htm"

7、;>81Channel首页</a> 本网站引用网站内部的资源采用的相对路径链接，引用别的资源采用带域名的绝对路径链接，尽量不用不带域名的绝对路径链接。 n 链接别的资源采用域名而不用IP地址的形式。非要用IP地址的话，这IP地址必须是Internet的合法地址。 n 绝对不能用下列形式的链接（图片的src也不能用此形式）： n <a href="file:/c%7c/my /test.htm">测试链接</a> n -以上链接用的是file:/本地驱动器，对用户而言是不可见的。 5、信息的反馈 一般对于个人网站不支持asp、php或

8、cg缓i，既是表单提交只好采用邮件地址链接的形式，如:action="mailto:wtonline" 三、页面设计规范 整个页面的设计可分为7部分：网站标识（logo），频道标题，日期，导航，广告，内容区，版权信息。 1、标识（logo） 标识是品牌的象征，突出网站鲜明的个性、整体的构思，标识统一置于左上角，文件名为"imageslogo.jpg"，各频道可以有自己的logo标识，要突出频道的特色。 2、频道标题（title） 采用图片形式，其链接采用热点地图链接，在dreamweaver中可以非常方便的设置热点链接. 3、日期 日期部分采用Java脚

9、本编程显示； 4、导航 n 导航要简单、清晰、开放、逻辑性强，不要用超过3层的链接，n 用于导航的文字要简明扼要，含盖的范围不要太广，且应限制在一行以内。 n 保证每页都有到网站首页的链接，利用History面版返回，不要堆砌太多的链接，让用户无所侍从。 n 突出最近更新的信息，可以加上更新时间或New标识。 n 页面顶部和尾部导航条代码放在Library库文件highchannel.lbi和lowchannel.lbi中，分别引用。 5、广告 如果网站是个人网站，所以必须有提供空间的网站的广告，如163、263的logo，尽量把它放置于一单独的弹出式窗口中，如下形式调用：open(para参

10、数表) 6、内容区（content） 正文内容全部定义为9pt大小（不能为默认），标题为加粗的10pt，其字体为默认字体（让用户自己决定）。 7、版权信息 8、其它注意事项 n 设计工具用Dreamweaver3.0、Flash、Photoshop等。 n 页面要兼容两种浏览器，但以IE为主。（像Layer层技术就不能用了，Netscape不支持） n 整个页面布局合理，保持均衡，但又要突出重点。 n 一般，页面背景用浅色和纯色且直接用16进制颜色定义，不要用色图定义。 n 每个页面都要定义简明准确的Title。 n 保持干净的html代码，可以自动和手动清除多余tag。 n 页面的长度<

11、;=3屏，建议采用锚链接（anchor）到其它页或用分页显示，并增加“上一页”、“下一页”等的链接 n 页面的宽度<=1屏。 n 建议整个页面大小（含图片）<60k，html代码部分<40k，测试其下载时间<=15秒（33.6kb/s） n 图片的尺寸<150*150像素，从性能角度考虑，分别采用.jpg和.gif格式。同时，图片要用Firework等专用工具“减肥”处理，其大小<=6k。 n 图片要与文本内容相关，图片的尺寸大小要与内容文本保持均衡。 n 正在建设的网页，不开通其链接，不要链接到“正在建设中”等一类的页面。 n 不要使用BLINK标记。 四

12、、Html编码规范 .建议采用HTML4.0规范。 1、meta标记 n meta提供一些搜索引擎可以利用的信息，搜索引擎主要使用两个属性Deion和Keywords，如： n <meta name="deion" content="在这里描述网站的特性"> n <meta name="keywords" content="关键字、关键字、etc."> n 另外还有三种非常有用的meta标记： n <meta http-equiv="content-type" co

13、ntent="text/html;charset=gb2312"> _定义字符集 n <meta http-equiv="pragma" content="no-cache"> _禁止使用页面缓存 n <meta http-equiv="refresh" content="10;URL=">_10秒钟后自动重定向到http：/ 2、专用标记的使用规定 为了保证页面对浏览器的兼容性，不要使用某种浏览器专用的标识，如：marquee,layer,nobr等等。 3、Fr

14、ame 不建议使用Frame帧结构，因为Frame不便于维护且容易迷惑用户，只有在使用比如聊天室之类的特殊页面时才采用。 4、表格 n 再次强调不要使用太多的嵌套表格和复杂的表格。 n 表格的定义使用像素。不要采用百分比，因为它会因为屏幕的大小自动调整。 5、图片 n 所有的图片都要定义高度和宽度，并加替代文本即要定义Alt="替代文本"，同时替代文本要与主题一致。 n 在使用<a href=.这样的标识时，如果包含图象，中间不要加回车符，应使之保持在一行内。 五、高级Web技术使用规范 在使用一些先进的Web技术时，原则是：保证下载速度，浏览器兼容性，照顾多数的用户

15、。 n 不限制Java或Vb的使用，但是不同浏览器对其支持不同，注意其兼容性，并做测试。 n 复制外来的Java时，要检查其安全性。 n 使用cgi是要考虑其安全性和效率，尤其使用某些免费的cgi程序是，一定要先反复测试。 n 用于识别、跟踪和支持访问者，通过你可以了解用户的访问路径，收集和存储用户的喜好，但要考虑到用户关闭的情况处理，非要用，应提供全面的解决办法。 n 强烈推荐使用flash动画，不仅生成的文件小，而且效果很好。 n Java是一种跨平台的面向对象的编程语言，它在Web中的应用主要是Java Applet，但是Java Applet的下载速度较慢，谨慎使用。 n php是一种

16、跨平台的服务器端嵌入式脚本语言，将php模块编译进Web服务器，执行效率较高，建议使用。 n 在服务器端，最好打开SSI解析，但不要使用过多的SSI嵌套。不能使用SSI时，可以用include Library（包含库文件）代替，效果要差一些。 网站采用外链CSS文件81channel.css，便于统一网站的风格和修改风格。 六、质量保证 网站设计好后，在没改版前，所有的变动仅限于主页的正文栏目和相应的内容细节文档，内容细节文档是在模版可编辑区上变动。模版一旦设计好后，所有的工作都应在模版上进行。 n 谨慎对首页、频道和内容细节模版的改动。 1、频道发布的流程 n 在Wps2000上对原始文档进行生成、编辑，得到beta 1，拷贝到剪贴版中。 n 在Dreamweaver上打开内容细节模版，使用Ctrl+shift+V粘贴beta 1，进一步进行编辑，另存为文档。 n 打开首页、频道模版，填加相应的文档链接，保存即可。 n 清理多余的图片和HTML代码，并用Dreamweaver初检链接情况，注意链接的形式要求。 n 测试环境（即服务器环境）为Win2000+IIS5.0或Linux+Appache环境，分别测试其具体表现。 2、重点测试项目 n 下载时间测试，采用33.6kb/s的modem，主要对首页测试，建议下载时间<