内蒙科大管理信息系统课件04 Web开发的基本技术

第四章Web开发的基本技术第一节（WorldWideWeb）第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP（动态服务主页）第六节Web数据库本节内容一、Internet地址二、Internet提供的服务三、服务四、网页和超文本第一节（WorldWideWeb）•背景——以电子商务应用为例客户商家网上营销应用软件WEB服务器ASP文件形式、HTML文件形式一、Internet服务Internet地址唯一地确定Internet上每台计算机与每个用户的位置。对用户来说，Internet地址有两种表示形式：1.IP地址IP地址分前后二部分，前面部分叫网络号，后面部分叫主机号。2.域名用一个文字IP地址来表示。二、Internet提供的服务1.电子邮件即E-maill服务。2.文件传输服务即FTP服务：filetransferprotocol3.服务（WorldWideWeb）4.新闻公告类服务提供针对某问题展开讨论的服务，如BBS（电子公告牌）、网络新闻组等。三、万维网上不仅可以看到文字、图片，而且可以带声音、带动画。服务器之间的通信来实现的。HTML文件Web浏览器（软件）客户机Internet上的Web服务器Internet上的Web服务器访问链接的信息链接http协议用户Web服务器的工作原理三、系统中，信息是按超文本方式组织的。超文本方式是实现的关键技术。2.HTML语言（HyrerTextMarkupLanguage）超文本标记语言，存放在WEB服务器上。3.http协议（HyperTextTransferProtocol）超文本传输协议，协议进行传输的。4.服务器上的主页。5.搜索引擎搜索引擎是Internet上的一种服务器，它能在Internet中主动搜索其他服务器中的信息并对其索引，将索引内容存储在大型数据库中，供用户查询。四、网页和超文本第二节HTML本节内容一、用HTML做简单的网页二、HTML文档的一般结构三、常用的HTML标记元素四、在网页中插入图片五、用HTML定义表格超文本文件——ASCII格式•双标记方式一、用HTML做简单的网页FONTSIZE=6FACE=“宋体”网络营销/FONT标记元素开始标记元素的属性标记元素结束标记名标记元素的属性要显示的文本内容•单标记方式HRSIZE=2ALIGN=LEFTWIDTH=200htmlheadtitle网上手机市场/title/headbodyp你想要买手机吗?/Pp你可以访问ahref=“”手机网站/a了解有关信息。/body/html二、HTML文档的一般结构三、常用的HTML标记元素-1标记元素开始标记元素结束标记元素的功能!注释内容!注释标记A/A锚元素，定义超文本链接点ADDRESS/ADDRESS地址信息起止B/B字体颜色加深BASE基锚，说明链接的基地址BLINK/BLINK字体闪烁BLOCKQUOTE/BLOCKQUOTE块引用BODY/BODY超文本正文主体的起止BR回车换行CAPTION/CAPTION标题，多用于表格CENTER/CENTER元素间的内容居中CITE/CITE表明其间的内容是引文或例证CODE/CODE代码三、常用的HTML标记元素-2标记元素开始标记元素结束标记元素的功能DD文字缩格DL线缩格或不显示LI的标题符号DT回车换行，但不缩格EM/EM强调，斜体且颜色加重FONT/FONT变化字体大小和颜色HEAD/HEAD交互项元素的起止FRAME/FRAME展示页的版面分割HEAD/HEAD超文本文件头的起止HEADER/HEADER与head和/head等价HR画水平间隔线Hn/Hn定义标题字体大小，n值为1-6HTML/HTML超文本文的开始和结束I/I字体为斜体三、常用的HTML标记元素-3标记元素开始标记元素结束标记元素的功能IMG/IMG插入图形图像文件INPUT输入信息元素LI清单条目，多用于目录列表LIST/LIST显示文本内容，但不执行标记命令MARQUEE/MARQUEE字符移动方式控制META资料说明NEXTID下一个标识OL/OL用序号显示一级标题P/P段落的起止，也可以加空行PRE/PRE按原文格式S/S中划线SMALL/SMALL用小号字表示STRONG/STRONG字体颜色加重三、常用的HTML标记元素-4标记元素开始标记元素结束标记元素的功能SUB/SUB下角标SUP/SUP上角标TABLE/TABLE表格的起止，图文混排时也使用TD/TD表格中一栏内容的起止TEXTAREA/TEXTAREA用文本区输入信息TH/TH表头的起止TITLE/TITLE超文本标题的起止TR/TR表中一行的起止TT/TT固定宽度U/U下划线UL/UL同一级标题的限定，无序号VAR/VAR变量XMP/XMP功能同LIST，仅字体略小如果想在方才显示的屏幕上增加一个名为gxkj.gif的图形，只要在上述HTML文档中增加：〈IMGSRC=“gxkj.gif”widfh“20”height“15”〉四、在网页中插入图片你想买手机吗？你可以访问手机网站了解有关信息图片插入图片五、用HTML定义表格-1第一标题列第二标题列第三标题列浏览器上显示的表格表格名称五、用HTML定义表格-2可以显示上页图中所示表格的HTML文本：HTMLBODYtableborder=1width=80%cellspacing=0caption表格名称/captiontralign=centertdwidth=30%第一标题列/thtdwidth=30%第二标题列/tdtdwidth=40%第三标题列/td/trtrtd/tdtd/tdtd/td/tr/table/BODY/HTML第三节FrontPage使用微软公司的FrontPageWEB编程工具可以做到在几乎不需要编写HTML代码的情况下，完成网页的制作，同时自动地生成HTML文件。本节内容：用FrontPage制作页面-主页面用FrontPage制作页面-1网上手机商场产品价格表见正按八折销售,欢迎选购动态字幕后-被连接的页面用FrontPage制作页面-2产品价格表产品号产品型号生产厂家价格用FrontPage制作页面-3用FrontPage作上述网页的步骤操作目的操作步骤定义主网页新建——网页——普通网页——确定网页名字并存储网页分区点击“插入表格”按钮，做出2×2表格，并把表格实线变为虚线（办法是在表格上点击右键选属性后，将各数均改为0）。输入网页标题文字方法类同用WORD写字，在左上格写上“网上手机商场”几个字。插入照片点击选图片钮——用右键点图片——点击图片属性——外观尺寸（修改其大小）。做动态字幕在右下格写“正按八折销售,欢迎选购”字样，选中后——插入——组件——字幕——字幕属性——样式——格式——字体。点击预览，即可看到动态字幕。做被连接的网页另外做一个被连接的网页（手机价格表）。建立超接，填URL地址在主网页右上写“产品价格表见”,选中后，用右键点击选“超链接属性”，填上URL地址（产品价格表所在地址）。第四节交互网页的制作仅有静态的网页是不够的。我们需要通过网页实现网上注册（客户在网页上写入自己的姓名和密码）、网上交谈、网上查询（客户在网页上输入自己要买的产品名，网站返回该产品名的性能、价格等）。本节内容：一、交互性标记元素二、FORM标记元素一、交互性标记元素-人机对话的表单接口界面请提供以下信息，然后单击提交姓名：密码：提交清除人机对话的界面二、FORM标记元素-1用FORM标记元素在HTML页面上实现“提交”（一部分功能）的HTML文档formmethod=”postaction=”fanhui3.asp”p请提供以下信息,然后单击提交。p姓名：inputname=”myname”size=”36”p密码：inputname=”passwordtype=passwordsize=”36”pinputtype=submitvalue=”提交”inputtype=resetvalue=”清除”/form二、FORM标记元素-2FORM语句段的结构FORMMETHOD=”POST”(指从客户机将信息发送到WEB服务器)ACTION=”URL”(激活处理交互信息的程序)INPUTTYPE=…NAME=…VALUE=…/FORM第五节ASP（动态服务主页）用HTML写的文本是静态的。你可以看到页面上的内容，但不能在屏幕上输入并传送数据到Web服务器，更无法进行完整的人机对话。当涉及到页面与数据库的连接问题和从站点返回一个页面给客户的问题时，仅依靠HTML文本是做不到的。ASP就是为了解决动态交互的问题和与数据库连接的问题而设计的。本节内容：一、什么是ASP？二、ASP的工作原理三、ASP脚本编程一、什么是ASP？–ASP（ActiveServerPages）是微软公司为它的WEB服务器（互联网信息服务器，简称IIS）开发的一个组件（软件）。它是一种实现动态网页开发技术的服务器端的开发环境。–通过ASP，我们能够将HTML页面、脚本命令、ASP内置对象和ActiveX组件结合起来，建立动态、交互而又高效的Web应用程序。–ASP可利用ADO（ActiveDataObject）方便地访问数据库。二、ASP的工作原理-1ASP文件可以包含以下的几个部分：1.文本2.HTML标记3.ASP脚本命令等ASP脚本命令可以包含ASP对象，ActiveX组件和任何脚本语言（如VB脚本语言、JAVA脚本语言等）。ASP脚本命令写在“〈%”和“%〉”两个符号之间。ASP文件可以使用文本编辑器（如记事本）进行编辑，也可以用WEB编程工具FrontPage来做。二、ASP的工作原理-2ASP文件实例：VB-SCR-EXM.ASP〈html〉〈head〉〈title〉手机市场标题〈/title〉〈/head〉〈body〉〈%fori=3to7%〉〈Fontsize=〈%=i%〉〉这里是手机市场！〈BR〉〈%next%〉〈/body〉〈/html〉二、ASP的工作原理-3ASP文件实例：VB-SCR-EXM.ASP（去掉%和%）〈html〉〈head〉〈title〉手机市场标题〈/title〉〈/head〉〈body〉fori=3to7〈Fontsize=i〉这里是手机市场！〈BR〉next〈/body〉〈/html〉二、ASP的工作原理-4–浏览结果这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！这里是手机市场！浏览屏幕二、ASP的工作原理-5-ASP文件的运行过程浏览器http请求http响应Web服务器ASPASP的工作过程三、ASP脚本编程-1-ASP脚本命令包含内容脚本语言——可用VBScript写ASP内置对象——Rehuest就是一个内置对象ActiveX组件——ASP支持的Act