第一部分:界面設計標准
1.開發環境設置:屏幕設置為800*600/1024*768
2.界面設計原則:風格必須統一
3.B/S結構開發原則:使用框架/模板
4.頁面使用表格(Table)進行格式設置。
最外面的表格設置:width=778px align=center border=0
5.主頁面Body設置:bgcolor="#cccccc"
6.框架子頁面Body設置:bottomMargin="0" leftMargin="0"
7.對齊:文字(標簽)右對齊;數字(數據)右對齊;文字(數據)左對齊,比較短的可以居中對齊;金額,需加上 千位符
8.冒號必須是在中文輸入狀態下鍵入
9.控件使用原則:盡可能使用Html控件,需要提交而又不用在客戶端使用Javasrcipt的可以使用Web控件
10.控件使用約定:
(1)控件外觀設置:style.css
i.i 鏈接類:
a:link {font-size: 12px;line-height: 20px;text-decoration: none; color: #666666}
a:visited {font-size: 12px;line-height: 20px;color: #666666;text-decoration:
none;}
a:hover {font-size: 12px;line-height: 20px;color: #FF6600;text-decoration:
underline;}
a:active {font-size: 12px;line-height: 20px;color: #666666;text-decoration:
underline;}
i.ii 表格類:
td{font-size: 12px; line-height: 20px; text-decoration: none;}
i.iii 文本框類:
.inputPM{BORDER-RIGHT: #99ccff 1px solid; BORDER-TOP: #99ccff 1px solid;
BORDER-LEFT: #99ccff 1px solid; BORDER-BOTTOM: #99ccff 1px solid;
HEIGHT: 22px}
i.iv datagrid類:
.dg_grid /* Grid-總體 */
{font-size:12px; border-style:solid; border-width:2px; border-color:White;
text-align:center; vertical-align:middle;}
.dg_header /* Grid-頁眉 */
{font-weight :bold ; color:#E7E7FF; background-color :#3366CC; text-align:center;
vertical-align:middle; height:25px;}
.dg_alter /* Grid-交替行 */
{background-color :AliceBlue; height:22px;}
.dg_item /* Grid-普通行 */
{color :Black; background-color:WhiteSmoke; height:22px;}
.dg_page /* Grid-頁導航 */
{color:Black; text-align:right; vertical-align:middle; height:22px;}
.dg_select{font-weight :bold ; color:White; background-color :#9471DE;} /* Grid-選擇行 */
(2)幾點補充:
ii.i 控件datagrid的數據顯示:文字(短)居中對齊;文字(長)左對齊;日期左對齊;數字左對齊;金額左對齊,千位符
ii.ii 控件text的長度MaxLength按數據結構要求設置
ii.iii 因為操作主要跟數據庫相關,所以控件類型可以與數據表字段(field)類型形成對應,此處約定為:
u 字段類型為文本、數字時,控件使用文本框
u 字段類型為布爾值時,控件使用單項選擇按鈕(checkbox控件)或下拉框
u 字段內容在固定的幾個值中選擇時(不論其類型),控件使用下拉框
u 字段類型為日期時間時,控件使用文本框+按鈕(按鈕可以選擇日期,按鈕.Value=”…”)
u 字段為其它表的外鍵,則分為兩種情況:
a)、如果是屬於基本資料的,控件使用下拉框。
b)、如果不是屬於基本資料的,控件使用文本框+按鈕(按鈕用於跳出查詢窗口,按說鈕.Value=”…”
u 數據操作窗口一般為DataGrid+錄入框
a)、DataGrid用於顯示數據
b)、錄入框用於輸入/顯示數據
c)、浏覽窗口基本樣式,主要以表格形式顯示紀錄,單表控件使用DataGrid/DataList/Repeater,多表使用NestedDataGrid
第二部分:命名規范
1. 按鈕ID命名:btn+按鈕操作功能(如btnSave)
2. 其它控件:
I. 與數據操作相關:其ID<.SPAN>為相應的字段名稱,如果有多個控件對應一個字段,則按以下規范命名:
字段名+”_”+順序號(以01開頭)
例子:頁面有一TextBox控件,對應著數據庫表中的RightGroup字段,則其ID應命名為 RightGroup
如果頁面有二個TextBox控件,都對應著數據庫表中的PowerGroup字段,則其ID分別命名為PowerGroup_01, PowerGroup_02,依此類推
II. 其它:前綴+用途功能(如txtInput),前綴請看表一:
控件
前綴
控件
前綴
Form
frm
Class
cls/C
Module
mod
Label
lbl
LinkLabel
lnk
Button
btn
TextBox
txt
CheckBox
chk
RadioButton
rad
GroupBox
grp
PictureBox
pic
DataGrip
grd
ListBox
lst
CheckedListBox
clst
ComboBox
cbo
TreeView
tvw
ListView
lvw
TabControl
tab
DateTimePicker
dtp
Timer
tmr
Splitter
spl
ProgressBar
pbar
RichTextBox
rtf
ImageList
imgl
ToolBar
tlb
MenuItem
mnu
(表一)
3. 變量及常量命名規范:
I. 頁面及過程級變量:級別標識+數據類型前綴+<名詞|名詞組合>
A、頁面級變量:級別標識為m (例子:dim mstrNewline as string)
B、過程級變量:級別標識為 l (例子:dim lstrNewline as string)
II.頁面間變量:采用request傳遞獲取
命名原則:級別標識+數據類型前綴+<名詞|名詞組合>
級別標識為p
例子:url=”XXXX.aspx?pstrLine=bbbbb&pintNum=11”
Dim lstrLine as string=Request(“pstrLine”)