網頁設計規范
網 頁 設 計 制 作 規 范 

總 論 

     本規范既是一個開發規范，也是一個腳本語言參考，本規范并不是一個一成不變的必須嚴格遵守的條文，特殊情況下要靈活運用，做一定的變通。但是，請大家千萬不要隨意更改規范。如果有任何問題，請及時與項目負責人溝通。 
　　
　　主目錄下應有一個help目錄,存放說明文件。說明文件包括： 

   目錄說明 
   文件列表說明：存放位置、文件名稱、功能及處理邏輯描述、所涉及的庫表、調用關系。 
   數據庫說明：數據庫位置、空間分配要求、表設計、關系設計、視圖設計、存儲過程設計等。 

▲  靜態頁面制作注意事項 

一、  制 作 常 規 要 求 

l  主要頁面要寫'title'（主頁要寫上企業中英文名稱） 
l  主要頁面'meta'字段便于搜索引擎查找。 
l  盡量使用廣泛支持的技術。以最流行的瀏覽器的最普及版本為標準，同時照顧低版本瀏覽器。 
l  不使用過小的字體不使用過大的圖片、動畫、聲音.不使用過長的滾屏 
l  及時刪除無用文件，防止無謂的下載速度減慢 
l  由于server的linux系統，嚴格區分文件大小寫!所有文件全部以小寫字母命名，包括圖形文件.禁止用中文作文件名。 
l  頁面以800X600屏幕設置營為主（實際尺寸為778*434px），但也應注意在1024X800 屏幕設置的瀏覽效果； 即在800X600分辯率下應在瀏覽器中不出現橫向的流動條； 
l  通常情況下頁面應以居中為主，如有特殊要求可以設置居頂、居左； 

二 、文 件 命 名 規 則 與 目 錄 結 構 規 則 

l  首頁面必須以“index.htm 、index.asp命名的文件。 
l  HTML文件擴展文件名一律用 .htm 
l  在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個image 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。 
l  除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄名應以英文、拼音為主。盡量用一些大家都能看懂的詞匯。使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義。 
l  網站css文件要放到根目錄image下，供其它文件調用，如子欄目較多也可分別copy到自己目錄下，使網站風格統一。 
l  共用的模板文件應放在根目錄的Templates文件夾下（此為dreamweaver的默認路徑，如用其它軟件開發者也需遵守此規則）。 

三、VI 標 準 化 要 求 
l  Banner 
格式：GIF 尺寸：468X60 pixels 大?。?lt;15K 
l  Logo 
格式：GIF 尺寸：88X31 大小：<7K 

四、頁 面 制 作 規 則 
1．  表格盡量用絕對像素，以免瀏覽器分辨率不同時表格產生變形。一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那么很可能造成的后果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然后所有的網頁內容同時出現。如果必須這樣做，請使用 <tbody>標記，以便能夠使這個大表格分塊顯示。 

2．  CSS定義規范 及CSS 文件的格式樣例代碼 ： 
<style type="text/css"> 
<!— 
p { text-indent: 2em; } 
body { font-family: "宋體"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px} 
table { font-family: "宋體"; font-size: 9pt; line-height: 20px; color: #000000} 
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none} 
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none} 
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none} 
a:active { font-size: 9pt; color: #FF9900; text-decoration: none} 
--> 
</style> 
　　為了保證不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較合適。 

3．圖片采用 gif , jpg 壓縮格式，以減小頁面下載數據量。每幅圖片要有本圖片的說明文字(alt=””)，這樣如果圖片不能正常顯示，也可知道圖片處代表什么意思。<img >標記要增加width, height，以免圖像不能正常顯示時，出現頁面混亂現象。 
4．  如頁面采用動畫活躍網頁，須避免動畫過大，盡量減少用戶瀏覽等待時間。整頁用到flash動畫，要考慮到flash與頁面的融合統一。 
5．  每一相對獨立的欄目首頁一般也要求在40K容量以內，如特殊要求也不得超過60K；每個網頁（本網首頁除外）都要有返回主頁和返回上級的圖標或文字鏈接。 
6．  返回連接使用相對路徑，盡量不使用絕對路徑。如：../index.htm 
7．  網頁制作字體要求使用國家簡化字。 

▲  程序開發注意事項 

1．  次網站系統要連接一個數據庫(sql),所以要連接數據庫，但不允許建立odbc數據源，不允許作多個頭包含連接，整個系統只有一個，以便將來更改數據庫密碼時很方便的更改本系統，同時，移植也很方便。 
2 頭包含要做成例如*.asp的文件，這樣用戶不會發現密碼及數據庫，如果有acess數據庫，擴展名一定要改成例如*.asp的樣子，以便保護數據。 
3 所有的各個子模塊，都要有一個readme.asp（readme.txt----改成àreadme.asp，什么都不顯示）文件，里面詳細敘述本子模塊用到的表，表結構，每個字段的意義及大小，SQL 建表腳本語言（用SQL 工具導出），每個程序文件的功能。 
4 建表要有一定的意義，其字段也要有意義，如4967班的表學生，表名 ：table_4967_student字段：姓名,年齡table_4967_student_name，table_4967_student_age等等。同時，要有5個人上的擴展字段，以便將來擴充功能。 
5 要有注釋，以便維護。刪除測試時候的無用代碼，使程序清晰明了。 
6 要用相對路徑，堅決禁止用絕對路徑。 
7 后臺管理程序要整合到一個頁面上，而且要有權限，只能是有權限的用戶登錄后才能進行系統管理。 
8 不要開設不必要的session變量，以免浪費資源，同時，能一次性用sql語句解決的問題就用sql語句，避免多次進行數據庫檢索，反饋，再檢索等等，以免影響速度，致使大量的時間浪費在網絡連接上。 
9 程序開發時不要用已投入運行的網站進行測試，請自己搭建環境或申請環境。 
10 要有錯誤捕獲處理，提醒用戶如何操作造成錯誤。 
11 刪除信息時要有確認，畢竟是刪除，確認后再行刪除。 
12 各個模塊間要條例分明，不要混亂一片。每個模塊要有自己的目錄（放到主目錄下）。 
13 該用js驗證合法的就要驗證，堅決避免服務器端進行驗證，以免加大服務器負擔，同時，影響網頁反應的速度。 
14 編程人員測試程序時要用上界限外值，合法值，下界限外值進行測試。 
15 絕對禁止使用觸發器，存儲過程。 
16 如果整個網站系統都用到同一個變量或常量，請仿照c語言中的常量定義，以便維護上的方便。 
17 顯示數據庫信息時候，應考慮到段落層次，各標點符號的正常顯示，記錄比較多可以考慮分頁，避免過長的頁面出現。 
18 所有模塊內部測試通過后再交往上級進行測試及驗收。 
19 所有的功能完成后，要進行整合測試，后臺管理程序要放到一起，也形成一個后臺管理型網站，目的：操作簡潔方便。