WEB程序員，界面美化是你心中永遠的痛嗎？
Jason.NET
--2005.07.05
回想自己從事WEB方面的開發已經有6-7年，對於各種Web技術都已經非常熟悉.可是,身爲程序員的我對於製作B/S表單界面的事着實心痛。
心痛１：很多後端代碼和邏輯要寫，可我還不得不費力的在各種網頁製作工具中拖放控件放到美工提供的美術模板中。再配上css寫上javascript。表單大一點夠我弄上一整天。
心痛2：表單這東西，不是老手還幹不了，又要漂亮又要有功能所以要和各種各樣的table,td,div,javascript,css打交道。稍微不注意，顯示效果就和所想的不一樣，最後這種事情全成了老手門的活了。新手反只能在旁邊看着。
心痛3:……哎不寫了。今天不全是來抱怨的。
今天和大家分享一下我所瞭解的各種語言和平臺中表單製作比較好的方式：
基本方式：在平臺如ASP.NET中可以使用Visual Studio .NET工具製作表單，在java平臺下的jsp中的表單可以使用JBuilder或是Eclipse製作表單，這些工具都提供了可視化的,即見即所得的編輯方式，但此類工具都常偏重於給程序設計，所以要製作一個漂亮的界面，基本上都需要使用工具中的原碼編輯來製作。程序編碼效率雖然很高，可是很難達到一個美化效果。
Visual Studio .NET工具界面
Eclipse工具界面
推薦方式一：藉助DW工具。
DW也就是由macromedia出品的Dreamweaver。Dreamweaver家族一直是Web美工的最愛，也是目前最強大的網頁製作工具之一。DW其實對程序人員有一個好處，無論希望製作任何語言和平臺下的表單，DW中都可以做到，更重要的是DW能滿足任何美術要求下的表單製作。
DW工具界面
在DW做表單界面時如果能學會熟練使用DW中一些功能，可以大大的加快製作表單的速度：在此列出給大家作爲參考。
１、學會使用設計區或代碼區下的塊代碼選中功能。
２、輸入區的html控件使用css樣式來控制外觀。（最好養成樣式名一致的習慣）
３、css樣式內容存入外部文件，在需要的頁面中引入該css文件內容。
4、輔助各種表單功能的javascript內容做成function並存成一個單獨文件。
５、適當並且合理的使用DW提供的模板(Template)和庫(Library)功能來存放界面中被重用的代碼。
推薦方式二：CSS2.0。
CSS2.0是一套全新的樣式表結構，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內容和表現效果分離的方式，HTML元素可以通過CSS2.0的樣式控制顯示效果，可完全不使用以往HTML中的table和td來定位表單的外觀和樣式，只需使用div和Li此類HTML標籤來分割元素，之後即可通過CSS2.0樣式來定義表單界面的外觀。
CSS2.0提供給我們了一個機制，讓程序員開發時可以不考慮顯示和界面就可以製作表單和界面，顯示問題可由美工或是程序員後期再來編寫相應的CSS2.0樣式來解決。不過由於CSS2.0目前尚未見過很好的編輯軟件，所以無法做到所見即所得，編寫起來不易!國內純美工能編寫CSS2.0樣式的我還沒見過。嗚呼，還是要程序員自己來寫。但是CSS2.0起碼已經給我們開啓了一個美好的明天。關於CSS2.0有興趣的朋友可以查看W3C的資料。http://www.w3.org/TR/REC-CSS2/
方式三（重點推薦）：NoahWeb引擎所提供的表單製作方式。
NoahWeb不愧爲新一代的輕量級B/S應用開發引擎，NoahWeb提供了一整套非常強大的表單製作機制，使用NoahWeb開發B/S應用時，程序人員完全可以不用考慮表單的外觀，用NoahWeb提供的XML格式結構化標籤可定義表單，表單的最終顯示效果完全由美術設計的表單模板決定。表現和結構分離，重用性也非常的好。
假設需要製作一個下面這樣一個登陸表單界面：如下圖：
在NoahWeb中定義的時候就可以用下面的代碼（大家不要被這些代碼嚇倒，仔細看，非常容易懂）：
在NoahWeb中的邏輯層調用這個表單時，方法非常簡單。使用下面的語法就可以。
<ViewForm FormLink="login" TemplateLink="ominibasefrom" Action="" FormTitle="" />
其中的
login指的是剛纔結構化描述的表單代碼中的form id。
ominibasefrom指的就是表單模板名。要使表單呈現不同的外觀，使用不同的模板就可以。
比如下圖是調用ominibasefrom模板的顯示結果：
下圖是調用baset2form模板的顯示結果：
下圖是調用oaTemplate模板的顯示結果：
下圖是調用ovipbaseform模板的顯示結果：
這些表單所生成的外觀不一樣，可是內容和結構全部是一樣，更換表單模板就能生成不同的外觀，NoahWeb的表單模板可方便的由美工進行定義，用任何的HTML或是xml或css2.0的文本內容都可以定義成表單模板，你也可以從網絡上找一個現成的界面來抄成模板。
剛纔的例子僅是一個很小的表單，製作大一些的表單感覺會非常爽！
看看另一個XML結構化編碼出來的“大”表單在不同的模板下的顯示。
調用ominibasefrom模板的顯示結果：
同一表單調用baset2form模板的顯示結果：
同一表單，用另一表單模板表現出來的效果：
最眩的是後面這個模板，是我剛從另外的一個系統中分離後做成NoahWeb的表單模板的，我把表單模板命名爲了baset3form，調用後顯示如下：
仔細看可以發現裏面帶裏tabpage的效果，沒改任何表單的任何代碼，感覺已經非常不一樣？
NoahWeb的表單製作時還可以加上輸入區的各種檢驗，比如：郵件地址，電話號碼，Url，數字等十多種常見檢驗。還能非常方便從數據庫中獲得並做選項或被選中的值，NoahWeb還提供了其他擴展的輸入控件，比如日期選擇控件，choice控件，聯級選擇菜單，如下：
choice控件
聯級選擇菜單
NoahWeb中的表單功能很強大，完全能讓程序員不用考慮顯示的情況下快速開發出所需表單，美工和程序做到極好的分離。任何時候更換項目的表單外觀都是件及其輕易的事。
有更多興趣的朋友也可以訪問NoahWeb的官方站點www.noahweb.net。
點擊這裏下載測試代碼http://www.cnblogs.com/Files/Aiasted/formdemo.rar
安裝了iis的朋友可以直接看,可以從www.noahweb.net下載設計器編輯
