设计之家 > 靈感 > 網頁UI > 網頁理論 >

網站技術規范

作者:Ali 來源:Ali 時間:2005-05-26
 

一、前言

  編寫"網站技術在線"網站技術規范的目的是為自己提供網站建設和維護的技術規范,改善"網站技術在線"網站的總體質量和更新效率。不僅為此,我想為各位網友展示網站建設的標準化(當然我也只是提供一個參考)。個人網站有自己的風格與愛好,也正是個性的存在體現出網站的魅力,但如果過分的自由發揮,想到什么做什么,將給整個網站日后的管理和維護帶來混亂,這就好象當年面向過程編程思想出現前,程序設計陷入了紊亂的泥潭,無數優秀程序員在其中苦苦掙扎,還是被其淹沒一樣,網站的管理和維護將陷入無休止的修補中。
  本文提到的規范并非一成不變的,可根據具體情況變通的,隨著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編一個內容編輯器,類似商業網站的新聞編輯器,有興趣或有相關資料的朋友請與我聯系,謝謝!)
  .更新模版時要對原始模版備份,便于失誤后及時的恢復。
  .當網站有大的改變時,如頁面風格、導航、功能的變化,應及時備份和測試。

相關文章:

推薦設計

最新文章