《网络应用程序设计》PPT课件

DHTML导论,段会川山东师范大学信息科学与工程学院2006年12月,2020/5/20,参考:,2,目录,面向对象的程序设计OOP属性(Properties)方法(Methods)String对象Date对象数组(array)对象布尔对象(Boolean)Math对象Math对象的属性Math对象的方法其他的JavaScript对象,2020/5/20,参考:,3,目录,HTMLDOM对象HTMLDOM所包括的各种对象检测浏览器JavaScriptCookies使用JavaScript进行表单验证JavaScript动画变量的声明和赋值将JavaScript应用于分块图片(ImageMaps),2020/5/20,参考:,4,摘要幻灯片(续),JavaScript的定时事件JavaScript中的对象概念JavaScript小结JavaScript之后JavaScript小测验,2020/5/20,参考:,5,DHTML的特点,DHTML的是DynamicHTML的缩写,即动态HTMLDHTML是使网页动起来的艺术!DHTML是创建动态和交互站点两种web技术结合在一起的产物对于大部分人来说,DHTML是HTML,样式单(StyleSheets)和JavaScript的结合体,2020/5/20,参考:,6,学习DHTML的先决条件,HTML以及网页设计的基础知识层叠样式单CSS脚本语言JavaScript,2020/5/20,参考:,7,DHTML不是一个W3C标准,DHTML不是W3C定义的标准.DHTML是一个市场术语(marketingterm)即它被Netscape和Microsoft用于描述其4.x代的浏览器所支持的新技术DHTML是多种创建动态Web站点技术相结合的产物对于大部分来说,DHTML意味着HTML4.0,样式单(StyleSheets)和JavaScript的结合DHTML是某些商家对于将HTML,样式单(stylesheets)和脚本语言结合在一起而创建动态网站技术的一种描述.W3C如是说.,2020/5/20,参考:,8,DHTML技术,使用DHTML,Web开发者可以控制HTML元素在浏览器中的显示方式和位置HTML4.0使用HTML4.0可以将所有的格式化信息从HTML文档分离出来,放入另一个样式单文件中.由于HTML4.0分离了展示和结构,我们就能在不纠缠进文档内容的情况下完全地控制展示布局,2020/5/20,参考:,9,DHTML技术,层叠样式单CSS(CascadingStyleSheets)使用CSS,我们就拥有了关于HTML文档的样式和布局模型CSS是Web设计的一次突破,因为它允许开发者统一地控制多个网页的样式和布局.Web开发者可以为某个HTML元素定义样式,并将它应用到任何期望的网页上.要想全局性地改变一个网页元素的展示效果,只要改变所对应的样式即可.,2020/5/20,参考:,10,DHTML技术,文档对象模型DOM(DocumentObjectModel)HTMLDOM是HTML的文档对象模型HTMLDOM为HTML定义了一个标准的对象集合,以及访问和操纵这些对象的标准操作W3C文档对象模型(DOM)是一项平台和语言无关的接口技术,它允许程序和脚本语言动态地访问和更新文档的内容,结构和样式.JavaScriptJavaScript允许你编写程序控制所有的HTML元素,2020/5/20,参考:,11,IE4.x和Netscape4.x所支持的DHTML,2020/5/20,参考:,12,DHTMLCSS-P(CSSPositioning,CSS定位),可与CSS-P一起使用的属性元素必须指定定位属性(相对或绝对)此后可使用如下的CSS-P属性:left元素的左侧位置top元素的上端位置visibility指明元素是否可见z-index元素的z方向排放次序clip元素的裁剪overflow溢出的内容如何处置,2020/5/20,参考:,13,CSS定位,相对定位(position:relative)示例二position:relative属性指明元素相对于当前位置的距离,如:divposition:relative;left:10;绝对定位(position:absolute)position:absolute属性指明元素相对于窗口左界的距离,如:divposition:absolute;left:10;,2020/5/20,参考:,14,CSS可见性,可见(visibility:visible)下面代码说明了元素是可见的h1visibility:visible;隐藏(visibility:hidden)下面代码说明了元素是不可见的h1visibility:hidden;,2020/5/20,参考:,15,CSS的Z序号,z-index属性用于指明一个元素在另一个元素之前还是之后.默认的z-index是0.数值越高越靠前,-1在最后下面代码说明,如果h1和h2元素重叠,则h2在h1的前面h1z-index:1;h2z-index:2;示例A示例B,2020/5/20,参考:,16,CSS滤镜(Filter),filter属性允许你为文本或图片增加更多的展示效果下面示例的展示效果如图所示h1width:100%;filter:glow;注意:使用filter属性时一定要同时指定元素的宽度文本滤镜图片滤镜水印鼠标形状,2020/5/20,参考:,17,DHTML文本对象模型DOM,使用DHTMLDOM可以访问和修改元素的内容和展示效果访问一个文本元素并改变其展示效果访问一个图片元素并改变其src属性访问和改变元素的innerHTML,2020/5/20,参考:,18,DHTML事件处理程序,事件处理程序允许当事件发生时对元素进行操作使用onmouseover和onmouseout可以响应鼠标移上和移出一个元素的事件使用onclick可以响应元素被单击时的事件使用onmousedown和onmouseup可响应在元素上按下和抬起鼠标的事件,2020/5/20,参考:,19,DHTML之后,学习了DHTML之后你应该学习HTMLDOM和ASPHTMLDOMHTMLDOM定义了访问和操作HTML文档的标准方法HTMLDOM是平台和语言无关的ASPHTML文件中的脚本在客