四章Web开发的基本技术ppt课件.ppt

四章Web开发的基本技术ppt课件 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望内容提要内容提要v第一节第一节*WWW（World Wide Web）v第二节第二节*HTML v第三节第三节 Frontpagev第四节第四节 交互网页的制作交互网页的制作 v第五节第五节 ASP（动态服务主页）（动态服务主页）v第六节第六节 Web数据库数据库 Company Logo第一节第一节 WWW（World Wide Web）v本节内容本节内容一、一、Internet地址地址二、二、Internet提供的服务提供的服务三、三、www服务服务四、网页和超文本四、网页和超文本Company Logo一、一、InternetInternet服务服务vInternet地址唯一地确定地址唯一地确定Internet上每台计上每台计算机与每个用户的位置。对用户来说，算机与每个用户的位置。对用户来说，Internet地址有两种表示形式：地址有两种表示形式：v1.IP地址地址IP地址分前后二部分，前面部分叫网络号，后面部地址分前后二部分，前面部分叫网络号，后面部分叫主机号。分叫主机号。v2.域名域名用一个文字用一个文字IP地址来表示。地址来表示。Company Logo二、二、InternetInternet提供的服务提供的服务v1.电子邮件电子邮件 即即E-maill服务服务v2.文件传输服务文件传输服务即即FTP服务：服务：file transfer protocolv3.www服务（服务（World Wide Web）v4.新闻公告类服务新闻公告类服务提供针对某问题展开讨论的服务，如提供针对某问题展开讨论的服务，如BBS（电子公（电子公告牌）、网络新闻组等。告牌）、网络新闻组等。Company Logo三、三、wwwwww服务服务v万维网上不仅可以看到文字、图片，而且可以万维网上不仅可以看到文字、图片，而且可以带声音、带动画。带声音、带动画。vwww服务是通过客户机上的服务是通过客户机上的Web浏览器和浏览器和Web站站点上的点上的Web服务器之间的通信来实现的。服务器之间的通信来实现的。Company LogoHTMLHTML文件文件WebWeb浏览器（软件）浏览器（软件）客户机客户机InternetInternet上的上的WebWeb服务器服务器InternetInternet上的上的WebWeb服务器服务器访问链接访问链接的信息的信息链接链接httphttp协议协议用户用户Web服务器的工作原理三、三、wwwwww服务服务Company Logo四、网页和超文本四、网页和超文本v1.超文本：在超文本：在www系统中，信息是按超文本方式组织系统中，信息是按超文本方式组织的。超文本方式是实现的。超文本方式是实现www的关键技术。的关键技术。v2.HTML语言（语言（Hyper Text Markup Language）v3.http协议（协议（Hyper Text Transfer Protocol）：）：超文本传输协议，超文本传输协议，www服务是执行服务是执行http协议进行传输协议进行传输的。的。v4.www浏览器：通过它可以去找到并浏览浏览器：通过它可以去找到并浏览Internet上上各种各种WWW服务器上的主页。服务器上的主页。v5.搜索引擎：它能在搜索引擎：它能在Internet中主动搜索其他中主动搜索其他www服服务器中的信息并对其索引，将索引内容存储在大型数务器中的信息并对其索引，将索引内容存储在大型数据库中，供用户查询。据库中，供用户查询。Company Logo第二节第二节 HTML HTML本节内容本节内容一、一、HTML元素元素二、二、HTML常用标签常用标签三、格式标签三、格式标签四、特殊字符显示四、特殊字符显示五、五、HTML链接链接六、表格六、表格七、列表七、列表八、图片八、图片Company LogoHTMLHTML概观概观vHTML即即“超文本标记语言超文本标记语言”Hyper Text Markup LanguagevHTML文件是包括一些标签的文本文件文件是包括一些标签的文本文件v这些标签告诉浏览器如果显示页面内容这些标签告诉浏览器如果显示页面内容vHTML文件必须以文件必须以HTM或或HTML为扩展名为扩展名v可以用文本编辑器建立可以用文本编辑器建立HTML文件文件Company Logo1.HTML1.HTML的第一个例子的第一个例子我的主页我的主页这是我的第一个网页这是我的第一个网页 这里的文字用粗体显这里的文字用粗体显示示 查看效果查看效果查看源文件查看源文件FFCompany Logo2.HTML2.HTML元素元素vHTML的元素用标签来标记的元素用标签来标记 vHTML标记用两个符号（大于号和小于号标记用两个符号（大于号和小于号称称为为“尖括号尖括号”）括起来）括起来vHTML的标签的标签一般一般都成对出现，例如都成对出现，例如v第一个称为开始标签，第二个称为结束标签第一个称为开始标签，第二个称为结束标签v两个标签之间的内容是元素的内容两个标签之间的内容是元素的内容vHTML的标签可以用大写或小写（推荐用小写）的标签可以用大写或小写（推荐用小写）看例子看例子FCompany Logo3.HTML3.HTML常用标签常用标签vvvheadings标题标签。标题标签。定义不同定义不同大小的标题大小的标题,vparagraphs段落标签。段落标签。v*Line breaks断行标签断行标签vHTML中的注释中的注释查看效果查看效果查看源文件查看源文件FFCompany Logo4.HTML4.HTML格式标签格式标签v 粗体粗体v 大字体大字体v 强调强调v 斜体斜体v 小字体小字体v 粗体粗体v 下标下标v 上标上标v预格式文本预格式文本*查看效果查看效果查看源文件查看源文件FF查看查看pre效果效果查看查看pre源文件源文件FFCompany Logo5.HTML5.HTML特殊字符显示特殊字符显示符号名称代码数字空格  大于>>&Ampersand&&引号""分¢¢英镑££元¥¥节§§版权©©注册商标®®乘××除÷÷查看效果查看效果查看源文件查看源文件FFCompany Logo6.HTML6.HTML链接链接v锚标签锚标签 v之间的内容会以超链接的形式显示。之间的内容会以超链接的形式显示。语法：语法：vText to be displayed v锚标签的属性锚标签的属性Href指示链接地址指示链接地址湘潭大学湘潭大学 Target指示打开位置指示打开位置Target=“_blank”表示在新的浏览器窗口中打开超链表示在新的浏览器窗口中打开超链接。否则会在原来的窗口中打开超链接。接。否则会在原来的窗口中打开超链接。查看效果查看效果查看源文件查看源文件FFCompany Logo7.HTML7.HTML表格表格v标签标签标签标签标签标签v表格属性：表格属性：border,cellspacing,bordercolor v单元格属性：单元格属性：align,colspan,rowspan 查看效果查看效果查看源文件查看源文件FF查看效果查看效果查看源文件查看源文件FF查看效果查看效果查看源文件查看源文件FFCompany Logo8.8.列表列表 LISTS LISTSvHTML中的常用列表包括：中的常用列表包括：v有序列表有序列表ordered list v无序列表无序列表 unordered list v定义列表定义列表definition list 用用定义定义term,用用 定义定义definition查看效果查看效果查看源文件查看源文件FFCompany Logo9.9.图片图片imageimagev标签。标签。v的属性的属性src指定图片的文件名。指定图片的文件名。alt显示图片的替代文本。（当图片不能显显示图片的替代文本。（当图片不能显示时，显示这些文字）示时，显示这些文字）height,width指定图片的大小。指定图片的大小。用图片作超链接。只要把图片的标签放在用图片作超链接。只要把图片的标签放在 之间就可以了之间就可以了查看效果查看效果查看源文件查看源文件FFCompany Logo10.10.网页背景网页背景v网页可以指定某一种颜色做背景，也可以用图网页可以指定某一种颜色做背景，也可以用图片作背景。需要改动的是片作背景。需要改动的是的属性。的属性。vbgcolor属性属性设置颜色设置颜色vbackground属性属性设置背景图片设置背景图片查看效果查看效果查看源文件查看源文件FF查看效果查看效果查看源文件查看源文件FFCompany Logo第三节第三节 FrontPageFrontPagev使用微软公司的使用微软公司的FrontPage WEB编程工具可以编程工具可以做到在几乎不需要编写做到在几乎不需要编写HTML代码的情况下，代码的情况下，完成网页的制作，同时自动地生成完成网页的制作，同时自动地生成HTML文件。文件。v 本节内容：本节内容：v 用用FrontPage制作页面制作页面 Company Logo用用FrontPageFrontPage制作页面制作页面-1-1-主页面主页面网上手机商场网上手机商场 产品价格表见产品价格表见http:/http:/正按八折销售正按八折销售,欢迎选购欢迎选购动态字幕后动态字幕后Company Logo用用FrontPageFrontPage制作页面制作页面-2-2v-被连接的页面被连接的页面产品价格表产品价格表产品号产品型号生产厂家价格Company Logo用FrontPage制作页面-3-3用用FrontPageFrontPage作上述网页的步骤作上述网页的步骤操作目的操作步骤定义主网页新建网页普通网页确定网页名字并存储网页分区点击“插入表格”按钮，做出22表格，并把表格实线变为虚线（办法是在表格上点击右键选属性后，将各数均改为0）。输入网页标题文字方法类同用WORD写字，在左上格写上“网上手机商场”几个字。插入照片点击选图片钮用右键点图片点击图片属性外观尺寸（修改其大小）。做动态字幕在右下格写“正按八折销售,欢迎选购”字样，选中后插入组件字幕字幕属性样式格式字体。点击预览，即可看到动态字幕。做被连接的网页另外做一个被连接的网页（手机价格表）。建立超接，填URL地址在主网页右上写“产品价格表见http:/”,选中后，用右键点击选“超链接属性”，填上URL地址（产品价格表所在地址）。Company Logo第四节第四节 交互网页的制作交互网页的制作 仅有静态的网页是不够的。我们需要通过网页仅有静态的网页是不够的。我们需要通过网页实现网上注册（客户在网页上写入自己的姓名和密实现网上注册（客户在网页上写入自己的姓名和密码）、网上交谈、网上查询（客户在网页上输入自码）、网上交谈、网上查询（客户在网页上输入自己要买的产品名，网站返回该产品名的性能、价格己要买的产品名，网站返回该产品名的性能、价格等）。等）。本节内容：本节内容：一、交互性标记元素一、交互性标记元素 二、二、FORMFORM标记元素标记元素 Company Logo一、交互性标记元素一、交互性标记元素v-人机对话的表单接口界面人机对话的表单接口界面 请提供以下信息，然后单击提交请提供以下信息，然后单击提交 姓名：姓名：密码：密码：提交提交清除清除人机对话的界面人机对话的界面 Company Logo二、二、FORMFORM标记元素标记元素-1-1v用用FORM标记元素在标记元素在HTML页面上实现页面上实现“提交提交”（一部分功能）的（一部分功能）的HTML文档文档 请提供以下信息请提供以下信息,然后单击提交。然后单击提交。姓名：姓名：密码：密码：Company Logo二、二、FORMFORM标记元素标记元素-2-2vFORM语句段的结构语句段的结构 FORM METHOD=”POST”(指从客户机将信息发送指从客户机将信息发送到到WEB服务器服务器)ACTION=”URL”(激活处理交互信息的程序激活处理交互信息的程序)Company Logo第五节第五节 ASP ASP（动态服务主页）（动态服务主页）v 用用HTML写的文本是静态的。你可以看写的文本是静态的。你可以看到页面上的内容，但不能在屏幕上输入并传送到页面上的内容，但不能在屏幕上输入并传送数据到数据到Web服务器，更无法进行完整的人机对服务器，更无法进行完整的人机对话。当涉及到页面与数据库的连接问题和从站话。当涉及到页面与数据库的连接问题和从站点返回一个页面给客户的问题时，仅依靠点返回一个页面给客户的问题时，仅依靠HTML文本是做不到的。文本是做不到的。ASP就是为了解决动态就是为了解决动态交互的问题和与数据库连接的问题而设计的。交互的问题和与数据库连接的问题而设计的。v 本节内容：本节内容：v 一、什么是一、什么是ASP？v 二、二、ASP的工作原理的工作原理 v 三、三、ASP脚本编程脚本编程 Company Logo一、什么是一、什么是ASPASP？ASP（Active Server Pages）是微软公司为它）是微软公司为它的的WEB服务器（互联网信息服务器，简称服务器（互联网信息服务器，简称IIS）开）开发的一个组件（软件）。它是一种实现动态网页开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。发技术的服务器端的开发环境。通过通过ASP，我们能够将，我们能够将HTML页面、脚本命令、页面、脚本命令、ASP内置对象和内置对象和Active X组件结合起来，建立动态、组件结合起来，建立动态、交互而又高效的交互而又高效的Web应用程序。应用程序。ASP可利用可利用ADO（Active Data Object）方便地）方便地访问数据库。访问数据库。Company Logo二、二、ASPASP的工作原理的工作原理-1-1vASP文件可以包含以下的几个部分：文件可以包含以下的几个部分：v 1.文本文本 2.HTML标记标记 3.ASP脚本命令等脚本命令等 ASP脚本命令可以包含脚本命令可以包含ASP对象，对象，ActiveX组件和任何脚本语言（如组件和任何脚本语言（如VB脚本语言、脚本语言、JAVA脚本脚本语言等）。语言等）。ASP脚本命令写在脚本命令写在“%”和和“%”两个两个符号之间。符号之间。ASP文件可以使用文本编辑器（如记事本）文件可以使用文本编辑器（如记事本）进行编辑，也可以用进行编辑，也可以用WEB编程工具编程工具FrontPage来做。来做。Company Logo二、二、ASPASP的工作原理的工作原理-2-2ASP文件实例：文件实例：VB-SCR-EXM.ASPhtml head title手机市场标题手机市场标题/title /head body%for i=3 to 7%Font size=%=i%这里是手机市场！这里是手机市场！BR%next%/body/Company Logo二、二、ASPASP的工作原理的工作原理-3-3vASP文件实例：文件实例：VB-SCR-EXM.ASP （去掉（去掉）html head title手机市场标题手机市场标题/title /head body for i=3 to 7 Font size=i 这里是手机市场！这里是手机市场！BR next /body/Company Logo二、二、ASPASP的工作原理的工作原理-4-4浏览结果浏览结果 这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！浏览屏幕浏览屏幕 Company Logo二、二、ASPASP的工作原理的工作原理-5-5v-ASP文件的运行过程文件的运行过程浏览器浏览器httphttp请求请求httphttp响应响应WebWeb服务器服务器ASPASPASPASP的工作过程的工作过程Company Logo三、三、ASPASP脚本编程脚本编程-1-1v-ASP脚本命令包含内容脚本命令包含内容 v脚本语言脚本语言可用可用VBScript写写vASP内置对象内置对象Rehuest就是一个内置对象就是一个内置对象vActive X组件组件ASP支持的支持的Active X组件包组件包括括ASP服务器本身附带的内置组件和用户自己服务器本身附带的内置组件和用户自己（第三方）创建的（第三方）创建的ASP组件。组件。Company Logo三、三、ASPASP脚本编程脚本编程-2-2v-用户与用户与WEB服务器之间的信息交互服务器之间的信息交互v使用使用HTML中的中的FORM（表单）（表单）vASP文件中可使用文件中可使用VBScript作为脚本语言，也作为脚本语言，也可用可用JAVAScript作为脚本语言。作为脚本语言。Company Logo三、三、ASPASP脚本编程脚本编程-3-3vASP环境下处理数据实例环境下处理数据实例Tijiao3.htm 请提供以下信息，然后单击提交。请提供以下信息，然后单击提交。姓名：姓名：密码：密码：Company Logo三、三、ASPASP脚本编程脚本编程-4-4vASP环境下处理数据实例环境下处理数据实例Fanhui3.asp%=myname%先生（女士）先生（女士）：我们接受您的申请。：我们接受您的申请。您可以用以下密码查阅我们的资料：您可以用以下密码查阅我们的资料：abcde对不起！您的密码不对。对不起！您的密码不对。Company Logo第六节第六节 Web Web数据库数据库 v 网站运用了数据库技术，就可以实现网页更网站运用了数据库技术，就可以实现网页更新的自动化，即只要将数据库中的内容更新了，新的自动化，即只要将数据库中的内容更新了，网页上的内容也就自动更新了。网页上的内容也就自动更新了。v本节内容：本节内容：v一、数据库管理信息系统一、数据库管理信息系统v二、二、Web数据库数据库Company Logo一、数据库管理系统一、数据库管理系统v-数据库管理系统的功能数据库管理系统的功能 建立数据库建立数据库 管理数据库管理数据库 实现数据的传送等实现数据的传送等Company Logo二、二、WebWeb数据库数据库-1-1-Web-Web数据库系统是指以数据库系统是指以HTMLHTML为代表的为代表的WebWeb页面（即页面（即网页）与位于底层的数据库的集成。网页）与位于底层的数据库的集成。-数据库管理系统解决数据库管理系统解决WebWeb页面和数据库之间的通页面和数据库之间的通信问题。信问题。开放式数据库连接器开放式数据库连接器ODBCODBC ODBCODBC是一种编程接口，它能使应用程序是一种编程接口，它能使应用程序访问支持访问支持SQLSQL查询语言的数据库管理系统，实查询语言的数据库管理系统，实现与各种数据库的通信。现与各种数据库的通信。SQLSQL查询语言查询语言Company Logo二、二、WebWeb数据库数据库-2-2数据库的应用实例数据库的应用实例现在有一客户在已知新现在有一客户在已知新书代码后希望知道该书书代码后希望知道该书的单价和是否有书。的单价和是否有书。客户向客户向WEB服务器服务器发出发出HTTP请求请求用户在屏幕上看到的如用户在屏幕上看到的如图图所示所示 欢迎查看新书价格和库存量欢迎查看新书价格和库存量请输入新书代码请输入新书代码确认确认重写重写查询输入屏幕查询输入屏幕Company Logo二、二、WebWeb数据库数据库-3-3从浏览器上调用下列从浏览器上调用下列CX-SEND.ASPCX-SEND.ASP程序产生的页面，并输入程序产生的页面，并输入新书代码后提交。新书代码后提交。欢迎查看新书价格和库存量欢迎查看新书价格和库存量欢迎查看新书价格和库存量欢迎查看新书价格和库存量 请输入新书代码请输入新书代码 input type=submit value=input type=reset value=Company Logo二、二、WebWeb数据库数据库-4-4Web服务器上的服务器上的ASP软件对此程序进行软件对此程序进行解释并执行解释并执行另外一个名为另外一个名为cx-back.asp的程序。的程序。欢迎查看新书价格和库存量欢迎查看新书价格和库存量%您查询的新书详单您查询的新书详单 新书代码新书代码 新书名称新书名称Company Logo二、二、WebWeb数据库数据库-6-6单价（元）单价（元）库存量库存量        对不起，没有您要查找的书籍数据！对不起，没有您要查找的书籍数据！Company Logo二、二、WebWeb数据库数据库-7-7%rs.close set rs=nothing 由由CX-SEND.ASPCX-SEND.ASP调用调用CX-BACK.ASPCX-BACK.ASP后的屏幕输后的屏幕输出见出见图图。Company Logo二、二、WebWeb数据库数据库-8-8查询结果输出屏幕查询结果输出屏幕您查询的新书单价和库存量您查询的新书单价和库存量新书代码新书名称单价（元）库存量1003人工智能程序设计Company Logo二、二、WebWeb数据库数据库-9-9vWeb服务器上的服务器上的ASP软件对程序的解释和执行软件对程序的解释和执行过程过程 取得用户传来的新书代码（见程序第取得用户传来的新书代码（见程序第6行）行）Web页面与数据库页面与数据库Tsxt.mdb相边接（见程序相边接（见程序8-11行）行）第第8-9行，创建一个行，创建一个Connectcon对象对象 第第10行，是打开连接。行，是打开连接。第第11行，是创建一个记录集对象。行，是创建一个记录集对象。用用SQL查询数据库（见第查询数据库（见第1215行）行）在浏览器上显示出查询结果在浏览器上显示出查询结果 演示演示B4 网上图书销售演示系统（见演示光盘）网上图书销售演示系统（见演示光盘）演示演示B5 工资管理演示系统工资管理演示系统 （见演示光盘）（见演示光盘）Company Logo第四章 Web开发的基本技术 小结WWWHTMLFrontpageWeb开开发发的的基基本本技技术术通过客户机上的通过客户机上的WebWeb浏览器和浏览器和WebWeb站点上站点上的的WebWeb服务器之间的通信来实现。服务器之间的通信来实现。InternetInternet用户可以通过用户可以通过WebWeb页面来访问数页面来访问数据库中的数据。据库中的数据。利用利用FrontPageFrontPage这种这种WEBWEB编程工具可编程工具可以做到在几乎不需要编写以做到在几乎不需要编写HTMLHTML代码代码的情况下，完成网页的制作，并自的情况下，完成网页的制作，并自动地生成动地生成HTMLHTML文件。文件。ASPASP是位于是位于WebWeb服务器端的脚本运行环服务器端的脚本运行环境。通过这种环境，用户可以创建和境。通过这种环境，用户可以创建和运行动态的、交互式的运行动态的、交互式的WebWeb服务器应服务器应用程序，实现动态的交互。用程序，实现动态的交互。交互网页、交互网页、ASP动态服动态服务网页务网页Web数据库数据库Company Logo