1、Web程序设计,第一章 Web基础知识,随着Internet的发展，我们可以利用浏览器实现很多功能：浏览网页新闻、上传下载资源，网上报名，信息查询等,Web程序,Web页面也叫做网页 简单说来，Web程序就是可以在网页上运行的程序,1.什么是Web程序？,2.Web程序的发展,C/S模式,B/S模式,客户/服务器模式胖客户/瘦服务器QQ、传奇、瑞星,浏览器/服务器模式瘦客户/胖服务器只需浏览器就可完成操作,C/S模式与B/S模式,B/S模式与传统的C/S模式比较： 1.体现了集中式计算的优越性：具有良好的开放性，利用单一的访问点，用户可以在任何地点使用系统； 2.用户可以跨平台以相同的浏览器界
2、面访问系统；因为在客户端只需要安装浏览器，取消了客户端的维护工作，有效地降低了整个系统的运行和维护成本。,2.1 Web术语,B,C,E,F,IP地址,DNS域名解析,A,Web服务器,Web服务器又称WWW服务器、网站服务器等 将本地的信息以网页文件的形式组织起来，为用户在Internet上提供浏览及连接服务。 该服务器需正常安装操作系统，如UNIX、Linux或Window等网络操作系统，还必须安装专门的信息服务器程序，如IIS、Apache、Tomcat等。,浏览器（browser）,浏览器是Web客户端程序 它可以与Web服务器建立连接，用户通过输入链接地址确定网页信息资源的位置，从而
3、获取网页信息，并显示给用户。 目前使用最多的浏览器有：IE(Internet Explorer)、Navigator、Mozilla FireFox、Maxthon、Opera和Mac OS中的Safari 同一个网页在不同浏览器上可能会显示不同的效果（增加网页开发的复杂性）,B,HTTP协议,为了使网页资源传输能够高效率地完成，采用 HTTP 协议来传送一切必须的信息。 HTTP 有两类报文：请求报文从客户向服务器发送请求报文。响应报文从服务器到客户的回答。,C,D,IP地址,网络上唯一标示一台机器的地址。进行通信必须获取目标机器的IP地址。 采用点分十进制表示：192.168.200.2,
4、为方便记忆，可以为服务器注册域名，如 DNS用于将域名解析成对应IP地址，供通信程序使用,E,DNS域名解析,F,统一资源定位URL,统一资源定位符 URL 是对可以从因特网上得到的资源的位置和访问方法的一种简洁的表示。URL 中的字符对大写或小写没有要求。,:/:/,使用 HTTP 的 URL 的一般形式http:/:/,2.2 HTTP工作原理,因特网,HTTP 使用此 TCP 连接,浏览器程序,服务器程序,HTTP,客户,清华大学 院系设置,(1) 浏览器分析超链指向页面的 URL。 (2) 浏览器向 DNS 请求解析 的 IP 地址。 (3) 域名系统 DNS 解析出长江大学服务器的
5、 IP 地址。 (4) 浏览器与服务器建立 TCP 连接 (5) 浏览器发出取文件命令：GET /index.htm。 (6) 服务器对此请求给出响应，把文件 index.htm 发给浏览器。 (7) TCP 连接释放。 (8) 浏览器显示“长江大学”文件 index.htm 中的所有文本。,2.3 Web访问工作原理,2.3 Web访问工作原理,2.4 浏览器结构,与远地 服务器通信,输出至显示器,从鼠标和键盘输入,网 络 接 口,可选客户程序,HTML解释程序,可选解释程序,控 制 程 序,驱动程序,HTTP 客户程序,缓 存,3.Web技术简介,Web技术的分类,是指没有后台数据库、不含
6、程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。,静态网页,程序在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页,动态网页,3.Web技术简介,HTML,XHTML,CSS,Web相关技术 Web技术几乎汇聚了当前信息处理的所有技术及手段，并在不断的发展之中 我们只讨论主流技术的组成,Javascript,DOM,CGI,ASP,PHP,JSP,XML,AJAX,ASP.NET,4.网络标准的机构-W3C,W3C是英文 World Wide W
7、eb Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。 W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。,5.Web标准,WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentat
8、ion）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。后面的课程我们会慢慢介绍各种标准。,1,超文本标记语言HTML,HTML是构成网页文件的基础，是一种纯文本文件，扩展名为.htm或.html，版本4.01 由各种成对标签组成，通过这些标签可以标识文档的结
9、构以及超链接的信息，如等。 文档信息最终的显示结果取决于Web浏览器的显示风格及其对标记的解释能力。 编辑工具繁多：记事本，写字板、FrontPage、Dreamweaver等,6 客户端技术-静态网页语言,1,层叠样式表CSS,HTML 标签原本被设计为用于定义文档内容。通过使用 , , 这样的标签来表达“标题”、“段落”、“表格”之类的信息。而布局被期望由浏览器来完成。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范之中，因此创建文档内容清晰地独立于文档表现层的站点变得越来越困
10、难。,7 DHTML,2,层叠样式表CSS,为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出 STYLES（样式）。所有的主流浏览器均支持层叠样式表。,7 DHTML,3,层叠样式表CSS,样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一,7 DHTML,4,层叠样式表CSS,是HTML的辅助设计规范，用来弥补HTML在页面布局和排版上的不足。
11、 可以通过改变网页元素的CSS属性做出任何你想要的页面视觉效果。 样式文件扩展名为.css 常用属性有background、color、font、border、positon等。,7 DHTML,1. XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方
12、式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。,8 可扩展标记语言-XML,2. 基于XML 的 ASP.NET开发42Dan Wahlin/王宝良XML应用的UML建模技术32David Carlson/周靖 侯奕萌 沈金河等极限编程研究70Giancarrio Succi/张辉(译),8 XML示例,将学生基本信息采用XML方式描述,1. XML可以定义信息的内容，却没有定义信息该如何表达，这实际上就是XML的长处，它把内容和形式分离了，这样同一个内容可以有不同的表达。而XML内容的表达就是通过XSL(XML Style Language)和CS
13、S(Cascading Style Sheets 层叠样式表)来实现。,8 XML样式语言-XSL,不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。,9 HTML的缺陷,XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，
14、只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。,9 HTML的缺陷,使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。,9 HTML的缺陷,XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。 X
15、HTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。 在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。,9 HTML的缺陷,XHTML,可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML），表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
16、,1,10 可扩展超文本标记语言-XHTML,JavaScript,JS是最广泛使用的脚本语言，由Netscape开发的，不需要编译，可直接在Web浏览器中解释执行。 目前大多数浏览器都支持JS 除此以外可在Web浏览器中运行的脚本语言还有微软的VBScript及Jscript 语法规则与Sun公司的Java很像，但不包括类、继承、接口等。,1,11 DHTML,3.1 服务器端技术实现原理,Web浏览器,Web服务器,HTTP请求,HTTP响应,本地磁盘,获取请求页,1.检查网页是否是动态网页 2.如果是则运行其中的服务器端程序 3.生成静态网页发送到客户端,1,ASP(Active Ser
17、ver Page活动服务器网页),ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。 ASP的网页文件的格式是.asp，它含有若干内建对象，用于Web服务器端程序开发。如：Request，Response，Session等。 默认使用VBS作为开发脚本语言，也可使用JS，利用ASP内置对象及HTML等技术实现网站应用程序的开发。 只能在Windows下的IIS服务器上运行。,3.2 服务器端技术,PHP(Hypertext Preprocessor,超文本预处理器),利用服务器端脚本创建动态网站的技术，包括一个完整的编程语言、支持Internet的各种协议、提供与多
18、种数据库直接互联的能力。 PHP是一种跨平台技术，可在多种平台运行。 适用于开发中小型企业网站，网站运行效率佳，安全性高、可靠性及稳定性都很好。 PHP脚本可在Tomcat，Apache，Jboss等Web服务器上运行。 开发工具： Zend Studio 、 EditPlus,2,3.2 服务器端技术,3,JSP（Java Server Page）,Sun提出的应用开发技术，可建立先进、安全和跨平台的动态网站。网页文件扩展名.jsp 以Java语言作为脚本语言，使用JSP标签或Java Servlet小脚本生成页面上的动态内容。 JSP运行效率普遍认为比PHP及ASP高。 JSP可运行在To
19、mcat，Apache，Jboss等多种Web服务器上。 开发工具：MyEclipse，Jdeveloper， JBuilder， NetBeans等,3.2服务器端技术,ASP.NET,ASP.NET并非ASP3.0演化而来，而是全新一代的动态网页实现系统。 提供了基于组件、事件驱动的可编程Web窗口，大大简化了编程，缩短Web应用程序的开发周期。 运行在Windows的IIS+.net Framework之上。 开发工具：VS2008(visual studio),4,3.2服务器端技术,课程大纲 第一章Internet基础知识 第二章 域名系统简介、服务器相关 第三章 HTML语言基础 第四章 DIV+CSS基础 第五章 DIV+CSS实例制作 第六章 PHP语法基础 第七章 MYSQL基础 第八章 留言板实例 第九章 DIV+CSS与留言板实例结合 第十章 网站管理系统实例与维护,新建文本文件，更改扩展名为.html或.htm用任意文本编辑器打开该文件进行编辑，本文采用EditPlus打开。,HTML演示,首先输入HTML主体标签如下：,HTML演示,HTML开始结束标签,首部标签,标题,网页主体,首先输入HTML主体标签如下：通过这个例子我们了解：利用HTML标签编写的文件会给浏览器识别，并以网页的形式表现出来。,HTML演示,
