第13章CSS与XML和AJAX的综合应用.pptx

第13章 CSS与XML和AJAX的综合使用 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。XML结合了SGML和HTML的优点并消除其缺点，从实现功能上来看，XML主要用于数据的存储，而HTML则主要用于数据的显示。本章主要向读者介绍CSS与XML和结合应用的一些方法。 13.1 XML基础 XML是一种元标记语言，所谓“元标记”就是开发者可以根据自己的需要定义自己的标记，比如开发者可以定义如下标记name、book，任何落足XML命名规则的名称都可以标记，这就为不同的应用程序打开的大门。 13.1.1 XML概念 13.1.2 XML的特点 13.1.3 XML的结构和基本语法 13.1.4 HTML与XML 13.1.5 什么是“形势良好的”XML文件 13.2 XML与CSS的应用 CSS能作用到HTML文件上，同样也能够作用到XML文件上，我们可以采用在HTML文件中定义样式的方法，在XML文件里通过CSS来规范网页的样式。 13.2.1 在XML中连接CSS样式 XML关心的是数据的结构，并能很好、方便地描述数据，但它不提供数据的显示功能。因此，浏览器不能直接显示XML文件中标记的文本内容，如果想让浏览器显示XML文件中标记的文本内容，那么必须以某种方式告诉浏览器如何显示。W3C为XML数据显示发布了两个建议规范：CSS和XSL（可扩展样式语言），本节主要介绍如何将CSS样式表文件链接到XML文档。 13.2.2 实现隔行变色的表格 通过CSS样式可以对HTML中的table等相关的表格元素进行控制，从而实现各种各样的表格效果。对于用XML表示的数据，同样可以采用类似的方法，使得数据表格看上去友好、实用。 提示：Firefox等一些浏览器并不支持XML文件中行内元素的width属性，也不支持CSS常用的属性覆盖方汉，即“member.altrow”的样式内格不能覆盖member的样式风格，因此在这些浏览器中显示的效果并不理想。 13.3 AJAX基础 Ajax并不是什么新技术，而是指一种方法。使用几种现有技术——包括CSS样式表、JavaScript、XHTML、XML和可扩展样式语言转换（XSLT），开发外观及操作类似桌面软件的Web应用软件。 13.3.1 Ajax简介 13.3.2 Ajax的关键元素 13.3.3 Ajax的优势 13.3.4 实现Ajax的步骤 13.3.5 使用CSS的必要性 13.4 AJAX与CSS的综合运用 在网站页面中Ajax可以与CSS一同使用，其中Ajax负责网站的动态效果及一些互动的操作；而城市是负责网站的样式设置。这两种技术在一起使用，会使网站在具有互动性的同时还会有完美的外观样式。本节我们将通过一个小案例展示在网站页面中Ajax与CSS的一同使用。 提示：Ajax的一个最大的特点就是无需刷新页面便可向服务器传输或读写数据，又称无刷新更新页面，这一特点主要得益于XMLHttp组件LHttpRequest XM对像。这样就可以使应用程序只同服务器进行数据层面的交换，而不用每次都刷新界面也不用每次将数据处理的工和提交给服务器来完成，这样即减轻了服务器的负担又加快了响应速度、缩短用户等待时间。 13.5 课堂练习 通过本章的学习使读者简单了解了CSS与XML和Ajax的综合使用，接下来通过简单的例子来实现对知识点运用的掌握。 13.5.1 设计分析 13.5.2 制作步骤 13.5.3 案例总结 源文件地址：光盘\源文件\第6章\6-5-1.html 视频地址：光盘\视频\第6章\6-5-1.swf 13.6 课堂讨论 13.6.1 问题1——导入CSS样式表与链接CSS样式表有什么区别 导入CSS样式和链接CSS样式的目的都是将一个独立的外部CSS样式表文件引入到一个网页中，二者最大的区别在于链接CSS样式使用html的标签引入外部CSS样式表文件，而使用导入CSS样式则是使用CSS样式规则引入外部CSS样式表文件。 13.6.2 问题2——在网页中为什么需要添加JavaScript脚本 因为RevealTrans滤镜同样是一个高级CSS滤镜，必须与JavaScript脚本相结合才能够产生图像切换的动态效果，单纯地添加RevealTrans滤镜不会产生效果。 13.7 课后练习 制作新闻页面 掌握本章的知识点后，再依据前面所学过的知识完成下面的课后练习。 源文件位置：光盘\ 素材\第13章\13-7.html 视频位置：光盘\ 视频\第13章\13-7.swf