網(wǎng)站技術(shù)規(guī)范

1、附錄（四）網(wǎng)站技術(shù)規(guī)范目錄： 一、前言 二、網(wǎng)站的總體組織結(jié)構(gòu) 三、頁面的設(shè)計規(guī)范 四、html編碼規(guī)范 五、高級web技術(shù)的應(yīng)用規(guī)范 六、質(zhì)量保證 一、前言 編寫"網(wǎng)站技術(shù)在線"網(wǎng)站技術(shù)規(guī)范的目的是為自己提供網(wǎng)站建設(shè)和維護的技術(shù)規(guī)范，改善"網(wǎng)站技術(shù)在線"網(wǎng)站的總體質(zhì)量和更新效率。不僅為此，我想為各位網(wǎng)友展示網(wǎng)站建設(shè)的標(biāo)準(zhǔn)化（當(dāng)然我也只是提供一個參考）。個人網(wǎng)站有自己的風(fēng)格與愛好，也正是個性的存在體現(xiàn)出網(wǎng)站的魅力，但如果過分的自由發(fā)揮，想到什么做什么，將給整個網(wǎng)站日后的管理和維護帶來混亂，這就好象當(dāng)年面向過程編程思想出現(xiàn)前，程序設(shè)計陷入了紊亂的泥潭，無數(shù)

2、優(yōu)秀程序員在其中苦苦掙扎，還是被其淹沒一樣，網(wǎng)站的管理和維護將陷入無休止的修補中。 本文提到的規(guī)范并非一成不變的，可根據(jù)具體情況變通的，隨著web技術(shù)的發(fā)展，新的技術(shù)應(yīng)用，規(guī)范也會隨之變化的。 二、網(wǎng)站的總體組織結(jié)構(gòu) 為了便于網(wǎng)站的維護，以下是網(wǎng)站的總體組織結(jié)構(gòu)的規(guī)范： 1、網(wǎng)站的組織 一個組織結(jié)構(gòu)良好的網(wǎng)站既是一個便于管理的網(wǎng)站。網(wǎng)站的預(yù)先規(guī)劃一定要做好，文件、目錄的命名既要符合www服務(wù)器的規(guī)定，又要清晰有邏輯性。如有的網(wǎng)站后綴要求為“.html”，而非“.htm”。 n 目錄結(jié)構(gòu)不要太深,因為太深的目錄結(jié)構(gòu)會導(dǎo)致較長的URL。 n 強烈建議有頁面增加簡短注釋語。便于以后的更新和增加網(wǎng)頁的

3、易讀性。而注釋并不會下載至客戶端,不影響瀏覽速度. n 多數(shù)頁共有的部分置于SSI（Server Side Include）包含文件中,如每頁的頭部、尾部導(dǎo)航條，版權(quán)信息和廣告條。這樣做的目的是方便以后的更改，如要更改導(dǎo)航條的鏈接，只需修改SSI文件即可，提高了效率。由于個人網(wǎng)站不能夠自己確定SSI包含文件，它需要服務(wù)器端配置，所以可以用Dreamweaver提供的Library庫文件的包含功能，達到相同的效果。 n 采用外鏈的CSS（Cascading Style Sheet），對CSS的引用統(tǒng)一為<link rel=stylesheet"/etc/81channel.css

4、">。 n 建議多數(shù)頁面共有的Java或Vb采用外鏈。這樣可以減少瀏覽器讀代碼的時間。 n 不要用嵌套超過3層的表格和太復(fù)雜的表格.嵌套表格太多,瀏覽器解釋html代碼的時間越長,正確顯示頁面的時間越長.我們可以注意到很多網(wǎng)站先顯示上面部分,再逐漸顯示下面的內(nèi)容,其實就是用表格造成的. 2、目錄結(jié)構(gòu) 原則上，相近的內(nèi)容放在同一目錄下，目錄名總以小寫的英文字符串命名且不含空格和特殊字符（下劃線和破折號除外），最好不要超過8個字符。 n 網(wǎng)站根目錄下包含以下幾個目錄： n library 本網(wǎng)站的共享文件如所有的SSI、CSS和Librsry文件置于本目錄下。 n images 本

5、網(wǎng)站的共享的圖片及主頁的圖片置于本目錄下。 n s 本網(wǎng)站所有的asp、php等腳本和cgi程序置于此目錄中。 n zh_cn 本網(wǎng)站的簡體中文版置于此目錄下。 下面對zh_cn目錄結(jié)構(gòu)做詳細分解： column_name 本網(wǎng)站某頻道的相關(guān)內(nèi)容置于此目錄下（其下可以填加如images的圖片子目錄） 右邊為網(wǎng)站目錄結(jié)構(gòu)的圖示： .對目錄級資源的引用在url的尾部要有下劃線，以避免服務(wù)器的重定向，從而節(jié)省時間。如： <a href="dirctory/">next</a> 3.文件、目錄命名規(guī)則： n 所有的文件、目錄的命名總以小寫的英文字符串命名且不

6、含空格和特殊字符（下劃線和破折號除外），最好不要超過8個字符。 n 所有的html文件后綴統(tǒng)一為“.htm”，其它文件的后綴使用相應(yīng)的格式，如：.php、.jpg等。 n 文件名用代表其含義的英文單詞，不易翻譯的用關(guān)鍵字拼音。 4、url鏈接 .概念定義： 帶域名的絕對路徑鏈接，如： <a href=" 不帶域名的絕對路徑鏈接，如： <a href="/zh_cn/index.htm">81Channel首頁</a> (注意路徑前有“/”) 相對路徑鏈接，如： <a href="zh_cn/index.htm"

7、;>81Channel首頁</a> 本網(wǎng)站引用網(wǎng)站內(nèi)部的資源采用的相對路徑鏈接，引用別的資源采用帶域名的絕對路徑鏈接，盡量不用不帶域名的絕對路徑鏈接。 n 鏈接別的資源采用域名而不用IP地址的形式。非要用IP地址的話，這IP地址必須是Internet的合法地址。 n 絕對不能用下列形式的鏈接（圖片的src也不能用此形式）： n <a href="file:/c%7c/my /test.htm">測試鏈接</a> n -以上鏈接用的是file:/本地驅(qū)動器，對用戶而言是不可見的。 5、信息的反饋 一般對于個人網(wǎng)站不支持asp、php或

8、cg緩i，既是表單提交只好采用郵件地址鏈接的形式，如:action="mailto:wtonline" 三、頁面設(shè)計規(guī)范 整個頁面的設(shè)計可分為7部分：網(wǎng)站標(biāo)識（logo），頻道標(biāo)題，日期，導(dǎo)航，廣告，內(nèi)容區(qū)，版權(quán)信息。 1、標(biāo)識（logo） 標(biāo)識是品牌的象征，突出網(wǎng)站鮮明的個性、整體的構(gòu)思，標(biāo)識統(tǒng)一置于左上角，文件名為"imageslogo.jpg"，各頻道可以有自己的logo標(biāo)識，要突出頻道的特色。 2、頻道標(biāo)題（title） 采用圖片形式，其鏈接采用熱點地圖鏈接，在dreamweaver中可以非常方便的設(shè)置熱點鏈接. 3、日期 日期部分采用Java腳

9、本編程顯示； 4、導(dǎo)航 n 導(dǎo)航要簡單、清晰、開放、邏輯性強，不要用超過3層的鏈接，n 用于導(dǎo)航的文字要簡明扼要，含蓋的范圍不要太廣，且應(yīng)限制在一行以內(nèi)。 n 保證每頁都有到網(wǎng)站首頁的鏈接，利用History面版返回，不要堆砌太多的鏈接，讓用戶無所侍從。 n 突出最近更新的信息，可以加上更新時間或New標(biāo)識。 n 頁面頂部和尾部導(dǎo)航條代碼放在Library庫文件highchannel.lbi和lowchannel.lbi中，分別引用。 5、廣告 如果網(wǎng)站是個人網(wǎng)站，所以必須有提供空間的網(wǎng)站的廣告，如163、263的logo，盡量把它放置于一單獨的彈出式窗口中，如下形式調(diào)用：open(para參

10、數(shù)表) 6、內(nèi)容區(qū)（content） 正文內(nèi)容全部定義為9pt大?。ú荒転槟J），標(biāo)題為加粗的10pt，其字體為默認字體（讓用戶自己決定）。 7、版權(quán)信息 8、其它注意事項 n 設(shè)計工具用Dreamweaver3.0、Flash、Photoshop等。 n 頁面要兼容兩種瀏覽器，但以IE為主。（像Layer層技術(shù)就不能用了，Netscape不支持） n 整個頁面布局合理，保持均衡，但又要突出重點。 n 一般，頁面背景用淺色和純色且直接用16進制顏色定義，不要用色圖定義。 n 每個頁面都要定義簡明準(zhǔn)確的Title。 n 保持干凈的html代碼，可以自動和手動清除多余tag。 n 頁面的長度<

11、;=3屏，建議采用錨鏈接（anchor）到其它頁或用分頁顯示，并增加“上一頁”、“下一頁”等的鏈接 n 頁面的寬度<=1屏。 n 建議整個頁面大?。ê瑘D片）<60k，html代碼部分<40k，測試其下載時間<=15秒（33.6kb/s） n 圖片的尺寸<150*150像素，從性能角度考慮，分別采用.jpg和.gif格式。同時，圖片要用Firework等專用工具“減肥”處理，其大小<=6k。 n 圖片要與文本內(nèi)容相關(guān)，圖片的尺寸大小要與內(nèi)容文本保持均衡。 n 正在建設(shè)的網(wǎng)頁，不開通其鏈接，不要鏈接到“正在建設(shè)中”等一類的頁面。 n 不要使用BLINK標(biāo)記。 四

12、、Html編碼規(guī)范 .建議采用HTML4.0規(guī)范。 1、meta標(biāo)記 n meta提供一些搜索引擎可以利用的信息，搜索引擎主要使用兩個屬性Deion和Keywords，如： n <meta name="deion" content="在這里描述網(wǎng)站的特性"> n <meta name="keywords" content="關(guān)鍵字、關(guān)鍵字、etc."> n 另外還有三種非常有用的meta標(biāo)記： 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、專用標(biāo)記的使用規(guī)定 為了保證頁面對瀏覽器的兼容性，不要使用某種瀏覽器專用的標(biāo)識，如：marquee,layer,nobr等等。 3、Fr

14、ame 不建議使用Frame幀結(jié)構(gòu)，因為Frame不便于維護且容易迷惑用戶，只有在使用比如聊天室之類的特殊頁面時才采用。 4、表格 n 再次強調(diào)不要使用太多的嵌套表格和復(fù)雜的表格。 n 表格的定義使用像素。不要采用百分比，因為它會因為屏幕的大小自動調(diào)整。 5、圖片 n 所有的圖片都要定義高度和寬度，并加替代文本即要定義Alt="替代文本"，同時替代文本要與主題一致。 n 在使用<a href=.這樣的標(biāo)識時，如果包含圖象，中間不要加回車符，應(yīng)使之保持在一行內(nèi)。 五、高級Web技術(shù)使用規(guī)范 在使用一些先進的Web技術(shù)時，原則是：保證下載速度，瀏覽器兼容性，照顧多數(shù)的用戶

15、。 n 不限制Java或Vb的使用，但是不同瀏覽器對其支持不同，注意其兼容性，并做測試。 n 復(fù)制外來的Java時，要檢查其安全性。 n 使用cgi是要考慮其安全性和效率，尤其使用某些免費的cgi程序是，一定要先反復(fù)測試。 n 用于識別、跟蹤和支持訪問者，通過你可以了解用戶的訪問路徑，收集和存儲用戶的喜好，但要考慮到用戶關(guān)閉的情況處理，非要用，應(yīng)提供全面的解決辦法。 n 強烈推薦使用flash動畫，不僅生成的文件小，而且效果很好。 n Java是一種跨平臺的面向?qū)ο蟮木幊陶Z言，它在Web中的應(yīng)用主要是Java Applet，但是Java Applet的下載速度較慢，謹(jǐn)慎使用。 n php是一種

16、跨平臺的服務(wù)器端嵌入式腳本語言，將php模塊編譯進Web服務(wù)器，執(zhí)行效率較高，建議使用。 n 在服務(wù)器端，最好打開SSI解析，但不要使用過多的SSI嵌套。不能使用SSI時，可以用include Library（包含庫文件）代替，效果要差一些。 網(wǎng)站采用外鏈CSS文件81channel.css，便于統(tǒng)一網(wǎng)站的風(fēng)格和修改風(fēng)格。 六、質(zhì)量保證 網(wǎng)站設(shè)計好后，在沒改版前，所有的變動僅限于主頁的正文欄目和相應(yīng)的內(nèi)容細節(jié)文檔，內(nèi)容細節(jié)文檔是在模版可編輯區(qū)上變動。模版一旦設(shè)計好后，所有的工作都應(yīng)在模版上進行。 n 謹(jǐn)慎對首頁、頻道和內(nèi)容細節(jié)模版的改動。 1、頻道發(fā)布的流程 n 在Wps2000上對原始文檔進行生成、編輯，得到beta 1，拷貝到剪貼版中。 n 在Dreamweaver上打開內(nèi)容細節(jié)模版，使用Ctrl+shift+V粘貼beta 1，進一步進行編輯，另存為文檔。 n 打開首頁、頻道模版，填加相應(yīng)的文檔鏈接，保存即可。 n 清理多余的圖片和HTML代碼，并用Dreamweaver初檢鏈接情況，注意鏈接的形式要求。 n 測試環(huán)境（即服務(wù)器環(huán)境）為Win2000+IIS5.0或Linux+Appache環(huán)境，分別測試其具體表現(xiàn)。 2、重點測試項目 n 下載時間測試，采用33.6kb/s的modem，主要對首頁測試，建議下載時間<