|
回想自己從事Web方面的開發(fā)已經(jīng)有6-7年，對(duì)于各種Web技術(shù)都已經(jīng)非常熟悉.可是,身為程序員的我對(duì)于制作Web表單界面的事著實(shí)心痛。
心痛１：很多后端代碼和邏輯要寫，可我還不得不費(fèi)力的在各種網(wǎng)頁制作工具中拖放控件放到美工提供的美術(shù)模板中。再配上css寫上javascript。表單大一點(diǎn)夠我弄上一整天。
心痛2：表單這東西，不是老手還干不了，又要漂亮又要有功能所以要和各種各樣的table,td,div,javascript,css打交道。稍微不注意，顯示效果就和所想的不一樣，最后這種事情全成了老手門的活了。新手反只能在旁邊看著。
心痛3:……哎不寫了。今天不全是來抱怨的。
今天和大家分享一下我所了解的各種語言和平臺(tái)中表單制作比較好的方式：
基本方式：在平臺(tái)如ASP.NET中可以使用Visual Studio .NET工具制作表單，在java平臺(tái)下的jsp中的表單可以使用JBuilder或是Eclipse制作表單，這些工具都提供了可視化的,即見即所得的編輯方式，但此類工具都常偏重于給程序設(shè)計(jì)，所以要制作一個(gè)漂亮的界面，基本上都需要使用工具中的原碼編輯來制作。程序編碼效率雖然很高，可是很難達(dá)到一個(gè)美化效果。
Visual Studio .NET工具界面
Eclipse工具界面
推薦方式一：借助DW工具。
DW也就是由macromedia出品的Dreamweaver。Dreamweaver家族一直是Web美工的最愛，也是目前最強(qiáng)大的網(wǎng)頁制作工具之一。DW其實(shí)對(duì)程序人員有一個(gè)好處，無論希望制作任何語言和平臺(tái)下的表單，DW中都可以做到，更重要的是DW能滿足任何美術(shù)要求下的表單制作。
DW工具界面
在DW做表單界面時(shí)如果能學(xué)會(huì)熟練使用DW中一些功能，可以大大的加快制作表單的速度：在此列出給大家作為參考。
１、學(xué)會(huì)使用設(shè)計(jì)區(qū)或代碼區(qū)下的塊代碼選中功能。
２、輸入?yún)^(qū)的html控件使用css樣式來控制外觀。（最好養(yǎng)成樣式名一致的習(xí)慣）
３、css樣式內(nèi)容存入外部文件，在需要的頁面中引入該css文件內(nèi)容。
4、輔助各種表單功能的javascript內(nèi)容做成function并存成一個(gè)單獨(dú)文件。
５、適當(dāng)并且合理的使用DW提供的模板(Template)和庫(Library)功能來存放界面中被重用的代碼。
推薦方式二：CSS2.0。
CSS2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過CSS2.0的樣式控制顯示效果，可完全不使用以往HTML中的table和td來定位表單的外觀和樣式，只需使用div和Li此類HTML標(biāo)簽來分割元素，之后即可通過CSS2.0樣式來定義表單界面的外觀。
CSS2.0提供給我們了一個(gè)機(jī)制，讓程序員開發(fā)時(shí)可以不考慮顯示和界面就可以制作表單和界面，顯示問題可由美工或是程序員后期再來編寫相應(yīng)的CSS2.0樣式來解決。不過由于CSS2.0目前尚未見過很好的編輯軟件，所以無法做到所見即所得，編寫起來不易!國(guó)內(nèi)純美工能編寫CSS2.0樣式的我還沒見過。嗚呼，還是要程序員自己來寫。但是CSS2.0起碼已經(jīng)給我們開啟了一個(gè)美好的明天。關(guān)于CSS2.0有興趣的朋友可以查看W3C的資料。http://www.w3.org/TR/REC-CSS2/
方式三（重點(diǎn)推薦）：NoahWeb引擎所提供的表單制作方式。
NoahWeb不愧為新一代的輕量級(jí)B/S應(yīng)用開發(fā)引擎，NoahWeb提供了一整套非常強(qiáng)大的表單制作機(jī)制，使用NoahWeb開發(fā)B/S應(yīng)用時(shí)，程序人員完全可以不用考慮表單的外觀，用NoahWeb提供的XML格式結(jié)構(gòu)化標(biāo)簽可定義表單，表單的最終顯示效果完全由美術(shù)設(shè)計(jì)的表單模板決定。表現(xiàn)和結(jié)構(gòu)分離，重用性也非常的好。
假設(shè)需要制作一個(gè)下面這樣一個(gè)登陸表單界面：如下圖：
在NoahWeb中定義的時(shí)候就可以用下面的代碼（大家不要被這些代碼嚇倒，仔細(xì)看，非常容易懂）：
在NoahWeb中的邏輯層調(diào)用這個(gè)表單時(shí)，方法非常簡(jiǎn)單。使用下面的語法就可以。
<ViewForm FormLink="login" TemplateLink="ominibasefrom" Action="" FormTitle="" />
其中的
login指的是剛才結(jié)構(gòu)化描述的表單代碼中的form id。
ominibasefrom指的就是表單模板名。要使表單呈現(xiàn)不同的外觀，使用不同的模板就可以。
比如下圖是調(diào)用ominibasefrom模板的顯示結(jié)果：
下圖是調(diào)用baset2form模板的顯示結(jié)果：
下圖是調(diào)用oaTemplate模板的顯示結(jié)果：
下圖是調(diào)用ovipbaseform模板的顯示結(jié)果：
這些表單所生成的外觀不一樣，可是內(nèi)容和結(jié)構(gòu)全部是一樣，更換表單模板就能生成不同的外觀，NoahWeb的表單模板可方便的由美工進(jìn)行定義，用任何的HTML或是xml或css2.0的文本內(nèi)容都可以定義成表單模板，你也可以從網(wǎng)絡(luò)上找一個(gè)現(xiàn)成的界面來抄成模板。
剛才的例子僅是一個(gè)很小的表單，下一頁有制作大一些的表單例子，感覺非常爽！
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
上一頁 下一頁 表單制作方式大比拼 [2]
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 表單制作方式大比拼 [1]
第 2 頁 
