一、前言
編寫”網(wǎng)站技術(shù)在線”網(wǎng)站技術(shù)規(guī)范的目的是為自己提供網(wǎng)站建設(shè)和維護(hù)的技術(shù)規(guī)范,改善”網(wǎng)站技術(shù)在線”網(wǎng)站的總體質(zhì)量和更新效率。不僅為此,我想為各位網(wǎng)友展示網(wǎng)站建設(shè)的標(biāo)準(zhǔn)化(當(dāng)然我也只是提供一個(gè)參考)。個(gè)人網(wǎng)站有自己的風(fēng)格與愛好,也正是個(gè)性的存在體現(xiàn)出網(wǎng)站的魅力,但如果過分的自由發(fā)揮,想到什么做什么,將給整個(gè)網(wǎng)站日后的管理和維護(hù)帶來混亂,這就好象當(dāng)年面向過程編程思想出現(xiàn)前,程序設(shè)計(jì)陷入了紊亂的泥潭,無數(shù)優(yōu)秀程序員在其中苦苦掙扎,還是被其淹沒一樣,網(wǎng)站的管理和維護(hù)將陷入無休止的修補(bǔ)中。
本文提到的規(guī)范并非一成不變的,可根據(jù)具體情況變通的,隨著web技術(shù)的發(fā)展,新的技術(shù)應(yīng)用,規(guī)范也會(huì)隨之變化的。
二、網(wǎng)站的總體組織結(jié)構(gòu)
為了便于網(wǎng)站的維護(hù),以下是網(wǎng)站的總體組織結(jié)構(gòu)的規(guī)范:
1、網(wǎng)站的組織
一個(gè)組織結(jié)構(gòu)良好的網(wǎng)站既是一個(gè)便于管理的網(wǎng)站。網(wǎng)站的預(yù)先規(guī)劃一定要做好,文件、目錄的命名既要符合www服務(wù)器的規(guī)定,又要清晰有邏輯性。如有的網(wǎng)站后綴要求為“.html”,而非“.htm”。
.目錄結(jié)構(gòu)不要太深,因?yàn)樘畹哪夸浗Y(jié)構(gòu)會(huì)導(dǎo)致較長(zhǎng)的URL。
.強(qiáng)烈建議有頁面增加簡(jiǎn)短注釋語。便于以后的更新和增加網(wǎng)頁的易讀性。而注釋并不會(huì)下載至客戶端,不影響瀏覽速度.
.多數(shù)頁共有的部分置于SSI(Server Side Include)包含文件中,如每頁的頭部、尾部導(dǎo)航條,版權(quán)信息和廣告條。這樣做的目的是方便以后的更改,如要更改導(dǎo)航條的鏈接,只需修改SSI文件即可,提高了效率。由于個(gè)人網(wǎng)站不能夠自己確定SSI包含文件,它需要服務(wù)器端配置,所以可以用Dreamweaver提供的Library庫文件的包含功能,達(dá)到相同的效果。
.采用外鏈的CSS(Cascading Style Sheet),對(duì)CSS的引用統(tǒng)一為<link rel=stylesheet”/etc/81channel.css”>。
.建議多數(shù)頁面共有的ja;vascript或Vbscript采用外鏈。這樣可以減少瀏覽器讀代碼的時(shí)間。
.不要用嵌套超過3層的表格和太復(fù)雜的表格.嵌套表格太多,瀏覽器解釋html代碼的時(shí)間越長(zhǎng),正確顯示頁面的時(shí)間越長(zhǎng).我們可以注意到很多網(wǎng)站先顯示上面部分,再逐漸顯示下面的內(nèi)容,其實(shí)就是用表格造成的.
2、目錄結(jié)構(gòu)
.原則上,相近的內(nèi)容放在同一目錄下,目錄名總以小寫的英文字符串命名且不含空格和特殊字符(下劃線和破折號(hào)除外),最好不要超過8個(gè)字符。
.網(wǎng)站根目錄下包含以下幾個(gè)目錄:
library 本網(wǎng)站的共享文件如所有的SSI、CSS和Librsry文件置于本目錄下。
images 本網(wǎng)站的共享的圖片及主頁的圖片置于本目錄下。
scripts 本網(wǎng)站所有的asp、php等腳本和cgi程序置于此目錄中。
zh_cn 本網(wǎng)站的簡(jiǎn)體中文版置于此目錄下。
下面對(duì)zh_cn目錄結(jié)構(gòu)做詳細(xì)分解:
column_name 本網(wǎng)站某頻道的相關(guān)內(nèi)容置于此目錄下(其下可以填加如images的圖片子目錄)
右邊為網(wǎng)站目錄結(jié)構(gòu)的圖示:
http://go5.163.com/~wtonline/zh_cn/web/images/stucture.gif
.對(duì)目錄級(jí)資源的引用在url的尾部要有下劃線,以避免服務(wù)器的重定向,從而節(jié)省時(shí)間。如:
<a href=”dirctory/”>next</a>
3.文件、目錄命名規(guī)則:
.所有的文件、目錄的命名總以小寫的英文字符串命名且不含空格和特殊字符(下劃線和破折號(hào)除外),最好不要超過8個(gè)字符。
.所有的html文件后綴統(tǒng)一為“.htm”,其它文件的后綴使用相應(yīng)的格式,如:.php、.jpg等。
.文件名用代表其含義的英文單詞,不易翻譯的用關(guān)鍵字拼音。
4、url鏈接
.概念定義:
帶域名的絕對(duì)路徑鏈接,如:
<a href=”81Channel’>http://www.81channel.com/index.htm”;>81Channel首頁</a>
不帶域名的絕對(duì)路徑鏈接,如:
<a href=”/zh_cn/index.htm”>81Channel首頁</a>
(注意路徑前有“/”)
相對(duì)路徑鏈接,如:
<a href=”zh_cn/index.htm”>81Channel首頁</a>
.本網(wǎng)站引用網(wǎng)站內(nèi)部的資源采用的相對(duì)路徑鏈接,引用別的資源采用帶域名的絕對(duì)路徑鏈接,盡量不用不帶域名的絕對(duì)路徑鏈接,因?yàn)槲也荒芰私馓峁﹤€(gè)人主頁的網(wǎng)站的設(shè)置,為保險(xiǎn)起見。
.鏈接別的資源采用域名而不用IP地址的形式。非要用IP地址的話,這IP地址必須是Internet的合法地址。
.絕對(duì)不能用下列形式的鏈接(圖片的src也不能用此形式):
<a href=”file:///c%7c/my document/test.htm”>測(cè)試鏈接</a>
—-以上鏈接用的是file://本地驅(qū)動(dòng)器,對(duì)用戶而言是不可見的。
5、信息的反饋
由于個(gè)人網(wǎng)站一般不支持asp、php或cg緩i,既是表單提交只好采用郵件地址鏈接的形式,如:action=”mailto:wtonline@chinese.com”
三、頁面設(shè)計(jì)規(guī)范
整個(gè)頁面的設(shè)計(jì)可分為7部分:網(wǎng)站標(biāo)識(shí)(logo),頻道標(biāo)題,日期,導(dǎo)航,廣告,內(nèi)容區(qū),版權(quán)信息。
1、標(biāo)識(shí)(logo)
標(biāo)識(shí)是品牌的象征,突出網(wǎng)站鮮明的個(gè)性、整體的構(gòu)思,標(biāo)識(shí)統(tǒng)一置于左上角,文件名為”\images\logo.jpg”,各頻道可以有自己的logo標(biāo)識(shí),要突出頻道的特色。
2、頻道標(biāo)題(title)
采用圖片形式,其鏈接采用熱點(diǎn)地圖鏈接,在dreamweaver中可以非常方便的設(shè)置熱點(diǎn)鏈接.
3、日期
日期部分采用ja;vascript腳本編程顯示;
4、導(dǎo)航
.導(dǎo)航要簡(jiǎn)單、清晰、開放、邏輯性強(qiáng),不要用超過3層的鏈接,又不是做商業(yè)網(wǎng)站追求PV,節(jié)省用戶寶貴的時(shí)間。
.用于導(dǎo)航的文字要簡(jiǎn)明扼要,含蓋的范圍不要太廣,且應(yīng)限制在一行以內(nèi)。
.保證每頁都有到網(wǎng)站首頁的鏈接,利?*** istory面版返回,不要堆砌太多的鏈接,讓用戶無所侍從。
.突出最近更新的信息,可以加上更新時(shí)間或New標(biāo)識(shí)。
.頁面頂部和尾部導(dǎo)航條代碼放在Library庫文件highchannel.lbi和lowchannel.lbi中,分別引用。
5、廣告
由于本網(wǎng)站是個(gè)人網(wǎng)站,所以必須有提供空間的網(wǎng)站的廣告,如163、263的logo,盡量把它放置于一單獨(dú)的彈出式窗口中,如下形式調(diào)用:window.open(para參數(shù)表)
6、內(nèi)容區(qū)(content)
.正文內(nèi)容全部定義為9pt大?。ú荒転槟J(rèn)),標(biāo)題為加粗的10pt,其字體為默認(rèn)字體(讓用戶自己決定)。
7、版權(quán)信息
純粹是為了避免下面的內(nèi)容太空,加上它,不僅充實(shí)了內(nèi)容,而且使網(wǎng)站看上去比較規(guī)范。
8、其它注意事項(xiàng)
.設(shè)計(jì)工具用Dreamweaver3.0、Flash、Photoshop等。
.頁面要兼容兩種瀏覽器,但以IE為主。(像Layer層技術(shù)就不能用了,Netscape不支持)
.整個(gè)頁面布局合理,保持均衡,但又要突出重點(diǎn)。
.一般,頁面背景用淺色和純色且直接用16進(jìn)制顏色定義,不要用色圖定義。
.每個(gè)頁面都要定義簡(jiǎn)明準(zhǔn)確的Title。
.保持干凈的html代碼,可以自動(dòng)和手動(dòng)清除多余tag。
.頁面的長(zhǎng)度<=3屏,建議采用錨鏈接(anchor)到其它頁或用分頁顯示,并增加“上一頁”、“下一頁”等的鏈接
.頁面的寬度<=1屏。
.建議整個(gè)頁面大?。ê瑘D片)<60k,html代碼部分<40k,測(cè)試其下載時(shí)間<=15秒(33.6kb/s)
.圖片的尺寸<150*150像素,從性能角度考慮,分別采用.jpg和.gif格式。同時(shí),圖片要用Firework等專用工具“減肥”處理,其大小<=6k。
.圖片要與文本內(nèi)容相關(guān),圖片的尺寸大小要與內(nèi)容文本保持均衡。
.正在建設(shè)的網(wǎng)頁,不開通其鏈接,不要鏈接到“正在建設(shè)中”等一類的頁面。
.不要使用BLINK標(biāo)記。
四、Html編碼規(guī)范
.建議采?*** TML4.0規(guī)范。
1、meta標(biāo)記
meta提供一些搜索引擎可以利用的信息,搜索引擎主要使用兩個(gè)屬性Description和Keywords,如:
.<meta name=”description” content=”在這里描述網(wǎng)站的特性”>
.<meta name=”keywords” content=”關(guān)鍵字、關(guān)鍵字、etc…”>
.另外還有三種非常有用的meta標(biāo)記:
.<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秒鐘后自動(dòng)重定向到http://www.163.com
2、專用標(biāo)記的使用規(guī)定
為了保證頁面對(duì)瀏覽器的兼容性,不要使用某種瀏覽器專用的標(biāo)識(shí),如:marquee,layer,nobr等等。
3、Frame
不建議使用Frame幀結(jié)構(gòu),因?yàn)镕rame不便于維護(hù)且容易迷惑用戶,只有在使用比如聊天室之類的特殊頁面時(shí)才采用。
4、表格
.再次強(qiáng)調(diào)不要使用太多的嵌套表格和復(fù)雜的表格。
.表格的定義使用像素。不要采用百分比,因?yàn)樗鼤?huì)因?yàn)槠聊坏拇笮∽詣?dòng)調(diào)整。
5、圖片
.所有的圖片都要定義高度和寬度,并加替代文本即要定義Alt=”替代文本”,同時(shí)替代文本要與主題一致。
.在使用<a href=…這樣的標(biāo)識(shí)時(shí),如果包含圖象,中間不要加回車符,應(yīng)使之保持在一行內(nèi)。
五、高級(jí)Web技術(shù)使用規(guī)范
在使用一些先進(jìn)的Web技術(shù)時(shí),原則是:保證下載速度,瀏覽器兼容性,照顧多數(shù)的用戶。
.不限制ja;vascript或Vbscript的使用,但是不同瀏覽器對(duì)其支持不同,注意其兼容性,并做測(cè)試。
.復(fù)制外來的ja;vascript時(shí),要檢查其安全性。
.使用cgi是要考慮其安全性和效率,尤其使用某些免費(fèi)的cgi程序是,一定要先反復(fù)測(cè)試。
.cookie用于識(shí)別、跟蹤和支持訪問者,通過cookie你可以了解用戶的訪問路徑,收集和存儲(chǔ)用戶的喜好,但要考慮到用戶關(guān)閉cookie的情況處理,非要用cookie,應(yīng)提供全面的解決辦法。
.強(qiáng)烈推薦使用flash動(dòng)畫,不僅生成的文件小,而且效果很好。
.Java是一種跨平臺(tái)的面向?qū)ο蟮木幊陶Z言,它在Web中的應(yīng)用主要是Java Applet,但是Java Applet的下載速度較慢,謹(jǐn)慎使用。
.php是一種跨平臺(tái)的服務(wù)器端嵌入式腳本語言,將php模塊編譯進(jìn)Web服務(wù)器,執(zhí)行效率較高,建議使用。
.在服務(wù)器端,最好打開SSI解析,但不要使用過多的SSI嵌套。不能使用SSI時(shí),可以用include Library(包含庫文件)代替,效果要差一些。
.網(wǎng)站采用外鏈CSS文件81channel.css,便于統(tǒng)一網(wǎng)站的風(fēng)格和修改風(fēng)格。
六、質(zhì)量保證
網(wǎng)站設(shè)計(jì)好后,在沒改版前,所有的變動(dòng)僅限于主頁的正文欄目和相應(yīng)的內(nèi)容細(xì)節(jié)文檔,內(nèi)容細(xì)節(jié)文檔是在模版可編輯區(qū)上變動(dòng)。模版一旦設(shè)計(jì)好后,所有的工作都應(yīng)在模版上進(jìn)行。
.謹(jǐn)慎對(duì)首頁、頻道和內(nèi)容細(xì)節(jié)模版的改動(dòng)。
1、頻道發(fā)布的流程
.在Wps2000上對(duì)原始文檔進(jìn)行生成、編輯,得到beta 1,拷貝到剪貼版中。
.在Dreamweaver上打開內(nèi)容細(xì)節(jié)模版,使用Ctrl+shift+V粘貼beta 1,進(jìn)一步進(jìn)行編輯,另存為文檔。
.打開首頁、頻道模版,填加相應(yīng)的文檔鏈接,保存即可。
.清理多余的圖片和HTML代碼,并用Dreamweaver初檢鏈接情況,注意鏈接的問揭?蟆?
.測(cè)試環(huán)境(即服務(wù)器環(huán)境)為Win2000+IIS5.0或Linux+Appache環(huán)境,分別測(cè)試其具體表現(xiàn)。
2、重點(diǎn)測(cè)試項(xiàng)目
.下載時(shí)間測(cè)試,采用33.6kb/s的modem,主要對(duì)首頁測(cè)試,建議下載時(shí)間<=20秒。
.瀏覽器兼容性測(cè)試,主要是IE4.0/5.0,NETSCAPE4.0以上。
.鏈接測(cè)試,主要在編輯時(shí)就做好鏈接測(cè)試。
.導(dǎo)航、頁面布局、內(nèi)容合法和正確性等項(xiàng)目測(cè)試。
3、網(wǎng)站更新
.日常網(wǎng)站的更新只能用Dreamweaver的模版功能,保證生成頁面的規(guī)范性和代碼的簡(jiǎn)潔。(目前我在準(zhǔn)備用php編一個(gè)內(nèi)容編輯器,類似商業(yè)網(wǎng)站的新聞編輯器,有興趣或有相關(guān)資料的朋友請(qǐng)與我聯(lián)系,謝謝!)
.更新模版時(shí)要對(duì)原始模版?zhèn)浞?,便于失誤后及時(shí)的恢復(fù)。
.當(dāng)網(wǎng)站有大的改變時(shí),如頁面風(fēng)格、導(dǎo)航、功能的變化,應(yīng)及時(shí)備份和測(cè)試。