四章Web开发的基本技术ppt课件.ppt
管理信息系统,第四章 Web开发的基本技术,Company Logo,内容提要,第一节*WWW（World Wide Web）第二节*HTML 第三节 Frontpage第四节 交互网页的制作 第五节 ASP（动态服务主页）第六节 Web数据库,Company Logo,第一节 WWW（World Wide Web）,本节内容一、Internet地址二、Internet提供的服务三、www服务四、网页和超文本,Company Logo,一、Internet服务,Internet地址唯一地确定Internet上每台计算机与每个用户的位置。对用户来说，Internet地址有两种表示形式：1.IP地址IP地址分前后二部分，前面部分叫网络号，后面部分叫主机号。2.域名用一个文字IP地址来表示。,Company Logo,二、Internet提供的服务,1.电子邮件 即E-maill服务2.文件传输服务即FTP服务：file transfer protocol3.www服务（World Wide Web）4.新闻公告类服务提供针对某问题展开讨论的服务，如BBS（电子公告牌）、网络新闻组等。,Company Logo,三、www服务,万维网上不仅可以看到文字、图片，而且可以带声音、带动画。www服务是通过客户机上的Web浏览器和Web站点上的Web服务器之间的通信来实现的。,Company Logo,三、www服务,Company Logo,四、网页和超文本,1.超文本：在www系统中，信息是按超文本方式组织的。超文本方式是实现www的关键技术。2.HTML语言（Hyper Text Markup Language）3.http协议（Hyper Text Transfer Protocol）：超文本传输协议，www服务是执行http协议进行传输的。4.www浏览器：通过它可以去找到并浏览Internet上各种WWW服务器上的主页。5.搜索引擎：它能在Internet中主动搜索其他www服务器中的信息并对其索引，将索引内容存储在大型数据库中，供用户查询。,Company Logo,第二节 HTML,本节内容一、HTML元素二、HTML常用标签三、格式标签四、特殊字符显示五、HTML链接六、表格七、列表八、图片,Company Logo,HTML概观,HTML即“超文本标记语言”Hyper Text Markup LanguageHTML文件是包括一些标签的文本文件这些标签告诉浏览器如果显示页面内容HTML文件必须以HTM或HTML为扩展名可以用文本编辑器建立HTML文件,Company Logo,1.HTML的第一个例子,我的主页这是我的第一个网页 这里的文字用粗体显示,查看效果,查看源文件,F,F,Company Logo,2.HTML元素,HTML的元素用标签来标记 HTML标记用两个符号（大于号和小于号称为“尖括号”）括起来HTML的标签一般都成对出现，例如第一个称为开始标签，第二个称为结束标签两个标签之间的内容是元素的内容HTML的标签可以用大写或小写（推荐用小写）,看例子,F,Company Logo,3.HTML常用标签,headings标题标签。定义不同大小的标题,paragraphs段落标签。*Line breaks断行标签HTML中的注释,查看效果,查看源文件,F,F,Company Logo,4.HTML格式标签,粗体 大字体 强调 斜体 小字体 粗体 下标 上标预格式文本*,查看效果,查看源文件,F,F,查看pre效果,查看pre源文件,F,F,Company Logo,5.HTML特殊字符显示,查看效果,查看源文件,F,F,Company Logo,6.HTML链接,锚标签 之间的内容会以超链接的形式显示。语法：Text to be displayed 锚标签的属性Href指示链接地址湘潭大学 Target指示打开位置Target=“_blank”表示在新的浏览器窗口中打开超链接。否则会在原来的窗口中打开超链接。,查看效果,查看源文件,F,F,Company Logo,7.HTML表格,标签标签标签表格属性：border,cellspacing,bordercolor 单元格属性：align,colspan,rowspan,查看效果,查看源文件,F,F,查看效果,查看源文件,F,F,查看效果,查看源文件,F,F,Company Logo,8.列表 LISTS,HTML中的常用列表包括：有序列表ordered list 无序列表 unordered list 定义列表definition list 用定义term,用 定义definition,查看效果,查看源文件,F,F,Company Logo,9.图片image,标签。的属性src指定图片的文件名。alt显示图片的替代文本。（当图片不能显示时，显示这些文字）height,width指定图片的大小。用图片作超链接。只要把图片的标签放在 之间就可以了,查看效果,查看源文件,F,F,Company Logo,10.网页背景,网页可以指定某一种颜色做背景，也可以用图片作背景。需要改动的是的属性。bgcolor属性设置颜色background属性设置背景图片,查看效果,查看源文件,F,F,查看效果,查看源文件,F,F,Company Logo,第三节 FrontPage,使用微软公司的FrontPage WEB编程工具可以做到在几乎不需要编写HTML代码的情况下，完成网页的制作，同时自动地生成HTML文件。本节内容：用FrontPage制作页面,Take a break!,Company Logo,用FrontPage制作页面-1,-主页面,网上手机商场 产品价格表见http:/正按八折销售,欢迎选购,动态字幕后,Company Logo,用FrontPage制作页面-2,-被连接的页面,产品价格表,Company Logo,用FrontPage制作页面-3,用FrontPage作上述网页的步骤,Company Logo,第四节 交互网页的制作,仅有静态的网页是不够的。我们需要通过网页实现网上注册（客户在网页上写入自己的姓名和密码）、网上交谈、网上查询（客户在网页上输入自己要买的产品名，网站返回该产品名的性能、价格等）。本节内容：一、交互性标记元素 二、FORM标记元素,Company Logo,一、交互性标记元素,-人机对话的表单接口界面,Company Logo,二、FORM标记元素-1,用FORM标记元素在HTML页面上实现“提交”（一部分功能）的HTML文档 请提供以下信息,然后单击提交。姓名：密码：,Company Logo,二、FORM标记元素-2,FORM语句段的结构,Company Logo,第五节 ASP（动态服务主页）,用HTML写的文本是静态的。你可以看到页面上的内容，但不能在屏幕上输入并传送数据到Web服务器，更无法进行完整的人机对话。当涉及到页面与数据库的连接问题和从站点返回一个页面给客户的问题时，仅依靠HTML文本是做不到的。ASP就是为了解决动态交互的问题和与数据库连接的问题而设计的。本节内容：一、什么是ASP？二、ASP的工作原理 三、ASP脚本编程,Company Logo,一、什么是ASP？,ASP（Active Server Pages）是微软公司为它的WEB服务器（互联网信息服务器，简称IIS）开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。通过ASP，我们能够将HTML页面、脚本命令、ASP内置对象和Active X组件结合起来，建立动态、交互而又高效的Web应用程序。ASP可利用ADO（Active Data Object）方便地访问数据库。,Company Logo,二、ASP的工作原理-1,ASP文件可以包含以下的几个部分：1.文本 2.HTML标记 3.ASP脚本命令等 ASP脚本命令可以包含ASP对象，ActiveX组件和任何脚本语言（如VB脚本语言、JAVA脚本语言等）。ASP脚本命令写在“%”和“%”两个符号之间。ASP文件可以使用文本编辑器（如记事本）进行编辑，也可以用WEB编程工具FrontPage来做。,Company Logo,二、ASP的工作原理-2,ASP文件实例：VB-SCR-EXM.ASPhtml head title手机市场标题/title/head body%for i=3 to 7%Font size=%=i%这里是手机市场！BR%next%/body/html,Company Logo,二、ASP的工作原理-3,ASP文件实例：VB-SCR-EXM.ASP（去掉）html head title手机市场标题/title/head body for i=3 to 7 Font size=i 这里是手机市场！BR next/body/html,Company Logo,二、ASP的工作原理-4,浏览结果,这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！,浏览屏幕,Company Logo,二、ASP的工作原理-5,-ASP文件的运行过程,ASP的工作过程,Company Logo,三、ASP脚本编程-1,-ASP脚本命令包含内容 脚本语言可用VBScript写ASP内置对象Rehuest就是一个内置对象Active X组件ASP支持的Active X组件包括ASP服务器本身附带的内置组件和用户自己（第三方）创建的ASP组件。,Company Logo,三、ASP脚本编程-2,-用户与WEB服务器之间的信息交互使用HTML中的FORM（表单）ASP文件中可使用VBScript作为脚本语言，也可用JAVAScript作为脚本语言。,Company Logo,三、ASP脚本编程-3,ASP环境下处理数据实例Tijiao3.htm 请提供以下信息，然后单击提交。姓名：密码：,Company Logo,三、ASP脚本编程-4,ASP环境下处理数据实例Fanhui3.asp对不起！您的密码不对。,Company Logo,第六节 Web数据库,网站运用了数据库技术，就可以实现网页更新的自动化，即只要将数据库中的内容更新了，网页上的内容也就自动更新了。本节内容：一、数据库管理信息系统二、Web数据库,Company Logo,一、数据库管理系统,-数据库管理系统的功能 建立数据库 管理数据库 实现数据的传送等,Company Logo,二、Web数据库-1,-Web数据库系统是指以HTML为代表的Web页面（即网页）与位于底层的数据库的集成。-数据库管理系统解决Web页面和数据库之间的通信问题。开放式数据库连接器ODBC ODBC是一种编程接口，它能使应用程序访问支持SQL查询语言的数据库管理系统，实现与各种数据库的通信。SQL查询语言,Company Logo,二、Web数据库-2,数据库的应用实例现在有一客户在已知新书代码后希望知道该书的单价和是否有书。客户向WEB服务器发出HTTP请求用户在屏幕上看到的如图所示,查询输入屏幕,Company Logo,二、Web数据库-3,从浏览器上调用下列CX-SEND.ASP程序产生的页面，并输入新书代码后提交。欢迎查看新书价格和库存量欢迎查看新书价格和库存量 请输入新书代码,Company Logo,二、Web数据库-4,Web服务器上的ASP软件对此程序进行解释并执行另外一个名为cx-back.asp的程序。欢迎查看新书价格和库存量%Set conn=Server.CreateObject(ADODB.Connection)DBPath=Server.MapPath(tsxt.mdb),Company Logo,二、Web数据库-5,conn.Open driver=Microsoft Access Driver(*.mdb);dbq=&DBPathSet rs=Server.CreateObject(ADODB.Recordset)sql=select*from tsxtsql=sql&where id like%&id&%conn.execute sqlrs.open sql,conn,1,3%您查询的新书详单 新书代码 新书名称,Company Logo,二、Web数据库-6,单价（元）库存量 对不起，没有您要查找的书籍数据！,Company Logo,二、Web数据库-7,由CX-SEND.ASP调用CX-BACK.ASP后的屏幕输出见图。,Company Logo,二、Web数据库-8,查询结果输出屏幕,您查询的新书单价和库存量,Company Logo,二、Web数据库-9,Web服务器上的ASP软件对程序的解释和执行过程 取得用户传来的新书代码（见程序第6行）Web页面与数据库Tsxt.mdb相边接（见程序8-11行）第8-9行，创建一个Connectcon对象 第10行，是打开连接。第11行，是创建一个记录集对象。用SQL查询数据库（见第1215行）在浏览器上显示出查询结果 演示B4 网上图书销售演示系统（见演示光盘）演示B5 工资管理演示系统（见演示光盘）,Company Logo,第四章 Web开发的基本技术 小结,Thank You!,
