早期的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设计模式中的创建型模式实现松耦合地创建工具实例
如何运用不雅观察者设计模式重构系统中日志处理功能实现的程序代码
