《web程序设计》PPT课件.ppt

Web程序设计 主讲教师卢慧 课程简介 学分 3周学时 6总学时 48 含上机18 课程简介本课程从Web编程的基础知识和Web程序开发环境着手 在介绍Web服务器 脚本语言和Web数据库应用的基础上 系统介绍了各种远程数据访问技术 开发方法和应用实例 包括目前流行且实用的ASP和XML等 本课程尤其注重实践环节 对于每部分内容 均会配以相关程序实例讲解 以提高Web程序设计技术的综合应用能力 通过本课程的学习 可以了解Web程序设计的基本原理和开发方法 学会利用Html VBScript 数据库 ADO组件等基本工具 自己构建和设计简单的动态网站 如 论坛 电子商务类网站 信息系统类网站等 本课程面向学过 计算机文化基础 一 和 计算机文化基础 二 或有同等计算机基础知识的学生 考核方式 笔试70 上机作业30 掌握Web编程相关基础知识配置ASP的运行环境编写第一个动态网页 欢迎网页 本章任务 本章要点 介绍Web编程相关基本概念 讲解ASP运行环境的配置 编写并分析第一个动态网页 欢迎网页 Internet与Web服务Web的工作原理网页与网站HTML语言概述Internet网络协议IP地址 域名和URLWeb编程技术概述 一 Web程序设计的基本概念 Internet打破了传统的信息传播方式 是Internet实现了世界范围内的网络互联和资源共享 它消除了地理上的差别和时间上的限制 真正的将全世界紧密地联系在一起 Web服务又叫WWW服务 全称WorldWideWeb 是目前Internet上最有吸引力的服务之一 它由遍布在Internet中的被称为Web服务器的计算机和安装了Web浏览器软件的计算机组成 Web服务器中存放着大量以超文本形式表示的 可公开发布的或在一定范围内可共享的信息 这些超文本信息互相链接 形成了一个全球范围内的可相互引用的信息网络 安装了Web浏览器 如IE6 0 的用户 可以查询和获取分布在世界各地的Web服务器上的信息资源 通常把Web服务器称为服务器端 而把安装了Web浏览器的用户端称为客户端 1 Internet与Web服务 Web简介 Web的含义及特点 Web全称为WorldWideWeb WWW 它是一种体系结构 用它可以访问分布于Internet上的链接文档Web是Internet提供的一种服务Web是存储在全世界Internet计算机中 数量巨大的文档的集合Web是一种超文本信息系统Web内容保存在Web服务器上 用户通过浏览器访问Web是图形化的和易于导航的Web与平台无关Web是分布式的 具有新闻性 动态的 交互的Web站点组成元素 文字 图片 动画 超链接和特殊组件 随着Internet的发展 我们可以利用浏览器实现很多功能 浏览网页新闻 上传下载资源 网上报名 信息查询等 Web程序 Web页面也叫做网页简单说来 Web程序就是可以在网页上运行的程序 Web程序 Web程序的发展 C S模式 B S模式 客户 服务器模式胖客户 瘦服务器QQ 传奇 瑞星 浏览器 服务器模式瘦客户 胖服务器只需浏览器就可完成操作 2 Web的工作原理 Web采用客户机 服务器 Client Server 方式访问资源 Web服务器向浏览器提供服务的过程大致可以归纳为以下5个步骤 1 用户打开计算机 客户机 启动浏览器程序 NetscapeNavigator MicrosoftInternetExplorer等 并在浏览器中指定一个URL UniformResourceLocator 统一资源定位器 浏览器便向该URL所指向的Web服务器发出请求 2 Web服务器 也称为HTTP服务器 接到浏览器的请求后 把URL转换成页面所在服务器的文件路径名 3 如果URL指向的是普通的HTML HypertextMarkupLanguage 超文本标记语言 文档 Web服务器将直接把它传送给浏览器 HTML文档中可能包含用Java JavaScript ActiveX VBScript等编写的小应用程序 applet 服务器也将它们随HTML文档一道传送到浏览器 在浏览器所在的机器上执行 客户机 服务器模型 4 如果HTML文档中嵌有ASP程序 那么Web服务器就运行ASP程序 并将结果传送至浏览器 Web服务器运行ASP程序时还可能调用数据库服务器和其他服务器 Internet上各种超文本文件称为网页 Page 超文本 Hypertext 是一种文本格式 是一种对信息的描述方法 这种描述方法不受系统平台的限制 可以在不同的平台上使用 用户也可以在各种操作系统上浏览这些超文本文件 每个超文本文件中可以包含文字 图片 表格 表单等多种组件 在每一个页面上 可以有一些词 语句或图片等作为 链接点 Link 通过这些链接点可以快速地跳转到本网站的其它页面或其它网站上的页面 这种 链接点 方式称为超链接 正是因为这些超链接的存在才使得Internet上的无数页面能够关联到了一起 网站是一个包含多个由超链接连在一起的网页的集合 它包含的网页可以是一个也可以是多个 甚至上千个 Internet上的网站是通过地址进行定位的 就像网络中的一个节点 通常也称之为站点 3 网页与网站 HTML HypertextMarkupLanguage 超文本标记语言是一种用于编写超文本文档的标记语言 是Web上描述页面内容和结构的标准语言 Web上最基本的传输单位是Web页 而这些Web页都是用HTML语言编写的 通过浏览器打开HTML文件时 经过浏览器的识别和解释 就会显示出精彩纷呈的网页来 HTML具有平台无关性 无论是何种操作系统 只要有相应的浏览器程序 就可以运行HTML文档 4 HTML语言概述 5 Internet网络协议 Internet是由各种不同类型 不同规模 独立管理和运行的主机或计算机网络组成的一个全球性特大网络 Internet使用的网络协议是TCP IP协议 凡是连入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 用于实现网络设备域名到IP地址的映射服务 超文本传输协议HTTP 用于在Web浏览器和服务器之间传输Web文档 HTTP协议 超文本传输协议HTTP HyperTextTransferProtocol 用于Web服务器和浏览器间传输文档 其定义的事务处理由以下4个步骤组成 1 客户端与服务器建立连接 2 客户端向服务器提出请求 3 如果请求被接受 则服务器送回响应 在响应中包括状态码和所需的文件 4 客户端和服务器断开连接 6 IP地址 域名和URL IP地址IP地址是识别Internet网络中的主机及网络设备的唯一标识表示 网络地址 主机地址 长度为4个字节 由3个用 分隔的十进制数组成 每个数不大于255 如 210 29 135 122分类 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类 1 0 0 1 127 0 0 0B类 128 0 0 0 191 255 0 0C类 192 0 0 0 223 255 255 0127 0 0 1 回环测试 测试网卡 域名 IP地址是连网计算机的地址标识DNS 域名服务系统 允许为主机分配字符名称 即域名 并实现域名与IP地址的转换格式 计算机名 机构名 网络名 顶级域名当用户输入主机的域名时 负责管理的计算机则把它送到 域名服务器 上 由域名服务器把域名翻译成相应的IP地址 因此用户既可以用该主机的IP地址连接入网 也可以用该主机的域名表示 其效果是一样的 顶级域名大体可分为两类 组织类域名和地理类域名 如下表 用户使用浏览器软件访问Web服务器上的网页 就要使用统一资源定位器URL UniformResourceLocator URL的表示形式如下 协议类型主要有 HTTP FTP MAILTO TELNET EWS等 其中http是指在客户端和服务器端执行HTTP传输协议 将远程Web服务器上的文件传输给用户的浏览器 主机是指提供此服务的计算机域名或IP 端口号通常是默认的 如Web服务使用的是80 一般不需要给出 文件路径 文件名指的是资源在Web服务器中的位置和文件名 例如 统一资源定位器URL Web访问工作原理 浏览器结构 与远地服务器通信 输出至显示器 从鼠标和键盘输入 网络接口 可选客户程序 HTML解释程序 可选解释程序 控制程序 驱动程序 HTTP客户程序 缓存 7 Web编程技术概述 是指没有后台数据库 不含程序和不可交互的网页 你编的是什么它显示的就是什么 不会有任何改变 静态网页相对更新起来比较麻烦 适用于一般更新较少的展示型网站 静态网页 程序在服务器端运行 是重要标志 在服务器端运行的程序 网页 组件 属于动态网页 它们会随不同客户 不同时间 返回不同的网页 动态网页 Web编程技术概述 静态Web技术 用HTML语言写的纯html代码 文件扩展名为 htm或 html 功能 提供信息供用户浏览动态Web技术 CGI ASP JSP PHP ASP net 如ASP则是在html代码中嵌入脚本语言 保存在服务器端 功能 提供可个性化搜索的功能 可以收发email 可以进行网上销售 可以从事电子商务等等 所谓动态 指的是 按照访问者的不同需要 对访问者输入的信息作出不同的响应 提供响应的信息 常用动态Web技术 CGI CommonGatewayInterface 公用网关接口 是一种机制 可以使用如VisualBasic Delphi或C C 等编写适合的CGI程序 缺点 编制方式困难且效率低下ASP ActiveServerPages 是微软开发 一种取代CGI的动态服务器Web技术 没有自己专门的编程语言 使用包括VBScript JAVAScript等在内的许多已有的脚本语言编写ASP的应用程序 ASP运行环境 windowsNT 2000 2003 XP IIS 98 PWS 缺点 运行速度慢于一般html程序 不能跨平台 常用动态Web技术 JSP JavaServerPages 由SunMicroSystem公司于1999 6推出的新技术 是基于JavaServlet以及整个Java体系的Web开发技术 JSP和微软的ASP在技术方面有许多相似之处 JSP的跨平台技术可以不加修改地在85 以上的WebServer上运行 其中包括了NT的系统 而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理 编译后运行 能够提高执行效率 常用动态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可以实现代码和内容的完全分离 使得维护更方便 3 代码量 使用ASP NET比使用ASP的代码量要小得多 二 Web程序开发环境 服务器端开发环境ASP运行环境的配置使用Web服务器软件客户端开发环境客户端的编程语言 HTML标识语言Web网页制作软件 Dreamweaver FrontPage图形图像设计及处理 Photoshop6 0 CorelDRAW9 0 FireworksMX Freehand9 0 Illustrator8 0 PhotoExpress3 0动画制作工具 FlashMX Cool3D3 0 3DSMAXR3 ImageReady3 0 FireworksMX 任务1描述 在D盘根文件夹下建立一个名为ASPExample的文件夹 用来存放本课程后续章节所完成的任务网页 并能通过IE浏览器运行相应的任务网页 任务1 配置ASP运行环境 任务分析 为了能在本机器上运行ASP动态网页 必须使本机器成为Web服务器 可通过在Windows2000 XP中安装IIS5 1来实现 安装了IIS5 1后 本机上将会自动生成一个Web站点主目录 该主目录下的网页可以被客户端通过浏览器直接访问到 对于其它目录中的网页 则必须建立虚拟目录 才可以被客户端通过浏览器访问 为了优化性能还应该对IIS5 1进行配置 具体步骤如下 1 安装IIS 2 建立虚拟目录 3 配置IIS 任务1 配置ASP运行环境 续 1 单击 开始 菜单按钮 在出现的菜单中单击 控制面板 菜单项 将会出 控制面板 窗口 在该窗口中双击 添加或删除程序 图标 将会出现如图1 3所示的 添加或删除程序 对话框 1 在WindowsXP中安装IIS 图1 3 添加或删除程序 对话框 2 在 添加或删除程序 对话框中 单击左侧的 添加 删除Windows A 按钮 将会出现如图1 4所示的 Windows组件向导 对话框 在该对话框中有一项 Internet信息服务 IIS 如果没有选中 请选中它 在WindowsXP中安装IIS 图1 4 Windows组件 对话框 3 单击 下一步 按钮 将会出现一个对话框 该对话框为你的计算机安装你选中的Windows组件 接着将会出现如图1 5所示的 插入磁盘 对话框 在WindowsXP中安装IIS 图1 5 插入磁盘 对话框 4 在光驱中放入Windows系统安装盘 然后单击 确定 按钮 将会出现如图1 6所示的 所需文件 对话框 单击 确定 按钮 系统将自动复制文件到你的计算机 复制完成后 将会出现 Windows组件向导 完成 对话框 单击 完成 按钮 将完成IIS的安装 在WindowsXP中安装IIS 图1 6 所需文件 对话框 5 启动IE浏览器 在地址栏输入地址 http LocalHost 并按回车键 将会出现如图1 7所示的网页 表示IIS组件已经安装成功 在WindowsXP中安装IIS 图1 7测试网页 注意 IIS组件安装后 本计算机就可以作为Web服务器使用 此时在计算机的C盘上将会出现一个名为 Inetpub 的文件夹 该文件夹下有一个名为 wwwroot 的子文件夹 该文件夹站即为本机Web站点的主目录 发布目录可以是主目录或虚拟目录 每个Web站点都必须有一个主目录 主目录 是站点访问者的起始点 也是Web发布树的顶端 其中包含主页或索引文件 通过它们中的超链接指向Web站点中其他网页 主目录映射成站点的域名 要从主目录以外的目录发布信息 可以创建虚拟目录 虚拟目录 是物理上未包含在主目录中的目录 但客户端浏览器却认为是包含在主目录中的目录 虚拟目录具有 别名 客户端浏览器用此别名来访问该目录 2 建立虚拟目录 为D盘ASPEample文件夹创建虚拟目录的实现步骤如下 1 双击 我的电脑 在D 盘根目录下创建ASPExample文件夹 2 打开 控制面板 窗口 双击其中的 管理工具 图标 将会出现如图1 8所示的 管理工具 窗口 建立虚拟目录 图1 8 管理工具 窗口 3 在 管理工具 窗口中 双击 Internet信息服务 图标 奖会出现 Internet信息服务 窗口 单击 本地计算机 前面的 号 然后单击 网站 前面的 号 再单击 默认网站 前面的 号 此时该窗口如图1 9所示 建立虚拟目录 图1 9 Internet信息服务 窗口 4 在 默认网站 上单击右键 在出现的快捷菜单中选择 新建 菜单下的 虚拟目录 菜单项 将会出现如图1 10所示的 虚拟目录创建向导 开始 对话框 建立虚拟目录 图1 10 虚拟目录创建向导 开始 对话框 5 单击 下一步 按钮 将会出现 虚拟目录创建向导 虚拟目录别名 对话框 在该对话框中 别名 下的文本框中输入 ASPE 如图1 11所示 建立虚拟目录 图1 11 虚拟目录创建向导 虚拟目录别名 对话框 6 单击 下一步 按钮 将会出现 虚拟目录创建向导 网站内容目录 对话框 在该对话框中 目录 下面的文本框中输入文件夹名 D ASPExmaple 或单击 浏览 按钮 查找到 D ASPExmaple 文件夹 如图1 12所示 建立虚拟目录 图1 12 虚拟目录创建向导 网站内容目录 对话框 7 单击 下一步 按钮 将会出现如图1 13所示的 虚拟目录创建向导 访问权限 对话框 直接按 下一步 按钮 在出现的对话框中单击 完成 按钮便完成了 虚拟目录 的创建 此时在 Internet信息服务 窗口中就可以看到建立的虚拟目录 ASPEXAM 如图1 14所示 建立虚拟目录 图1 13 虚拟目录创建向导 访问权限 对话框 7 单击 下一步 按钮 将会出现如图1 13所示的 虚拟目录创建向导 访问权限 对话框 直接按 下一步 按钮 在出现的对话框中单击 完成 按钮便完成了 虚拟目录 的创建 此时在 Internet信息服务 窗口中就可以看到建立的虚拟目录 ASPEXAM 如图1 14所示 建立虚拟目录 图1 13访问权限 对话框 图1 14建立的虚拟目录 配置IIS5 1的步骤如下 1 打开 控制面板 窗口 双击 管理工具 图标 在出现的 管理工具 窗口中 双击 Internet 信息服务图标 将会出现如图1 14所示的 Internet信息服务 窗口 2 右键单击 默认网站 在弹出的快捷菜单中 选择 属性 将会出现如图1 15 网站属性 对话框 3 网站基本属性设置 包括描述 IP地址和TCP端口 在描述后的文本框中输入文本 我的站点 其它不变 4 主目录与站点访问权限设置 网站的主目录默认为 c inetpub wwwroot 用户可以进行修改 5 默认主页的设置 3 配置IIS5 1 图1 15 网站属性 对话框 图1 16 网站属性 文档 对话框 任务2描述 设计一个网页 网页在IE浏览器中的运行情况如图1 17所示 网页设计好后 请分别把该网页复制到Web站点主目录 Web站点主目录的下一级目录 虚拟目录及虚拟目录的下一级目录中 并通过浏览器浏览它 三 第一个动态网页 欢迎页面 图1 17网页浏览界面 任务分析 根据任务要求 首先应设计出网页文件 然后把该网页文件复制到网站的相应位置并加以运行 因此本题的关键是网页在Web站点不同位置处的地址如何表示 任务实现 1 启动 MicrosoftOffice2003 软件包中的 MicrosoftFrontPage2003 将会出现 MicrosoftFrontPage2003 应用程序窗口 单击窗口下面的 代码 标签 将会显示出新建的一个空白网页的代码框架 如图1 18所示 第一个动态网页 欢迎页面 图1 18 MicrosoftFrontPage2003 应用程序窗口 2 编写网页代码 编写好的网页代码如图1 19所示 图1 19编写好的 欢迎网页代码 说明 代码中的和 和 和是三对标记 一般来说 HTML文档均应有这三对标记 分别表示HTML文档的开始和结束 头部部分和正文部分 第5行 欢迎 用来设置本网页的标题 当浏览器访问该网页时 欢迎 将显示在浏览器的标题栏中 第9行 欢迎您来到本网站 用来显示欢迎文本 其中也是一个HTML标记 表示换行 其后的文本将在下一行显示 第10行中和是ASP代码 分别用来显示当前日期和当前时间 用括起来的代码是ASP代码 由Web服务器处理 该行中的Date和Time是VBScript的两个函数 分别用来返回系统当前日期和系统当前时间 3 执行 文件 菜单中的 保存 命令 把该网页保存到 C Inetput wwwroot 文件夹中 Web站点主目录 文件名为Task1 2 asp 注意扩展名为 asp 不能弄错 4 启动IE浏览器 在地址栏中输入该网页的地址 http LocalHost Task1 2 asp 然后按回车键 将会出现网页浏览界面 注意 浏览本机Web站点下的网页 有以下三种方法 使用IP地址 本地主机的IP地址为127 0 0 1 运行上述的Task1 2 asp网页 还可以在浏览器的地址栏中输入 http 127 0 0 1 Task1 2 asp 使用本地主机的别名LocalHost LocalHost是IP地址127 0 0 1的别名 使用计算机名 若本地计算机名为jsjtah 要运行上述的Task1 2 asp网页 可在浏览器的地址栏中输入 http jsjtah Task1 2 asp 注 上述三种标识均映射到本地Web站点的主目录 如果没有设置主目录 则映射到 c Inetpub wwwroot 在表示网页的路径时 分隔符应使用 而不是 5 执行 查看 菜单中的 源文件 菜单项 看到的源文件如图1 20所示 6 在 c Inetpub wwwroot 文件夹下新建一个子文件夹 文件夹名为 mysub 把网页文件Task1 2 asp移动到该文件夹下 然后在IE浏览器的地址栏中输入 http localhost mysub Task1 2 asp 并按回车键 也可访问该网页 说明 访问本地Web站点主目录的下一级目录中的网页的一般方法是 http LocalHost 子目录名 网页文件名 图1 20在客户端看到的源文件 7 把网页文件Task1 2 asp移动到 D ASPExample 文件夹中 然后在IE浏览器的地址栏中输入 http localhost ASPExam Task1 2 asp 并按回车键 也可运行该网页 说明 要访问本地虚拟目录下的网页 一般格式为 http LocalHost 虚拟目录别名 网页文件名 8 在 D ASPExample 文件夹下新建一个子文件夹 文件夹名为 CH1 把网页文件Task1 2 asp移动到该文件夹下 然后在IE浏览器的地址栏中输入 http localhost ASPExam CH1 Task1 2 asp 并按回车键 可以发现也能正确访问该网页 说明 访问虚拟目录的下一级目录中的网页的一般方法是 http LocalHost 虚拟目录名 子目录名 网页文件名至此本任务顺利完成 注意 编写网页代码时 大小写不需要区分 本章首先介绍了进行ASP动态网页设计所必须了解的一些基本概念 然后通过两个任务分别讲述了ASP运行环境的配置 动态网页的设计和访问的全过程 特别强调了IIS的安装 虚拟目录的创建和动态网页的各种访问方法 通过本课的学习 读者应能创建虚拟目录并能访问虚拟目录中的动态网页 本章使用MicrosoftFrontPage2003作为编写动态网页的工具 编写动态网页的另一个常用工具是DreamWeaverMX 其实动态网页本是就是一个文本文件 可以直接用记事本来编写 在以后的章节中均采用记事本来编写动态网页 总结 Thanks