web程序设计课件CH1web程序设计基础

1、Web 程序设计,主讲教师 卢慧,课程简介,学分：3 周学时：6 总学时：48(含上机18) 课程简介 本课程从Web编程的基础知识和Web程序开发环境着手，在介绍Web服务器、脚本语言和Web数据库应用的基础上，系统介绍了各种远程数据访问技术、开发方法和应用实例，包括目前流行且实用的ASP和XML等。 本课程尤其注重实践环节，对于每部分内容，均会配以相关程序实例讲解，以提高Web程序设计技术的综合应用能力。通过本课程的学习，可以了解Web程序设计的基本原理和开发方法，学会利用Html、VBScript，数据库、ADO组件等基本工具，自己构建和设计简单的动态网站 (如：论坛、电子商务类网站、信

2、息系统类网站等)。 本课程面向学过计算机文化基础（一）和计算机文化基础（二）或有同等计算机基础知识的学生。 考核方式：笔试70%+上机作业30%,课程主要内容,Web编程基础知识 脚本语言 ASP程序设计 Web数据库程序设计 综合实例应用,目标,学习HTML知识和网页设计技能 学习VBScript基础知识 熟练掌握ASP内置对象及应用 掌握Web数据库的应用开发技能,第 1 章,Web程序设计基础,掌握Web编程相关基础知识 配置ASP的运行环境 编写第一个动态网页欢迎网页。,本章任务：,本章要点：,介绍Web编程相关基本概念。 讲解ASP运行环境的配置。 编写并分析第一个动态网页欢迎网页。

3、,Internet与Web服务 Web的工作原理 网页与网站 HTML语言概述 Internet网络协议 IP地址、域名和URL Web编程技术概述,一、 Web程序设计的基本概念,Internet打破了传统的信息传播方式，是Internet实现了世界范围内的网络互联和资源共享，它消除了地理上的差别和时间上的限制，真正的将全世界紧密地联系在一起。 Web服务又叫WWW服务，全称World Wide Web，是目前Internet上最有吸引力的服务之一，它由遍布在Internet中的被称为Web服务器的计算机和安装了Web浏览器软件的计算机组成。 Web服务器中存放着大量以超文本形式表示的、可公

4、开发布的或在一定范围内可共享的信息，这些超文本信息互相链接，形成了一个全球范围内的可相互引用的信息网络。安装了Web浏览器（如IE6.0）的用户，可以查询和获取分布在世界各地的Web服务器上的信息资源。 通常把Web服务器称为服务器端，而把安装了Web浏览器的用户端称为客户端。,1、 Internet与Web服务,Web简介,Web的含义及特点： Web全称为World Wide Web(WWW)，它是一种体系结构，用它可以访问分布于Internet上的链接文档 Web是Internet提供的一种服务 Web是存储在全世界Internet计算机中、数量巨大的文档的集合 Web是一种超文本信息系

5、统 Web内容保存在Web服务器上，用户通过浏览器访问 Web是图形化的和易于导航的 Web与平台无关 Web是分布式的 、具有新闻性、动态的、交互的 Web站点组成元素：文字、图片、动画、超链接和特殊组件。,随着Internet的发展，我们可以利用浏览器实现很多功能：浏览网页新闻、上传下载资源，网上报名，信息查询等,Web程序,Web页面也叫做网页 简单说来，Web程序就是可以在网页上运行的程序,Web程序,Web程序的发展,C/S模式,B/S模式,客户/服务器模式 胖客户/瘦服务器 QQ、传奇、瑞星,浏览器/服务器模式 瘦客户/胖服务器 只需浏览器就可完成操作,2、Web的工作原理,Web

6、采用客户机/服务器（Client/Server)方式访问资源。Web服务器向浏览器提供服务的过程大致可以归纳为以下5个步骤： （1）用户打开计算机（客户机），启动浏览器程序（Netscape Navigator, Microsoft Internet Explorer等），并在浏览器中指定一个URL（Uniform Resource Locator，统一资源定位器），浏览器便向该URL所指向的Web服务器发出请求。 （2）Web服务器（也称为HTTP服务器）接到浏览器的请求后，把URL转换成页面所在服务器的文件路径名。,（3）如果URL指向的是普通的HTML（Hypertext Markup

7、Language，超文本标记语言）文档，Web服务器将直接把它传送给浏览器。HTML文档中可能包含用Java，JavaScript，ActiveX，VBScript等编写的小应用程序（applet），服务器也将它们随HTML文档一道传送到浏览器，在浏览器所在的机器上执行。 客户机/服务器模型,（4）如果HTML文档中嵌有ASP程序，那么Web服务器就运行ASP程序，并将结果传送至浏览器。Web服务器运行ASP程序时还可能调用数据库服务器和其他服务器。,Internet上各种超文本文件称为网页（Page）。 超文本（Hypertext）是一种文本格式，是一种对信息的描述方法，这种描述方法不受系统

8、平台的限制，可以在不同的平台上使用，用户也可以在各种操作系统上浏览这些超文本文件。 每个超文本文件中可以包含文字、图片、表格、表单等多种组件。在每一个页面上，可以有一些词、语句或图片等作为“链接点（Link）”，通过这些链接点可以快速地跳转到本网站的其它页面或其它网站上的页面。这种“链接点”方式称为超链接。正是因为这些超链接的存在才使得Internet上的无数页面能够关联到了一起。 网站是一个包含多个由超链接连在一起的网页的集合，它包含的网页可以是一个也可以是多个，甚至上千个。 Internet上的网站是通过地址进行定位的，就像网络中的一个节点，通常也称之为站点。,3、网页与网站,HTML（H

9、ypertext Markup Language）超文本标记语言是一种用于编写超文本文档的标记语言，是Web上描述页面内容和结构的标准语言。 Web上最基本的传输单位是Web页，而这些Web页都是用HTML语言编写的。 通过浏览器打开HTML文件时，经过浏览器的识别和解释，就会显示出精彩纷呈的网页来。 HTML具有平台无关性，无论是何种操作系统，只要有相应的浏览器程序，就可以运行HTML文档。,4、HTML语言概述,5、Internet网络协议,Internet是由各种不同类型、不同规模、独立管理和运行的主机或计算机网络组成的一个全球性特大网络。 Internet使用的网络协议是TCP/IP协

10、议，凡是连入Internet的计算机都必须安装和运行TCP/IP协议软件。,TCP/IP协议,TCP/IP是一个协议簇，包括Internet使用的通用协议TCP/IP，也包括其他应用协议，(如FTP,SMTP,Telnet,DNS等)。 TCP/IP协议把整个网络分成4个层次：应用层、传输层、网络层和网络接口层。,TCP/IP模型与OSI参考模型的对照,常用应用层协议,网络终端协议Telnet 用于实现互联网中的远程登陆功能。 文件传输协议FTP 用于实现互联网中交互文件传输功能。 简单电子邮件协议SMTP,POP3 用于实现互联网中电子邮件收发功能。 域名服务系统DNS 用于实现网络设备域名

11、到IP地址的映射服务。 超文本传输协议HTTP 用于在Web浏览器和服务器之间传输Web文档。,HTTP协议,超文本传输协议HTTP（HyperText Transfer Protocol）：用于Web服务器和浏览器间传输文档。 其定义的事务处理由以下4个步骤组成： （1）客户端与服务器建立连接； （2）客户端向服务器提出请求； （3）如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件； （4）客户端和服务器断开连接。,6、IP地址、域名和URL,IP地址 IP地址是识别Internet网络中的主机及网络设备的唯一标识 表示：网络地址+主机地址，长度为4个字节，由3个用“.”分隔

12、的十进制数组成，每个数不大于255。 如：22 分类： A类：用于规模很大主机数目很多的网络 B类：B类地址用于中型到大型的网络 C类：C类地址用于小型本地网络（LAN） D类： E类,IP的地址分类,IP的地址由国际网络信息中心分为五类：A类E类,目前大量使用的地址是A、B、C三类，D、E预留。 （每个8位组的最大值为255）,A类地址,B类地址,C类地址,32bit,IP的地址分类,主机部分全为0：表示网络地址 主机部分全为1：表示广播地址 各类地址范围： A类：- B类：- C类：192.0.

13、0.0- -回环测试（测试网卡）,域名,IP地址是连网计算机的地址标识 DNS ：域名服务系统，允许为主机分配字符名称，即域名。并实现域名与IP地址的转换 格式：计算机名.机构名.网络名.顶级域名 当用户输入主机的域名时， 负责管理的计算机则把它送到“域名服务器”上， 由域名服务器把域名翻译成相应的IP地址。 因此用户既可以用该主机的IP地址连接入网，也可以用该主机的域名表示，其效果是一样的。 顶级域名大体可分为两类：组织类域名和地理类域名，如下表,用户使用浏览器软件访问Web服务器上的网页，就要使用统一资源定位器URL（Uniform Resour

14、ce Locator）。 URL的表示形式如下： 协议类型主要有：HTTP、FTP、MAILTO、TELNET、EWS等。其中http是指在客户端和服务器端执行HTTP传输协议，将远程Web服务器上的文件传输给用户的浏览器； 主机是指提供此服务的计算机域名或IP； 端口号通常是默认的，如Web服务使用的是80，一般不需要给出； /文件路径/文件名指的是资源在Web服务器中的位置和文件名。 例如:,统一资源定位器URL,:/:/,Web访问工作原理,浏览器结构,与远地 服务器通信,输出至显示器,从鼠标和键盘输入,网 络 接 口,可选客户程序,HTML解释程序,可选解释程序,控 制 程 序,驱 动

15、 程 序,HTTP 客户程序,缓 存,7、Web编程技术概述,是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。,静态网页,程序在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页,动态网页,Web编程技术概述,静态Web技术：用HTML语言写的纯html代码，文件扩展名为.htm或.html。 功能:提供信息供用户浏览 动态Web技术：CGI，ASP，JSP，PHP，ASP.net 。如ASP则是在html代码中嵌入脚本语言

16、，保存在服务器端。 功能：提供可个性化搜索的功能，可以收发email，可以进行网上销售，可以从事电子商务等等。 所谓动态，指的是，按照访问者的不同需要，对访问者输入的信息作出不同的响应，提供响应的信息。,常用动态Web技术,CGI (Common Gateway Interface)，公用网关接口。是一种机制。可以使用如Visual Basic、Delphi或C/C+等编写适合的CGI程序。 缺点：编制方式困难且效率低下 ASP(Active Server Pages)是微软开发，一种取代CGI的动态服务器Web技术。没有自己专门的编程语言，使用包括VBScript，JAVAScript等在内

17、的许多已有的脚本语言编写ASP的应用程序。 ASP运行环境：windows NT/2000/2003/XP(IIS)/98(PWS) 缺点：运行速度慢于一般html程序，不能跨平台,常用动态Web技术,JSP(Java Server Pages) 由Sun MicroSystem公司于1999/6推出的新技术，是基于Java Servlet以及整个Java体系的Web开发技术。 JSP和微软的ASP在技术方面有许多相似之处。 JSP的跨平台技术可以不加修改地在85%以上的Web Server上运行，其中包括了NT的系统，而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理。 编译后

18、运行，能够提高执行效率。,常用动态Web技术,PHP，是一种易于学习和使用的服务器端脚本语言，七语法大部分是从C，JAVA，PERL语言中借来，并形成了自己的独有风格。 与ASP、JSP一样，PHP也可以结合HTML语言共同使用。 开放源码。 多平台支持。 免费软件，没有大公司支持，前景不如ASP、JSP。,常用动态Web技术,ASP.NET: ASP.NET与ASP的主要区别体现在以下3个方面： （1）效率 ：ASP.NET比ASP高很多。ASP.net采用模块化的编程语言(VB,C+,C#)而非脚本语言，且是编译执行。 编译执行 解释执行 （2）可重用性 ：ASP.NET可以实现代码和内容

19、的完全分离，使得维护更方便。 （3）代码量 ：使用ASP.NET比使用ASP的代码量要小得多,二、Web程序开发环境,服务器端开发环境 ASP运行环境的配置 使用Web服务器软件 客户端开发环境 客户端的编程语言，HTML标识语言 Web网页制作软件： Dreamweaver，FrontPage 图形图像设计及处理：Photoshop 6.0，CorelDRAW 9.0，Fireworks MX，Freehand 9.0，Illustrator 8.0，PhotoExpress 3.0 动画制作工具 ：Flash MX，Cool3D 3.0，3DS MAX R3，ImageReady 3.0，

20、Fireworks MX,任务1描述：在D盘根文件夹下建立一个名为ASPExample的文件夹，用来存放本课程后续章节所完成的任务网页，并能通过IE浏览器运行相应的任务网页。,任务1：配置ASP运行环境,任务分析：为了能在本机器上运行ASP动态网页，必须使本机器成为Web服务器，可通过在Windows 2000/XP中安装IIS 5.1来实现。安装了IIS 5.1后，本机上将会自动生成一个Web站点主目录，该主目录下的网页可以被客户端通过浏览器直接访问到。对于其它目录中的网页，则必须建立虚拟目录，才可以被客户端通过浏览器访问。为了优化性能还应该对IIS 5.1进行配置。具体步骤如下： 1）安装

21、IIS ； 2）建立虚拟目录； 3）配置IIS 。,任务1：配置ASP运行环境（续）,（1）单击“开始”菜单按钮，在出现的菜单中单击“控制面板”菜单项，将会出“控制面板”窗口，在该窗口中双击“添加或删除程序”图标，将会出现如图1-3所示的“添加或删除程序”对话框。,1）在Windows XP中安装IIS,图1-3 “添加或删除程序”对话框,（2）在“添加或删除程序”对话框中，单击左侧的“添加/删除Windows(A)”按钮，将会出现如图1-4所示的“Windows组件向导”对话框，在该对话框中有一项“Internet 信息服务（IIS）”，如果没有选中，请选中它；,在Windows XP中安装

22、IIS,图1-4 “Windows组件”对话框,（3）单击“下一步”按钮，将会出现一个对话框，该对话框为你的计算机安装你选中的Windows组件。接着将会出现如图1-5所示的“插入磁盘”对话框；,在Windows XP中安装IIS,图1-5 “插入磁盘”对话框,（4）在光驱中放入Windows系统安装盘，然后单击“确定”按钮，将会出现如图1-6所示的“所需文件”对话框，单击“确定”按钮，系统将自动复制文件到你的计算机。复制完成后，将会出现“Windows组件向导完成”对话框，单击“完成”按钮，将完成IIS的安装；,在Windows XP中安装IIS,图1-6 “所需文件”对话框,（5）启动IE

23、浏览器，在地址栏输入地址“http:/LocalHost/”并按回车键，将会出现如图1-7所示的网页，表示IIS组件已经安装成功。,在Windows XP中安装IIS,图1-7 测试网页,注意：IIS组件安装后，本计算机就可以作为Web服务器使用，此时在计算机的C盘上将会出现一个名为“Inetpub”的文件夹，该文件夹下有一个名为“wwwroot”的子文件夹，该文件夹站即为本机Web站点的主目录。,发布目录可以是主目录或虚拟目录。 每个Web站点都必须有一个主目录。“主目录”是站点访问者的起始点，也是Web发布树的顶端，其中包含主页或索引文件，通过它们中的超链接指向Web站点中其他网页。主目录

24、映射成站点的域名。 要从主目录以外的目录发布信息，可以创建虚拟目录。“虚拟目录”是物理上未包含在主目录中的目录，但客户端浏览器却认为是包含在主目录中的目录。 虚拟目录具有“别名”，客户端浏览器用此别名来访问该目录。,2）建立虚拟目录,为D盘ASPEample文件夹创建虚拟目录的实现步骤如下： （1）双击“我的电脑”，在D:盘根目录下创建ASPExample文件夹； （2）打开“控制面板”窗口，双击其中的“管理工具”图标，将会出现如图1-8所示的“管理工具”窗口；,建立虚拟目录,图1-8 “管理工具”窗口,（3）在“管理工具”窗口中，双击“Internet信息服务”图标，奖会出现“Interne

25、t信息服务”窗口，单击“本地计算机”前面的“+”号，然后单击“网站”前面的“+”号，再单击“默认网站”前面的“+”号，此时该窗口如图1-9所示。,建立虚拟目录,图1-9 “Internet 信息服务”窗口,（4）在“默认网站”上单击右键，在出现的快捷菜单中选择“新建”菜单下的“虚拟目录”菜单项，将会出现如图1-10所示的“虚拟目录创建向导开始”对话框；,建立虚拟目录,图1-10 “虚拟目录创建向导开始”对话框,（5）单击“下一步”按钮，将会出现“虚拟目录创建向导虚拟目录别名”对话框，在该对话框中“别名”下的文本框中输入“ASPE”，如图1-11所示；,建立虚拟目录,图1-11“虚拟目录创建向导

26、虚拟目录别名”对话框,（6）单击“下一步”按钮，将会出现“虚拟目录创建向导网站内容目录”对话框，在该对话框中“目录”下面的文本框中输入文件夹名“D:ASPExmaple”或单击“浏览”按钮，查找到“D:ASPExmaple”文件夹，如图1-12所示。,建立虚拟目录,图1-12 “虚拟目录创建向导网站内容目录”对话框,（7）单击“下一步”按钮，将会出现如图1-13所示的“虚拟目录创建向导访问权限”对话框，直接按“下一步”按钮，在出现的对话框中单击“完成”按钮便完成了“虚拟目录”的创建。此时在“Internet信息服务”窗口中就可以看到建立的虚拟目录“ASPEXAM”，如图1-14所示。,建立虚拟

27、目录,图1-13 “虚拟目录创建向导访问权限”对话框,（7）单击“下一步”按钮，将会出现如图1-13所示的“虚拟目录创建向导访问权限”对话框，直接按“下一步”按钮，在出现的对话框中单击“完成”按钮便完成了“虚拟目录”的创建。此时在“Internet信息服务”窗口中就可以看到建立的虚拟目录“ASPEXAM”，如图1-14所示。,建立虚拟目录,图1-13 访问权限”对话框,图1-14 建立的虚拟目录,配置IIS 5.1的步骤如下： （1）打开“控制面板”窗口，双击“管理工具”图标，在出现的“管理工具”窗口中，双击“Internet”信息服务图标，将会出现如图1-14所示的“Internet信息服务

28、”窗口； （2）右键单击“默认网站”，在弹出的快捷菜单中，选择“属性”，将会出现如图1-15“网站属性”对话框； （3）网站基本属性设置，包括描述、IP地址和TCP端口。在描述后的文本框中输入文本“我的站点”，其它不变； （4）主目录与站点访问权限设置。 网站的主目录默认为“c:inetpubwwwroot”，用户可以进行修改 。 （5）默认主页的设置。,3）配置IIS 5.1,图1-15 “网站属性”对话框,图1-16 “网站属性文档”对话框,任务2描述：设计一个网页，网页在IE浏览器中的运行情况如图1-17所示。网页设计好后，请分别把该网页复制到Web站点主目录、Web站点主目录的下一级目

29、录、虚拟目录及虚拟目录的下一级目录中，并通过浏览器浏览它。,三、第一个动态网页 欢迎页面,图1-17 网页浏览界面,任务分析：根据任务要求，首先应设计出网页文件。然后把该网页文件复制到网站的相应位置并加以运行，因此本题的关键是网页在Web站点不同位置处的地址如何表示。 任务实现： （1）启动“Microsoft Office 2003”软件包中的“Microsoft FrontPage 2003”，将会出现“Microsoft FrontPage 2003”应用程序窗口，单击窗口下面的“代码”标签，将会显示出新建的一个空白网页的代码框架，如图1-18所示。,第一个动态网页欢迎页面,图1-18

30、“Microsoft FrontPage 2003”应用程序窗口,（2）编写网页代码，编写好的网页代码如图1-19所示；,图1-19 编写好的“欢迎网页代码”,说明： 代码中的和、和、和是三对标记。一般来说，HTML文档均应有这三对标记，分别表示HTML文档的开始和结束、头部部分和正文部分。 第5行“欢迎”用来设置本网页的标题，当浏览器访问该网页时，“欢迎”将显示在浏览器的标题栏中。 第9行“欢迎您来到本网站!”用来显示欢迎文本，其中也是一个HTML标记，表示换行，其后的文本将在下一行显示。 第10行中和是ASP代码，分别用来显示当前日期和当前时间。用括起来的代码是ASP代码，由Web服务器处

31、理。该行中的Date和Time是VBScript的两个函数，分别用来返回系统当前日期和系统当前时间。,（3）执行“文件”菜单中的“保存”命令，把该网页保存到“C:Inetputwwwroot”文件夹中（Web站点主目录），文件名为Task1_2.asp。注意扩展名为.asp，不能弄错； （4）启动IE浏览器，在地址栏中输入该网页的地址“http:/LocalHost/Task1_2.asp”，然后按回车键，将会出现网页浏览界面； 注意：浏览本机Web站点下的网页，有以下三种方法。 使用IP地址。本地主机的IP地址为，运行上述的Task1_2.asp网页，还可以在浏览器的地址栏中输入“/Task1_2.asp”； 使用本地主机的别名LocalHost。LocalHost是IP地址的别名； 使用计算机名。若本地计算机名为jsjtah，要运行上述的Task1_2.asp网页