DHTML和CSS.pptxVIP

DHTML和CSS DHTML e CSS DHTML 动态HTML（Dynamic HTML，简称DHTML、DHML）是一种通过结合HTML（标准通用标记语言下的一个应用）、用户端脚本语言（Client Side Script，如JavaScript）、串接样式表（CSS）和文件物件模型（DOM）来创建动态网页内容的方法。 DHTML由几个组件和技术组成，这些组件和技术协同工作以提供动态特征。这些组件和技术有：文档对象模型、动态样式、动态定位、动态内容、数据绑定。 文档对象模型 文档对象模型是DHTML中所有工作的基石。利用文档对象模型，可以访问和操作文档中的任何事物，可以阅读和设置各个元素的属性，调用它们的方法，拦截并处理事件。 文档对象模型是对早期对象模型饿一种改进。 动态样式 动态样式允许你通过编写脚本动态地改变文档中的任何HTML元素的样式。可以改变颜色、字体、间隔、缩进、位置以及正文的可见性。 动态定位 动态定位允许你改变文档中元素的定位情况。动态定位提供在浏览器的页面内移动元素的能力，而不必用到服务器。这意味着你可以创建特定的动态效果并根据需要操纵浏览器中所有的元素。 一个元素的定位属性决定了文档流程的改变对元素的影响。与动态定位有关的概念有：绝对定位、相对定位、Z索引（位于文档中同一位置处的几个文档的显示情况）、可视性（元素是否显示在文档中）和显示（元素是否出现在文档中）。 文档是把元素连续排放在页中的，它们之间的间隔根据元素的类型及内容来决定。 每个元素都可包含其它元素。可以作为其它元素的父元素。 绝对定位可以指定元素相对于其父元素的x方向和y方向的位置。 相对定位则把元素仍然留在默认流程中，但允许指定元素在文档流程中相对于其前一个元素的x方向和y方向的位置。 使用绝对定位时，文档中几个元素的x、y 位置完全相同，z索引决定的是它们显示的层叠次序。 动态内容 从上面的内容，可以看出某些代码实例可以改变屏幕上元素的样式和位置。有时还需要改变屏幕上显示的实际内容。当处理内容时，我们必须能改变屏幕上出现的正文和它的格式。因此不仅改变正文本身，也要改变正文格式的HTML标记。有些脚本可以动态改变显示在网页上的内容。 数据绑定 数据绑定是动态HTML的一个特性，它允许你在客户机上处理信息，如果你需要对数据进行排序或筛选，就可以在本地进行这些工作，这种模式比基于服务器的模式优越，因为它充分利用了客户机上的资源而不占用网络和服务器资源。 数据源对象从一个数据源中获取及更新信息，数据源对象在客户机中留有一份数据的复制，能对数据进行排序和筛选。显示数据的各种HTML元素被称作数据使用者。数据源对象和数据使用者之间的联系就叫绑定。由浏览器管理数据源和使用者之间的绑定。 数据列表控制是数据源对象的一个简单应用，它从一个文本中读取数据，并能对这个信息进行排序和筛选，它缺乏更新数据的功能。 利用父项目和子项目创建一个大纲 父项目是与一个名字和一幅图片相联系的，可包含几个子项目。父项目包含有两个DIV元素和一个IMG元素。内部的DIV是一个容器，包含了父项目的所有子项目。这样的嵌套式结构使得子项目的插入更为容易，并能够为父项目控制子项目。 父项目的DIV有一个ID，这个ID用于唯一地标识父项目，并能够方便地实现它在文档中的定位。它还允许在任何时候向一个指定的父项目中添加子项目。 大纲的展开和收缩 除了添加和删除项目，动态大纲还支持项目的展开和收缩。 CSS Visual InterDev提供了一个强大的工具——CSS编辑器以图形化的界面修改一个样式表。 一个样式表由样式规则组成，告诉浏览器如何去呈现一个文档。有很多把样式规则加入到HTML文档中的方法，但最简单的启动方法是使用HTML的STYLE组件，这个元素放置于文档的头部分，包含网页的样式规则。 规则的组成，包括一个选择符，通常是一个HTML的元素。 有很多属性可以用于定义一个元素，每个属性带一个值，描述选择符应该如何呈现，样式规则是：“选择符{属性：值}”，单一选择符的复合样式声明应该用分号隔开。 CSS基本语法 任何HTML元素都可以是一个CSS的选择符，它是指向特别样式的元素。 单个选择符可以有不同的类，因而允许同一元素有不同样式。 ID选择符定义每个元素的成分。一个ID选择符的指定要指示符#在名字前面。 关联选择符是一个用空格隔开的几个单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。 一个属性指定到选择符，是为了使用它的样式。 声明的值是一个对属性的指定。 为了减少样式表的重复声明，组合的选择符声明是允许的。 所有在选择符嵌套的选择符都会继承外层选择符指定的属性值。 样式表里的注释使用与C语言编程中的约定方法去指定