如何應用CSS+Div分離Web表示層數據處理邏輯和展現邏輯

件項目實訓及課程設計指導——如何應用CSS+Div分離Web表示層數據處理和展現邏輯

1、常規的Web頁面實現方法

早期的Web應用系統開發中的Web頁面內的信息定位和Web頁面布局一般是采用HTML表格<table>標簽實現的，但由于HTML標簽本身是將數據和顯示風格混合在一起的——請見下面的表格標簽示例：

<table><tr><td>表格中的某個單元格需要顯示的數據</td></tr></table>

當每個用戶請求訪問后臺服務器時，服務器端程序都必須要將整個頁面文件的全部顯示格式控制的HTML標簽內容向客戶端的Web瀏覽器發出。如下示圖為傳統的頁面設計中利用表格定位和布局頁面內容的設計效果的示例圖

這種利用<table>標簽實現Web頁面信息定位和布局的頁面設計方法不便于Web頁面的維護修改和功能擴展，基于MVC的系統架構模式的基本思想要求將頁面中的數據和顯示風格兩者相互分離——也就是MVC體系架構設計模式中所倡導的表示和模型相互分離的設計原則。

2、J2EE Web 表示層組件JSP

JSP（Java Server Pages）是由Sun Microsystem公司（現在改為Oracle公司）于1999年6月推出的動態網站實現技術，并且是基于Java Servlet以及整個Java技術體系的Web開發技術。

而且JSP技術具有簡便和高性能、服務器無關性和可重用性等技術實現方面的特點。但JSP技術在應用方面也暴露出一些不足之處：Web頁面開發實現的人員職責不清晰、HTML標簽與JSP腳本程序混合在一起而導致Web頁面不便于維護升級和功能擴展，因為Web頁面的內容（"數據"）和表現（"HTML標簽"）耦合在一起。

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

正是由于JSP技術本身存在有這些方面的問題，能否將面向對象Java編程技術中所倡導的"封裝"、"隔離"等OOP設計思想應用于JSP Web頁面的應用開發中？目前在J2EE應用開發平臺中出現了許多完善、甚至代替JSP作為表示層的新技術。

3、采用"CSS+Div"分離J2EE Web表示層組件中的數據和表現

（1）"CSS+Div"中的CSS是頁面層疊樣式表技術

CSS（Cascading Style Sheet）是Web頁面層疊樣式表技術，利用CSS中的各種規則定義可以統一規范Web應用系統中的整體網頁的格式，而不再需要分別給每個Web頁面中的目標標簽單獨進行顯示風格的屬性設置。從而大大地減少了對Web頁面顯示風格的重復編輯、也提高了Web頁面功能的可擴展性

（2）"CSS+Div"中的Div代表<div>標簽

Div其實也就是HTML超文本標簽語言中的<div>標簽，<div>標簽主要用于構建Web頁面中區域的定義——簡單地說，也就是它能夠將Web頁面劃分為不同的功能區塊。每個功能區塊的顯示風格和其中的數據本身是相互分離的。

（3）采用"CSS+Div"分離Web表示層頁面中的數據處理邏輯和表現邏輯

由于CSS主要是實現Web頁面中的數據顯示風格，而利用<div>標簽可以包裝和定位其中的數據。因此，"CSS+Div"相互組合在一起就能夠分離Web表示層頁面文件中的數據處理邏輯和表現邏輯。

Web應用系統的表示層開發人員首先應用<div>標簽構建好每個功能區塊，之后再用CSS樣式單給各個<div>標簽統一配置相應的顯示風格——<div>標簽不僅能夠定位頁面中的文字內容，也能夠包裝圖片（圖片以背景的形式出現）或者其它形式的標簽。

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

"CSS+Div"是目前比較流行的Web頁面版面布局方式，能夠分離Web表示層頁面中的數據處理邏輯和表現邏輯、并且還能夠減少Web頁面中HTML標簽的數量、減少網絡數據的傳送量；也更便于Web頁面的維護修改和功能擴展；而且還可以為同一個Web頁面或者一組Web頁面統一定義一個CSS層疊樣式表文件或者為不同的功能區塊定義不同的CSS層疊樣式表文件，并且可以動態切換和應用不同的CSS層疊樣式表文件而產生出Web頁面"換皮膚"的應用效果。

4、為什么要應用"CSS+Div"構建Web應用系統表示層組件

（1）減少Web頁面中的重復HTML標簽和提高Web頁面的響應性能

由于采用CSS層疊樣式表技術能夠全局定義各個不同Web頁面的顯示風格，從而避免了在每個Web頁面中都內嵌有這些顯示風格的控制標簽，這樣的Web頁面設計方法能夠大大地減少Web頁面中的重復標簽的數量和提高Web頁面的響應性能。

另外，CSS層疊樣式表技術的兼容性也比較高——目前各個不同廠商的瀏覽器也都支持CSS層疊樣式表技術。一個采用"CSS+Div"技術實現的Web頁面布局可以在不同的Web瀏覽器、不同的網絡設備上都能夠正常地顯示。因此，它也方便了基于"CSS+Div"構建的Web應用系統的可擴展性和可移植性——Web頁面中需要顯示的數據及其它形式的內容與顯示設備無關。

（2）分離Web頁面的表現邏輯與數據結構定義

在實際企業應用系統的Web頁面開發中，一般再配合采用JavaScript腳本語言進行行為控制——也就是采用"CSS+Div+JavaScript"三種技術相互結合進行Web頁面開發，其中的CSS層疊樣式表技術實現Web頁面風格的顯示、Div（<div>標簽）則實現其中數據的包裝和定位、而JavaScript腳本程序代碼則實現與用戶相互交互的事件等行為的控制。

因此，采用"CSS+Div+JavaScript"三種技術相互配合進行Web頁面開發，基本上能夠達到模型視圖控制器（MVC）體系架構設計模式所倡導的"結構"、"表現"、"行為"三者相互分離的效果。

如果應用該技術，首先，將能夠使得Web頁面中的各個部分的耦合性更小、更易于維護和擴展。比如，如果希望調整Web頁面的顯示風格，設計和開發實現人員只需要改變相關的CSS層疊樣式表文件中有關的樣式表定義，而Web頁面文件本身并不需要被動地修改；其次，Web頁面的結構清晰，設計和開發實現相關的人員分工也非常明確。

5、在銀行賬戶信息管理系統頁面開發中應用CSS+Div+JavaScript技術

在示例項目銀行賬戶信息管理系統Web頁面開發中，作者應用了"CSS+Div+JavaScript"三種技術，不僅減少了每個Web頁面中的標簽總量，也將Web頁面中的格式、內容和行為三者相互分離。

另外，在銀行賬戶信息管理系統中還應用了Tiles模板技術將整個Web頁面分為不同的版塊（Tiles），而每個版塊中的Web頁面文件又采用"CSS+Div+JavaScript"技術實現，最終使得整個Web應用系統中的每個Web頁面內的HTML標簽數量都比較少，而且可重用度也都比較高。

下面的代碼示例中的Web頁面內容為示例項目銀行賬戶信息管理系統中版權信息頁面內容的示例，其中的JavaScript腳本程序實現Web頁面內容的防拷貝控制、而Web頁面的顯示風格定義由style.css樣式表文件定義——請見黑體標識的部分代碼——應用CSS+Div+JavaScript技術實現版權信息頁面內容的示例

<%@ 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>藍夢網上銀行系統版權信息顯示頁</title>
    </head>
    <body>
          <script type="text/javascript">
                document.body.oncopy = function (){
                setTimeout( function () {
                var text = clipboardData.getData("text");
                if (text) {
                text = text + "\r\n所復制的內容來源于"藍夢網上銀行系統"
                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">返回首頁</a> -
                <a href="#" class="hrefstyle">關于本站</a> -
                <a href="#" class="hrefstyle">網站幫助</a> -
                <a href="#" class="hrefstyle">網站聲明</a> -
                <a href="#" class="hrefstyle">服務網點</a> -
                <a href="#" class="hrefstyle">服務熱線</a> -
                <a href="#" class="hrefstyle">廣告合作</a> -
                <a href="#" class="hrefstyle">下載聲明</a> -
                <a href="#" class="hrefstyle">友情連接</a> -
                <a href="#" class="hrefstyle">網站地圖</a> -
                <a href="#" class="hrefstyle">聯系我們</a>
          </div>
    </body>
</html>

為了減少本書的篇幅，在上面的代碼示例中省略了各個超鏈接中的目標URL地址的顯示。該頁面在Macromedia Dreamweaver工具軟件中的預覽效果請見下圖示例圖所示。

6、應用支持"CSS+Div"的可視化軟件工具提高頁面開發的效率

（1）CSS Tab Designer是一款使用CSS設計導航菜單的可視化軟件

由于在"CSS Tab Designer"可視化軟件中內置有高達60多種不同風格的樣式，Web頁面開發人員只需修改現成樣式的模版文件，就能快速地生成滿足自己的Web應用系統需要的CSS菜單。如下示圖為"CSS Tab Designer"官方網站對該軟件的功能特性的介紹文字的局部截圖，讀者可以在此網站中下載該軟件，為開源共享軟件。

并且該軟件生成的XHTML標簽嚴格遵循W3C網頁標準，所創建出的CSS菜單也能夠兼容于各種主流的瀏覽器（如Internet Explorer、Firefox、Opera、Netscape等）。

讀者在成功下載該開源軟件后，在CSS Tab Designer的系統文件及目錄結構中的tab.exe文件為它的啟動程序。而在Help目錄中的文件為操作幫助指南，samples目錄內的文件為示例樣式文件，styles目錄內的文件為CSS Tab Designer內帶的各個樣式模板文件。

（2）啟動CSS Tab Designe導航菜單可視化軟件

讀者點擊所下載的CSS Tab Designe文件目錄中的tab.exe文件就可以啟動CSS Tab Designe導航菜單可視化軟件，下圖所示為啟動后的初始界面的截圖。其中在左面【項目】視圖中顯示所創建的各個頁面文件；而在中間的【標簽樣式表】視圖中提供有CSS Tab Designe可視化軟件內帶的各個模板樣式，開發人員可以直接選擇；在右面的【預覽】視圖中直接顯示開發人員所設計的結果、并能夠采用"所見即所得"方式進行開發實現。

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

在CSS Tab Designe導航菜單可視化軟件提供有操作幫助指南，并且文檔的技術說明內容寫的也比較詳細和易懂——請見下圖所示的幫助文檔的局部內容的截圖。讀者可以瀏覽和閱讀CSS Tab Designe導航菜單可視化軟件的幫助文檔掌握對該軟件的使用，以提高應用CSS+Div技術進行頁面設計時的效率。

如何應用策略設計模式的思想設計通用的數據庫連接類

如何應用策略設計模式分離JDBC數據庫連接中的外部環境信息

如何應用GOF設計模式中的構建者模式創建復合對象實例

如何應用GOF設計模式中的創建型模式實現松耦合地創建對象實例

如何應用觀察者設計模式重構系統中日志處理功能實現的程序代碼

ooltip提示效果經常會使用到，會運用到的場景是一些信息提示標識網頁中。

具體效果：

實現代碼

html:

title的值就是彈出層的內容！

css:

四月份是一年中人才流動最大的一個階段，也是機會最多的一個階段。所以小編給大家多寫幾篇面試常會碰到的問題。希望童靴們把握好“金三銀四”這個找工作的黃金階段，也祝大家都能找到一個理想又高薪的工作。

列舉一些塊級元素和內聯元素？它們的區別是什么？

童靴們可以看文章詳細學習它們：HTML基礎（三）——塊級元素和行內元素的區別

小編給大家列舉一些：

塊級元素：p,div,h1~h6,ul,ol,li,table,hr

內聯元素（行內元素）:a,span,img,br

區別：

塊級元素默認占一行，一行內添加一個塊元素后一般無法添加其他的元素（后續CSS中會講塊級元素和行內元素的轉換）。塊級元素一般可以嵌套塊級元素或行內元素。塊級元素寬高，行高以及外邊距和內邊距都是可控的。

行內元素也叫內聯元素或者內嵌元素。行內元素和其他元素都在一行上，高度、行高、內邊距和外邊距都不可改變。寬度是它文字或者圖片的寬度，也是不可改變的。行內元素只能容納文本或者其他行內元素。

什么是語義化的HTML?

直觀的認識標簽，對搜索引擎的抓取有好處，正確的標簽做正確的事。html語義化就是讓頁面的內容結構化，便于瀏覽器、搜索引擎解析；在沒有CSS的情況下也能以文檔格式顯示，并且容易閱讀。源代碼將網站分塊，便于閱讀和維護。

HTML5 為什么只需要寫 !DOCTYPE HTML？

HTML5 不基于 SGML（標準通用置標語言），因此不需要對DTD（Document Type Definitio 文檔類型定義）進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

Doctype作用？標準模式與兼容模式各有什么區別?

!DOCTYPE聲明位于HTML文檔的第一行，寫在html標簽的前面。告訴瀏覽器的解析器用什么文檔標準去解析這個文檔，DOCTYPE不存在或者語法不正確的話，文檔會以兼容模式呈現。

區別：標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

前端頁面有哪三層構成，分別是什么？

結構層：HTML

表示層：CSS

行為層：JavaScript

常用哪些瀏覽器去測試頁面？它們的內核是什么？

Ie(Ie內核) 火狐（Gecko）谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

XHTML和HTML有什么區別？

HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言

最主要的不同：

XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素

html5有哪些新特性？

繪畫 canvas；
用于媒介回放的 video 和 audio 元素；
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
sessionStorage 的數據在瀏覽器關閉后自動刪除；
語義化標簽，如header,nav,section；

在線咨詢

上一篇：做盡職調查，這些網站夠你用了，全網最全面的網址（建議收藏）
下一篇：電腦開啟一個網頁后,莫名其妙的彈出很多網頁怎么回事？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商