ctÜàFWeb开发的基本技术Web开发的基本技术背景——以电子商务应用为例电子商务系统网络构成电子商务系统由三个部分构成,即企业内部网Intranet、企业外部网Extranet和Internet三个部分。这三个部分构成了以企业的分布式计算为核心的信息系统的集合体,如图所示:企业电子商务系统框架结构供应链管理供应商供应商客户客户电子交易电子交易客户关系管理业务协作、商业智能、知识管理业务集成商业基础服务:安全身份认证、电子支付、电话黄页服务/目录商业基础服务:安全身份认证、电子支付、电话黄页服务/目录信息分送基础设施:电子资料交换、电子邮件、www信息分送基础设施:电子资料交换、电子邮件、www网络的基础设施:远程通信网、有线电视网、无线通信网、因特网网络的基础设施:远程通信网、有线电视网、无线通信网、因特网公共政策和法律环境公共政策和法律环境安全/网络协议/技术标准安全/网络协议/技术标准电子交易电子交易企业资源计划内容提要1WWW(WorldWideWeb)2HTML3Frontpage4交互网页的制作5ASP(动态服务主页)6Web数据库Internet地址Internet提供的服务www服务网页和超文本1WWW(WorldWideWeb)1WWW————InternetInternet地址地址Internet地址唯一地确定Internet上每台计算机与每个用户的位置。对用户来说,Internet地址有两种表示形式:1.IP地址计算机接入Internet后,会获得一个IP地址.分前后二部分,前面部分叫网络号,后面部分叫主机号。如:218.197.35.312.域名用一个文字来表示IP地址。如:www.jhun.edu.cn1WWW————InternetInternet提供的服务提供的服务1.电子邮件即E-maill服务。2.文件传输服务即FTP服务:filetransferprotocol3.www服务(WorldWideWeb)4.新闻公告类服务提供针对某问题展开讨论的服务,如BBS(电子公告牌)、网络新闻组等。1WWW————wwwwww服务服务-1万维网上不仅可以看到文字、图片,而且可以带声音、带动画。www服务是通过客户机上的Web浏览器和Web站点上的Web服务器之间的通信来实现的。Web服务器的工作原理1WWW————wwwwww服务服务-21.超文本在www系统中,信息是按超文本方式组织的。超文本方式是实现www的关键技术。2.HTML语言(HyperTextMarkupLanguage)超文本标记语言,存放在WEB服务器上。3.http协议(HyperTextTransferProtocol)超文本传输协议,www服务是通过执行http协议进行传输的。4.www浏览器通过它可以去找到并浏览Internet上各种WWW服务器上的主页。5.搜索引擎搜索引擎是Internet上的一种www服务器,它能在Internet中主动搜索其他www服务器中的信息并对其索引,将索引内容存储在大型数据库中,供用户查询。1WWW————网页和超文本网页和超文本2HTML2HTML(HyperTextMarkupLanguage)用HTML做简单的网页HTML文档的一般结构常用的HTML标记元素在网页中插入图片用HTML定义表格HTML:用来创建超文本文档的简单标记语言,这些文档可以从一个操作平台移动到另一个操作平台。HTML文件是简单的ASCII文本文件,其中嵌入的代码(由标记表示)表示格式和超文本链接。2HTML2HTML(HyperTextMarkupLanguage)超文本文件•双标记方式(用标记名……和/标记名一对标记元素来标记的方式)例:FONTSIZE=6FACE=“宋体”网络营销/FONT标记名标记元素的属性要显示的文本内容标记元素开始标记元素的属性标记元素结束2HTML2HTML————用用HTMLHTML做简单的网页做简单的网页•单标记方式(只单独用标记名……一个标记来标记的方式)例:HRSIZE=2ALIGN=LEFTWIDTH=200例1.htmlheadtitle网上手机市场/title/headbodyp你想要买手机吗?/Pp你可以访问ahref=。/body/html2HTML2HTML————HTMLHTML文档的一般结构文档的一般结构2HTML2HTML————常用的常用的HTMLHTML标记元素标记元素-1标记元素开始标记元素结束标记元素的功能!注释内容!注释标记A/A锚元素,定义超文本链接点ADDRESS/ADDRESS地址信息起止B/B字体颜色加深BASE基锚,说明链接的基地址BLINK/BLINK字体闪烁BLOCKQUOTE/BLOCKQUOTE块引用BODY/BODY超文本正文主体的起止BR回车换行CAPTION/CAPTION标题,多用于表格CENTER/CENTER元素间的内容居中CITE/CITE表明其间的内容是引文或例证CODE/CODE代码2HTML2HTML————常用的常用的HTMLHTML标记元素标记元素-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字体为斜体2HTML2HTML————常用的常用的HTMLHTML标记元素标记元素-3标记元素开始标记元素结束标记元素的功能IMG/IMG插入图形图像文件INPUT输入信息元素LI清单条目,多用于目录列表LIST/LIST显示文本内容,但不执行标记命令MARQUEE/MARQUEE字符移动方式控制META资料说明NEXTID下一个标识OL/OL用序号显示一级标题P/P段落的起止,也可以加空行PRE/PRE按原文格式S/S中划线SMALL/SMALL用小号字表示STRONG/STRONG字体颜色加重2HTML2HTML————常用的常用的HTMLHTML标记元素标记元素-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,仅字体略小例2:HTMLHEADTITLE登鹳雀楼/TITLE/HEADBODYCENTERH1登鹳雀楼/H1FONTFACE=楷体_GB2312SIZE=3COLOR=red白日依山尽,BR黄河入海流。BR欲穷千里目,BR更上一层楼。/FONT/CENTER/BODY/HTML例3HTMLHEADTITLE列表/TITLE/HEADBODYP这是一个有序列表:/POL国际互联网提供的服务有:LIWWW服务LI文件传输服务LI电子邮件服务LI远程登录服务LI其它服务/OL/BODY/HTML例4.如果想在方才显示的屏幕上增加一个名为gxkj.gif的图形,只要在上述HTML文档中增加:〈IMGSRC=“gxkj.gif”width=“20”height=“15”〉2HTML2HTML————在网页中插入图片在网页中插入图片你想买手机吗?你可以访问手机网站了解有关信息图片插入图片2HTML2HTML————用用HTMLHTML定义表格定义表格-1浏览器上显示的表格例5.在网页中显示如下图所示表格:2HTML2HTML————用用HTMLHTML定义表格定义表格-2HTMLBODYtableborder=1width=80%cellspacing=0caption表格名称/captiontralign=centerthwidth=30%第一标题列/ththwidth=30%第二标题列/tdthwidth=40%第三标题列/td/trtrtd /tdtd /tdtd /td/tr/table/BODY/HTML3FrontPage使用微软公司的FrontPageWEB编程工具可以做到在几乎不需要编写HTML代码的情况下,完成网页的制作,同时自动地生成HTML文件。本节内容:用FrontPage制作页面-主页面3FrontPage——用用FrontPageFrontPage制作页面制作页面-1网上手机商场产品价格表见,欢迎选购动态字幕图片-被连接的页面产品价格表产品号产品型号生产厂家价格3FrontPage——用用FrontPageFrontPage制作页面制作页面-2用FrontPage作上述网页的步骤:操作目的操作步骤定义主网页新建——网页——普通网页——确定网页名字并存储网页分区点击“插入表格”按钮,做出2×2表格,并把表格实线变为虚线(办法是在表格上点击右键选属性后,将各数均改为0)。输入网页标题文字方法类同用WORD写字,在左上格写上“网上手机商场”几个字。插入照片点击选图片钮——用右键点图片——点击图片属性——外观尺寸(修改其大小)。做动态字幕在右下格写“正按八折销售,欢迎选购”字样,选中后——插入——组件——字幕——字幕属性——样式——格式——字体。点击预览,即可看到动态字幕。做被连接的网页另外做一个被连接的网页(手机价格表)。建立超接,填URL地址在主网页右上写“产品价格表见”,选中后,用右键点击选“超链接属性”,填上URL地址(产品价格表所在地址)。3FrontPage——用用FrontPageFrontPage制作页面制作页面-34交互网页的制作仅有静态的网页是不够的。我们需要通过网页实现网上注册(客户在网页上写入自己的姓名和密码)、网上交谈、网上查询(客户在网页上输入自己要买的产品名,网站返回该产品名的性能、价格等)。本节内容:一、交互性标记元素二、FORM标记元素4交互网页的制作——交互性标记元素交互性标记元素-人机对话的表单接口界面请提供以下信息,然后单击提交姓名:密码:提交清除人机对话的界面4交互网页的制作——FORMFORM标记元素标记元素-1例6、用FORM标记元素在HTML页面上实现“提交”(一部分功能)的HTML文档formmethod=”postaction=”fanhui3.asp”p请提供以下信息,然后单击提交。p姓名:inputname=”myname”type=textsize=”36”p密码:inputname=”passwordtype=passwordsize=”36”pinputtyp