標(biāo)準網(wǎng)頁設(shè)計規(guī)范（圖文）
網(wǎng)頁設(shè)計開發(fā)之前都應(yīng)該遵循一定的網(wǎng)頁設(shè)計規(guī)范，這樣有利于項目的整體風(fēng)格統(tǒng)一、代碼的維護和擴展。由于Web項目開發(fā)的分散性、獨立性、整合的交互性等，所以定制一套完整的約定和規(guī)則顯得尤為重要。這其中包括組件團隊、開發(fā)工具、開發(fā)流程、文件命名規(guī)則、程序編碼風(fēng)格、數(shù)據(jù)庫設(shè)計約定等。當(dāng)然所有這些規(guī)范并非唯一標(biāo)準，也不是一成不變的，應(yīng)根據(jù)實際情況進行相應(yīng)的調(diào)整。
1．尺寸規(guī)范
頁面標(biāo)準統(tǒng)一按兼容分辨率800×600設(shè)計。為了使顯示更友好，建議使用778或760像素設(shè)計。頁面長度建議1屏半到2屏，原則上長度不超過3屏，寬度不超過1屏。一頁網(wǎng)頁在56K調(diào)制解調(diào)器完全顯示的等待時間不得大于30s。首頁及各級頁面都必須帶有網(wǎng)站的標(biāo)志性圖片Logo，并鏈接到網(wǎng)站首頁。
2．色彩規(guī)范
(1)確定主色調(diào)。
紅色是火的顏色，熱情、奔放：也是血的顏色，可以象征生命。黃色是明度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長，象征安寧和平與安全，如綠色食品。紫色是高貴的象征，有莊重感。白色能給人以純潔與清白的感覺，表示和平與圣潔。色彩代表了不同的情感，有著不同的象征含義。這些象征含義是人們思想交流當(dāng)中的一個復(fù)雜問題，它因人的年齡、地域、時代、民族、階層、經(jīng)濟地區(qū)、工作能力、教育水平、風(fēng)俗習(xí)慣、宗教信仰、生活環(huán)境、性別差異而有所不同。
(2)根據(jù)需要進行配色。
單純的顏色并沒有實際的意義，和不同的顏色搭配，它所表現(xiàn)出來的效果也不同。比如綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。藍色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會給人帶來暖意。
根據(jù)網(wǎng)站性質(zhì)，制定網(wǎng)站配色方案，避免在一個頁面上有太多的色彩。活潑但不失穩(wěn)重，顏色柔和但不亂。文字、圖像等的色彩要與頁面協(xié)調(diào)。即使頁面有背景圖片，也一定要定義背景色，通常默認設(shè)置背景色為白色。
為了保證不同瀏覽器上字號保持一致，字號建議用點數(shù)pt(point)和像素px(pixel)來定義。
1．pt一般使用中文宋體的9pt和11pt
這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用llpt和14．7px的字號比較合適。大小為9pt時，行距為120％。信息類最終頁面采用彈出方式，標(biāo)題及正文字體規(guī)定為1lpt，行距為140％。所有頁面字體大小建議不要超過11pt。
2．px一般使用中文宋體12px和14．7px
3．文字顏色與頁面配色協(xié)調(diào)，不使用與背景色相近的顏色
網(wǎng)站的所有網(wǎng)頁文字風(fēng)格要一致，必須使用CSS樣式表來定義整個網(wǎng)站文字風(fēng)格。處理網(wǎng)頁中的文字，禁止直接復(fù)制粘貼Word中的文字，應(yīng)將文字粘貼至記事本后再使用。非圖像設(shè)計的字體一律采用Windows標(biāo)準宋體。英文數(shù)字采用Arial，日文采用MS明朝(如果做特殊效果需做成圖)。要加粗文字用Bold，不要用strong標(biāo)簽。
頁面文本不使用下劃線方式，也盡量少采用粗體顯示。文字正確無誤，段落層次清晰，中文段落首行縮進兩個漢字方式。
1．表格設(shè)計規(guī)范
定義表格寬度時使用絕對值，即指定像素值。778px的框架內(nèi)內(nèi)嵌最大表格寬度為775px，且為左對齊。頁面中從上至下盡量拆分成多個層疊表格，盡量用tbody標(biāo)簽去控制表格分行下載，這種方法當(dāng)表格內(nèi)容很大時比較實用，在需要分行下載處加上<tbody>和</tbody>。表格必須指定邊框，邊距和間距，圖文混排時推薦使用邊距為5，間距也為5。處理網(wǎng)頁中的表格，禁止直接復(fù)制粘貼Word中的表格，應(yīng)在網(wǎng)頁制作軟件中制作表格。在空的單元格中，應(yīng)插入一些與網(wǎng)頁背景顏色相同的色點，使表格在瀏覽器顯示比較美觀。為加快網(wǎng)頁下載速度，最好使用CSS定義類表格樣式。
網(wǎng)站的目錄結(jié)構(gòu)是指網(wǎng)站組織和存放站內(nèi)所有文檔的目錄設(shè)置情況。一個良好的網(wǎng)站目錄結(jié)構(gòu)，對于網(wǎng)站維護、內(nèi)容的擴充和移植有著重要的影響。如大型網(wǎng)站的目錄數(shù)量多、層次深、關(guān)系復(fù)雜，在網(wǎng)站設(shè)計中更需要合理定義目錄結(jié)構(gòu)和組織好所有文檔。下面介紹一些在設(shè)計工作中行之有效的做法：
第一點：不要將網(wǎng)站中所有的文件都存放在同一個目錄下。盡可能減少網(wǎng)站根目錄下存放的文件數(shù)，網(wǎng)站根目錄只存放index.html或index.asp等首頁文件，以及其他必須的系統(tǒng)文件。
第二點：一般按照網(wǎng)站的主菜單欄目結(jié)構(gòu)，給每個欄目建立一個目錄。如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，則可以再增設(shè)相應(yīng)的子目錄。例如，根據(jù)需要在每個欄目的目錄中建立images和media的子目錄，獨立存放此欄目專有的圖片和多媒體文件。
第三點：在網(wǎng)站根目錄中常包含的目錄有：images目錄存放網(wǎng)站所有頁面都要用到的公共圖片，例如公司的Logo標(biāo)志、Banner廣告、導(dǎo)航欄圖片、按鈕圖片等。style目錄存放CSS樣式表文件。iS目錄存放JavaScript腳本文件。media目錄存放flash、avi、rm等多媒體文件。temp目錄存放搜集的各類文字圖片等原始資料。Templates目錄存放網(wǎng)站的模板文件。
第四點：網(wǎng)站如有多個語言版本，每個語言版本應(yīng)存放于獨立的目錄中。如“cn”存放中文版內(nèi)容，“en”存放英文版內(nèi)容，相應(yīng)的CSS樣式表文件分別存放在各語言版本下的style目錄中。
標(biāo)簽:網(wǎng)頁設(shè)計