《最新四章Web开发的基本技术ppt课件ppt课件》由会员分享，可在线阅读，更多相关《最新四章Web开发的基本技术ppt课件ppt课件（53页珍藏版）》请在金锄头文库上搜索。
1、四章四章Web开发的基本技术开发的基本技术ppt课课件件内容提要内容提要v第一节第一节* WWW（World Wide Web） v第二节第二节* HTML v第三节第三节 Frontpagev第四节第四节 交互网页的制作交互网页的制作 v第五节第五节 ASP（动态服务主页）（动态服务主页） v第六节第六节 Web数据库数据库 Company Logo第二节第二节 HTML HTML本节内容本节内容一、一、HTML元素元素二、二、HTML常用标签常用标签三、格式标签三、格式标签四、特殊字符显示四、特殊字符显示五、五、HTML链接链接六、表格六、表格七、列表七、列表八、图片八、图片Company
2、 LogoHTMLHTML概观概观vHTML即即“超文本标记语言超文本标记语言”Hyper Text Markup LanguagevHTML文件是包括一些标签的文本文件文件是包括一些标签的文本文件v这些标签告诉浏览器如果显示页面内容这些标签告诉浏览器如果显示页面内容vHTML文件必须以文件必须以HTM或或HTML为扩展名为扩展名v可以用文本编辑器建立可以用文本编辑器建立HTML文件文件Company Logo1. HTML1. HTML的第一个例子的第一个例子我的主页我的主页这是我的第一个网页这是我的第一个网页 这里的文字用粗体显示这里的文字用粗体显示 查看效果查看效果查看源文件查看源文件F
3、FCompany Logo2. HTML2. HTML元素元素vHTML的元素用标签来标记的元素用标签来标记 vHTML标记用两个符号（大于号和小于号标记用两个符号（大于号和小于号称称为为“尖括号尖括号”）括起来）括起来vHTML的标签的标签一般一般都成对出现，例如都成对出现，例如v第一个称为开始标签，第二个称为结束标签第一个称为开始标签，第二个称为结束标签v两个标签之间的内容是元素的内容两个标签之间的内容是元素的内容vHTML的标签可以用大写或小写（推荐用小写）的标签可以用大写或小写（推荐用小写）看例子看例子FCompany Logo3.HTML3.HTML常用标签常用标签vvvheadin
4、gs标题标签。标题标签。定义不同定义不同大小的标题大小的标题,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特殊字符显示特殊字符显示符号符号名称名称代码代码
5、数字数字空格空格 大于大于>>&Ampersand&&引号引号""分分¢¢英镑英镑££元元¥¥节§§版权版权©©注册商注册商标®®乘乘××除除÷÷查看效果查看效果查看源文件查看源文件FFCompany Logo6.HTML6.HTML链接链接v锚标签锚标签 v之间的内容会以超链接的形式显示。之间的内容会以超链接的形式显示。语法：语法：vText to be dis
6、played v锚标签的属性锚标签的属性Href指示链接地址指示链接地址湘潭大学湘潭大学 Target指示打开位置指示打开位置Target=“_blank”表示在新的浏览器窗口中打开超链表示在新的浏览器窗口中打开超链接。否则会在原来的窗口中打开超链接。接。否则会在原来的窗口中打开超链接。 查看效果查看效果查看源文件查看源文件FFCompany Logo7.HTML7.HTML表格表格v标签标签标签标签标签标签v表格属性：表格属性：border, cellspacing, bordercolor v单元格属性：单元格属性：align, colspan, rowspan 查看效果查看效果查看源文件
7、查看源文件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显示图片的替代文
8、本。（当图片不能显显示图片的替代文本。（当图片不能显示时，显示这些文字）示时，显示这些文字）height, width指定图片的大小。指定图片的大小。用图片作超链接。只要把图片的标签放在用图片作超链接。只要把图片的标签放在 之间就可以了之间就可以了查看效果查看效果查看源文件查看源文件FFCompany Logo10.10.网页背景网页背景v网页可以指定某一种颜色做背景，也可以用图网页可以指定某一种颜色做背景，也可以用图片作背景。需要改动的是片作背景。需要改动的是的属性。的属性。vbgcolor属性属性设置颜色设置颜色vbackground属性属性设置背景图片设置背景图片查看效果查看效果查看源文
9、件查看源文件FF查看效果查看效果查看源文件查看源文件FFCompany Logo第三节第三节 FrontPageFrontPagev使用微软公司的使用微软公司的FrontPage WEB编程工具可以编程工具可以做到在几乎不需要编写做到在几乎不需要编写HTML代码的情况下，代码的情况下，完成网页的制作，同时自动地生成完成网页的制作，同时自动地生成HTML文件。文件。 v 本节内容：本节内容：v 用用FrontPage制作页面制作页面 Company Logo用用FrontPageFrontPage制作页面制作页面 -1 -1-主页面主页面网上手机商场网上手机商场 产品价格表见产品价格表见http
10、:/http:/正按八折销售正按八折销售, ,欢迎选购欢迎选购动态字幕后动态字幕后Company Logo用用FrontPageFrontPage制作页面制作页面 -2 -2v-被连接的页面被连接的页面产品价格表产品价格表产品号产品型号生产厂家价格Company Logo用FrontPage制作页面 -3-3用FrontPage作上述网页的步骤操作目的操作步骤定定义主网主网页新建新建网网页普通网普通网页确定网确定网页名字并存名字并存储网网页分区分区点点击“插入表格插入表格”按按钮，做出，做出2222表格，并把表格表格，并把表格实线变为虚虚线（办法法是在表格上点是在表格上点击右右键选属性后，将各
11、数均改属性后，将各数均改为0 0）。）。输入网入网页标题文字文字方法方法类同用同用WORDWORD写字，在左上格写上写字，在左上格写上“网上手机商网上手机商场”几个字。几个字。插入照片插入照片点点击选图片片钮用右用右键点点图片片点点击图片属性片属性外外观尺寸（修尺寸（修改其大小）。改其大小）。做做动态字幕字幕在右下格写在右下格写“正按八折正按八折销售售, ,欢迎迎选购”字字样，选中后中后插入插入组件件字幕字幕字幕属性字幕属性样式式格式格式字体。字体。点点击预览，即可看到，即可看到动态字幕。字幕。做被做被连接的网接的网页另外做一个被另外做一个被连接的网接的网页（手机价格表）。（手机价格表）。建立
12、超接，填建立超接，填URLURL地址地址在主网在主网页右上写右上写“产品价格表品价格表见http:/http:/”,”,选中后，用中后，用右右键点点击选“超超链接属性接属性”，填上，填上URLURL地址（地址（产品价格表所在地址）。品价格表所在地址）。Company Logo第四节第四节 交互网页的制作交互网页的制作 仅有静态的网页是不够的。我们需要通过网页仅有静态的网页是不够的。我们需要通过网页实现网上注册（客户在网页上写入自己的姓名和密实现网上注册（客户在网页上写入自己的姓名和密码）、网上交谈、网上查询（客户在网页上输入自码）、网上交谈、网上查询（客户在网页上输入自己要买的产品名，网站返回
13、该产品名的性能、价格己要买的产品名，网站返回该产品名的性能、价格等）。等）。本节内容：本节内容：一、交互性标记元素一、交互性标记元素 二、二、FORMFORM标记元素标记元素 Company Logo一、交互性标记元素一、交互性标记元素v-人机对话的表单接口界面人机对话的表单接口界面 请提供以下信息，然后单击提交请提供以下信息，然后单击提交 姓名：姓名： 密码：密码：提交提交清除清除人机对话的界面人机对话的界面 Company Logo二、二、FORMFORM标记元素标记元素 -1 -1v用用FORM标记元素在标记元素在HTML页面上实现页面上实现“提交提交”（一部分功能）的（一部分功能）的H
14、TML文档文档 请提供以下信息请提供以下信息,然后单击提交。然后单击提交。姓名：姓名：密码：密码：Company Logo二、二、FORMFORM标记元素标记元素 -2 -2vFORM语句段的结构语句段的结构 FORM METHOD=”POST”(指从客户机将信息发送指从客户机将信息发送到到WEB服务器服务器)ACTION=”URL”(激活处理交互信息的程序激活处理交互信息的程序) Company Logo第五节第五节 ASP ASP（动态服务主页）（动态服务主页）v 用用HTML写的文本是静态的。你可以看写的文本是静态的。你可以看到页面上的内容，但不能在屏幕上输入并传送到页面上的内容，但不能
15、在屏幕上输入并传送数据到数据到Web服务器，更无法进行完整的人机对服务器，更无法进行完整的人机对话。当涉及到页面与数据库的连接问题和从站话。当涉及到页面与数据库的连接问题和从站点返回一个页面给客户的问题时，仅依靠点返回一个页面给客户的问题时，仅依靠HTML文本是做不到的。文本是做不到的。ASP就是为了解决动态就是为了解决动态交互的问题和与数据库连接的问题而设计的。交互的问题和与数据库连接的问题而设计的。v 本节内容：本节内容：v 一、什么是一、什么是ASP？v 二、二、ASP的工作原理的工作原理 v 三、三、ASP脚本编程脚本编程 Company Logo一、什么是一、什么是ASPASP？AS
16、P （Active Server Pages）是微软公司为它的）是微软公司为它的WEB服务器（互联网信息服务器，简称服务器（互联网信息服务器，简称IIS）开发）开发的一个组件（软件）。它是一种实现动态网页开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。技术的服务器端的开发环境。通过通过ASP，我们能够将，我们能够将HTML页面、脚本命令、页面、脚本命令、ASP内置对象和内置对象和Active X组件结合起来，建立动态、组件结合起来，建立动态、交互而又高效的交互而又高效的Web应用程序。应用程序。ASP可利用可利用ADO（Active Data Object）方便地）方
17、便地访问数据库。访问数据库。 Company Logo二、二、ASPASP的工作原理的工作原理 -1 -1vASP文件可以包含以下的几个部分：文件可以包含以下的几个部分：v 1.文本文本 2.HTML标记标记 3.ASP脚本命令等脚本命令等 ASP脚本命令可以包含脚本命令可以包含ASP对象，对象，ActiveX组件和任何脚本语言（如组件和任何脚本语言（如VB脚本语言、脚本语言、JAVA脚本脚本语言等）。语言等）。ASP脚本命令写在脚本命令写在“%”和和“%”两个两个符号之间。符号之间。 ASP文件可以使用文本编辑器（如记事本）文件可以使用文本编辑器（如记事本）进行编辑，也可以用进行编辑，也可以
18、用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手机市场标题手
19、机市场标题/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响应
20、响应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服
21、务器之间的信息交互服务器之间的信息交互v使用使用HTML中的中的FORM（表单）（表单） vASP文件中可使用文件中可使用VBScript作为脚本语言，也作为脚本语言，也可用可用JAVAScript作为脚本语言。作为脚本语言。Company Logo三、三、ASPASP脚本编程脚本编程 -3 -3vASP环境下处理数据实例环境下处理数据实例Tijiao3.htm 请提供以下信息，然后单击提交。请提供以下信息，然后单击提交。姓名：姓名：密码：密码：Company Logo三、三、ASPASP脚本编程脚本编程 -4 -4vASP环境下处理数据实例环境下处理数据实例Fanhui3.asp%=myna
22、me %先生（女士）先生（女士）：我们接受您的申请。：我们接受您的申请。您可以用以下密码查阅我们的资料：您可以用以下密码查阅我们的资料：abcde对不起！您的密码不对。对不起！您的密码不对。Company Logo第六节第六节 Web Web数据库数据库 v 网站运用了数据库技术，就可以实现网页更网站运用了数据库技术，就可以实现网页更新的自动化，即只要将数据库中的内容更新了，新的自动化，即只要将数据库中的内容更新了，网页上的内容也就自动更新了。网页上的内容也就自动更新了。 v本节内容：本节内容：v一、数据库管理信息系统一、数据库管理信息系统v二、二、Web数据库数据库Company Logo一
23、、数据库管理系统一、数据库管理系统v-数据库管理系统的功能数据库管理系统的功能 建立数据库建立数据库 管理数据库管理数据库 实现数据的传送等实现数据的传送等Company Logo二、二、WebWeb数据库数据库 -1 -1-Web-Web数据库系统是指以数据库系统是指以HTMLHTML为代表的为代表的WebWeb页面（即页面（即网页）与位于底层的数据库的集成。网页）与位于底层的数据库的集成。- -数据库管理系统解决数据库管理系统解决WebWeb页面和数据库之间的通页面和数据库之间的通信问题。信问题。 开放式数据库连接器开放式数据库连接器ODBCODBC ODBCODBC是一种编程接口，它能使
24、应用程序是一种编程接口，它能使应用程序访问支持访问支持SQLSQL查询语言的数据库管理系统，实查询语言的数据库管理系统，实现与各种数据库的通信。现与各种数据库的通信。SQLSQL查询语言查询语言Company Logo二、二、WebWeb数据库数据库 -2 -2数据库的应用实例数据库的应用实例现在有一客户在已知新现在有一客户在已知新书代码后希望知道该书书代码后希望知道该书的单价和是否有书。的单价和是否有书。 客户向客户向WEB服务器发出服务器发出HTTP请求请求用户在屏幕上看到的如用户在屏幕上看到的如图所示图所示 欢迎查看新书价格和库存量欢迎查看新书价格和库存量请输入新书代码请输入新书代码确认
25、确认重写重写查询输入屏幕查询输入屏幕Company Logo二、二、WebWeb数据库数据库 -3 -3从浏览器上调用下列从浏览器上调用下列CX-SEND.ASPCX-SEND.ASP程序产生的页面，并输入程序产生的页面，并输入新书代码后提交。新书代码后提交。 欢迎查看新书价格和库存量欢迎查看新书价格和库存量form method=post action= 欢迎查看新书价格和库存量欢迎查看新书价格和库存量 请输入新书代码请输入新书代码 input type=text name=id size=20 =4 input type=submit value= input type=reset val
26、ue= Company Logo二、二、WebWeb数据库数据库 -4 -4Web服务器上的服务器上的ASP软件对此程序进行解释并执行软件对此程序进行解释并执行另外一个名为另外一个名为cx-back.asp的程序。的程序。 欢迎查看新书价格和库存量欢迎查看新书价格和库存量 % 您查询的新书详单您查询的新书详单 新书代码新书代码 新书名称新书名称Company Logo二、二、WebWeb数据库数据库 -6 -6单价（元）单价（元） 库存量库存量 对不起，没有您要查找的书籍数据！对不起
27、，没有您要查找的书籍数据！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查询结果输出屏幕查询结果输出屏幕您查询的新书单价和库存量您查询的新书单价和库存量新书代码新书代码新书名称新书名称单价（元）单价（元）库存量库存量10031003人工智能人工智能程序设计程序设计Company Logo二、二、WebWeb数据库数据库 -9
28、 -9vWeb服务器上的服务器上的ASP软件对程序的解释和执行软件对程序的解释和执行过程过程 取得用户传来的新书代码（见程序第取得用户传来的新书代码（见程序第6行）行） Web页面与数据库页面与数据库Tsxt.mdb相边接（见程序相边接（见程序8-11行）行） 第第8-9行，创建一个行，创建一个Connectcon对象对象 第第10行，是打开连接。行，是打开连接。 第第11行，是创建一个记录集对象。行，是创建一个记录集对象。 用用SQL查询数据库（见第查询数据库（见第1215行）行） 在浏览器上显示出查询结果在浏览器上显示出查询结果 演示演示B4 网上图书销售演示系统（见演示光盘）网上图书销售
29、演示系统（见演示光盘）演示演示B5 工资管理演示系统工资管理演示系统 （见演示光盘）（见演示光盘）Company Logo第四章 Web开发的基本技术 小结WWWHTMLFrontpageWeb开开发发的的基基本本技技术术通过客户机上的通过客户机上的WebWeb浏览器和浏览器和WebWeb站点上站点上的的WebWeb服务器之间的通信来实现。服务器之间的通信来实现。 InternetInternet用户可以通过用户可以通过WebWeb页面来访问数页面来访问数据库中的数据。据库中的数据。 利用利用FrontPageFrontPage这种这种WEBWEB编程工具可编程工具可以做到在几乎不需要编写以做到在几乎不需要编写HTMLHTML代码代码的情况下，完成网页的制作，并自的情况下，完成网页的制作，并自动地生成动地生成HTMLHTML文件。文件。 ASPASP是位于是位于WebWeb服务器端的脚本运行环服务器端的脚本运行环境。通过这种环境，用户可以创建和境。通过这种环境，用户可以创建和运行动态的、交互式的运行动态的、交互式的WebWeb服务器应服务器应用程序，实现动态的交互。用程序，实现动态的交互。 交互网页、交互网页、ASP动态服动态服务网页务网页Web数据库数据库Company Logo
