一个不错的DHTML实例教程.docxVIP

这是我在经典论坛精华集上看到的，如果大家觉得不错，我就继续贴。(注:原作者未知来源:动态WEB脚本技术论坛) 　如果您是HTML的初学者，请您先自学HTML。因为DHTML是现有的HTML技术的一个综合，所以HTML语言对学习动态HTML是非常重要的。自从HTML 4.0出现以后，引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计，并且使网页具有交互性。其实动态Html（DHtml）并不是一种专门的技术，而是Html技术的一个综合，说白了就是一种技巧，但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了，废话少说，下面开始以实例来说明动态HTML在网页设计中的应用。例1 使用style和/style标志对修饰文本html head titleDHtml举例1/title style h2 {font-family:宋体;color:blue;font-size:12pt;text-align:center}/style /head body h2被修饰文本/h2/body /html 本例中，我们使用了style和/style标志对来修饰文本，请留意蓝色字，style和/style标志对是加在head和/head标志对之间的，而加上!--和-- 是为了让不支持style和/style标志对的浏览器跳过样式表，否则可能会出错。本例先对 h2 /h2标志对中的文本样式在 style和 /style标志对中进行定义，于是在后边h2/h2中就依样式表定义的内容对文本进行修饰。font-family定义字体，font-size定义字体大小，text-align定义文本对齐方式，color定义前景颜色。除此之外，我们还可以采用另一种方法来实现。请看下边的例子。例2 直接用style属性修饰文本html head titleDHtml举例2/title /head body h2 style=font-family:宋体;color:blue;font-size:12pt;text-align:center被修饰文本/h2 /body /html 请务必注意font-family后是用单引号来定义字体的（font-family:宋体）。好了，现在您已经初步掌握了样式单的用法了，明天我们开始让您的主页动起来。Dhtml实例教程（二）例3 使用鼠标触发事件和动态样式表改变文本html head titleDHtml举例3/title /head body h2 onmouseover=this.style.textDecoration=underline onmouseout=this.style.textDecoration=underline style=font-size:12;text-align:center请将鼠标移到上面！/h3 br h3 align=center onmouseover=this.style.color=red onmouseout=this.style.color=green我是变色龙！/h3 /body /html 在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发，于是执行其后的style定义，此时文字下加了一条直线（this.style.textDecoration=underline的作用），this用来指代当前的对象，即标志对。当您把光标移开文字时onmouseout事件被触发，此时文字下的直线消失了（this.style.textDecoration=underline的作用），这样网页就有了动态的效果。同理，我们可以通过触发鼠标事件来改变文本的颜色，如上例中的第二行黑体字所示。再次提醒读者，在使用样式单的时候一定要注意格式。比如，在 style /style标志对中进行样式单定义时应使用text-decoration:underline，而不是用textDecoration=underline来修饰文本，后者是用于事件触发中的（如onmouseover或onmouseout事件）。许多CSS属性的名字中都有连字符(像text-decoration)，但是连字符在许多脚本语言（如javascript）中是不合法的标识符，因此，在HTML或样式表中指明CSS属性的时候用连字符命名方式，但在作为一个脚本属性时，就必须去掉连字符，并将它后面的第一个字母大写。例如：text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。您可能想用鼠标点击文本来改变其的颜色，要做到这一点很简单，只要在onclick事件中定义样式即可