发表于《程序员》2006年12期
一、背景介绍
随着web标准的逐步深入人心,人们也逐渐开始认识到使自己的页面符合标准的重要。web标准认为网页应该由三部分组成,即结构(Structure)、表现(Presentation)和行为(Behavior)。而用XHTML描述内容结构,用CSS作为表现语言,用DOM+ECMAScript实现页面行为也成了web标准的三个组成部分。做到符合web标准,实现结构、表现和行为的分离成为目前许多网站重构的主要工作,也成了现有web项目要实现的目标之一。本人目前从事的开发工作也面临着同样的一个问题—页面布局重构。
二、问题描述
目前公司推出的Ajax集成开发框架――Dorado在结构、表现和行为的分离处理上已经日趋完善,而长久以来存在的一个不足之处就是在所提供的布局管理器上:在JSP页面上通过自定义标签来完成布局的定义,在最终的HTML静态页面上,则会根据用户在标签上设置的属性来生成各种TABLE元素完成页面的布局。这样做虽然对用户来说可以更好的封装各种布局的实现细节,降低开发人员的工作量,但是相对于采用DIV+CSS的布局策略则在灵活性、兼容性以及性能上明显要“稍逊风骚”,因此对集成框架中提供的布局标签进行重构也成了目前要处理的工作。
三、解决方案
在开始页面重构工作之前,首先用Dorado Studio IDE新建需要进行布局重构的页面,这里我们拿典型的Header + Body (Left + Center + Right) + Footer“三段式”布局风格页面来加以说明,其布局界面图如下:
浏览器最终得到的静态HTML代码为这个样子:
xml 代码
- <table cellspacing="0" cellpadding="8px" style="border-collapse: collapse;">
- <tr>
- <td colSpan="3" width="100%">toptd>
- tr>
- <tr height="100%">
- <td height="100%" valign="top">left td>
- <td width="100%" height="100%" valign="top">center td>
- <td height="100%" valign="top">right td>
- tr>
- <tr>
- <td colSpan="3" width="100%">footer td>
- tr>
- table>
为了达到同样的布局界面效果,我们手动新建了如下内容的HTML页面:
xml 代码
- <div class="dorado-layout-container">
- <div class=" dorado-layout-header">topdiv>
- <div class=" dorado-layout-body">
- <div class=" dorado-layout-sidebar">leftdiv>
- <div class=" dorado-layout-content">centerdiv>
- <div class=" dorado-layout-sidebar">rightdiv>
- div>
- <div class=" dorado-layout-footer">footerdiv>
- div>
除了HTML页面之外我们又编写一个如下内容的CSS样式表文件:
css 代码
- .dorado-layout-container{
- width:300px; height:200px; border:1px solid gray;
- }
- .dorado-layout-header{
- height:40px; padding:10px; border-bottom:1px solid gray;
- }
- .dorado-layout-body{
- clear:both; width:100%; height:100%;
- }
- .dorado-layout-sidebar{
- float:left; width:10%;height:100%;border-right:1px solid gray;
- }
- .dorado-layout-content{
- float:left; width:68%;height:100%;
- }
- .dorado-layout-footer{
- height:40px; padding:10px; clear:both; width:100%;border-top:1px solid gray;
-
- }
-
这样重构前的准备工作告一段落。接下就是对生成布局HTML页面的自定义标签Java类进行重构:由生成TABLE的标签类重构成生成DIV的标签类。因为根据我们编写的最终要得到DIV+CSS页面可以知道,标签类的内容将会被“减肥”不少,因为所有对结构的表现方式都“跑到”CSS中去了。
标签Java类重构完成之后,为了验证布局保持与原来一致,于是编写各种测试布局的页面,并在不同类型的浏览器下进行测试,经过一定的调整,我们便完成了一个布局重构的工作。以此类推,剩下的页面布局重构也采用这种方式来进行处理。
四、经验分享
在使用DIV+CSS进行布局重构的时候,可以说是我对网页布局观念的不断转变以及对web标准认识不断加深的过程,也是对CSS技术灵活运用逐步熟练的过程。起初对CSS的一些布局属性不是很熟,感觉使用DIV进行布局比传统采用TABLE要麻烦许多,几乎达到放弃的地步,不过值得庆幸的是目前采用DIV+CSS已经成为一种趋势,因此网上相关的资料非常的丰富,解决了我所遇到的各种问题,比如如何实现DIV高度和宽度的自适应, 如何做到CSS的布局在不同浏览器的兼容等等,这些问题都可以通过google找到相关的答案。要得到理想的布局效果,一个合适的编辑器也是我们必备的利器之一。由于本人长期使用EditPlus编辑各种文本文件,因此成了首选,不过目前最新的Web设计工具Dreamweaver8已经实现了对CSS布局的可视化,相信会成为大家的最爱。
下面是我在进行布局重构的时候认为比较重要的几个观念和要点。
1、在CSS中涉及到布局方面主要是float,overflow,clear,display,padding,margin以及position几个属性,我们必须对它们各自的作用,以及不同的属性值的意义做到“烂熟于胸”,否则布局工作将是一件非常痛苦的事情。因此本人强烈推荐苏沈小雨编著的《CSS2手册》,该文档也应该成为每个使用DIV+CSS进行布局的开发人员的“葵花宝典”。
2、对CSS盒模式的理解,下面的示意图对于我们进行合适的布局非常有帮助,特别是在进行细微的布局调整方面。
3、不论是使用DIV还是TABLE进行布局,尽量减少嵌套层次。当使用了太多的嵌套层次之后,浏览器进行解析的时候将会得到全部的内容才能做显示,而使用尽可能少的嵌套div则可以做到边接收边显示(TABLE则需要完全取得整个表格中的内容才能做显示),这样可以加快显示速度。
4、在对class和id名称进行定义的时候尽量与内容结构相关,而不是与布局、表现相关。否则在布局发生改变之后,就会造成class或者id的名字跟它自己的表现形式不符,造成理解上的困难,对于页面内容旁边的side bar区域不要定义成leftBar,而应该根据内容定义成titleBar或者hotBar之类的名字,这样在布局发生改变的时候不会到该名字的继续使用。
5、使用XHML的语义元素来定义页面中的内容结构,比如用<h1><h2>这样的元素来定义各种标题结构的内容,用<ul><li>来定义各种条目结构的内容,用<table>来定义表格结构的内容。
6、在使用DIV,SPAN块状元素进行布局重构的时候还有一点需要特别注意,当我们以前采用TABLE进行布局的时候,TABLE在布局前会拿到所有的内容,然后会根据各个部分内容以及每块的布局设置来进行“通盘”考虑,然后重新计算最终的布局结构,块状元素则比较“自私”,缺少一种“全局”观念,它仅仅关心自己的布局,至于它前后左右是如何布局则不管,而这个工作则需要设计者来决定,当然我们也可以通过一些布局技巧来提高块状元素的“全局”素养,当做到这一步的时候,采用DIV+CSS进行布局将会变成一件非常轻松的事情!
分享到:
相关推荐
Direct Web Remoting (DWR) 是一个开源Java框架,简化了在Web应用中使用Ajax的技术。DWR允许JavaScript代码直接调用服务器端的Java方法,将Java对象转换为JavaScript对象,反之亦然。这样,开发者无需关心底层的...
Visual Studio 2005是微软推出的一款强大的集成开发环境(IDE),专为软件开发者提供了一个全面的工具集,用于创建、调试和部署各种应用程序。这个压缩包文件"A001"显然包含了关于如何熟悉Visual Studio 2005集成...
DWR(Direct Web Remoting)是Ajax技术的一个实现框架,使得Java开发者可以轻松地在Web应用中实现客户端和服务器端的直接通信。 Ajax的核心组件包括以下几部分: 1. **JavaScript**:作为客户端脚本语言,...
这是一个电子商务平台,涵盖了商品展示、购物车、订单管理、支付接口集成等复杂功能。开发者将学习Spring MVC框架的应用,MySQL数据库的设计与优化,还有可能接触到第三方API如支付宝或微信支付的接入。另外,安全...
比如,可能会有一个`BrowserWindow`类来管理浏览器的主要界面,一个`Navigation`类负责处理URL导航,还有`TabManager`类用于管理多个浏览标签。 由于是基于.NET框架,Excellence Traveler浏览器可能使用了...
Eclipse Rich Client Platform (RCP) 提供了一个框架,允许开发者构建桌面应用,而Eclipse Rich Ajax Platform (RAP) 则支持开发Web应用程序。这两个框架都利用了Eclipse的核心组件和插件系统,使得开发者能够快速地...
Eclipse是一款开源的、跨平台的IDE,支持多种编程语言,而MyEclipse则是基于Eclipse的商业扩展,尤其在Java企业级应用开发方面提供了更多的功能和服务。 Eclipse中文手册详细介绍了Eclipse的安装、配置、使用方法,...
Aptana是一款专门为JavaScript开发者设计的强大且开源的集成开发环境(IDE),专攻Ajax应用程序的构建。这款IDE因其丰富的功能和易用性而备受推崇...如果你是JavaScript或Ajax开发者,Aptana无疑是一个值得尝试的选择。
Vaadin不仅是一个功能强大的开发框架,而且具备成熟的商业支持服务,使得开发者可以更加专注于业务逻辑,而无需过多关注底层实现细节。通过使用Vaadin,企业可以快速构建高效、美观且易于维护的Web应用。
Spket是这样一个专门针对JavaScript和相关技术(如Ajax、DWR和JSON)的IDE,它支持Ext JS的开发。Spket提供了一套强大的特性,帮助开发者更高效地编写代码,包括代码提示、自动完成、错误检查和调试功能。 1. **Ext...
Jeesite是一款基于Java开发的开源企业级框架,旨在为开发者提供一套高效、稳定的开发工具,以提升开发效率。在企业级应用开发中,Jeesite扮演着快速开发平台的角色,帮助开发团队节省时间和精力,将更多的关注点放在...
Flask是一个轻量级、灵活的Web服务器和应用框架,非常适合快速开发小型到中型的Web应用。 首先,Flask的核心是一个WSGI服务器,它允许开发者用Python编写HTTP服务器。通过Flask,我们可以定义路由、创建视图函数来...
【描述】:这份文档是一个针对web前端开发工程师的个人简历模板,包含了求职者的个人信息、求职意向、工作经历和教育背景,展现了其在前端开发领域的技能和项目经验。 【标签】:CS (计算机科学) 【内容概要】:该...
【标题】中的“基于Idea开发Springboot+Vue疫情防控管理系统毕业设计”表明这是一个关于软件开发的项目,使用了IntelliJ IDEA作为集成开发环境(IDE)...这个系统可能包含了数据收集、分析...
它集成了代码高亮、智能提示、语法检查、重构等功能,还支持Git版本控制,为开发者提供了一站式的工作环境。 二、CMS开发基础 CMS(Content Management System)是一种用于管理网站内容的软件,它允许非技术人员...
ticket_all.jsp j2ee ssh 较小集成代码”指的是一个票务系统项目,这个项目可能包含处理大量数据(三千万条)的能力,并且集成了J2EE(Java 2 Enterprise Edition)、SSH(Spring、Struts和Hibernate)三大框架。...
JavaWEB相关的内容可能涵盖Servlet、JSP、JSTL、Filter、Listener、MVC框架(如Spring MVC)、JPA/Hibernate(数据持久层)、JavaScript、Ajax、JSON、RESTful API设计、Tomcat服务器配置、Eclipse或IntelliJ IDEA...
9. **集成开发环境**:Eclipse或IntelliJ IDEA等IDE提供了一站式的开发环境,支持代码编写、调试、重构等功能,提高开发效率。 10. **文档编写**:使用LaTeX或Microsoft Word撰写毕业论文,详细记录项目背景、设计...
总之,这个项目利用了现代Java开发的最佳实践,结合了强大的IDE、构建工具、前端框架和微服务框架,提供了一个高效、可维护的Web应用解决方案。对于学习和实践这些技术的开发者来说,这是一个宝贵的资源。