DHTML.pptVIP

DHTML 王胜清北京大学计算机系网络研究室wangsq@ 主要内容 DHTML的概念 DHTML 技术的核心—DOM CSS-P DHTML 编程 几个讨论的问题 推荐站点 /~haidian/example.html DHTML的概念 动态HTML就是一种即使在网页下载进浏览器以后，网页中元素的位置、外观、内容仍然能够随时变换，这样的HTML，我们称之为DHTML 。 动态HTML（简称为DHTML）是近年来网络发展进程中最振奋人心也最具实用性的创新之一。它的实现需要几种技术的综合。（当然，不同的浏览器，实现的程度也不同），这些技术包括CSS, Document,Object Mode，改变网页的编程语言（JavaScript，VBScript）。 DHTML技术的核心—DOM 在某种意义上，DOM是动态HTML的真正核心内容。 文档对象模型是HTML和XML的应用编程接口。它定义了文档的逻辑结构和访问文档的途径。 DOM是为文档的编程API，它非常接近它模型化的文档结构 文档与DOM关系示例 TABLE TBODY TR TDShady Grove/TD TDAeolian/TD /TR TR TDOver the River, Charlie/TD TDDorian/TD /TR /TBODY /TABLE 文档与DOM关系示例（续） 理解DOM DOM不是一个二进制的规范，用相同语言写的DOM程序，它的源程序可以跨平台兼容，但是DOM并没有定义任何二进制互操作的形式 。 DOM不是坚持把对象放到XML或HTML的方式。DOM规定了XML和HTML文档如何以对象形式表示，从而它们可以用在面向对象的程序中 。 DOM不是一套数据结构，而是规定接口的对象模型。虽然文档包含了显示parent/child关系的示意图，但这些只是由编程接口定义的逻辑关系，并不是任何特殊的内部数据结构的表示。  理解DOM（续） DOM并没有定义XML或HTML的“真正内部语义”。这些语言的语义是由W3C推荐的。DOM是被设计为尊重这些语义的编程模型。任何用这些语言写的文档可用DOM表示。 DOM，与COM及CORBA不是一个概念，后者是规范对象和接口以实现语言无关的方式。DOM是被设计为管理HTML和XML文档的一套接口和对象。它的实现可用任何语言无关的系统（COM，CORBA）或用绑定在该文档上的特定语言如Java或ECMAScript。 DOM最初的产生是作为允许JavaScript scripts 和Java programs在Web browsers间进行移植的规范。 ? CSS及CSS-P 1996年底的时候悄悄诞生了一种叫做样式表（stylesheets）的技术。将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。 --只通过修改一个文件就改变页数不定的网页的外观和格式。 --在所有浏览器和平台之间的兼容性。 --更少的编码、更少的页数和更快的下载速度。 CSS 所能改变的性质 ??????? 字体 ??????? 文字间的空间 ??????? 列表颜色 ??????? 背景 ??????? Margin ??????? 位置 (CSS-P) Question CSS属于DOM的一部分，它的属性也可以通过动态HTML编写语言得到体现? Advantage of CSS 你可以将格式和结构分离。 你可以以前所未有的能力控制页面布局。 你可以制作体积更小下载更快的网页。 你可以将许多网页同时更新，比以前快更容易。 浏览器将成为你更友好的界面 CSS,DOM and Script CSS是你进行网页改变的对象，DOM是其具有变动性的机制，而Client-side Scripting是实际促成变化的程序。这，就是动态HTML。 CSS-P Cascading Style Sheets (CSS) 是 DHTML 的基础。 CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning (CSS-P)是 CSS 的一个扩展。 它可用来控制任何东西在网页上或是说在窗口中的位置 。 层(layer)的定义 当我们使用 CSS-P 的时候， 我们主要把它用在 DIV (division) tag 上。 当你把文字, 图象, 或其他的放在 DIV 中， 它可称作为 “DIV block”,或 “DIV element” 或 “CSS-layer”, 或干脆叫 “layer