采用XHTMLDIVCSSJS构建Web应用系统.ppt

在本单元重点了解如下知识点 Web2.0及主要代表技术 HTML、XHTML和DHTML 层叠样式表单CSS技术 JavaScript脚本语言,采用XHTML+DIV+CSS+JS 构建Web应用系统,Web 2.0是一个相对的概念 （1）由于早期的Web系统中只提供有静态的HTML页面信息而不能进行人机交互，这被称作Web 1.0时代。 （2）随着Internet网络技术的不断发展，出现了许多动态的Web开发技术（如CGI、ASP、PHP、JSP等），并将这些技术广泛地应用在Web应用系统中，从而产生出所谓的“动态网站”和能够实现人机交互。 这被称作是Web 1.5时代，也就是互联网最为热门的“.com时代”。但这个时代中的Internet网用户通过浏览器只能被动地获取信息而不能直接成为信息的制造者。,Web2.0（它让网民更多地参与信息产品的创造、传播和分享）中的主要代表技术 随着各种Web2.0中的主要代表技术如Blog、Wiki、SNS、Tag、RSS（聚合内容）、TrackBack（Blog系统中的引用通告）、Ajax等的提出和被广泛地应用在Web应用系统中，Web 2.0的概念也开始被明确并被深入应用和推广。,我们首先了解Web客户端的HTML、XHTML和DHTML 1.HTML简介 （1）HTML（Hyper Text MarkUp Language，超文本标签语言) （2）HTML起源于SGML（标准通用标记语言），是为了在各种网络环境之间，不同文本格式之间进行交流的一种标签化的语言。 （3）HTML文档的基本结构 我的第一个网页 我的第一个HTML页面，Hello,World! 2、 XHTML代表更规范和更严谨的HTML （1）W3C首先制定了XML的基本规范，并不断地推广XML技术及企业应用,（2）XML不仅具有可扩展性，而且语法严谨 XML的可扩展性（也就是允许XML使用者自己定义标签和属性的名称）为浏览器程序的设计和开发实现也带来了许多不便没有标准的标签名和属性名，浏览器程序也就无法识别和理解不同用户自定义的各种XML标签的“表现”要求。 XML语法的严谨性是改进HTML的“随意性”的“良方” （3）W3C又制定了XHTML技术标准和相应的技术规范 XHTML不仅是将“随意”的HTML的应用向“规范”和“严谨”的XML技术过度的一个桥梁 同时也是一个引导Web页面设计人员逐步走向规范、走向XML的过渡技术实现的方案。,3、为什么要提出XHTML技术标准 （1）提高HTML页面信息的可重用性 由于XHTML也是XML，在XML文档中可以直接包含XHTML片断，同样在XHTML文档中也可以包含XML的片断。 （2）保证相同的HTML页面内容在不同的浏览器中显示相同的效果 因为浏览器除了PC机以外，还有PDA、手机、电视等设备中的浏览器。,4、XHTML页面文档的基本结构和基本语法要求 （1）严格区分标签符号的字母大小写 依据XHTML 规范定义，各个标签名及属性名都必须要采用小写字母，并且标签名和属性名对字母的大小写敏感和严格区分。,（2）标签之间严格嵌套匹配 所有的 XHTML 标签元素必须要被嵌套于成对的根标签中、并且子标签必须要成对和被嵌套在其父标签中。 （3）命名定义更可读和规范 用id 属性代替name属性以定义该标签的对象名、属性值包含在双括号内（“”）。 5、XHTML页面文档示例,6、DHTML不是由W3C提出的技术标准 （1）DHTML不是一种标准或规范，而是一种组合技术 它其实是将XHTML、HTML层、CSS、DOM（文档对象模型）和CSSL（Clent-Side Scripting Language，客户端脚本语言，如JavaScript和VBScript、JScript等）等集成在一起的技术。 （2）它是由浏览器厂商（主要是网景公司和微软公司）根据自己的需要在各自的浏览器中支持的整合技术 不同的浏览器对DHTML及相关的的技术支持是不同的，这也为应用DHTML技术带来一定的不便和兼容性。,7、为什么浏览器厂商要提出DHTML （1）应用DHTML技术能够增强Web应用系统客户端的人机交互性可以实现在浏览器客户端直接动态地更新Web网页中的信息内容、排版样式、播放动画等而无须经过服务器端程序的处理。 （2）使得静态的HTML变成了可动态操控的DHTML 动态改变页面中的内容（Dynamic Content） 动态改变样式单（Dynamic Styles Sheets） 动态定位（Dynamic Positioning）,（3）不依赖于某个特定的服务器端技术实现的平台而实现与客户的动态交互 （4）应用DHTML实现的一个动画示例,8、AJAX技术其实是DHTML技术思想的进一步完善，扩展到可以与服务器端程序进行交互,不同浏览器厂商的DHTML技术现在已经逐步被“标准化”到W3C的HTML/XML DOM规范中，同时也推动了目前比较主流的AJAX技术的应用普及。,我们再了解什么是CSS及相关的技术 1、分离Web表示层的数据处理和展现逻辑是目前企业级的Web应用系统开发中表现层技术实现中的基本目标 2、如何达到此目标 （1）采用“CSS+Div”或者应用“XML+XSLT”技术都可以分离Web表示层中的数据和表现，并且还能够减少页面中标签的数量、减少数据的传送量； （2）采用各种Web模板化技术 如Velocity模板(/velocity/) 3、应用CSS+Div相关技术的主要优点 也更便于Web页面的维护和功能扩展； 而且还可以为同一个Web页面或者一组页面统一定义样式文件，并且可以动态切换并应用不同的样式文件而产生出Web页面“换皮肤”的效果。,4、CSS（Cascading Style Sheet）的中文翻译为“层叠样式表单” 它是W3C制定的用于控制Web页面样式，并允许Web开发者将样式定义（设定页面中的“某个标签元素是如何显示的”）与页面内容相互分离的一种技术规范。,5、如何应用CSS+Div进行Web开发 利用Dreamweaver页面设计工具创建样式文件和样式定义,6、体验采用“XHTML+Div+CSS+JS”构建Web网站效果,7、采用CSS+Div构建网站页面布局 （1）常规的实现方法是利用表格定位和布局页面内容 主要缺点体现在 把“表现”（由标签决定）和,“内容”（表格内的各种数据）相互混合在一起，从而降低对“内容”的可维护性和使“内容”无法再被利用。 （2）采用“XHTML+Div+CSS+JS”构建Web网站 页面内容采用标签定义，并使用CSS样式单定义标签的显示风格效果，最后应用JavaScript脚本进行行为控制 （3）采用“XHTML+Div+CSS+JS”构建Web网站示例,最后我们再探询JavaScript是怎么回事 1、JavaScript是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言 （1）使用它的目的是希望直接在Web客户端浏览器中产生复杂的人机交互行为 它弥补了HTML语言固有的缺陷（HTML只能“描述”）。 它是Sun 公司的面向对象Java语言与W3C的HTML标记语言相互折衷的结果。 同时它也是AJAX技术实现的主要编程语言。 （2）JavaScript脚本语言的主要技术特性 它是一种脚本语言并且采用小程序段的方式编程 基于对象（但不是面向对象）的脚本语言 它是一种简单的脚本语言保留了Java的基本语法规则（如数据类型、运算符、语句和控制流等），但又对Java中的许多语言特性及语法规则进行了简化设计,2、在页面中引用JavaScript脚本 （1）方式一：内联方式 alert(“这是第一个JavaScript例子!”); /可以包含事件响应代码等 ,（2）方式二：外部链接方式（将JavaScript脚本代码放到一个独立的文件中）,（3）方式三：内嵌方式,3、JavaScript中的事件模型,（1）事件：