通过代码实例跟我学J2EE Web组件相关技术——网站重构相关技术及应用

  • 格式:pdf
  • 大小:115.40 KB
  • 文档页数:4

1.1网站重构相关技术及应用
1、什么是网站重构
把未采用CSS,大量使用HTML进行定位、布局或者虽然已经采用CSS,但是未遵循HTML结构化标准的站点优化为遵守W3C标准的HTML页面的过程就是网站重构(Website Reconstruction)。

也就是通过在HTML文档中使用结构化的标签以及用CSS样式单控制页面的表现,使页面的内容与它们呈现的显示风格相互分离。

2、为什么要对网站进行重构
1)使页面加载得更快速,因为如果网页分成HTML、CSS、JS三种类型的文件实现,而
CSS、JS又是可以缓存的。

所以浏览一个这样的网页其实就是下载HTML代码就可以,速度当然也就变快。

2)降低带宽带来的费用-节约成本,通过对色系的运用,达到最大限度地减少对图片的
应用。

3)在修改设计时更有效率而代价更低,由于现在的Web应用已经越来越复杂,RIA的
出现势必导致Web开发不能仅仅依靠美工来完成。

如果没有标准化的约束,如何进行分工合作呢?
4)使得整个站点保持视觉的一致性
5)更利于搜索引擎的检索(符合SEO的规范),合理地应用网页头部的<meta>标签能
够帮助网站提高搜索引擎上的排名(Rank)。

因为采用CSS+Div代替嵌套的<table>标签,搜索引擎将更有效地搜索到网站中的内容。

6)令站点更容易被各种浏览器和用户访问(包括手机、PDA和残障人士使用的文字浏
览器)
7)兼容不容忽视的Mozilla 系列浏览器(如Firefox)
如果某个网站是采用表格实现布局,如果该网站需要重新改版,则需要重新设计页面模板,然后再利用新的页面模板对所有页面进行重新生成,发布并上传成千上万个文件。

而如果是采用Web标准所推荐的“CSS+Div+JS”技术之后,改版只需要修改一个CSS 文件,无需重新发布和上传成千上万个文件。

因为把内容与格式分开使得内容能够与显示设
备无关,而且重构后的网站能带来更好的用户体验,用XHTML+CSS重新布局后的页面,文件更小,下载速度更快。

3、对网站进行重构需要具备那些知识
1)策划人员必须提出网页的结构
2)UI设计师需要对所设计的内容、结构进行充分的理解
3)程序开发人员也需要了解WEB标准的知识
4)具备和熟悉HTML、CSS和JavaScript等方面的知识
对网站进行重构最主要的是要遵守W3C的Web标准,但并不是拒绝使用<table>标签,只是不再应用<table>标签实现页面的布局。

4、再回顾什么是Web标准
(1)Web标准不是某一个标准,而是一系列标准的集合
由于一个网页主要是由三部分所组成:结构(Structure)、表现(Presentation)和行为(Behavior),因此,对应的标准也分为三个方面。

(2)Web标准的三个方面
1)结构化标准语言主要包括XHTML和XML
2)表现标准语言主要包括CSS
3)行为标准主要包括对象模型(如W3C DOM)、ECMAScript等
这些标准大部分是由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA (European Computer Manufacturers Association)的ECMAScript标准。

5、如何进行网站重构
(1)恢复HTML本来的面貌——用XHTML描述文档的结构
把描述外观的标签改为描述结构的标签,比如<h?></h?> (?为从1到6)、<div></div>等为描述结构的标签,而<b>、<i>、<u>、<sub>、<sup>、<center>、<blink>、<font >等标签为描述外观的标签。

(2)掌握CSS的应用——利用CSS技术对内容进行布局
当然,在网站界面及布局优化的同时,网站重构师也还需要充分地考虑SEO及SEM技术嫁接以及跨平台和跨浏览器的兼容等方面的问题。

6、了解目前的浏览器内核
(1)浏览器内核也就是浏览器所采用的渲染引擎
渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,不同的浏览器内核对HTML标签的解析也有所不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的主要原因。

(2)主流的浏览器内核
1)Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在
Mosaic代码的基础之上修改而来的,并沿用到目前的IE7。

Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等)。

2)Geckos:Netcape6开始采用的内核,后来的Mozilla FireFox也采用了该内核,Geckos
的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。

3)Presto:目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引
擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。

4)Webkit:Safari浏览器使用的内核,Webkit引擎包含WebCore排版引擎及JavaScriptCore
解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。

所以Webkit也是自由软件,同时开放源代码。

在安全方面不受IE、Firefox的制约,所以Safari浏览器还是比较安全的浏览器(Google的Chrome浏览器也是采用Webkit)。

7、设计一个有良好用户体验的网站需要从五个层面上去考虑问题
(1)战略层
网站要做什么事?目标是什么?
(2)范围层
为了实现目标,有哪些事情是应当做的?或者哪些是不应当做的。

(3)结构层
这些事情应当如何组织?相互关系?
(4)框架层
页面布局?各个元素的位置?
(5)表现层
图片、文字、颜色……这些最终的视觉元素如何表现。