軟體項目實訓及課程設計指導——如何合理地設計軟體應用系統的Web表示層
1、用戶界面是軟體應用系統的門面，在設計和開發實現時必須高度重視
軟體應用系統表示層內的各個組件是軟體應用系統的前端界面組件，它們直接與應用該軟體應用系統的最終操作者發生各種人機互動行為。如果某個軟體應用系統在用戶界面上缺乏引人注目的特色——如操作界面不友好、操作不夠體貼和應用不夠方便等用戶體驗不佳，即使該軟體應用系統的性能非常優異或者軟體應用系統的整體體系架構設計也比較合理，系統所涉及的業務功能邏輯的實現也都滿足了客戶的應用需求，但仍然難以獲得使用者的青睞。如下示圖為某個Web應用系統的數據查詢顯示結果頁面局部截圖。
2、熟悉和應用與Web表示層功能實現有關的核心技術
（1）XHTML+ CSS + JS技術
XHTML本身並不是什麼新的標記語言，它其實是更「規範」的 HTML 版本。可以這樣理解XHTML標記語言：「XHTML = HTML + XML」，也就是滿足「XML語法」要求的HTML頁面。
W3C組織發布XHTML技術規範的主要目的是希望Web應用系統的開發人員能夠設計並實現出比較「嚴謹」和「規範」的HTML頁面，也就是要求Web頁面設計者能夠按照XML（eXtensible Markup Language，可擴展的標記語言）的「語法規範」進行Web頁面設計，以避免Web瀏覽器在頁面信息顯示時產生出「二義性」的錯誤，並保證在各個不同的Web瀏覽器中能夠實現一致的顯示效果。
（2）CSS 是 Cascading Style Sheet 的縮寫
CSS譯作「層疊樣式表單」，它是用於增強和控制Web網頁的樣式並允許將樣式信息與Web網頁內容相互分離的一種標記性語言。Web應用系統的開發人員利用CSS的規則定義，可以統一規範Web網頁的「整體格式」，而不必要分別給Web網頁上的每一個HTML標籤單元做屬性設置和表現定義。
CSS能夠改進常規的HTML標籤的顯示風格設置的不足，因為常規的HTML標籤的「顯示風格」的設置是直接在HTML標籤中通過標籤內帶的屬性設置來達到。而應用CSS進行Web頁面的「表現」定義，不僅可以擴展HTML標籤的屬性定義的不足，而且還能夠達到將Web頁面的「內容」（數據）與「表現」（顯示風格）相互分離，提高Web頁面的可維護性。
（3）JS是JavaScript腳本語言的縮寫
Web應用系統的開發人員利用JavaScript腳本語言編程實現Web應用系統中的各種行為——行為就是對Web頁面中各種內容的交互及操作。應用「XHTML+ CSS + JS」技術可以實現將Web頁面中的「內容」和「表現」以及「行為」三者相互分離，這將更易於對Web頁面中的「內容」的維護和「表現」形式的擴展、「行為」功能實現的可擴展和可維護性。
（4）J2EE Web核心技術——JSP和Servlet組件技術
J2EE Web組件中的JSP（Java Server Pages，Java伺服器端頁面開發技術）組件技術是由Sun公司（現為Oracle公司）倡導、許多公司參與，最終由Sun公司發布的一種針對Java技術平臺下的動態網站開發技術的標準（目前為JSP2.4版本）。
JSP構建在Java Servlets技術基礎之上。因此，JSP其實是一種Web伺服器端的動態網站實現技術。一個JSP頁面是由標準的HTML標籤、CSS樣式單文件、JavaScript腳本程序及JSP服務端標籤和嵌入其中的Java程序腳本代碼所組成，並以*.jsp作為JSP頁面文件的擴展名。如下示圖為一個*.jsp Web頁面的代碼示例的局部截圖。
J2EE Web組件中的Servlet組件技術是使用Java Servlet 應用程式編程接口及相關類和方法所構成的 Java 程序，它在伺服器端的Servlet容器（如Tomcat伺服器環境）中運行並遵守Sun公司發布的Servlet組件技術規範。而Servlet組件技術詳細地規範和定義了容器的基本功能和Servlet的程序結構和編程實現的接口。如下示圖為Servlet程序代碼示例局部截圖。
（5）Web2.0中的RIA和AJAX技術
富網際網路應用程式RIA技術是取B/S（Browser/Server，瀏覽器/Web伺服器）結構之長與C/S（Client/Server，客戶機/伺服器）模式之長，是個非常好的系統結構模式，因為它可以將胖客戶端應用程式的優點與瘦客戶端應用程式的部署和可管理性優點結合起來。當然，富網際網路應用程式中的「富」的概念主要包含兩方面：數據模型的豐富和用戶界面的豐富。
富網際網路應用程式所具有的主要特點如下：豐富的表現能力和強大的客戶端處理能力，不僅可以最大限度地使用本地系統的資源，也還能夠實現無刷新地更新Web客戶端屏幕內容。藍夢客戶關係信息管理系統（CRM系統）應用JavaScript + AJAX（Asynchronous JavaScript and XML，異步JavaScript和XML）技術實現RIA的效果——其中JavaScript用於客戶端界面的顯示和數據處理，而AJAX技術則用於客戶端與伺服器的信息傳輸。
因為JavaScript在客戶端的表現力不容置疑，利用JavaScript腳本語言程序幾乎可以實現類似Windows應用程式界面效果。而AJAX技術一直被用於實現「無刷新」的Web頁面，它和JavaScript腳本程序相互配合可以完成數據從Web伺服器和Web客戶端的傳輸。
3、Web應用系統用戶界面設計的基本原則——儘可能操作簡單和方便用戶應用
軟體應用系統的設計和開發人員必須重視系統表示層內的相關組件的設計和編程實現，這不僅包括程序組件的結構和組件類之間的關係，努力提升軟體應用系統的用戶體驗。而且也還包括Web應用系統的用戶體驗設計，在設計和功能實現時除了應該要遵守如下的基本原則：以用戶為中心、視覺美觀、主題明確、內容與形式統一等原則之外，也還需要遵守如下的原則。
（1）遵守簡單明了、簡潔清新的原則
俗話說「簡約就是美（簡單就是美）」，這個短短的一句話就道出了美麗的實質。軟體應用系統的設計人員（特別是界面設計者如前端美工人員）尋找和發現美麗，卻常常忘了美麗其實是很簡單的——這反映在軟體應用系統的用戶界面的設計方面，用戶操作的要求和交互的信息要儘可能以最直接、最形象和最易於理解的方式呈現在用戶面前。
下圖所示為示例項目銀行帳戶信息管理系統中的開戶操作的功能頁面內容設計效果圖示局部截圖。
（2）遵守操作靈活、使用方便的設計原則
符合用戶應用習慣和方便用戶使用的第一原則；另外，為了能夠方便用戶儘快地熟悉本軟體應用系統，應該簡化軟體應用系統中的核心功能的操作過程，儘可能地提供操作嚮導形式的操作界面；同時再輔助提供實時幫助提示信息（文字、圖片或者聲音等形式）以進一步提示在完成某個功能操作過程中的各種要求。
在示例項目銀行帳戶信息管理系統中大量地應用Ajax（Asynchronous JavaScript and XML，異步JavaScript 和XML）技術提供實時、有針對性的幫助提示信息（文字、圖片或者聲音等形式），請見下圖所示的用戶登錄功能頁面中的用戶名稱動態提示的圖示效果。
因為軟體應用系統的使用者（也就是通常所指的用戶）不一定全都是計算機專業的技術人員或者相關的專業人員，而無需提供有關的幫助提示信息。軟體應用系統本身在運行過程中應該要根據功能操作的實現過程分時、分步提供在線求助的功能，甚至為用戶提供使用嚮導，這無疑會給使用者用戶帶來極大的方便性和簡潔性。
4、每個Web頁面文件的容量應該儘可能小以達到快速瀏覽和顯示
在軟體應用系統的Web頁面設計時，系統前端設計和開發人員首先應該儘可能地減小每個Web頁面的文件長度以減少Web頁面的加載量——這就需要設計和開發人員儘可能地優化Web頁面內的HTML（HyperText Markup Language，超文本標記語言）標籤代碼，這包括在發布Web頁面時，去掉HTML文檔中的注釋信息以及冗餘的換行標記等標識說明信息類的標籤。
其次，還應該要在保證圖片精度的應用要求下儘可能地降低Web頁面中的各個圖片文件大小和數量，加快Web頁面加載的速度。
另外，許多Web頁面設計人員為了能夠使Web頁面更絢麗，通常會在Web頁面中內嵌Flash動畫或者Gif動態圖片文件以輔助提供動態信息的應用要求，但如果在Web頁面中濫用Flash動畫會嚴重影響Web頁面的響應速度。
5、保證Web頁面的瀏覽效果能夠兼容各種主流的瀏覽器軟體
基於B/S（Browser/Server，瀏覽器/伺服器模式）體系架構的軟體應用系統的Web頁面需要適應和滿足面向全世界或者某個地區的訪問者的瀏覽要求，而這些訪問者可能會使用不同廠商所提供的不同的瀏覽器軟體。而目前不同廠商的瀏覽器系統對W3C組織所發布的HTML標準的支持是有差別的，導致軟體應用系統中的同一Web頁面在不同的瀏覽器系統環境中的瀏覽顯示效果最終表現出不相同的效果。
因此，系統前端設計和開發人員還需要針對不同的Web瀏覽器進行兼容方面的測試，並提供對應的解決方案——如Internet Explorer、Firefox、Chrome和Opera等瀏覽器。
為此，在Web頁面設計時應該應用「CSS+DIV」技術實現。因為，採用「CSS+DIV」技術實現的Web頁面不但符合W3C組織所發布的HTML標準，並且還非常美觀。下圖所示為示例項目銀行帳戶信息管理系統在微軟IE瀏覽器中的瀏覽效果的局部截圖。