【文章內(nèi)容簡介】 戶的交互方式。步驟3：確定界面，根據(jù)用戶的特點(diǎn)以及系統(tǒng)任務(wù)、環(huán)境來確定適合的界面風(fēng)格。步驟4：網(wǎng)頁顯示和布局設(shè)計(jì)，制定網(wǎng)頁顯示信息的內(nèi)容和網(wǎng)頁顯示的次序，然后進(jìn)行屏幕總體布局和顯示結(jié)構(gòu)設(shè)計(jì)，如設(shè)計(jì)菜單欄的顯示方式等。步驟5：進(jìn)行藝術(shù)設(shè)計(jì)完善，包括為吸引用戶的注意所進(jìn)行的圖片設(shè)計(jì)，該種設(shè)計(jì)可體現(xiàn)在顏色、形狀、大小、亮度、環(huán)境等（如加線、加框、表格、前景色和背景色設(shè)計(jì)等）細(xì)節(jié)上。步驟6：出錯信息設(shè)計(jì)，制作錯誤頁面，如沒有權(quán)限、沒有登陸、系統(tǒng)錯誤等情況下顯示出來的良好友善的出錯界面。步驟7：原型設(shè)計(jì)，在經(jīng)過初步系統(tǒng)的需求分析后，開發(fā)出一個滿足系統(tǒng)基本要求的、簡單的、可運(yùn)行靜態(tài)頁面的系統(tǒng)交給用戶試用，讓用戶進(jìn)行評價且提出改進(jìn)意見，進(jìn)一步完善系統(tǒng)的需求規(guī)格和系統(tǒng)設(shè)計(jì)，這一步是非常重要的，目的是獲取用戶對界面的滿意度，便于盡早發(fā)現(xiàn)錯誤或者不滿意的地方，以改進(jìn)和完善系統(tǒng)設(shè)計(jì)。，： 系統(tǒng)登陸首頁截圖第5章 詳細(xì)設(shè)計(jì)在總體設(shè)計(jì)階段，采用結(jié)構(gòu)化設(shè)計(jì)方法可以把一個復(fù)雜問題的解法分解和細(xì)化成一個由許多模塊組成的層次結(jié)構(gòu)的軟件系統(tǒng)，即已經(jīng)確定了軟件系統(tǒng)的總體結(jié)構(gòu)，給出了系統(tǒng)中各個組成模塊的功能和模塊間的接口。詳細(xì)設(shè)計(jì)階段，采用自頂向下逐步求精的方法，則可以把一個模塊的功能逐步分解細(xì)化為一系列具體的處理步驟（或某種高級語言的語句）。詳細(xì)設(shè)計(jì)就是要在總體設(shè)計(jì)階段成果的基礎(chǔ)上，考慮如何實(shí)現(xiàn)定義的軟件系統(tǒng)，直到對系統(tǒng)中的每個模塊給出足夠詳細(xì)的過程描述，從而在編碼階段可以把這個描述直接翻譯成用某種程序設(shè)計(jì)語言書寫的程序。因此，詳細(xì)設(shè)計(jì)的結(jié)果基本上決定了最終的程序代碼質(zhì)量?？紤]程序代碼的質(zhì)量時必需注意，程序的“讀者”有兩個：計(jì)算機(jī)和人。在軟件的生命周期中，設(shè)計(jì)測試方案、診斷程序錯誤、修改和改進(jìn)程序等等都必需首先讀懂程序。實(shí)際上對于長期使用的軟件系統(tǒng)而言，人讀程序的時間可能比寫程序的時間還要長得多。因此，衡量程序的質(zhì)量不僅要看它的邏輯是否正確，性能是否滿足要求，更主要的是要看它是否容易閱讀和理解。詳細(xì)設(shè)計(jì)的目標(biāo)不僅僅是邏輯上正確地實(shí)現(xiàn)每個模塊的功能，更重要的是設(shè)計(jì)出的處理過程應(yīng)該盡可能簡明易懂。結(jié)構(gòu)化程序設(shè)計(jì)技術(shù)是實(shí)現(xiàn)上述目標(biāo)的關(guān)鍵技術(shù)，因此是詳細(xì)設(shè)計(jì)的邏輯基礎(chǔ)。具體地說，詳細(xì)設(shè)計(jì)的任務(wù)就是為軟件結(jié)構(gòu)圖中的每一個模塊確定所采用的算法和塊內(nèi)的數(shù)據(jù)結(jié)構(gòu)，用某種選定的表達(dá)工具給出清晰的描述，表達(dá)工具應(yīng)當(dāng)具有描述過程細(xì)節(jié)的能力，而且能夠使程序員在編程時便于直接翻譯成程序設(shè)計(jì)語言的源程序。系統(tǒng)的詳細(xì)設(shè)計(jì)包括以下內(nèi)容：登陸和權(quán)限驗(yàn)證的設(shè)計(jì)、用戶角色和權(quán)限聯(lián)系的設(shè)計(jì)、數(shù)據(jù)庫連接池問題的設(shè)計(jì)。在下面將給出該系統(tǒng)的相關(guān)模塊和主要功能示意圖，：退出日常管理系統(tǒng)收費(fèi)管理系統(tǒng)系統(tǒng)管理系統(tǒng)日常費(fèi)用查詢?nèi)粘Ｏ嚓P(guān)通告其它功能模塊費(fèi)用查詢模塊欠費(fèi)管理模塊催費(fèi)管理模塊日常通告模塊其它相關(guān)模塊費(fèi)用設(shè)定模塊信息增加模塊信息修改模塊信息刪除模塊信息統(tǒng)計(jì)模塊登陸界面用戶選擇邏輯判斷費(fèi)用收繳模塊數(shù)據(jù)備份模塊登陸和權(quán)限驗(yàn)證的設(shè)計(jì)主要涉及到系統(tǒng)的界面美觀和安全性的問題。 登陸界面設(shè)計(jì)登陸界面的詳細(xì)設(shè)計(jì)主要包括：整體框架設(shè)計(jì)，頁面動態(tài)交互設(shè)計(jì)，頁面展示設(shè)計(jì)等，主要涉及到關(guān)鍵技術(shù)有HTML、Javascript、CSS等，分別介紹如下：(1) HTML語言簡介：網(wǎng)頁的設(shè)計(jì)離不開HTML（超文本標(biāo)記語言），雖然html語言是最古老的網(wǎng)頁開發(fā)和設(shè)計(jì)的語言，但對其進(jìn)行了解和深入是做好網(wǎng)站的前提！，并且W3C組織不打算對其進(jìn)一步擴(kuò)展，而有dhtml（動態(tài)的html）取代，但html在一段時間是不會消失。在本系統(tǒng)的設(shè)置中主要用到了如下標(biāo)記：p,head,body,table,a herf/aframe,align,fonthr等等(2) CSS語言簡介：精彩的網(wǎng)頁設(shè)計(jì)離不開CSS(級聯(lián)樣式表)。Web 管理組織 W3C 在 1996 年 11 月推薦使用 CSS，并批準(zhǔn)了 CSS 1 級規(guī)范。CSS 1 級規(guī)范說明了用于 HTML 頁面的屬性。這些屬性代替了傳統(tǒng)的字體標(biāo)簽和其他“樣式”標(biāo)記，例如顏色和邊距。很多年來，CSS每發(fā)行一個新版本，瀏覽器制作者們都擴(kuò)展了對 CSS 的支持。今天，Internet Explorer Netscape Navigator Mozilla、Opera 和 Safari 都全面支持 CSS。但這并不意味著我們作為 Web 設(shè)計(jì)者和開發(fā)者的生涯不存在問題。盡管上述所有瀏覽器都支持 CSS Level 2，它們的兼容程度仍然各不相同。而且在某些情況下，特定屬性仍然會帶給你很多麻煩。也就是說，您仍然需要遵守老的信條“測試再測試”。但如果您堅(jiān)持使用 CSS 規(guī)范的核心屬性，您將能夠正確地呈現(xiàn)頁面。但是為什么 W3C 認(rèn)為需要創(chuàng)建 CSS 規(guī)范呢？當(dāng)我創(chuàng)建基于 HTML 的 Web 站點(diǎn)和應(yīng)用程序時，這一切對我又意味著什么呢？我認(rèn)為，我們需要使用 CSS 的理由以及它帶來的優(yōu)勢可以分為以下三個主要方面：靈活性、呈現(xiàn)性和可訪問性。CSS樣式表的類型包括如下3類：類選擇器樣式，ID選擇器樣式，重定義標(biāo)記樣式。為了實(shí)現(xiàn)模塊化設(shè)計(jì)，不得不把CSS代碼與HTML分開，當(dāng)然可以寫在一起，一般樣式表設(shè)置方法為：鏈入外部樣式表其代碼為：link rel=”stylesheet” type=”text/css” href=”樣式表的源地址”；導(dǎo)入外部樣式表；和內(nèi)部樣式表及內(nèi)嵌樣式表四種。在本系統(tǒng)中主要用到css代碼舉例如下：功能代碼1：實(shí)現(xiàn)P的設(shè)置：p{fontfamily:方正舒體,red。 fontsize=17px。 width:750px。 height:30px。 fontcolor:red。 filter:shadow(color=ff8888,direction=315)}(3) JavaScript語言簡介：為了使網(wǎng)頁能夠具有交互性，能夠包含更多活躍的元素，就有必要在網(wǎng)頁中嵌入其它的技術(shù)。如：Javascript、VBScript，那么這主要對Javascript進(jìn)行概述。Javascript就是適應(yīng)動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用于Internet網(wǎng)頁制作上。 Javascript是由 Netscape公司開發(fā)的一種腳本語言（scripting language），或者稱為描述語言。在HTML基礎(chǔ)上，使用Javascript可以開發(fā)交互式Web網(wǎng)頁。Javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實(shí)現(xiàn)了一種實(shí)時性的、動態(tài)的、交互性的關(guān)系，使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。 運(yùn)行用Javascript編寫的程序需要能支持Javascript語言的瀏覽器。Netscape公司 Navigator 3．0以上版本的瀏覽器都能支持 Javascript程序，微軟公司 Internet Explorer 3．0以上版本的瀏覽器基本上支持Javascript。微軟公司還有自己開發(fā)的Javascript，稱為JScript。 Javascript和Jscript基本上是相同的，只是在一些細(xì)節(jié)上有出入。 Javascript短小精悍， 又是在客戶機(jī)上執(zhí)行的，大大提高了網(wǎng)頁的瀏覽速度和交互能力。 同時它又是專門為制作Web網(wǎng)頁而量身定做的一種簡單的編程語言?！avascript功能之強(qiáng)，是網(wǎng)頁更具有人性化，它通過交互式的操作來改變網(wǎng)頁的內(nèi)容。一般有三種方式嵌入html中：直接放在script/script之間；將程序放置在單獨(dú)的文件中，將其引用；將程序代碼作為某個事件元素的屬性，或超鏈接href的值。在本系統(tǒng)中主要作用到了WINDOW對象的相關(guān)方法和屬性，以及DOCUMENT對象的屬性和方法。主要涉及到權(quán)限驗(yàn)證代碼如下： function judge() { with() { if(==) {alert(用戶名不能為空!)。()。return false。} if(==) {alert(密碼不能為空!)。()。return false。} } } 權(quán)限驗(yàn)證的設(shè)計(jì)權(quán)限驗(yàn)證的設(shè)計(jì)主要涉及到系統(tǒng)的安全性的問題，典型的登陸模塊設(shè)計(jì)涉及到MD5甚至水印驗(yàn)證等技術(shù)。由于本系統(tǒng)在交付使用之前已經(jīng)分配好了用戶，所以采用了數(shù)據(jù)庫驗(yàn)證技術(shù)，主要涉及關(guān)鍵技術(shù)包括JSP，B/S，SQL等。(1) JSP技術(shù)簡介JSP技術(shù)是由Sun Microsystems公司倡導(dǎo)、許多公司參與建立的一種動態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。該技術(shù)為創(chuàng)建顯示動態(tài)生成內(nèi)容的Web頁面提供了一個簡捷而快速的方法。JSP技術(shù)的設(shè)計(jì)目的是使得構(gòu)造基于Web的應(yīng)用程序更加容易和快捷，而這些應(yīng)用程序能夠與各種Web服務(wù)器、應(yīng)用服務(wù)器、瀏覽器和開發(fā)工具共同工作。JSP規(guī)范是Web服務(wù)器、應(yīng)用服務(wù)器、交易系統(tǒng)以及開發(fā)工具供應(yīng)商之間廣泛合作的結(jié)果。在傳統(tǒng)的網(wǎng)頁HTML文件（如*.htm、*.html）中加入Java程序片段和JSP標(biāo)記就構(gòu)成了JSP網(wǎng)頁（*.jsp）。Web服務(wù)器在遇到訪問JSP網(wǎng)頁的請求時，首先執(zhí)行其中的程序片段，然后將執(zhí)行結(jié)果以HTML的格式返回給客戶。程序片段可以操作數(shù)據(jù)庫、重新定向網(wǎng)頁以及發(fā)送Email等，這就是建立動態(tài)網(wǎng)站所需要的功能。所有程序操作都在服務(wù)器端執(zhí)行，網(wǎng)絡(luò)上傳送給客戶端的僅是得到的結(jié)果，對客戶瀏覽器的要求最低，可以實(shí)現(xiàn)無Plugin、無ActiveX、無Java Applet，甚至無Frame。在Sun正式發(fā)布JSP（Java Server Pages）之后，這種新的Web應(yīng)用開發(fā)技術(shù)很快引起了人們的關(guān)注。JSP為創(chuàng)建高度動態(tài)的Web應(yīng)用提供了一個獨(dú)特的開發(fā)環(huán)境。JSP能夠適應(yīng)市場上包括Apache WebServer、IIS %的服務(wù)器產(chǎn)品。JSP具有在HTML代碼中混合某種程序代碼、由語言引擎解釋執(zhí)行程序代碼的能力。在JSP環(huán)境下，HTML代碼主要負(fù)責(zé)描述信息的顯示樣式，而程序代碼則用來描述處理邏輯。普通的HTML頁面只依賴于Web服務(wù)器，而JSP頁面需要附加的語言引擎分析和執(zhí)行程序代碼。程序代碼的執(zhí)行結(jié)果被重新嵌入到HTML代碼中，然后一起發(fā)送給瀏覽器。JSP是面向Web服務(wù)器的技術(shù)，客戶端瀏覽器不需要任何附加的軟件支持。JSP使用的是Java語言，在JSP下，代碼被編譯成Servlet并由Java虛擬機(jī)執(zhí)行，這種編譯操作僅在對JSP頁面的第一次請求時發(fā)生。執(zhí)行JSP代碼需要在服務(wù)器上安裝JSP引擎。執(zhí)行頁面時，JSP頁面被轉(zhuǎn)換成Java源文件，然后又被編譯成class文件（即Servlet）。JSWDK軟件包中的示例頁面分為兩類，它們可能是JSP文件或者是包含一個表單的HTML文件，這些表單均由JSP代碼處理。JSP中的Java代碼均在服務(wù)器端執(zhí)行。因此，在瀏覽器中使用“查看源文件”菜單是無法看到JSP源代碼的，只能看到HTML代碼。JSP的特點(diǎn)是完全的面向?qū)ο?、完全的平臺無關(guān)和完全的安全可靠。但是Java的運(yùn)行速度是用class常駐內(nèi)存來完成的，所以在一些情況下所使用的內(nèi)存比起用戶數(shù)量來說的確是“最低性能價格比”。從另一個方面來說，、.class文件以及對應(yīng)的版本文件。在本系統(tǒng)中應(yīng)用到了jsp技術(shù)還有與數(shù)據(jù)庫的連接jdbc等相關(guān)技術(shù)。在本系統(tǒng)中為了實(shí)現(xiàn)簡單的邏輯跳轉(zhuǎn)而采用了jsp先關(guān)語句如下：% String s1=(tableName)。 if((1)) { % jsp:forward page= / % } %(2) B/S技術(shù)簡介B/S（Browser/Server）結(jié)構(gòu)即瀏覽器和服務(wù)器結(jié)構(gòu)。它是隨著Internet技術(shù)的興起，對C/S結(jié)構(gòu)的一種工作方式變革。在這種結(jié)構(gòu)下，用戶工作界面是通過Web瀏覽器來實(shí)現(xiàn)的，極少部分的事務(wù)邏輯是在客戶端（Browser）實(shí)現(xiàn)，但是主要事務(wù)邏輯在服務(wù)器端（Server）實(shí)現(xiàn)。這樣就大大簡化了客戶端的載荷，減輕了系統(tǒng)維護(hù)與升級的成本和工作量，降低了用戶的總體成本。以目前的技術(shù)來看，局域網(wǎng)建立B/S結(jié)構(gòu)的網(wǎng)絡(luò)應(yīng)用，并通過Internet/Intranet模式開發(fā)數(shù)據(jù)庫應(yīng)用，相對來說易于把握，且成本也是較低的。它能實(shí)現(xiàn)不同的人員、不同的地點(diǎn)、以不同的接入方式（比如LAN、WAN、Internet/Intranet等）訪問和操作相同的數(shù)據(jù)庫；它也能有效地保護(hù)數(shù)據(jù)平臺、管理訪問權(quán)限和數(shù)據(jù)庫服務(wù)器的安全。特別是在Java這樣的跨平臺語言出現(xiàn)之后，B/S架構(gòu)的管理軟件更是顯得方便、快捷以及高效。所以本系統(tǒng)采用了B/S技術(shù)。B/，由數(shù)據(jù)庫服務(wù)器、Web服務(wù)器、Web瀏覽器共同構(gòu)成。 B/S模式體系結(jié)構(gòu)原理(3) 網(wǎng)站開發(fā)技術(shù)簡介JSP技術(shù)給出了兩種使用JSP開發(fā)Web應(yīng)用的方式，這兩種方式可以歸納為模式一和模式二，這兩種模式的主要差別在于它們處理業(yè)務(wù)的流程不同。模式一模式一為JSP+JavaBean。 JSP兩層開發(fā)模式在模式一中，JSP頁面獨(dú)自響應(yīng)請求并將處理結(jié)果返回客戶，所有的數(shù)據(jù)通過Bean來處理，JSP實(shí)現(xiàn)頁面的表現(xiàn)。模式一也實(shí)現(xiàn)了頁面的表現(xiàn)和業(yè)務(wù)邏輯相分離。在用JSP處理顯示和業(yè)務(wù)邏輯時，使用模式一比較簡單。JSP頁面獨(dú)自響應(yīng)請求并經(jīng)處理后把結(jié)果返回客戶端。所有的數(shù)據(jù)處理通過JavaBean來進(jìn)行。但是大量使用此模式時可能帶來一個副作用，那就是會導(dǎo)致在頁面里嵌入了大量的Java控制代碼，當(dāng)要處理的業(yè)務(wù)邏輯復(fù)雜時，這種情況就會變得非常糟糕。大量的內(nèi)嵌代碼使得頁面變得龐大，同時也非常復(fù)雜，當(dāng)頁面的功能實(shí)現(xiàn)后交給美工或者頁面內(nèi)容的設(shè)計(jì)人員進(jìn)行包裝時，問題就變得嚴(yán)重了。所以，在大型項(xiàng)目里，這種方法將導(dǎo)致頁面的維護(hù)困難。模式二模式二為：JSP+Servlet+Java Bean。 JSP三層開發(fā)模式在模式二中，結(jié)合了JSP和Servlet技術(shù)，充分利用了兩種技術(shù)原有的特點(diǎn)。此模式遵循視圖控