起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)一篇UI規(guī)范文件
這是一個(gè)UI模板規(guī)范，在做B/S版應(yīng)用程序時(shí)比較適用，其實(shí)這樣的東西算不上什么正規(guī)的規(guī)范，只是為了適應(yīng)我們現(xiàn)在面對(duì)的開(kāi)發(fā)環(huán)境和組織流程做的一些權(quán)宜的努力，和解決了一些與程序溝通和接口的問(wèn)題，盡量避免誤會(huì)和摩擦。
一、適用環(huán)境和對(duì)象
二、必要性
三、技術(shù)原則
四、代碼編寫規(guī)范
五、頁(yè)面模版使用規(guī)范
一、適用環(huán)境和對(duì)象
本規(guī)范適用基于瀏覽器的B/S版軟件項(xiàng)目開(kāi)發(fā)工作。開(kāi)發(fā)流程中的模版頁(yè)面編寫和模版文件套用工作必須遵照此規(guī)范執(zhí)行。適用對(duì)象為開(kāi)發(fā)編碼人員、UI設(shè)計(jì)人員、模版編寫人員、界面測(cè)試人員等。
基于客戶端的C/S版軟件開(kāi)發(fā)工作不適用本技術(shù)規(guī)范。
二、必要性
本規(guī)范旨在制訂開(kāi)發(fā)編碼人員和UI模版編寫人員之間在工作交叉部分的技術(shù)標(biāo)準(zhǔn)，使他們遵循同 一操作規(guī)范，利于交叉工作的平緩順利交接。以標(biāo)準(zhǔn)化方式，提高溝通和技術(shù)協(xié)作的水平，提高工作效率。減少和改變責(zé)任不明，任務(wù)不清，和由此產(chǎn)生的信息溝通 不暢、反復(fù)修改、重復(fù)勞動(dòng)、效率低下的現(xiàn)象。
三、技術(shù)原則
代碼規(guī)范化書(shū)寫
代碼規(guī)范化書(shū)寫實(shí)現(xiàn)了腳本整體風(fēng)格的一致，保證了同一個(gè)人不同時(shí)期 寫的腳本風(fēng)格保持一致，以及同一個(gè)工作組中不同的開(kāi)發(fā)人員編寫的腳本風(fēng)格保持一致。因?yàn)殚_(kāi)發(fā)不可能在孤立中進(jìn)行，所以代碼規(guī)范化書(shū)寫是項(xiàng)目組人員合作溝通 的前提。
數(shù)據(jù)層、結(jié)構(gòu)層、表現(xiàn) 層分離
數(shù)據(jù)內(nèi)容就是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。把信息內(nèi)容以一種合適的 方式格式化，簡(jiǎn)言之就是頁(yè)面排版，例如：分成標(biāo)題、作者、章、節(jié)、段落和列表等，使內(nèi)容更加具有邏輯性，條理清晰易讀易懂，叫做“結(jié)構(gòu) (Structure)” 雖然定義了結(jié)構(gòu)，但是內(nèi)容還是相同的樣式?jīng)]有改變，例如標(biāo)題字體沒(méi)有變大，正文的顏色也沒(méi)有變化，沒(méi)有背景，沒(méi)有修飾。所有這些用來(lái)改變內(nèi)容外觀的東西， 稱之為“表現(xiàn)(Presentation)” “表現(xiàn)”的作用使內(nèi)容看上去漂亮、賞心悅目、打動(dòng)人心！
所有HTML和XHTML頁(yè)面就是由“結(jié)構(gòu)、表現(xiàn)和行為”這三方面 組成的。抽象一點(diǎn)理解，內(nèi)容是基礎(chǔ)層，然后是附加上去結(jié)構(gòu)層和表現(xiàn)層，人對(duì)頁(yè)面內(nèi)容的交互及操作效果叫做“行為（Behavior）”,
對(duì)于數(shù)據(jù)、結(jié)構(gòu)與表現(xiàn) 相分離，最早是在軟件開(kāi)發(fā)架構(gòu)理論中提出來(lái)的。UI設(shè)計(jì)師設(shè)計(jì)出頁(yè)面模版，程序員負(fù)責(zé)內(nèi)容數(shù)據(jù)的嵌入，數(shù)據(jù)可能是從數(shù)據(jù)庫(kù)中提取出來(lái)，也可能是靜態(tài)寫入的 提示性文字，最后形成一個(gè)新的頁(yè)面展示給軟件操作者。模版文件的結(jié)構(gòu)利用HTML＋XHTML標(biāo)簽來(lái)定義，而所有涉及表現(xiàn)的東西通通剝離出來(lái)，把它放到一 個(gè)單獨(dú)的文件里，這個(gè)單獨(dú)的文件就是CSS。
數(shù)據(jù)、結(jié)構(gòu)與表現(xiàn)相分離的好處是：
程序員不需要過(guò)多的思考頁(yè)面顯示問(wèn)題，而只需要根據(jù)模版效果把數(shù) 據(jù)放入模版相應(yīng)的位置。界面的結(jié)構(gòu)和表現(xiàn)由UI設(shè)計(jì)師負(fù)責(zé)。填入結(jié)構(gòu)的數(shù)據(jù)自覺(jué)套用設(shè)計(jì)好了的表現(xiàn)效果。最后呈現(xiàn)一個(gè)實(shí)現(xiàn)功能的完整界面。
表現(xiàn)層 的分離保持整個(gè)軟件界面視覺(jué)的一致性，使改版也變得非常簡(jiǎn)單，修改樣式表就可以了；
由于結(jié)構(gòu)清晰，數(shù)據(jù)層相對(duì)獨(dú)立，對(duì)數(shù)據(jù)的集成、更新、處理和再 利用也更加方便靈活；
四、代碼 編寫規(guī)范
（一）目錄結(jié)構(gòu)及命名 規(guī)則
目錄結(jié)構(gòu)規(guī)范
1、 目錄建立的原則：以最少的層次提供最清晰簡(jiǎn)便的訪問(wèn)結(jié)構(gòu)。
2、根目錄一般只存放index.htm以及其他必須的系統(tǒng)文件
3、在根目錄中 原則上應(yīng)該按照系統(tǒng)的欄目結(jié)構(gòu)，給每一個(gè)欄目開(kāi)設(shè)一個(gè)目錄，根據(jù)需要在每一個(gè)欄目的目錄中開(kāi)設(shè)一個(gè)images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個(gè)欄目的內(nèi)容特別多，又分出很多下級(jí)欄目，可以相應(yīng)的再開(kāi)設(shè)其他目錄。根目錄下的images用于 存放各頁(yè)面都要使用的公用圖片，子目錄下的images目錄存放本欄目頁(yè)面使用的私有圖片
4、所有JS,ASP,PHP等腳本存放在根目錄下的 scripts目錄
5、所有CGI程序存放在根目錄下的cgi-bin目錄
6、所有CSS文件存放在根目錄下style目錄
7、 每個(gè)語(yǔ)言版本存放于獨(dú)立的目錄。例如：簡(jiǎn)體中文gb
8、所有flash, avi, ram, quicktime 等多媒體文件存放在根目錄下的media目錄
9、temp 子目錄放客戶提供的各種文字圖片等等原始資料，以時(shí)間為名稱開(kāi)設(shè)目錄，將客戶陸續(xù)提供的資料歸類整理。
文件和目錄命名規(guī)范
1、文件命名的原則：以最少的字母達(dá)到最容 易理解的意義。
2、每一個(gè)目錄中包含的缺省html 文件，文件名統(tǒng)一用index.htm
3、文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下 劃線的組合，不得包含漢字、空格和特殊字符
4、盡量按單詞的英語(yǔ)翻譯為名稱。例如：feedback(信息反饋)，aboutus(關(guān)于我們) 不到萬(wàn)不得已不要以拼音作為目錄名稱
5、多個(gè)同類型文件使用英文字母加數(shù)字命名，字母和數(shù)字之間用_分隔。例如：news_01.htm。注意， 數(shù)字位數(shù)與文件個(gè)數(shù)成正比，不夠的用0補(bǔ)齊。例如共有200條新聞，其中第18條命名為news_018.htm
圖片的命名規(guī)范
1、 名稱分為頭尾兩兩部分，用下劃線隔開(kāi)。
2、頭部分表示此圖片的大類性質(zhì)。例如： 放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片我們?nèi)∶篵anner ；標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo ；在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton ；在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu ；裝飾用的照片我們?nèi)∶簆ic ；不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle 依照此原則類推。
3、尾部分用來(lái)表示圖片的具體含義，用英文字 母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
4、有onmouse效果的圖片，兩張分別在原有文件名后加”_on”和”_off”命名
其它文件命名規(guī)范
1、 js的命名原則以功能的英語(yǔ)單詞為名。例如：廣告條的js文件名為:ad.js
2、所有的CGI文件后綴為cgi。所有CGI程序的配置文件為 config.cgi
（二） html編寫規(guī)則
一般原則
1、在編寫模版文件，排布結(jié)構(gòu)表格之前，要思考一個(gè)最佳方案，表格的嵌套盡量控制在三層以內(nèi)；要考 慮程序套用的可實(shí)現(xiàn)性、通用性、靈活性、預(yù)見(jiàn)性，所有內(nèi)容均采用積木式組織，可替換和刪除，并對(duì)總體結(jié)構(gòu)不會(huì)造成破壞性影響
2、盡量避免 <colspan> <rowspan> 兩個(gè)標(biāo)記，經(jīng)驗(yàn)表明，這兩個(gè)標(biāo)記會(huì)帶來(lái)許多麻煩
3、一個(gè)網(wǎng)頁(yè)要盡量避免用整個(gè) 一張大表格，所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi)。因?yàn)闉g覽器在解釋頁(yè)面元素時(shí)，是以表格為單位逐一顯示，如果一張網(wǎng)頁(yè)是嵌套在一個(gè)大表格之內(nèi)，那么很可能 造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對(duì)一片空白很長(zhǎng)時(shí)間，然后所有的網(wǎng)頁(yè)內(nèi)容同時(shí)出現(xiàn)。如果必須這樣做，請(qǐng)使用 <tbody>標(biāo)記，以便能夠使這個(gè)大表格分塊顯示
4、排版中經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用全角空格來(lái)達(dá)到效果，規(guī)范 的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記，注意，一般情況下，請(qǐng)不要省略 </p> 結(jié)束標(biāo)記
5、原則上，我們禁止用 <img width=? height=?> 來(lái)人為干預(yù)圖片顯示的尺寸，而且建議 <img> 標(biāo)簽中不要帶上width 和height 兩個(gè)屬性，這是因?yàn)橹谱鬟^(guò)程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個(gè)副作用是當(dāng) 網(wǎng)頁(yè)還未加載圖片時(shí)，不會(huì)留出圖片的站位大小，可能會(huì)造成網(wǎng)頁(yè)在加載過(guò)程中抖動(dòng)（如果圖片是插在一個(gè)固定大小的表格里的，不會(huì)有這個(gè)現(xiàn)象），尤其是當(dāng)圖片 的尺寸較大時(shí)，這種現(xiàn)象會(huì)很明顯，所以當(dāng)預(yù)料到這種會(huì)明顯導(dǎo)致網(wǎng)頁(yè)抖動(dòng)的情況會(huì)發(fā)生時(shí)，務(wù)必在最后給 <img>附上 width 和 height 屬性
6、為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能，在一段完整的文字中盡量不要使用<br> 來(lái)人工干預(yù)分段
7、 不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號(hào)之前和避尾的符號(hào)之后除外，漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周圍的括號(hào)應(yīng)該使用半角括號(hào)
8、 為貫徹結(jié)構(gòu)層和表現(xiàn)層分離的原則，嚴(yán)禁使用傳統(tǒng)的HTML3.2/4.0控制表現(xiàn)的標(biāo)簽，例如<font>,<b>，還有本意用 于結(jié)構(gòu)后來(lái)被濫用于控制表現(xiàn)的標(biāo)簽，例如：<h1>,<table>等。所有的字號(hào)都應(yīng)該用樣式表來(lái)實(shí)現(xiàn)，禁止在頁(yè)面中出現(xiàn) <font size= > 標(biāo)記，<b> </b> <h1> </h1>標(biāo)記，嚴(yán)禁在結(jié)構(gòu)頁(yè)面寫表現(xiàn)標(biāo)簽
9、不要在網(wǎng)頁(yè) 中連續(xù)出現(xiàn)多于一個(gè)的也盡量少使用全角空格（英文字符集下，全角空格會(huì)變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來(lái)實(shí)現(xiàn)。
10、中英文混排時(shí)，我們盡可能的將英文和數(shù)字定義為 verdana 和arial 兩種字體
11、行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是line-height:120%/150%
12、 系統(tǒng)中的路徑全部采用相對(duì)路徑
13、為保證系統(tǒng)和瀏覽器的兼容性，當(dāng)設(shè)置背景圖片時(shí)，要堅(jiān)持用雙引號(hào)。
14、“網(wǎng)頁(yè)大小”為網(wǎng)頁(yè)的所有文 件大小的總和，包括HTML文件和所有的嵌入的對(duì)象。頁(yè)面大小保持在34K以下為合適
代碼規(guī)則
head區(qū)標(biāo)識(shí)（head區(qū)是指首頁(yè)HTML代碼的<head> 和</head>之間的內(nèi)容）
1、公司版權(quán)注釋
<!–
Generator: 中軟融鑫
Creation Data: 2005-8-1
Original Author: 張三
–>
2、網(wǎng)頁(yè)顯示字符集
簡(jiǎn)體中文：
<META. HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
繁體中 文：
<META. HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=BIG5″>
英 語(yǔ)：
<META. HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>
?
3、簡(jiǎn)介
<META. NAME=”DESCRIPTION” CONTENT=”這里填您網(wǎng)站的簡(jiǎn)介”>?
4、網(wǎng)頁(yè)的css文件定義，所有css文件盡量采用外部調(diào)用
<LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>
5、網(wǎng)頁(yè)標(biāo)題
<title> 這里是你的網(wǎng)頁(yè)標(biāo)題</title>
6、所有的javascript腳本盡量采取外部調(diào)用
<SCRIPT. LANGUAGE=”javascript” SRC=”script/xxxxx.js”></SCRIPT>
head區(qū)可以選擇加 入的標(biāo)識(shí)
7、設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，必須到fwq上重新調(diào)閱。
<META. HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>
8、禁止瀏覽器從本地 機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容。
<META. HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>
9、用來(lái)防止別人在框 架里調(diào)用你的頁(yè)面。
<META. HTTP-EQUIV=”Window-target” CONTENT=”_top”>
10、自動(dòng)跳轉(zhuǎn)。
<META. HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http://www.yahoo.com”>
5指時(shí)間停留 5秒。
11、網(wǎng)頁(yè)搜索機(jī)器人 向?qū)?用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。
<META. NAME=”robots” CONTENT=”none”>
CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。 默認(rèn)是all。
12、收藏 夾圖標(biāo)
<link rel = “Shortcut Icon” href=”favicon.ico”>
13、搜索關(guān)鍵字
<META. NAME=”keywords” CONTENT=”關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3,…”>
head區(qū)以下的標(biāo)記
1、body標(biāo)記
為了保證瀏 覽器的兼容性，必須設(shè)置頁(yè)面背景
<body bgcolor=”#FFFFFF”>
2、table標(biāo)記
在寫 <table> 互相嵌套時(shí)，嚴(yán)格按照的規(guī)范，對(duì)于單獨(dú)的一個(gè)<table>來(lái)說(shuō)，<tr>，<td>各縮進(jìn)兩個(gè)半角空格，結(jié)束標(biāo)記 和開(kāi)始標(biāo)記平齊。<td> 中如果還有嵌套的表格，<table>也縮進(jìn)兩個(gè)半角空格，如果<td>中沒(méi)有任何嵌套的表格，</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行，不要換行。
正確寫法：
a\
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
b\
<td><img src=”../images/sample.gif”></td>
錯(cuò)誤寫法
a\
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
</tr>
<tr>
<td><table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
b\
<td><img src=”../images/sample.gif”>
</td>
這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格，以 上不規(guī)范的寫法相當(dāng)于無(wú)意中增加一個(gè)半角空格，如果確實(shí)有必要增加一個(gè)半角空格，也應(yīng)該這樣寫：
<td><img src=”../images/sample.gif”> </td>
于同一個(gè)級(jí)別的 <table> 一定是左首對(duì)齊的，另外不允許沒(méi)有任何內(nèi)容的空的單元格存在，高度大于等于12px 的單元格應(yīng)該 在 <td> 和 </td> 之間寫一個(gè) ，如果高度小于12px, 則應(yīng)該 在 <td> 和 </td> 之間插入一個(gè)1*1 大小的透明的gif 圖片，這是因?yàn)槟承g覽器認(rèn)為空單元格非法而不會(huì)予以解釋。如果代碼順序較亂，在DW中可以通過(guò)command->apply souce formatting進(jìn)行重新整理！
3、Width 和height標(biāo)記
一般情況下只有一列的表格，width 寫在<table> 的標(biāo)簽內(nèi)，只有一行的表格，height 寫在 <table> 的標(biāo)簽內(nèi)，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標(biāo)簽內(nèi)。總之遵循一條原則：不出現(xiàn)多于一個(gè)的控制同一個(gè)單元格大小的height 和width, 保證任何一個(gè)width 和height 都是有效的，也就是改動(dòng)代碼中任何一個(gè)width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。
a、只一列的表格的width標(biāo)記
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
b、 只一行的表格的height標(biāo)記
<table width=”100%” height=”30″? border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
c、 多行多列表格的width和height標(biāo)記
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”100″ height=”30″> </td>
<td width=”200″> </td>
<td width=”300″> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
4、table的 width屬性
為遵循頁(yè)面 結(jié)構(gòu)靈活性、通用性原則，table的width屬性原則上全部寫成100％或者不寫width屬性，不推薦寫成其他非100％寬度屬性。留空顯示效果通 過(guò)其給外部td施加style的padding屬性實(shí)現(xiàn)。
<table width=”100%”? border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”200″ bgcolor=”#FF0000″ style=”padding:20px; “>
<table width=”100%” border=”1″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFFFFF”>
<tr>
<td>table寬度 100％</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
需要說(shuō)明的是這里td的style雖然是css的寫法，但不屬于表現(xiàn)層的內(nèi)容，而是屬于結(jié)構(gòu)層 的內(nèi)容，所以可以直接寫在html標(biāo)記中間。
5、數(shù)據(jù)列表表格代碼寫法
表格外加上一個(gè)<div>，并對(duì)<div>賦一個(gè) id，即<div id =list>，然后通過(guò)樣式表對(duì)這個(gè)id下的所有html元素進(jìn)行控制，
用<th>表示表頭
設(shè) 置每列寬度的位置在表頭對(duì)應(yīng)的<th>中，其中列表項(xiàng)中，字?jǐn)?shù)最多或者字?jǐn)?shù)不定的一項(xiàng)不設(shè)置寬度。
寬度的值依據(jù)列表項(xiàng)內(nèi)容的多少來(lái) 定，2個(gè)字的30px，三個(gè)字40px，時(shí)間、年月日（比如2004-11-11）80-120px,
類似于標(biāo)題的列表項(xiàng)，表格對(duì)齊方式為左對(duì)齊 （align=left）,時(shí)間，人名一般居中對(duì)齊，數(shù)據(jù)一般右對(duì)齊（align=right）。
對(duì)齊頁(yè)面內(nèi)容時(shí)不要用div來(lái)對(duì)齊，直接在td 或th中寫align=…
表頭文字一般不折行，方法是在<th>中加上nowrap,或者通過(guò)樣式表來(lái)控制
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<th width=”30″ nowrap>選擇</th>
<th align=”left” nowrap>標(biāo)題</th>
<th width=”80″ nowrap>發(fā)表人</th>
<th width=”120″ nowrap>時(shí)間</th>
<th width=”40″ nowrap>大小</th>
</tr>
<tr>
<td> </td>
<td align=”left”> </td>
<td align=”center”> </td>
<td align=”center”> </td>
<td align=”right”> </td>
</tr>
<tr>
<td> </td>
<td align=”left”> </td>
<td align=”center”> </td>
<td align=”center”> </td>
<td align=”right”> </td>
</tr>
</table>
（三） css編寫規(guī)則
css文件 調(diào)用寫法
1、所有的CSS的盡量采用外部調(diào)用，特殊情況才允許使用內(nèi)置html寫法。
<LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>
css文件結(jié)構(gòu)組織
1、 文件提頭，css文件名稱、時(shí)間、作者
2、 將不同目的和效果的CSS選擇符分別編組，編組分層級(jí)使結(jié)構(gòu)清晰，便于查對(duì)。并恰當(dāng)?shù)爻蓧K注釋，注釋要說(shuō) 明施加的頁(yè)面文件的對(duì)象。頂級(jí)注釋用*TOP*打頭，次級(jí)注釋不用。
.headtext {
font-size: 14px;
color: #ffffff;
font-weight: bold;
}?
.headtext a:link {
color: #ffffff;
text-decoration: none;
}
.headtext a:visited {
color: #ffffff;
text-decoration: none;
}
.headtext a:hover {
color: FED078;
text-decoration:none ;
}
#clientcard {
align:left;
}
#clientcard th {
height:20;
font-size: 12px;
color: #737373;
padding-left:10;
font-weight: bold;
background-attachment: fixed;
background:url(images/dot2.gif)
background-repeat: no-repeat;
background-position: left center;
}
#clientcard td {
height:20;
font-size: 12px;
color: #FD783A;
padding-right:25;
}
3、選擇符分組的順序是重定義的最先，偽類其次，自定義最后。便于自己和他人閱讀。
例 如：
BODY {
margin-left: 0px;
…
}
TD {
font-size: 12px;
…
}
a:link {
color:?#484848;
text-decoration: none;
}
a:visited {
color: #484848;
text-decoration: none;
}
a:hover {
color:#BD0800;
text-decoration: underline;
}
.ltreename {
font-size: 14px;
…
}
類和ID命名規(guī)則
1、 以功能和定義對(duì)象的位置，而不是外觀為類和ID命名。例如創(chuàng)建了一個(gè) .smallblue 類，后來(lái)打算將文字改大，顏色變?yōu)榧t色，這個(gè)類名就不再有任何意義了。所以，用更有描述性的名字如 .copyright 和.info-list更加合適。
單位
1、0不用單位
2、非零值要指明單位，指定字體、邊距或大小時(shí)，必須指明所用的單位
例 如： padding: 0 2px 0 1em;
3、特例：line-height不需要單位
字號(hào)大小
1、為了保證不同瀏覽器上字號(hào)保持一致，字號(hào)像素px 來(lái)定義，一般使用中文宋體12px 和14.7px 這是經(jīng)過(guò)優(yōu)化的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用14.7px 的字號(hào)比較合適
例如： font-size: 12px;
順序
1、a:link a:visited a:hover a:actived 要按照規(guī)范順序?qū)?br />
2、 邊框(border)、邊距(margin)和補(bǔ)白(padding)的簡(jiǎn)寫次序?yàn)椋喉槙r(shí)針?lè)较驈纳祥_(kāi)始，即 Top, Right, Bottom, Left。
例如： margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。
組合選擇符
1、 保持CSS短小對(duì)減少下載時(shí)間非常重要。盡量為選擇符分組、利用繼承(inheritance)以及使用簡(jiǎn)寫(shorthand)來(lái)減少冗余。
使用圖片
1、 css中經(jīng)常遇到使用圖片的情況, 圖片的路徑一律采用相對(duì)路徑。
例如：
.hurdlename {
font-size: 14px;
color: #0B43C2;
height:25px;
font-weight: bold;
background-image: url(images/rbar_bg.gif);
background-repeat: repeat-y;
text-indent: 12px;
}
.but1{
background-image: url(../images/but1.gif);
font-size: 12px;
color: #000000;
border: 0;
width:85px;
height:26px;
cursor: hand;
}
2、使用圖片替換技術(shù)時(shí)要考慮與系統(tǒng)和文件結(jié)構(gòu)的親和力。如果引用css的所有文件不在同一級(jí)相對(duì)路徑，就會(huì)出 現(xiàn)css指定的圖片無(wú)法顯示的問(wèn)題。在這種情況下不支持使用圖片技術(shù)。建議采用filter技術(shù)
例如：
input.buttton {
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#CFD1CF, endcolorstr=#EFEFEF);
border: #B5B6B5 1px solid;
font-size: 12px;
color: #000000;
cursor: hand;
height:24px;
background:#ffffff;
}
五 頁(yè)面模版使用規(guī)范
頁(yè)面模版使用規(guī)范的目 的是統(tǒng)一和約定UI設(shè)計(jì)、界面工程師與不同的程序編碼人員的行為方式，光有了書(shū)寫代碼的規(guī)范還不能完全解決界面套用的統(tǒng)一性問(wèn)題。因?yàn)椴煌木幋a人員對(duì)同 一個(gè)模版的理解有可能不同，再加上個(gè)人工作習(xí)慣的不同，界面套用的結(jié)果往往很容易出現(xiàn)差異。哪怕是每人一點(diǎn)點(diǎn)差異，都可能使軟件的質(zhì)量收到很大的影響。
責(zé)任分工明確
1、 UI設(shè)計(jì)、界面工程師負(fù)責(zé)界面風(fēng)格的設(shè)計(jì)和軟件模版的編寫，并監(jiān)督界面套用的效果。對(duì)軟件最終的界面負(fù)責(zé)。
2、 編碼工程師負(fù)責(zé)軟件業(yè)務(wù)邏輯的實(shí)現(xiàn)，軟件模版的套用。對(duì)軟件的數(shù)據(jù)和程序負(fù)責(zé)。
3、現(xiàn)實(shí)的情況是個(gè)別編碼工程師在模版套用出現(xiàn)偏差后，在界面工程 師提出修改意見(jiàn)的時(shí)候拒絕修改，以開(kāi)發(fā)進(jìn)度、時(shí)間不夠?yàn)橛商氯?，甚至主觀認(rèn)為“這個(gè)（界面）不重要”致使界面工程師的作用得不到應(yīng)有的發(fā)揮，影響軟件產(chǎn)品 質(zhì)量。
4、 解決辦法是各負(fù)其責(zé)。界面問(wèn)題提高重視程度，并納入開(kāi)發(fā)流程和進(jìn)度管理之中。
界面模版交界過(guò)程
1、 模版文件制作完成后，在提交給編碼工程師時(shí)，要簡(jiǎn)要說(shuō)明模版的文件的使用說(shuō)明和提醒。
2、 編碼工程師和界面工程師密切合作，完全理解模版使用說(shuō)明。
3、對(duì)界面結(jié)構(gòu)層html的table嵌套關(guān)系理解清楚并明確和程序結(jié)合的用意。有和程 序不相配合的情況，進(jìn)一步和界面工程師討論，獲得解決方案。不得在界面工程師不知情的情況下隨意修改table結(jié)構(gòu)、定位屬性和嵌套關(guān)系。這樣做的壞處是 雖然一個(gè)人解決了暫時(shí)的顯示問(wèn)題，但和其他編碼工程師套用的結(jié)果出現(xiàn)不同。也不利于界面工程師控制總體界面。
4、 對(duì)表現(xiàn)層的界面元素和css文件選擇符的對(duì)應(yīng)關(guān)系。做到心中有數(shù)，理解一個(gè)模版文件，到套用其他文件時(shí)就能夠舉一反三。
5、編碼工程師完全 理解了界面模版后，就能夠順暢的把數(shù)據(jù)層的內(nèi)容放到結(jié)構(gòu)層合適的位置，并指定表現(xiàn)層合適的選擇符屬性。完成界面套用工作。
模版說(shuō)明的內(nèi)容
1、 總體的界面結(jié)構(gòu)
2、 頁(yè)面板塊的布局和定位table的寫法
3、 table嵌套的方式的理由
4、 不同功能的界面顯示單元說(shuō)明和使用方法
5、 css文件中選擇符的使用說(shuō)明，一般的都能理解，個(gè)別特殊的要著重說(shuō)明。
Css文件的版本控制
Css 文件應(yīng)引入版本控制的機(jī)制，項(xiàng)目組中應(yīng)指定專人負(fù)責(zé)css文件的上傳和修改。fwq的css文件和界面工程師的css文件應(yīng)該同步更新。不支持編碼工程師 隨意添加選擇符修改css文件。誰(shuí)都可以改就沒(méi)有標(biāo)準(zhǔn)，沒(méi)有版本控制就做很難做到界面統(tǒng)一。
來(lái)源：http://www.cnblogs.com/pcxpt/archive/2010/07/08/1773476.html
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
