首頁(yè) > 設計 > 網(wǎng)頁(yè)設計 > 正文

網(wǎng)頁(yè)設計規范

2018-10-16 20:51:30
字體:
來(lái)源:轉載
供稿:網(wǎng)友

網(wǎng)頁(yè)設計規范 作為一個(gè)網(wǎng)頁(yè)設計這應該了解的東西(剛剛給公司整理的。。也參照了一些別人的規范)

 網(wǎng) 頁(yè) 設 計 制 作 規 范
 總 論
 本規范既是一個(gè)開(kāi)發(fā)規范,也是一個(gè)腳本語(yǔ)言參考,本規范并不是一個(gè)一成不變的必須嚴格遵守的條文,特殊情況下要靈活運用,做一定的變通。但是,請大家千萬(wàn)不要隨意更改規范。如果有任何問(wèn)題,請及時(shí)與項目負責人溝通。
 主目錄下應有一個(gè)help目錄,存放說(shuō)明文件。說(shuō)明文件包括:
 目錄說(shuō)明
 文件列表說(shuō)明:存放位置、文件名稱(chēng)、功能及處理邏輯描述、所涉及的庫表、調用關(guān)系。
 數據庫說(shuō)明:數據庫位置、空間分配要求、表設計、關(guān)系設計、視圖設計、存儲過(guò)程設計等。
 ▲ 靜態(tài)頁(yè)面制作注意事項
 一、 制 作 常 規 要 求

 l 主要頁(yè)面要寫(xiě)title(主頁(yè)要寫(xiě)上企業(yè)中英文名稱(chēng))
 l 主要頁(yè)面meta字段便于搜索引擎查找。
 l 盡量使用廣泛支持的技術(shù)。以最流行的瀏覽器的最普及版本為標準,同時(shí)照顧低版本瀏覽器。
 l 不使用過(guò)小的字體不使用過(guò)大的圖片、動(dòng)畫(huà)、聲音.不使用過(guò)長(cháng)的滾屏
 l 及時(shí)刪除無(wú)用文件,防止無(wú)謂的下載速度減慢
 l 由于server的linux系統,嚴格區分文件大小寫(xiě)!所有文件全部以小寫(xiě)字母命名,包括圖形文件.禁止用中文作文件名。
 l 頁(yè)面以800X600屏幕設置營(yíng)為主(實(shí)際尺寸為778*434px),但也應注意在1024X800 屏幕設置的瀏覽效果; 即在800X600分辯率下應在瀏覽器中不出現橫向的流動(dòng)條;
 l 通常情況下頁(yè)面應以居中為主,如有特殊要求可以設置居頂、居左;
 二 、文 件 命 名 規 則 與 目 錄 結 構 規 則
 l 首頁(yè)面必須以“index.htm 、index.asp命名的文件。
 l HTML文件擴展文件名一律用 .htm
 l 在根目錄中原則上應該按照首頁(yè)的欄目結構,給每一個(gè)欄目開(kāi)設一個(gè)目錄,根據需要在每一個(gè)欄目的目錄中開(kāi)設一個(gè)image 的子目錄用以放置此欄目專(zhuān)有的圖片和多媒體文件,如果這個(gè)欄目的內容特別多,又分出很多下級欄目,可以相應的再開(kāi)設其他目錄。
 l 除非有特殊情況,目錄、文件的名稱(chēng)全部用小寫(xiě)英文字母、數字、下劃線(xiàn)的組合,其中不得包含漢字、空格和特殊字符;目錄名應以英文、拼音為主。盡量用一些大家都能看懂的詞匯。使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義。
 l 網(wǎng)站css文件要放到根目錄image下,供其它文件調用,如子欄目較多也可分別copy到自己目錄下,使網(wǎng)站風(fēng)格統一。
 l 共用的模板文件應放在根目錄的Templates文件夾下(此為dreamweaver的默認路徑,如用其它軟件開(kāi)發(fā)者也需遵守此規則)。

 三、VI 標 準 化 要 求
 l Banner
 格式:GIF 尺寸:468X60 pixels 大?。?lt;15K
 l Logo
 格式:GIF 尺寸:88X31 大?。?lt;7K
 四、頁(yè) 面 制 作 規 則
 1. 表格盡量用絕對像素,以免瀏覽器分辨率不同時(shí)表格產(chǎn)生變形。一個(gè)網(wǎng)頁(yè)要盡量避免用整個(gè)一張大表格,所有的內容都嵌套在這個(gè)大表格之內,因為瀏覽器在解釋頁(yè)面的元素時(shí),是以表格為單位逐一顯示,如果一張網(wǎng)頁(yè)是嵌套在一個(gè)大表格之內,那么很可能造成的后果就是,當瀏覽者敲入網(wǎng)址,他要先面對一片空白很長(cháng)時(shí)間,然后所有的網(wǎng)頁(yè)內容同時(shí)出現。如果必須這樣做,請使用 <tbody>標記,以便能夠使這個(gè)大表格分塊顯示。

 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> 

 為了保證不同瀏覽器上字號保持一致,字號建議用點(diǎn)數pt和像素px來(lái)定義,pt一般使用中文宋體的9pt和11pt,px一般使用中文宋體12px 和14.7px 這是經(jīng)過(guò)優(yōu)化的字號,黑體字或者宋體字加粗時(shí),一般選用11pt和14.7px 的字號比較合適。

 3. 圖片采用 gif , jpg 壓縮格式,以減小頁(yè)面下載數據量。每幅圖片要有本圖片的說(shuō)明文字(alt=””),這樣如果圖片不能正常顯示,也可知道圖片處代表什么意思。<img >標記要增加width, height,以免圖像不能正常顯示時(shí),出現頁(yè)面混亂現象。

 4. 如頁(yè)面采用動(dòng)畫(huà)活躍網(wǎng)頁(yè),須避免動(dòng)畫(huà)過(guò)大,盡量減少用戶(hù)瀏覽等待時(shí)間。整頁(yè)用到flash動(dòng)畫(huà),要考慮到flash與頁(yè)面的融合統一。

 5. 每一相對獨立的欄目首頁(yè)一般也要求在40K容量以?xún)?,如特殊要求也不得超過(guò)60K;每個(gè)網(wǎng)頁(yè)(本網(wǎng)首頁(yè)除外)都要有返回主頁(yè)和返回上級的圖標或文字鏈接。

 6. 返回連接使用相對路徑,盡量不使用絕對路徑。如:../index.htm

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

本文作者:
發(fā)表評論 共有條評論
用戶(hù)名: 密碼:
驗證碼: 匿名發(fā)表