表單制作方式大比拼 作者:Webmaster 來源:Linuxdby.com 點擊: 日期:2007-04-28 [[27]收藏] 回想自己從事Web方面的開發已經有6-7年，對于各種Web技術都已經非常熟悉.可 是,身為程序員的我對于制作Web表單界面的事著實心痛。 心痛１：很多後端代碼和邏輯要寫，可我還不得不費力的在各種網頁制作工具中 拖放控件放到美工提供的美術模板中。再配上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並存成一個單獨文件。 okok ５、適當並且合理的使用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中定義的時候就可以用下面的代碼（大家不要被這些代碼嚇倒，仔細 看，非常容易懂）： 如果您對本文有任何疑問或者建議，請到討論區發表您的意見: [29]>> 論壇入 口 << 共2頁: 上一頁 1 [30][2] [31]下一頁 上一篇：[32]在 CSS 中關于字體處理效果的思考 下一篇：[33]4天學會 NoahWeb 表單 - 第一天 [BUTTON] 【[34]文章評論】 【[35]收藏本文】 【[36]推薦好友】 【[37]打印本文】 【[38]我要投稿】 【[39]論壇討論】 相關文章: ﹒[40]在 CSS 中關于字體處理效果的思考 ﹒[41]4天學會 NoahWeb 表單 - 第一天 ﹒[42]捷足先登學用CSS：HTML結構化 ﹒[43]4天學會 NoahWeb 表單 - 第二天 ﹒[44]彈出網頁窗口設計全攻略 ﹒[45]4天學會 NoahWeb 表單 - 第三天 ﹒[46]target="_blank"不符合標準? ﹒[47]4天學會 NoahWeb 表單 - 第四天 ﹒[48]CSS濾鏡屬性詳解 ﹒[49](譯)用CSS設計日歷 文章評論:(0條) 請留名： __________ [_] 匿名評論 [BUTTON] [50]點擊查看所有評論 [51] 論壇討論 ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ 聲明：刊登此文章是為了傳遞更多信息,文章內容僅供參考,轉載請注明出處。 [52]關于我們 - [53]管理團隊 - [54]網站歷史 - [55]聯系我們 - [56]廣告服 務 - [57]法律聲明 - [58]網站地圖 - [59]RSS訂閱 - [60]返回頂部 [61]Power by linux-cn.com [62]粵ICP備05006655號 References 1. http://www.linux-cn.com/html/website/homepage/20070428/favicon2.ico 2. http://www.linux-cn.com/ 3. http://www.linux-cn.com/html/website/homepage/20070428/23885.html 4. javascript:window.external.AddFavorite('http://www.linuxdby.com', 'Linux%D6%D0%B9%FA') 5. http://www.linuxdby.com/ 6. http://www.linux-cn.com/html/website/index.html 7. http://www.linux-cn.com/html/website/homepage/index.html 8. http://www.linux-cn.com/html/website/homepage/20070428/23885.html 9. http://www.linux-cn.com/html/website/ajax/index.html 10. http://www.linux-cn.com/html/website/css/index.html 11. http://www.linux-cn.com/html/website/Dreamweaver/index.html 12. http://www.linux-cn.com/html/website/Fireworks/index.html 13. http://www.linux-cn.com/html/website/Flash/index.html 14. http://www.linux-cn.com/html/website/html/index.html 15. http://www.linux-cn.com/html/website/JavaScript/index.html 16. http://www.linux-cn.com/html/website/Phososhop/index.html 17. http://www.linux-cn.com/html/website/homepage/20070428/23250.html 18. http://www.linux-cn.com/html/website/homepage/20070428/23391.html 19. http://www.linux-cn.com/html/website/homepage/20070428/23373.html 20. http://www.linux-cn.com/html/website/homepage/20070428/23235.html 21. http://www.linux-cn.com/html/website/homepage/20070412/7652.html 22. http://www.linux-cn.com/html/website/homepage/20070428/23889.html 23. http://www.linux-cn.com/html/website/homepage/20070428/23888.html 24. http://www.linux-cn.com/html/website/homepage/20070428/23887.html 25. http://www.linux-cn.com/html/website/homepage/20070428/23886.html 26. http://www.linux-cn.com/html/website/homepage/20070428/23884.html 27. http://www.linux-cn.com/plus/stow.php?arcID=23885 28. http://www.linux-cn.com/member/article_add.php 29. http://bbs.linux-cn.com/ 30. http://www.linux-cn.com/html/website/homepage/20070428/23885_2.html 31. http://www.linux-cn.com/html/website/homepage/20070428/23885_2.html 32. http://www.linux-cn.com/html/website/homepage/20070428/23884.html 33. http://www.linux-cn.com/html/website/homepage/20070428/23886.html 34. http://www.linux-cn.com/plus/feedback.php?arcID=23885 35. javascript:window.external.addFavorite('http://www.linux-cn.com/plus/view.php?aid=23885','%B1%ED%B5%A5%D6%C6%D7%F7%B7%BD%CA%BD%B4%F3%B1%C8%C6%B4|Linux%D6%D0%B9%FA') 36. http://www.linux-cn.com/plus/recommend.php?arcID=23885 37. javascript:window.print(); 38. http://www.linux-cn.com/member/article_add.php 39. http://bbs.linux-cn.com/ 40. http://www.linux-cn.com/html/website/homepage/20070428/23884.html 41. http://www.linux-cn.com/html/website/homepage/20070428/23886.html 42. http://www.linux-cn.com/html/website/homepage/20070428/23883.html 43. http://www.linux-cn.com/html/website/homepage/20070428/23887.html 44. http://www.linux-cn.com/html/website/homepage/20070428/23882.html 45. http://www.linux-cn.com/html/website/homepage/20070428/23888.html 46. http://www.linux-cn.com/html/website/homepage/20070428/23881.html 47. http://www.linux-cn.com/html/website/homepage/20070428/23889.html 48. http://www.linux-cn.com/html/website/homepage/20070428/23880.html 49. http://www.linux-cn.com/html/website/homepage/20070428/23879.html 50. http://www.linux-cn.com/plus/feedback.php?arcID=23885 51. http://www.linux-cn.com/bbs/ 52. http://www.linux-cn.com/html/aboutus.html 53. http://www.linux-cn.com/html/team.html 54. http://www.linux-cn.com/html/history.html 55. http://www.linux-cn.com/html/contact.html 56. http://www.linux-cn.com/html/advertisement.html 57. http://www.linux-cn.com/html/law.html 58. http://www.linux-cn.com/plus/sitemap.html 59. http://www.linux-cn.com/plus/rssmap.html 60. http://www.linux-cn.com/html/website/homepage/20070428/23885.html#top 61. http://www.linux-cn.com/ 62. http://www.miibeian.gov.cn/