WEB程式員，界面美化是你心中永遠的痛嗎？

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下載下傳設計器編輯