1、Web界面設(shè)計規(guī)范Design Specification for Web UI（僅供內(nèi)部使用 Only for inside of *）作者： *日期：2005年5月31日*財務(wù) HFS版權(quán)所有 不得復(fù)制Copyright by * 2005,All rights reservedWeb界面設(shè)計規(guī)范文檔修改記錄Design Specification for Web UIRevision History版本號Version日期Revision Date所修改頁Revision Pages注 記Summary/Comment修改人Signature1.02005/5/31ALLCreateBe

2、n1.12005/6/65-10增加部分規(guī)范XY目錄一、目的4二、適用范圍4三、文件命名規(guī)范4四、控件命名規(guī)范4五、控件外觀規(guī)范5六、界面設(shè)計規(guī)范66.1字體66.2顏色76.3邊距76.4尺寸單位76.5表格排版規(guī)范76.5.1表格代碼對齊76.5.2表格高寬86.5.3表格其他規(guī)范8七、其他規(guī)范97.1網(wǎng)站目錄結(jié)構(gòu)97.2排版規(guī)范97.2客戶端腳本107.3狀態(tài)管理10一、目的為了使最終設(shè)計出來的Web界面風(fēng)格一致化，開發(fā)者之間相互協(xié)作更輕松，特制定此Web界面設(shè)計規(guī)范！ 回目錄二、適用范圍1. 此規(guī)范適合所有Web Form的UI設(shè)計。2. 有關(guān)Windows Form的UI設(shè)計請參考W

3、indows界面設(shè)計規(guī)范。 回目錄三、文件命名規(guī)范Web Form擴展名Extension File Name描述Description前綴Prefix.aspx/.ascxWeb用戶自定義控件wuc 回目錄四、控件命名規(guī)范控件類型Control Type前綴Prefix例子ExampleLabellbllblTipTextBoxtxttxtNameButtonbtnbtnOKLinkButtonlbtnImageButtonibtnHyperLinkhlkDropDownListddlListBoxlstDataGridgrdDataListdlstRepeaterrepCheckBoxch

4、kCheckBoxListchklstRadioButtonListrdolstRadioButtonrdoImageimgPanelpanPlaceHolderplhCalendarcldAdRotatoradrTabletblRequireFieldValidatorrfvCompareValidatorcpvRangeValidatorrgvRegularExpressionValidatorrevCustomValidatorcstvValidationSummaryvlsXmlxmlLitteralltlCrystalReportViewercrv 回目錄五、控件外觀規(guī)范說明：50p

5、x|文本寬度，表示該參數(shù)可以的取值為：“50px”或者“文本寬度”控件類型Control Type寬度(像素)Width(px)高度(像素)Height(px)備注RemarkLabel適應(yīng)文本適應(yīng)文本TextBox150px|100%|超短|超寬默認值Button50px|文本寬度默認值LinkButton適應(yīng)文本適應(yīng)文本ImageButton適應(yīng)圖片適應(yīng)圖片HyperLink適應(yīng)文本適應(yīng)文本DropDownList150px|100%|適應(yīng)文本默認值ListBox150px|100%|適應(yīng)文本100px |適應(yīng)項目數(shù)|按需DataGrid按需按需DataList按需按需Repeater按需

6、按需CheckBox適應(yīng)文本默認值CheckBoxList適應(yīng)文本適應(yīng)項目RadioButtonList適應(yīng)文本適應(yīng)項目RadioButton適應(yīng)文本默認值Image適應(yīng)圖片適應(yīng)圖片Panel適應(yīng)內(nèi)部控件|按需適應(yīng)內(nèi)部控件|按需PlaceHolder適應(yīng)內(nèi)部控件|按需適應(yīng)內(nèi)部控件|按需Calendar按需按需AdRotator按需按需Table按需按需RequireFieldValidator適應(yīng)文本默認CompareValidator適應(yīng)文本默認RangeValidator適應(yīng)文本默認RegularExpressionValidator適應(yīng)文本默認CustomValidator適應(yīng)文本默認V

7、alidationSummary默認默認Xml默認默認Litteral默認默認CrystalReportViewer默認默認 回目錄六、界面設(shè)計規(guī)范6.1字體所有Web界面基準(zhǔn)字體大小一律為：9pt。字體序列為：Verdana, Arial, Helvetica, Sans-Serif。所有字體設(shè)定應(yīng)在CSS中完成。6.2顏色顏色應(yīng)以清爽簡潔為準(zhǔn)，所有色彩設(shè)定應(yīng)在CSS中完成。6.3邊距單元格間距cellspacing頁，表格都應(yīng)該有邊距，避免緊貼邊沿的情況發(fā)生，最小邊距值為“3px”，默認邊距值應(yīng)在CSS中設(shè)定。單元格襯距cellpadding頁邊距6.4尺寸單位所有字體尺寸一律采用“pt”

8、作為單位，對象和線條的尺寸一律用“px”作為單位。6.5表格排版規(guī)范6.5.1表格代碼對齊在寫 <table> 互相嵌套時，嚴(yán)格按照的規(guī)范，對于單獨的一個<table>來說，<table><tr>對齊，<td> 縮進一個TAB，<td> 中如果還有嵌套的表格，<table>也縮進TAB，如果<td>中沒有任何嵌套的表格，</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行，不要換行，如我們注意在源代碼中不應(yīng)有這樣的代碼：<td><img src=”./image

9、s/sample.gif”></td>而應(yīng)該是這樣的：<td><img src=”./images/sample.gif”></td>這是因為瀏覽器認為換行相當(dāng)于一個半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應(yīng)該這樣寫：<td><img src=”./images/sample.gif”> </td>6.5.2表格高寬屬于同一個級別 的 <table> 一定是左首對齊的，另外不允許沒有任何內(nèi)容的空的單元格存在，空單元格高度采用 <td>

10、; 和 </td> 之間插入一個1*1 大小的透明的gif 圖片（通常為null.gif），這是因為某些瀏覽器認為空單元格非法而不會予以解釋。Width 和height 的寫法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width 寫在<table> 的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 <table> 的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標(biāo)簽內(nèi)。總之遵循一條原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是

11、你改動代碼中任何一個width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。6.5.3表格其他規(guī)范1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內(nèi)。2. 一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用<tbody>標(biāo)記，以便能夠使這個大表格分塊顯示。 回目錄七、其他規(guī)范7.1網(wǎng)站目錄結(jié)構(gòu)1. 在網(wǎng)站根目錄中

12、開設(shè)images common temp 三個子目錄，根據(jù)需要再開設(shè)media 子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標(biāo)志、banner 條、菜單、按鈕等等；common 子目錄中放css、js,、php、include 等公共文件；temp 子目錄放客戶提供的各種文字圖片等等原始資料；media 子目錄中放flash, avi, quick time 等多媒體文件 。2. 在根目錄中原則上應(yīng)該按照首頁的欄目結(jié)構(gòu)，給每一個欄目開設(shè)一個目錄，根據(jù)需要在每一個欄目的目錄中開設(shè)一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目

13、的內(nèi)容特別多，又分出很多下級欄目，可以相應(yīng)的再開設(shè)其他目錄。3. temp 目錄中的文件往往會比較多，建議以時間為名稱開設(shè)目錄，將客戶陸續(xù)提供的資料歸類整理。4. 除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；7.2排版規(guī)范1. 排版中我們經(jīng)常會遇到需要進行首行縮進的處理，不要使用“&nbsp;”或者全角空格來達到效果，規(guī)范的做法是在樣式表中定義 p text-indent: 2em; 然后給每一段加上 <p> 標(biāo)記，注意，一般情況下，請不要省略 </p> 結(jié)束標(biāo)記。2. 原則上，我們禁止用 <i

14、mg width=? height=?> 來人為干預(yù)圖片顯示的尺寸，而且建議 <img> 標(biāo)簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當(dāng)網(wǎng)頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網(wǎng)頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時，這種現(xiàn)象會很明顯，所以當(dāng)預(yù)料到這種會明顯導(dǎo)致網(wǎng)頁抖動的情況會發(fā)生時，請大家務(wù)必在最后給 <img>附上 width 和 height 屬

15、性。3. 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預(yù)分段。4. 不同語種的文字之間應(yīng)該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標(biāo)點要用全角標(biāo)點，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。5. 所有的字號都應(yīng)該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn) <font size=?> 標(biāo)記。6. 請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的“&nbsp;”也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace

16、以及透明的gif 圖片來實現(xiàn)。7. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.8. 網(wǎng)站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應(yīng)該這樣：<a href=”aboutus/”>7.2客戶端腳本客戶端腳本一律采用JavaScript語言，編碼規(guī)測基本類似C#規(guī)范。7.3狀態(tài)管理為了避免頁面過大，在所有不需要PostBack之后獲取對象值的控件一律關(guān)閉ViewState。如有可能關(guān)閉整個頁面的ViewState。例如

17、一些僅作單向顯示之用的，無須回傳數(shù)據(jù)的控件(例如Label)。可以關(guān)閉。另外所有靜態(tài)文本全部直接使用HTML標(biāo)記而不要使用服務(wù)端控件。 回目錄人與人之間的距離雖然摸不著，看不見，但的的確確是一桿實實在在的秤。真與假，善與惡，美與丑，盡在秤桿上可以看出；人心的大小，胸懷的寬窄，撥一撥秤砣全然知曉。人與人之間的距離，不可太近。與人太近了，常常看人不清。一個人既有優(yōu)點，也有缺點，所謂人無完人，金無赤足是也。初識時，走得太近就會模糊了不足，寵之；時間久了，原本的美麗之處也成了瑕疵，嫌之。與人太近了，便隨手可得，有時得物，據(jù)為己有，太過貪財；有時得人，為己所用，也許貪色。貪財也好，貪色亦罷，都是一種貪心

18、。與人太近了，最可悲的就是會把自己丟在別人身上，找不到自己的影子，忘了回家的路。這世上，根本沒有零距離的人際關(guān)系，因為人總是有一份自私的，人與人之間太近的距離，易滋生事端，恩怨相隨。所以，人與人相處的太近了，便漸漸相遠。人與人之間的距離也不可太遠。太遠了，就像放飛的風(fēng)箏，過高斷線。太遠了，就像南徙的大雁，失群哀鳴。太遠了，就像失聯(lián)的旅人，形單影只。人與人之間的距離，有時，先遠后近；有時，先近后遠。這每次的變化之中，總是有一個難以忘記的故事或者一段難以割舍的情。有時候，人與人之間的距離，忽然間近了，其實還是遠；忽然間遠了，肯定是傷了誰。人與人之間的距離，如果是一份信箋，那是思念；如果是一個微笑，

19、那是寬容；如果是一句問候，那是友誼；如果是一次付出，那是責(zé)任。這樣的距離，即便是遠，但也很近。最怕的，人與人之間的距離就是一句失真的讒言，一個不屑的眼神，一疊誘人的紙幣，或者是一條無法逾越的深谷。這樣的距離，即便是近，但也很遠。人與人之間最美的距離，就是不遠不近，遠中有近，近中有遠，遠而不離開，近而不相丟。太遠的距離，只需要一份寬容，就不會走得太遠而行同陌人；太近的距離，只需要一份自尊，就不會走得太近而丟了自己。不遠不近的距離，多像一朵艷麗的花，一首悅耳的歌，一首優(yōu)美的詩。人生路上，每個人的相遇、相識，都是一份緣，我們都是相互之間不可或缺的伴。人與人之間的距離雖然摸不著，看不見，但的的確確是一桿實實在在的秤。真與假，善與惡，美與丑，盡在秤桿上可以看出；人心的大小，胸懷的寬窄，撥一撥秤砣全然知曉。人與人之間的距離，不可太近。與人太近了，常常看人不清。一個人既有優(yōu)點，也有缺點，所謂人無完人，金無赤足是也。初識時，走得太近就會模糊了不足，寵之；時間久了，原本