件項(xiàng)目實(shí)訓(xùn)及課程設(shè)計(jì)指導(dǎo)——如何應(yīng)用CSS+Div分離Web表示層數(shù)據(jù)處理和展現(xiàn)邏輯

1、常規(guī)的Web頁(yè)面實(shí)現(xiàn)方法

早期的Web應(yīng)用系統(tǒng)開(kāi)發(fā)中的Web頁(yè)面內(nèi)的信息定位和Web頁(yè)面布局一般是采用HTML表格<table>標(biāo)簽實(shí)現(xiàn)的，但由于HTML標(biāo)簽本身是將數(shù)據(jù)和顯示風(fēng)格混合在一起的——請(qǐng)見(jiàn)下面的表格標(biāo)簽示例：

<table><tr><td>表格中的某個(gè)單元格需要顯示的數(shù)據(jù)</td></tr></table>

當(dāng)每個(gè)用戶(hù)請(qǐng)求訪問(wèn)后臺(tái)服務(wù)器時(shí)，服務(wù)器端程序都必須要將整個(gè)頁(yè)面文件的全部顯示格式控制的HTML標(biāo)簽內(nèi)容向客戶(hù)端的Web瀏覽器發(fā)出。如下示圖為傳統(tǒng)的頁(yè)面設(shè)計(jì)中利用表格定位和布局頁(yè)面內(nèi)容的設(shè)計(jì)效果的示例圖

這種利用<table>標(biāo)簽實(shí)現(xiàn)Web頁(yè)面信息定位和布局的頁(yè)面設(shè)計(jì)方法不便于Web頁(yè)面的維護(hù)修改和功能擴(kuò)展，基于MVC的系統(tǒng)架構(gòu)模式的基本思想要求將頁(yè)面中的數(shù)據(jù)和顯示風(fēng)格兩者相互分離——也就是MVC體系架構(gòu)設(shè)計(jì)模式中所倡導(dǎo)的表示和模型相互分離的設(shè)計(jì)原則。

2、J2EE Web 表示層組件JSP

JSP（Java Server Pages）是由Sun Microsystem公司（現(xiàn)在改為Oracle公司）于1999年6月推出的動(dòng)態(tài)網(wǎng)站實(shí)現(xiàn)技術(shù)，并且是基于Java Servlet以及整個(gè)Java技術(shù)體系的Web開(kāi)發(fā)技術(shù)。

而且JSP技術(shù)具有簡(jiǎn)便和高性能、服務(wù)器無(wú)關(guān)性和可重用性等技術(shù)實(shí)現(xiàn)方面的特點(diǎn)。但JSP技術(shù)在應(yīng)用方面也暴露出一些不足之處：Web頁(yè)面開(kāi)發(fā)實(shí)現(xiàn)的人員職責(zé)不清晰、HTML標(biāo)簽與JSP腳本程序混合在一起而導(dǎo)致Web頁(yè)面不便于維護(hù)升級(jí)和功能擴(kuò)展，因?yàn)閃eb頁(yè)面的內(nèi)容（"數(shù)據(jù)"）和表現(xiàn)（"HTML標(biāo)簽"）耦合在一起。

如下示圖為某個(gè)JSP頁(yè)面示例，在該JSP頁(yè)面中包含有服務(wù)器端的Java程序腳本代碼、JSP標(biāo)簽和HTML標(biāo)簽，整個(gè)JSP頁(yè)面內(nèi)容顯得比較"凌亂"，可讀性比較低。

正是由于JSP技術(shù)本身存在有這些方面的問(wèn)題，能否將面向?qū)ο驤ava編程技術(shù)中所倡導(dǎo)的"封裝"、"隔離"等OOP設(shè)計(jì)思想應(yīng)用于JSP Web頁(yè)面的應(yīng)用開(kāi)發(fā)中？目前在J2EE應(yīng)用開(kāi)發(fā)平臺(tái)中出現(xiàn)了許多完善、甚至代替JSP作為表示層的新技術(shù)。

3、采用"CSS+Div"分離J2EE Web表示層組件中的數(shù)據(jù)和表現(xiàn)

（1）"CSS+Div"中的CSS是頁(yè)面層疊樣式表技術(shù)

CSS（Cascading Style Sheet）是Web頁(yè)面層疊樣式表技術(shù)，利用CSS中的各種規(guī)則定義可以統(tǒng)一規(guī)范Web應(yīng)用系統(tǒng)中的整體網(wǎng)頁(yè)的格式，而不再需要分別給每個(gè)Web頁(yè)面中的目標(biāo)標(biāo)簽單獨(dú)進(jìn)行顯示風(fēng)格的屬性設(shè)置。從而大大地減少了對(duì)Web頁(yè)面顯示風(fēng)格的重復(fù)編輯、也提高了Web頁(yè)面功能的可擴(kuò)展性

（2）"CSS+Div"中的Div代表<div>標(biāo)簽

Div其實(shí)也就是HTML超文本標(biāo)簽語(yǔ)言中的<div>標(biāo)簽，<div>標(biāo)簽主要用于構(gòu)建Web頁(yè)面中區(qū)域的定義——簡(jiǎn)單地說(shuō)，也就是它能夠?qū)eb頁(yè)面劃分為不同的功能區(qū)塊。每個(gè)功能區(qū)塊的顯示風(fēng)格和其中的數(shù)據(jù)本身是相互分離的。

（3）采用"CSS+Div"分離Web表示層頁(yè)面中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯

由于CSS主要是實(shí)現(xiàn)Web頁(yè)面中的數(shù)據(jù)顯示風(fēng)格，而利用<div>標(biāo)簽可以包裝和定位其中的數(shù)據(jù)。因此，"CSS+Div"相互組合在一起就能夠分離Web表示層頁(yè)面文件中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯。

Web應(yīng)用系統(tǒng)的表示層開(kāi)發(fā)人員首先應(yīng)用<div>標(biāo)簽構(gòu)建好每個(gè)功能區(qū)塊，之后再用CSS樣式單給各個(gè)<div>標(biāo)簽統(tǒng)一配置相應(yīng)的顯示風(fēng)格——<div>標(biāo)簽不僅能夠定位頁(yè)面中的文字內(nèi)容，也能夠包裝圖片（圖片以背景的形式出現(xiàn)）或者其它形式的標(biāo)簽。

<div>標(biāo)簽代表要顯示的Web頁(yè)面數(shù)據(jù)的一個(gè)容器，而CSS層疊樣式表技術(shù)則能夠控制這個(gè)容器的各種顯示元素——比如高度和寬度、邊框的顏色、背景顏色以及其中的文字大小、文字顏色等等這些顯示信息。

"CSS+Div"是目前比較流行的Web頁(yè)面版面布局方式，能夠分離Web表示層頁(yè)面中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯、并且還能夠減少Web頁(yè)面中HTML標(biāo)簽的數(shù)量、減少網(wǎng)絡(luò)數(shù)據(jù)的傳送量；也更便于Web頁(yè)面的維護(hù)修改和功能擴(kuò)展；而且還可以為同一個(gè)Web頁(yè)面或者一組Web頁(yè)面統(tǒng)一定義一個(gè)CSS層疊樣式表文件或者為不同的功能區(qū)塊定義不同的CSS層疊樣式表文件，并且可以動(dòng)態(tài)切換和應(yīng)用不同的CSS層疊樣式表文件而產(chǎn)生出Web頁(yè)面"換皮膚"的應(yīng)用效果。

4、為什么要應(yīng)用"CSS+Div"構(gòu)建Web應(yīng)用系統(tǒng)表示層組件

（1）減少Web頁(yè)面中的重復(fù)HTML標(biāo)簽和提高Web頁(yè)面的響應(yīng)性能

由于采用CSS層疊樣式表技術(shù)能夠全局定義各個(gè)不同Web頁(yè)面的顯示風(fēng)格，從而避免了在每個(gè)Web頁(yè)面中都內(nèi)嵌有這些顯示風(fēng)格的控制標(biāo)簽，這樣的Web頁(yè)面設(shè)計(jì)方法能夠大大地減少Web頁(yè)面中的重復(fù)標(biāo)簽的數(shù)量和提高Web頁(yè)面的響應(yīng)性能。

另外，CSS層疊樣式表技術(shù)的兼容性也比較高——目前各個(gè)不同廠商的瀏覽器也都支持CSS層疊樣式表技術(shù)。一個(gè)采用"CSS+Div"技術(shù)實(shí)現(xiàn)的Web頁(yè)面布局可以在不同的Web瀏覽器、不同的網(wǎng)絡(luò)設(shè)備上都能夠正常地顯示。因此，它也方便了基于"CSS+Div"構(gòu)建的Web應(yīng)用系統(tǒng)的可擴(kuò)展性和可移植性——Web頁(yè)面中需要顯示的數(shù)據(jù)及其它形式的內(nèi)容與顯示設(shè)備無(wú)關(guān)。

（2）分離Web頁(yè)面的表現(xiàn)邏輯與數(shù)據(jù)結(jié)構(gòu)定義

在實(shí)際企業(yè)應(yīng)用系統(tǒng)的Web頁(yè)面開(kāi)發(fā)中，一般再配合采用JavaScript腳本語(yǔ)言進(jìn)行行為控制——也就是采用"CSS+Div+JavaScript"三種技術(shù)相互結(jié)合進(jìn)行Web頁(yè)面開(kāi)發(fā)，其中的CSS層疊樣式表技術(shù)實(shí)現(xiàn)Web頁(yè)面風(fēng)格的顯示、Div（<div>標(biāo)簽）則實(shí)現(xiàn)其中數(shù)據(jù)的包裝和定位、而JavaScript腳本程序代碼則實(shí)現(xiàn)與用戶(hù)相互交互的事件等行為的控制。

因此，采用"CSS+Div+JavaScript"三種技術(shù)相互配合進(jìn)行Web頁(yè)面開(kāi)發(fā)，基本上能夠達(dá)到模型視圖控制器（MVC）體系架構(gòu)設(shè)計(jì)模式所倡導(dǎo)的"結(jié)構(gòu)"、"表現(xiàn)"、"行為"三者相互分離的效果。

如果應(yīng)用該技術(shù)，首先，將能夠使得Web頁(yè)面中的各個(gè)部分的耦合性更小、更易于維護(hù)和擴(kuò)展。比如，如果希望調(diào)整Web頁(yè)面的顯示風(fēng)格，設(shè)計(jì)和開(kāi)發(fā)實(shí)現(xiàn)人員只需要改變相關(guān)的CSS層疊樣式表文件中有關(guān)的樣式表定義，而Web頁(yè)面文件本身并不需要被動(dòng)地修改；其次，Web頁(yè)面的結(jié)構(gòu)清晰，設(shè)計(jì)和開(kāi)發(fā)實(shí)現(xiàn)相關(guān)的人員分工也非常明確。

5、在銀行賬戶(hù)信息管理系統(tǒng)頁(yè)面開(kāi)發(fā)中應(yīng)用CSS+Div+JavaScript技術(shù)

在示例項(xiàng)目銀行賬戶(hù)信息管理系統(tǒng)Web頁(yè)面開(kāi)發(fā)中，作者應(yīng)用了"CSS+Div+JavaScript"三種技術(shù)，不僅減少了每個(gè)Web頁(yè)面中的標(biāo)簽總量，也將Web頁(yè)面中的格式、內(nèi)容和行為三者相互分離。

另外，在銀行賬戶(hù)信息管理系統(tǒng)中還應(yīng)用了Tiles模板技術(shù)將整個(gè)Web頁(yè)面分為不同的版塊（Tiles），而每個(gè)版塊中的Web頁(yè)面文件又采用"CSS+Div+JavaScript"技術(shù)實(shí)現(xiàn)，最終使得整個(gè)Web應(yīng)用系統(tǒng)中的每個(gè)Web頁(yè)面內(nèi)的HTML標(biāo)簽數(shù)量都比較少，而且可重用度也都比較高。

下面的代碼示例中的Web頁(yè)面內(nèi)容為示例項(xiàng)目銀行賬戶(hù)信息管理系統(tǒng)中版權(quán)信息頁(yè)面內(nèi)容的示例，其中的JavaScript腳本程序?qū)崿F(xiàn)Web頁(yè)面內(nèi)容的防拷貝控制、而Web頁(yè)面的顯示風(fēng)格定義由style.css樣式表文件定義——請(qǐng)見(jiàn)黑體標(biāo)識(shí)的部分代碼——應(yīng)用CSS+Div+JavaScript技術(shù)實(shí)現(xiàn)版權(quán)信息頁(yè)面內(nèi)容的示例

<%@ page contentType="text/html; charset=gb2312" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
          <link href='<c:url value="/css/style.css" />' type=text/css rel=stylesheet />
          <title>藍(lán)夢(mèng)網(wǎng)上銀行系統(tǒng)版權(quán)信息顯示頁(yè)</title>
    </head>
    <body>
          <script type="text/javascript">
                document.body.oncopy = function (){
                setTimeout( function () {
                var text = clipboardData.getData("text");
                if (text) {
                text = text + "\r\n所復(fù)制的內(nèi)容來(lái)源于"藍(lán)夢(mèng)網(wǎng)上銀行系統(tǒng)"
                www.webbank.com ，原文的鏈接為："+location.href;
                clipboardData.setData("text", text);
                }}, 100 )
                }
          </script>
          <div id="globalMenuBar">
                <a href='<c:url value="/pageForwordAction.action?action=forwardIndex" />'
                class="hrefstyle">返回首頁(yè)</a> -
                <a href="#" class="hrefstyle">關(guān)于本站</a> -
                <a href="#" class="hrefstyle">網(wǎng)站幫助</a> -
                <a href="#" class="hrefstyle">網(wǎng)站聲明</a> -
                <a href="#" class="hrefstyle">服務(wù)網(wǎng)點(diǎn)</a> -
                <a href="#" class="hrefstyle">服務(wù)熱線(xiàn)</a> -
                <a href="#" class="hrefstyle">廣告合作</a> -
                <a href="#" class="hrefstyle">下載聲明</a> -
                <a href="#" class="hrefstyle">友情連接</a> -
                <a href="#" class="hrefstyle">網(wǎng)站地圖</a> -
                <a href="#" class="hrefstyle">聯(lián)系我們</a>
          </div>
    </body>
</html>

為了減少本書(shū)的篇幅，在上面的代碼示例中省略了各個(gè)超鏈接中的目標(biāo)URL地址的顯示。該頁(yè)面在Macromedia Dreamweaver工具軟件中的預(yù)覽效果請(qǐng)見(jiàn)下圖示例圖所示。

6、應(yīng)用支持"CSS+Div"的可視化軟件工具提高頁(yè)面開(kāi)發(fā)的效率

（1）CSS Tab Designer是一款使用CSS設(shè)計(jì)導(dǎo)航菜單的可視化軟件

由于在"CSS Tab Designer"可視化軟件中內(nèi)置有高達(dá)60多種不同風(fēng)格的樣式，Web頁(yè)面開(kāi)發(fā)人員只需修改現(xiàn)成樣式的模版文件，就能快速地生成滿(mǎn)足自己的Web應(yīng)用系統(tǒng)需要的CSS菜單。如下示圖為"CSS Tab Designer"官方網(wǎng)站對(duì)該軟件的功能特性的介紹文字的局部截圖，讀者可以在此網(wǎng)站中下載該軟件，為開(kāi)源共享軟件。

并且該軟件生成的XHTML標(biāo)簽嚴(yán)格遵循W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)，所創(chuàng)建出的CSS菜單也能夠兼容于各種主流的瀏覽器（如Internet Explorer、Firefox、Opera、Netscape等）。

讀者在成功下載該開(kāi)源軟件后，在CSS Tab Designer的系統(tǒng)文件及目錄結(jié)構(gòu)中的tab.exe文件為它的啟動(dòng)程序。而在Help目錄中的文件為操作幫助指南，samples目錄內(nèi)的文件為示例樣式文件，styles目錄內(nèi)的文件為CSS Tab Designer內(nèi)帶的各個(gè)樣式模板文件。

（2）啟動(dòng)CSS Tab Designe導(dǎo)航菜單可視化軟件

讀者點(diǎn)擊所下載的CSS Tab Designe文件目錄中的tab.exe文件就可以啟動(dòng)CSS Tab Designe導(dǎo)航菜單可視化軟件，下圖所示為啟動(dòng)后的初始界面的截圖。其中在左面【項(xiàng)目】視圖中顯示所創(chuàng)建的各個(gè)頁(yè)面文件；而在中間的【標(biāo)簽樣式表】視圖中提供有CSS Tab Designe可視化軟件內(nèi)帶的各個(gè)模板樣式，開(kāi)發(fā)人員可以直接選擇；在右面的【預(yù)覽】視圖中直接顯示開(kāi)發(fā)人員所設(shè)計(jì)的結(jié)果、并能夠采用"所見(jiàn)即所得"方式進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)。

（3）瀏覽CSS Tab Designe導(dǎo)航菜單可視化軟件的操作幫助指南

在CSS Tab Designe導(dǎo)航菜單可視化軟件提供有操作幫助指南，并且文檔的技術(shù)說(shuō)明內(nèi)容寫(xiě)的也比較詳細(xì)和易懂——請(qǐng)見(jiàn)下圖所示的幫助文檔的局部?jī)?nèi)容的截圖。讀者可以瀏覽和閱讀CSS Tab Designe導(dǎo)航菜單可視化軟件的幫助文檔掌握對(duì)該軟件的使用，以提高應(yīng)用CSS+Div技術(shù)進(jìn)行頁(yè)面設(shè)計(jì)時(shí)的效率。

如何應(yīng)用策略設(shè)計(jì)模式的思想設(shè)計(jì)通用的數(shù)據(jù)庫(kù)連接類(lèi)

如何應(yīng)用策略設(shè)計(jì)模式分離JDBC數(shù)據(jù)庫(kù)連接中的外部環(huán)境信息

如何應(yīng)用GOF設(shè)計(jì)模式中的構(gòu)建者模式創(chuàng)建復(fù)合對(duì)象實(shí)例

如何應(yīng)用GOF設(shè)計(jì)模式中的創(chuàng)建型模式實(shí)現(xiàn)松耦合地創(chuàng)建對(duì)象實(shí)例

如何應(yīng)用觀察者設(shè)計(jì)模式重構(gòu)系統(tǒng)中日志處理功能實(shí)現(xiàn)的程序代碼

font-family: "firacode-retina","Source Han Sans CN";
font-size:16px;