網站技術規范

一、前言

　　編寫"網站技術在線"網站技術規范的目的是為自己提供網站建設和維護的技術規范，改善"網站技術在線"網站的總體質量和更新效率。不僅為此，我想為各位網友展示網站建設的標準化（當然我也只是提供一個參考）。個人網站有自己的風格與愛好，也正是個性的存在體現出網站的魅力，但如果過分的自由發揮，想到什么做什么，將給整個網站日后的管理和維護帶來混亂，這就好象當年面向過程編程思想出現前，程序設計陷入了紊亂的泥潭，無數優秀程序員在其中苦苦掙扎，還是被其淹沒一樣，網站的管理和維護將陷入無休止的修補中。
　　本文提到的規范并非一成不變的，可根據具體情況變通的，隨著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">。
　　.建議多數頁面共有的ja;vascript或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、日期

　　日期部分采用ja;vascript腳本編程顯示；

　　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技術時，原則是：保證下載速度，瀏覽器兼容性，照顧多數的用戶。

　　.不限制ja;vascript或Vbscript的使用，但是不同瀏覽器對其支持不同，注意其兼容性，并做測試。
　　.復制外來的ja;vascript時，要檢查其安全性。
　　.使用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編一個內容編輯器，類似商業網站的新聞編輯器，有興趣或有相關資料的朋友請與我聯系，謝謝！）
　　.更新模版時要對原始模版備份，便于失誤后及時的恢復。
　　.當網站有大的改變時，如頁面風格、導航、功能的變化，應及時備份和測試。