《Web程序设计基础》第二讲.ppt

第二讲 Web前端技术 及项目导入 《Web程序设计基础》课程组 2010-09 目录 Web前端技术结构 Web标准的构成 Web标准有什么好处 从HTML转向XHTML 发挥CSS2.0的作用 体验JavaScript AJAX 当当网上书店项目导入 1、Web前端技术结构p5 1、Web前端技术结构 两大热门 W3C Web Standards Ajax（Asynchronous JavaScript and XML） 1、Web标准的构成p2-9页 结构层 HTML、XHTML、XML 表现层 CSS 行为层 JavaScript 清晰的分层使前端技术更加灵活可靠，可以更多的利用软件工业已有的成功理论和模式，从提高生产力到改善用户体验都比之前更具有想象的空间。 2、Web标准有什么好处 p7 高效率的开发与简单维护 信息跨平台的可用性 / 降低服务器成本 便于改版 加快网页解析速度 与未来兼容 更良好的用户体验 3、从HTML转向XHTML HTML（超文本标记语言）文本是由HTML命令标签组成的描述性文本，HTML标签可以说明文字、图形、动画、声音、表格、链接等。 XHTML（可扩展超文本标记语言），在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。 3、从HTML转向XHTML 从HTML转向XHTML并不难。XHTML区别于HTML的规则如下： XHTML文件的开始要声明DTD。 你需要为你的html标签添加一个命名空间。 所有的标签和标签的属性都必须小写，属性值可以大写。 属性值必须用引号括起来。单引号双引号均可。 所有的标签都必须被关闭，空标签也不例外。 如果你使用的是strict.dtd（推荐使用），也就是最严格的XHTML，那么许多定义外观的属性都将不被允许。 例如你为图片添加链接的同时想去掉边框。不可以再使用 img src=“...” border=“0”，而是必须通过CSS来实现。 4、发挥CSS2.0的作用 浏览器支持完善。 表现与结构分离。 样式设计控制功能强大。 继承性能优越（层叠处理）。 在像素级上控制元素尺寸和布局。 复用设计样式。 5、体验JavaScript 传统作用在Ajax支持下可以继续加强 表单校验 动态元素 用户数据保存和利用等等 它是XHTML和CSS的黏合剂 6、AJAX AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。 在Ajax之前，用户的动作总是与服务器的思考时间同步，用户在单击某个按钮后，往往需要等待页面的整体刷新。而Ajax提供与服务器异步通信的能力，当用户的请求返回时，则使用js和css来更新局部的界面，而不是刷新整个页面。 6、AJAX AJAX的原理 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。 HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用与HTML/XHTML的文档对象模型。也可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。（js.html） 6、AJAX AJAX技术支持 使用CSS和XHTML来表示。? 使用DOM（HTML）模型来交互和动态显示。? 使用XMLHttpRequest来和服务器进行异步通信。 使用javascript来绑定和调用。 在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。 6、AJAX AJAX的优点 在客户端把内容转变为应用 在服务器端的内容转变为数据 用户交互过程更加平滑、顺畅 体验AJAX Chinaren注册验证/ Google地图 / QQ邮箱 7、当当网上书店项目导入 7、当当网上书店项目导入 教学实施（认知规律，由简到难） 布局结构 XHTML架构结构部分 CSS表现层从上到下逐步完善实现 7、当当网上书店项目导入 项目组任务 新华书店 卓越亚马逊 中国图书网 上海书城