《【教学课件】第2章商务表达层与静态网页设计技术.ppt》由会员分享,可在线阅读,更多相关《【教学课件】第2章商务表达层与静态网页设计技术.ppt(63页珍藏版)》请在三一办公上搜索。
1、第2章 商务表达层与静态网页设计技术,2.1 商务表达层的功能实现,商务表达层客户端:表现数据特点:界面友好,具有通用性、易用性、灵活性Web服务器:发布信息,与客户端和应用服务端进行交互商务表达层的实现方式,2.1 商务表达层的功能实现,客户端的实现硬件设备瘦客户端、胖客户端胖客户端:基于传统的客户端应用程序;瘦客户端:基于浏览器。静态内容和动态内容静态内容:客户端上显示的内容,预先放置在Web服务器上;动态内容:客户端上显示的内容,预先服务器上没有,是在客户请求发出后,根据请求内容和后台数据库中的数据,通过调用执行一个文件(通常为动态脚本)动态产生的。,2.2 Web系统与HTTP协议,2
2、.2.1 Web系统原理:商业数据被组织到一个超文本文件中,借助Http协议,通过网络来传送,Web浏览器,Web浏览器,Web浏览器,TCP/IPHTTP,Web服务器,CGI、Script程序,数据库,2.2 Web系统与HTTP协议,2.2.1 Web系统Web五大要素URL几种形式域名+目录名+文件名域名+目录名域名含有程序的网址超文本置标语言(HTML)Web服务器Web浏览器超文本传输协议(HTTP),2.2 Web系统与HTTP协议,2.2.2 HTTP协议一个实例:测试HTTP协议,2.2 Web系统与HTTP协议,2.2.2 HTTP协议一个实例:测试HTTP协议(程序代码)
3、,Dim str1 As StringPrivate Sub Close_Click()Winsock1.CloseEnd SubPrivate Sub connect_Click()Winsock1.RemoteHost=“Winsock1.RemotePort=80 Winsock1.Protocol=sckTCPProtocol Winsock1.connectEnd Sub,Private Sub get_Click()If Winsock1.State 7 Then State=0表示winsock处于Close状态 State=1表示winsock处于Open状态 State=2表
4、示winsock处于Listening状态 State=7表示winsock处于Connected状态 State=9表示winsock处于Error状态 MsgBox 还未与Web Server连接号,请等待或重新连接.Exit Sub Else Winsock1.SendData GET/index.html HTTP/1.1+Chr(13)+Chr(10)+Host:+vbCrLf+vbCrLf 发送HTTP的GET命令 End IfEnd Sub,Private Sub head_Click()Winsock1.SendData HEAD/index.html HTTP/1.1+vbC
5、rLf+Host:+vbCrLf+vbCrLfEnd SubPrivate Sub post_Click()Winsock1.SendData POST/index.html HTTP/1.1+vbCrLf+Host:+vbCrLf+Content-Type:text/plain+vbCrLf+Content-Length:7+vbCrLf+vbCrLf+brand=A+vbCrLf+vbCrLfEnd SubPrivate Sub Winsock1_DataArrival(ByVal bytesTotal As Long)Winsock1.GetData str1 Text1.Text=st
6、r1End SubPrivate Sub Winsock1_Error(ByVal Number As Integer,Description As String,ByVal Scode As Long,ByVal Source As String,ByVal HelpFile As String,ByVal HelpContext As Long,CancelDisplay As Boolean)MsgBox Winsock出错!End Sub,2.2.2 HTTP协议象DCOM和IIOP一样,HTTP层通过TCP/IP进行请求/响应通信。一个HTTP的客户端用TCP连接到Web服务器。在H
7、TTP中使用的标准端口号是80,但任何其它端口也能被使用。在建立TCP连接后,客户端可以发送一个请求消息到服务器端。服务器在处理请求后发回一个HTTP响应消息到客户端。请求和响应消息都可以包含任意的传输体的信息,通常用Content-Length和Content-Type的 HTTP 头来标记(详细见RFC1616)。一个合法的HTTP POST请求消息示例:POST/index.html HTTP/1.1Content-Type:text/plainContent-Length:7brand=A 一个合法的HTTP GET请求消息示例:GET/index.html HTTP/1.1,2.2
8、Web系统与HTTP协议,2.2.2 HTTP协议HTTP响应在处理了请求之后,Web服务器将发回一个HTTP响应到客户端。响应中包括一个状态代码,表示请求的结果。返回状态代码200,表示HTTP命令已被Web服务器成功解析;返回状态代码400,表示Web服务器解析HTTP命令失败;返回状态代码30X,表示Web服务器已将HTTP请求转向到另一Web服务器;返回状态代码50X,表示Web服务器不支持此HTTP请求命令;状态代码1XX,为Web服务器保留码示例:,2.2 Web系统与HTTP协议,400 Bad RequestContent-Length:0,200 OKContent-Type
9、:text/plainContent-Length:12dlroW,olleH,307 Temporarily MovedLocation:foobarContent-Length:0,练习:请将测试HTTP命令的VB程序改写成java程序。,2.3 静态页面的表达及其技术,2.3.1 静态页面的体系结构 静态网页的特征 静态网页的内容固定不变;静态网页的制作比较方便;静态网页的体系结构,2.3 静态页面的表达及其技术,2.3.2 置标语言标准通用置标语言SGML(Standard Generalized Markup Language)置标标志语言 SGML,SGML(Standard Ge
10、neralized Markup Language)是最早的标记语言,而且是一种丰富的元语言,几乎可以用来定义无数种标记语言,HTML和XML都是在此基础上派生出来的。SGML是ISO组织在1986年推出的一个用来创建标记语言的元语言标准,它源自IBM在1969年开发的GML。正如其名所言,SGML是一种用标记描述文档资料的通用语言,包含了一系列的文档类型定义(DTD,Document Type Definition),DTD中定义了标记的含义,因而SGML是可以扩充的。SGML为出版业提供了一种将数据内容与显示分离开来的数据表示方法,使得数据独立于机器平台和处理程序,在许多大型出版系统中发挥
11、了重要作用,2.3 静态页面的表达及其技术,2.3.2 置标语言 超文本置标语言HTML 特点平台兼容 文本文件超链接 Web服务器不处理标记,由客户端浏览器解释 丰富的多媒体显示、各种布局处理缺点HTML更多的关注Web浏览器如何在页面上安排文本、图象和按扭等,过多的考虑外观使,缺乏对结构化数据的表示能力;HTML还有一些诸如链路丢失后不能自动纠正、下载的内容太多、搜索不方便、时间长等缺点;HTML中有限的标记不能满足众多Web应用的需要,缺乏可扩展性,2.3 静态页面的表达及其技术,2.3.2 置标语言 超文本标记语言HTML实例(略)样式样式种类:HTML样式、内嵌的CSS样式、外接的C
12、SS样式 实例,无标题文档 浮雕彩色文字 浮雕彩色文字 浮雕彩色文字,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML 前言,XML在SGML的基础上,去除SGML中过于复杂的东西(缺点),保留一些作为元标记语言的东西(优点),用户可以自己定义标记,自己定义的标记可以在DTD或Scheme(模式)中加以描述,并且,与SGML一定需要DTD不同,在XML中DTD可有可无,它的使用完全视使用者需要而定。用户甚至可以通过XML制定自己的标记语言,而不必得到W3C、Microsoft、Netscape的同意,因此XML的应用潜力是很明显的。,2.3 静态页面的表达及其技术,2.
13、3.2 置标语言XML家族,2.3 静态页面的表达及其技术,2.3.2置标语言 扩展标记语言XML XML语法,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 XML声明元素与属性注释处理指令 CDATA区,网页设计 王大名 590 电子商务技术基础 李立洪 120,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 XML声明元素与属性注释处理指令 CDATA区 说明:CDATA区以“!CDATA”为起始,“”为终了。区块内容中唯一不能包含的正是“”这个终止符号。其他内容,只要是合格Unicode字,都可以自由放置其中;
14、XML中要区分大小写,因此“!CDATA”不可写成“!cdata”或“!Cdata”;出现在CDATA区中的内容,解析器在解析时原封不动、一五一十地交给下游的程序;比较:,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 编写XML的几个原则 所有的元素都要配对标记之间不得交叉 所有属性值都得含有引号 大小写有区别 一空二空有区别,在HTML里,存在这类自成一个单元的标记,这在XML中称为空元素(empty element),因为这样的元素不含任何文字内容,只有属性。XML为空元素特别发明了一种新的表示法,如下:若带有属性的话,则写成:,若:电子商务技术基础
15、 无名氏 这就犯了”标记之间不得相交“的大忌,会被删除掉。XML中规定,所有的元素排列必须是严谨的树状结构。在使用DOM、XSLT和XPointer来分别控制、转换、连接XML文件时,都需要随时对文件的内部结构了若指掌。,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 名称空间(namespace)名称空间的规定,并没有收录在XML1.0的标准中,而是透过后来一份单独的标准来增补,这份标准的全名为“Namespaces in XML”;xml1.0的标准:tr/rec-xml;Namespaces in XML:tr/rec-xml-names),2.3
16、静态页面的表达及其技术,为什么需要名称空间?区分各个标记,避免与其它标记混淆,张3,无法区别这两个不同的标记,2.3 静态页面的表达及其技术,为什么需要名称空间?名称空间标记的选用,新祥发.,同仁堂.,2.3 静态页面的表达及其技术,为什么需要名称空间?名称空间标记的选用URL、URN、URI的区别,平时所说的网址,就是URL。其实名称空间中的标记规定的是使用URI,URI全名为Uniform Resource Identifier(统一资源标记码),这是一个Internet 标准,记载于RFC2396;它与URL有何不同呢?基本上,URI比较广义,泛指所有以字符串标示的网络资源,范围涵盖了U
17、RL和URN。URL指的是标有通信协定(如HTTP、FTP、GOPHER)的字符串。URN(Uniform Resource Name)则是用来标示持久、而且有专门机构负责的资源,譬如图书馆的图书总目。,2.3 静态页面的表达及其技术,为什么需要名称空间?名称空间标记的选用URL、URN、URI的区别 名称空间的范围:只作用于自己所在的目录树,新祥发.,2.3 静态页面的表达及其技术,为什么需要名称空间?名称空间标记的选用URL、URN、URI的区别 名称空间的范围:只作用于自己所在的目录树 默认的名称空间 一个实例:含有HTML表单功能的XML文档,连到两只老虎 这样也可以连到 2T,2.3
18、 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 XML数据类型定义 问题的提出,2.3 静态页面的表达及其技术,电子商务技术基础 李立洪,李卫 120 90,电子商务技术基础 李立洪 李卫 120 90,这里究竟如何表示数据?需要定义一套法则来规范它。这套法则叫DTD(Document Type Definition),也就是对XML文件在格式上进行限定。用DTD可以清楚的定义和规范:”作者“这个元素到底是可以出现多次,还是在任何一个”书籍“.中只能出现一次?一个元素能包含哪些属性?父子元素相互依存的关系?各个元素出现的顺序?,2.3 静态页面的表达及其技术,问
19、题的提出DTD定义,网页设计 张凡 590 电子商务技术基础 李立洪 120,Book.dtd文件的内容如下:,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 XML数据类型定义XML数据的表现与样式链接 利用XML语言和DTD文档,可以将数据、文件资料准确完整的表示出来,但缺少显示格式信息(内容与显示分离),XML文档还不能像用户所希望的那样在IE中表现出来。因此除了XML文档之外,还需要有相关的文件提供有关显示和处理XML文档的信息,这种文件就是样式文件(.css,.XSL),或:?xml-stylesheet href=style.xsl type=
20、text/xsl?,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 XML数据类型定义XML数据的表现与样式链接XSL样式文件,XSL是一种用来转换XML文档结构的语言,XSL文档中定义了与XML文档中各个逻辑成分相匹配的模板及匹配转化方式,解析器裾此可将XML源文件转换为带样式信息的可浏览文档,如HTML格式、FO格式、或者其它面向显示方式的XML文档,限于目前浏览器的支持能力,大多数的情况下转化为一个HTML文件进行显示。至于具体的转换过程,可以在服务器端进行,也可以在客户端进行,分别对应着不同的转换模式。在IE5.5中内嵌了一个MSXML3解析器,由
21、它生成的带格式的中间文件会显示在浏览器中。,张三 男 20 李四 女 27,个人档案 姓名 性别 年龄,2.3 静态页面的表达及其技术,2.3.2 置标语言 扩展标记语言XML XML语法 XML数据类型定义XML数据的表现与样式链接 XML应用开发 构造XML标记语言 生成XML文档显示XML文档 操纵XML文档,操纵XML文档可以通过使用DOM或SAX(Simple API for XML)应用编程接口来实现。DOM是W3C为XML文档和HTML文档定制的一个独立于平台和语言的编程接口标准,使得程序和脚本都能以标准的方式存取与更新文档的内容、结构和式样。要查找完整的XML文档对象模型,请访
22、问微软网站。同时,如何你想了解XML DOM以及XSL和ASP的高级用法的例子,请访问onlinedemos.asp;而SAX是XML_Dev邮件列表组推出的一个XML的java应用编程接口标准,Java应用程序可以使用支持SAX的XML解析器来接收解析事件。,2.3 静态页面的表达及其技术,置标语言的特征与演变 置标语言XML XHTML HTML4.0之后为XHTML;什么是XHTMLXHTML最早叫“HTML in XML“。简单的讲,就是把过去以SGML定义的HTML,改用XML来重新定义,所有XHTML的标记都以既有的HTML4.0标记来定义,各元素和属性的名称和用法几乎完全不变。不
23、过因为变成了XML,有些地方必须遵照XHTML的规矩,严格执行,不能再象以前那样随便。XHTML1.0这套标准,1998年8月24日升格为建议标准(proposed recommendation),dtd 几只老虎才够看?一个非常短的段落。,2.3 静态页面的表达及其技术,2.3.3 网页的制作与发布 Web服务器的安装与设置 网页制作与实例 将网页发布到服务器,2.3 静态页面的表达及其技术,Apache服务器的安装与设置:1)Apache服务器简介Apache是开放源代码的Web服务器软件,是最常用的Web服务器。Apache常用在Unix和Linux系统下,也有用于Windows平台下的
24、版本2)Apache服务器的安装下载Apache:http:/nagoya.apache.org/mirror/httpd/binaries/win32/,版本:1.3.x和2.0.x,扩展名:exe或msi 安装Apache:在“Network Domain”里输入域,若服务器的域名为“”,则在这里输入“”;在“Server Name”里输入服务器名,即完整的服务器域名,这里为“”;在“Administrators Email Address”里输入网站管理员的Email地址 3)运行Apache,4)配置Apache,表2-10 Apache的配置文件httpd.conf中的主要选项,2.
25、3 静态页面的表达及其技术,设置虚拟目录:在主配置文件中找到行:,在这行的下面添加如下内容:Alias/vdir/c:/comexe/Options MultiViewsAllowOverride NoneOrder allow,denyAllow from all这样,通过访问 http:/,2.3 静态页面的表达及其技术,网页制作与发布网页设计环境在进行网页制作之前,需要了解相关的技术和外在的条件,估计网页文件的大小、复杂程度、下载时间和访问者的感受,同时也需要设计很好的导航结构,这样才能让人不“迷路”。网页设计应尽可能从用户出发,根据不同的对象,采用不同的技术,考虑用户的具体环境进行网页
26、设计,使之适应不同的浏览器、操作系统和计算机平台,最大限度的吸引用户。,2.3 静态页面的表达及其技术,2.3 静态页面的表达及其技术,网页的制作工具 简单的文档编辑工具主要应用于HTML等纯文本文件的编辑;如Windows下的记事本,DOS下的Editor编辑器等;功能齐全的专用工具可以以图形化的界面完成所见所得的静态网页,包括基本的网页文本、网页外观、超级链接及丰富的多媒体和动画处理工具,此外这些工具还提供了更多的网站开发和管理工具,典型的专用工具有Dreamweaver、Frontpage等;集成开发环境中的Web应用如IBM Websphere集成开发环境中的Web应用工具。利用此We
27、b应用工具可以交互地调试客户端和服务器端的代码,无需编程或较少编程就能构造相关的数据驱动网页,简化开发过程。,2.3 静态页面的表达及其技术,网页制作实例 利用Dreamweaver编写网页:,2.3 静态页面的表达及其技术,将网页发布到服务器 方法:使用专用的文件传送工具,如Cuteftp等;使用集成在如Dreamweaver中的文件发布功能,例 将Dreamweamer中制作的网页上传到远程Apache站点。操作步骤如下:1)用站点菜单下的新建站点功能建立一个新站点,站点属性设置示例如下:本地信息:站点名称为:mysite1 本地根文件夹:d:mysite1 远程信息:访问:本地/网络 远
28、程文件夹:d:program filesapache groupsapachehtdocs 测试服务页:服务器模型:无 2)新建一个HTML页,内容不妨为简单的字符串“mytest mytest”,并存盘为bb1.htm文件;3)在站点窗口中,利用文件上传的功能将文件bb1.htm上传到远程的Apache服务器上;4)打开浏览器进行测试,2.3 静态页面的表达及其技术,例 若远程端安装有Tomcat服务器,将Dreamweamer中制作的网页上传到远程端。操作步骤:1)用站点菜单下的新建站点功能建立一个新站点,设置属性设置示例如下:本地信息:站点名称为:mysite1 本地根文件夹:d:mys
29、ite1 远程信息:访问:本地/网络 远程文件夹:d:program filestomcat4webappsroot 测试服务页:服务器模型:JSP 访问:本地/网络 测试服务器文件夹:D:Program Filestomcat4webappsROOT2)建一个JSP页,内容不妨为表2-11中的内容,并存盘为cc1.jsp文件;3)在站点窗口中,利用文件上传的功能将文件cc1.jsp上传到远程的Tomcat中;4)打开浏览器进行测试,2.3 静态页面的表达及其技术,可测试如下所示的JSP网页:无标题文档Request Method:Servlet Path:Query String:Conte
30、nt Type:Protocol:Path Info:Server Name:Server Port:Remote Host:Remote Addr:Scheme:,作业1,编写一个静态网页,并发布到Apache服务器或Tomcat服务器中。,作业2,利用VB(或其它编程工具)编写一个程序,与Web服务器进行交互,验证Http协议的正确性。注:使用winsock或wininet控件编程都可以,附:Internet客户机与服务器交互的模式,执行的顺序:(Client在connect时,Server必须处于listen状态),ConnectionRequest,实例(VB):,服务器端,客户端,注
31、:,Winsock.RemoteHost=“string”,string可为形式,也可为Winsock.RemoteHostIP属性为只读,且在connection连通之后才有效,它为对方的Remotehost值Winsock.Localhostname与Winsock.LocalIP属性也为只读,分别为本地的主机名与本地IP地址Winsock.State指示状态,分别为:sckClosed 0 Closed(default)sckOpen 1 Open sckListening 2 Listening sckConnected 7 Connected sckError 9 Error Win
32、sock.close()方法为关闭连接,对方收到通知后也会产生一个Winsock.close事件。,附:与apache服务器的交互,Dim str1 As StringPrivate Sub Command1_Click()Winsock1.RemoteHost=192.168.10.1Winsock1.RemotePort=80Winsock1.ConnectEnd SubPrivate Sub Command2_Click()Winsock1.SendData GET/aa.html HTTP/1.1+vbCrLf+HOST:192.168.10.1+vbCrLf+vbCrLfEnd SubPrivate Sub Command3_Click()Winsock1.CloseEnd SubPrivate Sub Winsock1_DataArrival(ByVal bytesTotal As Long)Winsock1.GetData str1Text2.Text=str1End Sub,作业2,利用ASP脚本通过DOM机制存取XML文件,Any Questions orComments?,