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

《《Web程序设计基础》第二讲.ppt》由会员分享，可在线阅读，更多相关《《Web程序设计基础》第二讲.ppt（21页珍藏版）》请在三一办公上搜索。

1、第二讲 Web前端技术及项目导入,Web程序设计基础课程组 2010-09,2,目录,Web前端技术结构Web标准的构成Web标准有什么好处从HTML转向XHTML发挥CSS2.0的作用体验JavaScriptAJAX当当网上书店项目导入,3,1、Web前端技术结构p5,4,1、Web前端技术结构,两大热门W3C Web StandardsAjax（Asynchronous JavaScript and XML）,5,1、Web标准的构成p2-9页,结构层HTML、XHTML、XML表现层CSS行为层JavaScript清晰的分层使前端技术更加灵活可靠，可以更多的利用软件工业已有的成功理论和模

2、式，从提高生产力到改善用户体验都比之前更具有想象的空间。,6,2、Web标准有什么好处 p7,高效率的开发与简单维护信息跨平台的可用性 降低服务器成本便于改版加快网页解析速度与未来兼容更良好的用户体验,7,3、从HTML转向XHTML,HTML（超文本标记语言）文本是由HTML命令标签组成的描述性文本，HTML标签可以说明文字、图形、动画、声音、表格、链接等。XHTML（可扩展超文本标记语言），在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。,8,3、从HTML转向XHTML,从HTML转向XHTML并不难。XHTML区别于HTML的规则如下：XHTML文件的开始要声明

3、DTD。你需要为你的标签添加一个命名空间。所有的标签和标签的属性都必须小写，属性值可以大写。属性值必须用引号括起来。单引号双引号均可。所有的标签都必须被关闭，空标签也不例外。如果你使用的是strict.dtd（推荐使用），也就是最严格的XHTML，那么许多定义外观的属性都将不被允许。例如你为图片添加链接的同时想去掉边框。不可以再使用，而是必须通过CSS来实现。,9,4、发挥CSS2.0的作用,浏览器支持完善。表现与结构分离。样式设计控制功能强大。继承性能优越（层叠处理）。在像素级上控制元素尺寸和布局。复用设计样式。,10,5、体验JavaScript,传统作用在Ajax支持下可以继续加强表单校

4、验动态元素用户数据保存和利用等等它是XHTML和CSS的黏合剂,11,6、AJAX,AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。在Ajax之前，用户的动作总是与服务器的思考时间同步，用户在单击某个按钮后，往往需要等待页面的整体刷新。而Ajax提供与服务器异步通信的能力，当用户的请求返回时，则使用js和css来更新局部的界面，而不是刷新整个页面。,12,6、AJAX,AJAX的原理Ajax的原理简单来说通过Xm

5、lHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用与HTML/XHTML的文档对象模型。也可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。例如Javascript就可以利用HTML DOM动态的修改网页。（js.html）,13,6、AJAX,AJAX技术支持使用CSS和XHTML来

6、表示。使用DOM（HTML）模型来交互和动态显示。使用XMLHttpRequest来和服务器进行异步通信。使用javascript来绑定和调用。在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。,14,6、AJAX,AJAX的优点在客户端把内容转变为应用在服务器端的内容转变为数据用户交互过程更加平滑、顺畅体验AJAXChinaren注册验证Google地图 QQ邮箱,15,7、当当网上书店项目导入,16,

7、7、当当网上书店项目导入,教学实施（认知规律，由简到难）布局结构XHTML架构结构部分CSS表现层从上到下逐步完善实现,17,7、当当网上书店项目导入,项目组任务新华书店 http:/卓越亚马逊http:/中国图书网http:/上海书城希望书店http:/金桥书城http:/三联书店http:/China-pub/,18,7、当当网上书店项目导入,考核第一阶段：项目成绩（50%）第二阶段：上级考试成绩（50%）,19,7、当当网上书店项目导入,教材和参考资料CSS网站布局实录 李超 科学出版社精通CSS+DIV网页样式与布局 曾顺/前沿视频无懈可击的Web设计:利用XHTML和CSS提高网站的灵活性与适应性 西德霍姆 http:/静态网页制作/,20,7、当当网上书店项目导入,作业实训实训课时按照实训讲义的要求进行实训第一阶段的作业为项目组各项目对应的任务第二阶段的作业另行布置,21,7、当当网上书店项目导入,答疑解惑QQ：89786537邮箱：4#2楼计算机办公室BBS：http:/,