這是一個UI模板規(guī)范，在做B/S版應用程序時比較適用，其實這樣的東西算不上什么正規(guī)的規(guī)范，只是為了適應我們現(xiàn)在面對的開發(fā)環(huán)境和組織流程做的一些權宜的努力，和解決了一些與程序溝通和接口的問題，盡量避免誤會和摩擦。

一、適用環(huán)境和對象
二、必要性
三、技術原則
四、代碼編寫規(guī)范
五、頁面模版使用規(guī)范

一、適用環(huán)境和對象
本規(guī)范適用基于瀏覽器的B/S版軟件項目開發(fā)工作。開發(fā)流程中的模版頁面編寫和模版文件套用工作必須遵照此規(guī)范執(zhí)行。適用對象為開發(fā)編碼人員、UI設計人員、模版編寫人員、界面測試人員等。
基于客戶端的C/S版軟件開發(fā)工作不適用本技術規(guī)范。

二、必要性
本規(guī)范旨在制訂開發(fā)編碼人員和UI模版編寫人員之間在工作交叉部分的技術標準，使他們遵循同 一操作規(guī)范，利于交叉工作的平緩順利交接。以標準化方式，提高溝通和技術協(xié)作的水平，提高工作效率。減少和改變責任不明，任務不清，和由此產生的信息溝通 不暢、反復修改、重復勞動、效率低下的現(xiàn)象。

三、技術原則
代碼規(guī)范化書寫
代碼規(guī)范化書寫實現(xiàn)了腳本整體風格的一致，保證了同一個人不同時期 寫的腳本風格保持一致，以及同一個工作組中不同的開發(fā)人員編寫的腳本風格保持一致。因為開發(fā)不可能在孤立中進行，所以代碼規(guī)范化書寫是項目組人員合作溝通 的前提。

數(shù)據(jù)層、結構層、表現(xiàn) 層分離
數(shù)據(jù)內容就是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或者圖片等。這里強調的“真正”，是指純粹的數(shù)據(jù)信息本身。把信息內容以一種合適的 方式格式化，簡言之就是頁面排版，例如：分成標題、作者、章、節(jié)、段落和列表等，使內容更加具有邏輯性，條理清晰易讀易懂，叫做“結構 (Structure)” 雖然定義了結構，但是內容還是相同的樣式沒有改變，例如標題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內容外觀的東西， 稱之為“表現(xiàn)(Presentation)” “表現(xiàn)”的作用使內容看上去漂亮、賞心悅目、打動人心！

所有HTML和XHTML頁面就是由“結構、表現(xiàn)和行為”這三方面 組成的。抽象一點理解，內容是基礎層，然后是附加上去結構層和表現(xiàn)層，人對頁面內容的交互及操作效果叫做“行為（Behavior）”,

對于數(shù)據(jù)、結構與表現(xiàn) 相分離，最早是在軟件開發(fā)架構理論中提出來的。UI設計師設計出頁面模版，程序員負責內容數(shù)據(jù)的嵌入，數(shù)據(jù)可能是從數(shù)據(jù)庫中提取出來，也可能是靜態(tài)寫入的 提示性文字，最后形成一個新的頁面展示給軟件操作者。模版文件的結構利用HTML＋XHTML標簽來定義，而所有涉及表現(xiàn)的東西通通剝離出來，把它放到一 個單獨的文件里，這個單獨的文件就是CSS。

數(shù)據(jù)、結構與表現(xiàn)相分離的好處是：
程序員不需要過多的思考頁面顯示問題，而只需要根據(jù)模版效果把數(shù) 據(jù)放入模版相應的位置。界面的結構和表現(xiàn)由UI設計師負責。填入結構的數(shù)據(jù)自覺套用設計好了的表現(xiàn)效果。最后呈現(xiàn)一個實現(xiàn)功能的完整界面。
表現(xiàn)層 的分離保持整個軟件界面視覺的一致性，使改版也變得非常簡單，修改樣式表就可以了；
由于結構清晰，數(shù)據(jù)層相對獨立，對數(shù)據(jù)的集成、更新、處理和再 利用也更加方便靈活；

四、代碼 編寫規(guī)范

（一）目錄結構及命名 規(guī)則

目錄結構規(guī)范
1、 目錄建立的原則：以最少的層次提供最清晰簡便的訪問結構。
2、根目錄一般只存放index.htm以及其他必須的系統(tǒng)文件
3、在根目錄中 原則上應該按照系統(tǒng)的欄目結構，給每一個欄目開設一個目錄，根據(jù)需要在每一個欄目的目錄中開設一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。根目錄下的images用于 存放各頁面都要使用的公用圖片，子目錄下的images目錄存放本欄目頁面使用的私有圖片
4、所有JS,ASP,PHP等腳本存放在根目錄下的 scripts目錄
5、所有CGI程序存放在根目錄下的cgi-bin目錄
6、所有CSS文件存放在根目錄下style目錄
7、 每個語言版本存放于獨立的目錄。例如：簡體中文gb
8、所有flash, avi, ram, quicktime 等多媒體文件存放在根目錄下的media目錄
9、temp 子目錄放客戶提供的各種文字圖片等等原始資料，以時間為名稱開設目錄，將客戶陸續(xù)提供的資料歸類整理。

文件和目錄命名規(guī)范
1、文件命名的原則：以最少的字母達到最容 易理解的意義。
2、每一個目錄中包含的缺省html 文件，文件名統(tǒng)一用index.htm
3、文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下 劃線的組合，不得包含漢字、空格和特殊字符
4、盡量按單詞的英語翻譯為名稱。例如：feedback(信息反饋)，aboutus(關于我們) 不到萬不得已不要以拼音作為目錄名稱
5、多個同類型文件使用英文字母加數(shù)字命名，字母和數(shù)字之間用_分隔。例如：news_01.htm。注意， 數(shù)字位數(shù)與文件個數(shù)成正比，不夠的用0補齊。例如共有200條新聞，其中第18條命名為news_018.htm

圖片的命名規(guī)范
1、 名稱分為頭尾兩兩部分，用下劃線隔開。
2、頭部分表示此圖片的大類性質。例如： 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名：banner ；標志性的圖片我們取名為：logo ；在頁面上位置不固定并且?guī)в墟溄拥男D片我們取名為button ；在頁面上某一個位置連續(xù)出現(xiàn)，性質相同的鏈接欄目的圖片我們取名：menu ；裝飾用的照片我們取名：pic ；不帶鏈接表示標題的圖片我們取名：title 依照此原則類推。
3、尾部分用來表示圖片的具體含義，用英文字 母表示。例如：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的命名原則以功能的英語單詞為名。例如：廣告條的js文件名為:ad.js
2、所有的CGI文件后綴為cgi。所有CGI程序的配置文件為 config.cgi

（二）　 html編寫規(guī)則

一般原則
1、在編寫模版文件，排布結構表格之前，要思考一個最佳方案，表格的嵌套盡量控制在三層以內；要考 慮程序套用的可實現(xiàn)性、通用性、靈活性、預見性，所有內容均采用積木式組織，可替換和刪除，并對總體結構不會造成破壞性影響
2、盡量避免 <colspan> <rowspan> 兩個標記，經驗表明，這兩個標記會帶來許多麻煩
3、一個網頁要盡量避免用整個 一張大表格，所有的內容都嵌套在這個大表格之內。因為瀏覽器在解釋頁面元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那么很可能 造成的后果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然后所有的網頁內容同時出現(xiàn)。如果必須這樣做，請使用 <tbody>標記，以便能夠使這個大表格分塊顯示
4、排版中經常會遇到需要進行首行縮進的處理，不要使用全角空格來達到效果，規(guī)范 的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記
5、原則上，我們禁止用 <img width=? height=?> 來人為干預圖片顯示的尺寸，而且建議 <img> 標簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復的修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當 網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當圖片 的尺寸較大時，這種現(xiàn)象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發(fā)生時，務必在最后給 <img>附上 width 和 height 屬性
6、為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中盡量不要使用<br> 來人工干預分段
7、 不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標點要用全角標點，英文字母和數(shù)字周圍的括號應該使用半角括號
8、 為貫徹結構層和表現(xiàn)層分離的原則，嚴禁使用傳統(tǒng)的HTML3.2/4.0控制表現(xiàn)的標簽，例如<font>,<b>，還有本意用 于結構后來被濫用于控制表現(xiàn)的標簽，例如：<h1>,<table>等。所有的字號都應該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn) <font size=　> 標記，<b>　</b>　<h1>　</h1>標記，嚴禁在結構頁面寫表現(xiàn)標簽
9、不要在網頁 中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現(xiàn)。
10、中英文混排時，我們盡可能的將英文和數(shù)字定義為 verdana 和arial 兩種字體
11、行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%
12、 系統(tǒng)中的路徑全部采用相對路徑
13、為保證系統(tǒng)和瀏覽器的兼容性，當設置背景圖片時，要堅持用雙引號。
14、“網頁大小”為網頁的所有文 件大小的總和，包括HTML文件和所有的嵌入的對象。頁面大小保持在34K以下為合適

代碼規(guī)則
head區(qū)標識（head區(qū)是指首頁HTML代碼的<head> 和</head>之間的內容）
1、公司版權注釋
<!–
Generator: 中軟融鑫
Creation Data: 2005-8-1
Original Author: 張三
–>

2、網頁顯示字符集
簡體中文：
<META. HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
繁體中 文：
<META. HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=BIG5″>
英 語：
<META. HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>
?
3、簡介
<META. NAME=”DESCRIPTION” CONTENT=”這里填您網站的簡介”>?

4、網頁的css文件定義，所有css文件盡量采用外部調用
<LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>

5、網頁標題
<title> 這里是你的網頁標題</title>

6、所有的javascript腳本盡量采取外部調用
<SCRIPT. LANGUAGE=”javascript” SRC=”script/xxxxx.js”></SCRIPT>

head區(qū)可以選擇加 入的標識
7、設定網頁的到期時間。一旦網頁過期，必須到fwq上重新調閱。
<META. HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>

8、禁止瀏覽器從本地 機的緩存中調閱頁面內容。
<META. HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>

9、用來防止別人在框 架里調用你的頁面。
<META. HTTP-EQUIV=”Window-target” CONTENT=”_top”>

10、自動跳轉。
<META. HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http://www.yahoo.com”>
5指時間停留 5秒。

11、網頁搜索機器人 向導.用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
<META. NAME=”robots” CONTENT=”none”>
CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。 默認是all。

12、收藏 夾圖標
<link rel = “Shortcut Icon” href=”favicon.ico”>

13、搜索關鍵字
<META. NAME=”keywords” CONTENT=”關鍵字1,關鍵字2,關鍵字3,…”>

head區(qū)以下的標記
1、body標記
為了保證瀏 覽器的兼容性，必須設置頁面背景
<body bgcolor=”#FFFFFF”>

2、table標記
在寫 <table> 互相嵌套時，嚴格按照的規(guī)范，對于單獨的一個<table>來說，<tr>，<td>各縮進兩個半角空格，結束標記 和開始標記平齊。<td> 中如果還有嵌套的表格，<table>也縮進兩個半角空格，如果<td>中沒有任何嵌套的表格，</td> 結束標記應該與 <td> 處于同一行，不要換行。
正確寫法：
a\
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

b\
<td><img src=”../images/sample.gif”></td>

錯誤寫法
a\
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

b\
<td><img src=”../images/sample.gif”>
</td>
這是因為瀏覽器認為換行相當于一個半角空格，以 上不規(guī)范的寫法相當于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應該這樣寫：
<td><img src=”../images/sample.gif”> </td>

于同一個級別的 <table> 一定是左首對齊的，另外不允許沒有任何內容的空的單元格存在，高度大于等于12px 的單元格應該 在 <td> 和 </td> 之間寫一個&nbsp;，如果高度小于12px, 則應該 在 <td> 和 </td> 之間插入一個1*1 大小的透明的gif 圖片，這是因為某些瀏覽器認為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW中可以通過command->apply souce formatting進行重新整理！

3、Width 和height標記
一般情況下只有一列的表格，width 寫在<table> 的標簽內，只有一行的表格，height 寫在 <table> 的標簽內，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標簽內?？傊裱粭l原則：不出現(xiàn)多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是改動代碼中任何一個width 和height 的數(shù)值，都應該在瀏覽器中看到變化。
a、只一列的表格的width標記
<table width=”100%”? border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
b、 只一行的表格的height標記
<table width=”100%” height=”30″? border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
c、 多行多列表格的width和height標記
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”100″ height=”30″>&nbsp;</td>
<td width=”200″>&nbsp;</td>
<td width=”300″>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

4、table的 width屬性

為遵循頁面 結構靈活性、通用性原則，table的width屬性原則上全部寫成100％或者不寫width屬性，不推薦寫成其他非100％寬度屬性。留空顯示效果通 過其給外部td施加style的padding屬性實現(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>&nbsp;</td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
</table>

需要說明的是這里td的style雖然是css的寫法，但不屬于表現(xiàn)層的內容，而是屬于結構層 的內容，所以可以直接寫在html標記中間。

5、數(shù)據(jù)列表表格代碼寫法
表格外加上一個<div>，并對<div>賦一個 id，即<div id =list>，然后通過樣式表對這個id下的所有html元素進行控制，
用<th>表示表頭
設 置每列寬度的位置在表頭對應的<th>中，其中列表項中，字數(shù)最多或者字數(shù)不定的一項不設置寬度。
寬度的值依據(jù)列表項內容的多少來 定，2個字的30px，三個字40px，時間、年月日（比如2004-11-11）80-120px,
類似于標題的列表項，表格對齊方式為左對齊 （align=left）,時間，人名一般居中對齊，數(shù)據(jù)一般右對齊（align=right）。
對齊頁面內容時不要用div來對齊，直接在td 或th中寫align=…
表頭文字一般不折行，方法是在<th>中加上nowrap,或者通過樣式表來控制

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<th width=”30″ nowrap>選擇</th>
<th align=”left” nowrap>標題</th>
<th width=”80″ nowrap>發(fā)表人</th>
<th width=”120″ nowrap>時間</th>
<th width=”40″ nowrap>大小</th>
</tr>
<tr>
<td>&nbsp;</td>
<td align=”left”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”right”>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align=”left”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”center”>&nbsp;</td>
<td align=”right”>&nbsp;</td>
</tr>
</table>
（三）　 css編寫規(guī)則

css文件 調用寫法
1、所有的CSS的盡量采用外部調用，特殊情況才允許使用內置html寫法。
<LINK href=”style/style.css” rel=”stylesheet” type=”text/css”>

css文件結構組織
1、 文件提頭，css文件名稱、時間、作者

2、　將不同目的和效果的CSS選擇符分別編組，編組分層級使結構清晰，便于查對。并恰當?shù)爻蓧K注釋，注釋要說 明施加的頁面文件的對象。頂級注釋用*TOP*打頭，次級注釋不用。

.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、 以功能和定義對象的位置，而不是外觀為類和ID命名。例如創(chuàng)建了一個 .smallblue 類，后來打算將文字改大，顏色變?yōu)榧t色，這個類名就不再有任何意義了。所以，用更有描述性的名字如 .copyright 和.info-list更加合適。

單位
1、0不用單位
2、非零值要指明單位，指定字體、邊距或大小時，必須指明所用的單位
例 如： padding: 0 2px 0 1em;
3、特例：line-height不需要單位

字號大小
1、為了保證不同瀏覽器上字號保持一致，字號像素px 來定義，一般使用中文宋體12px 和14.7px 這是經過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用14.7px 的字號比較合適
例如： font-size: 12px;

順序
1、a:link a:visited a:hover a:actived 要按照規(guī)范順序寫
2、 邊框(border)、邊距(margin)和補白(padding)的簡寫次序為：順時針方向從上開始，即 Top, Right, Bottom, Left。
例如： margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。

組合選擇符
1、 保持CSS短小對減少下載時間非常重要。盡量為選擇符分組、利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗余。

使用圖片
1、 css中經常遇到使用圖片的情況, 圖片的路徑一律采用相對路徑。
例如：

.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、使用圖片替換技術時要考慮與系統(tǒng)和文件結構的親和力。如果引用css的所有文件不在同一級相對路徑，就會出 現(xiàn)css指定的圖片無法顯示的問題。在這種情況下不支持使用圖片技術。建議采用filter技術
例如：

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;
}

五　頁面模版使用規(guī)范

頁面模版使用規(guī)范的目 的是統(tǒng)一和約定UI設計、界面工程師與不同的程序編碼人員的行為方式，光有了書寫代碼的規(guī)范還不能完全解決界面套用的統(tǒng)一性問題。因為不同的編碼人員對同 一個模版的理解有可能不同，再加上個人工作習慣的不同，界面套用的結果往往很容易出現(xiàn)差異。哪怕是每人一點點差異，都可能使軟件的質量收到很大的影響。

責任分工明確
1、 UI設計、界面工程師負責界面風格的設計和軟件模版的編寫，并監(jiān)督界面套用的效果。對軟件最終的界面負責。
2、 編碼工程師負責軟件業(yè)務邏輯的實現(xiàn)，軟件模版的套用。對軟件的數(shù)據(jù)和程序負責。
3、現(xiàn)實的情況是個別編碼工程師在模版套用出現(xiàn)偏差后，在界面工程 師提出修改意見的時候拒絕修改，以開發(fā)進度、時間不夠為由搪塞，甚至主觀認為“這個（界面）不重要”致使界面工程師的作用得不到應有的發(fā)揮，影響軟件產品 質量。
4、 解決辦法是各負其責。界面問題提高重視程度，并納入開發(fā)流程和進度管理之中。

界面模版交界過程
1、 模版文件制作完成后，在提交給編碼工程師時，要簡要說明模版的文件的使用說明和提醒。
2、 編碼工程師和界面工程師密切合作，完全理解模版使用說明。
3、對界面結構層html的table嵌套關系理解清楚并明確和程序結合的用意。有和程 序不相配合的情況，進一步和界面工程師討論，獲得解決方案。不得在界面工程師不知情的情況下隨意修改table結構、定位屬性和嵌套關系。這樣做的壞處是 雖然一個人解決了暫時的顯示問題，但和其他編碼工程師套用的結果出現(xiàn)不同。也不利于界面工程師控制總體界面。
4、 對表現(xiàn)層的界面元素和css文件選擇符的對應關系。做到心中有數(shù)，理解一個模版文件，到套用其他文件時就能夠舉一反三。

5、編碼工程師完全 理解了界面模版后，就能夠順暢的把數(shù)據(jù)層的內容放到結構層合適的位置，并指定表現(xiàn)層合適的選擇符屬性。完成界面套用工作。

模版說明的內容
1、 總體的界面結構
2、 頁面板塊的布局和定位table的寫法
3、 table嵌套的方式的理由
4、 不同功能的界面顯示單元說明和使用方法
5、 css文件中選擇符的使用說明，一般的都能理解，個別特殊的要著重說明。

Css文件的版本控制
Css 文件應引入版本控制的機制，項目組中應指定專人負責css文件的上傳和修改。fwq的css文件和界面工程師的css文件應該同步更新。不支持編碼工程師 隨意添加選擇符修改css文件。誰都可以改就沒有標準，沒有版本控制就做很難做到界面統(tǒng)一。

來源：http://www.cnblogs.com/pcxpt/archive/2010/07/08/1773476.html