商务表达层与静态网页设计技术.ppt

《商务表达层与静态网页设计技术.ppt》由会员分享，可在线阅读，更多相关《商务表达层与静态网页设计技术.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：，版本：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.3 静态页面的表达及其技术,设置虚拟目录：在主配置文件中找到行：，在这行的下面添加如下内容：Alias/

25、vdir/c:/comexe/Options MultiViewsAllowOverride NoneOrder allow,denyAllow from all这样，通过访问 http:/,2.3 静态页面的表达及其技术,网页制作与发布网页设计环境在进行网页制作之前,需要了解相关的技术和外在的条件,估计网页文件的大小、复杂程度、下载时间和访问者的感受，同时也需要设计很好的导航结构，这样才能让人不“迷路”。网页设计应尽可能从用户出发，根据不同的对象，采用不同的技术，考虑用户的具体环境进行网页设计，使之适应不同的浏览器、操作系统和计算机平台，最大限度的吸引用户。,2.3 静态页面的表达及其技术,

26、2.3 静态页面的表达及其技术,网页的制作工具 简单的文档编辑工具主要应用于HTML等纯文本文件的编辑；如Windows下的记事本，DOS下的Editor编辑器等；功能齐全的专用工具可以以图形化的界面完成所见所得的静态网页，包括基本的网页文本、网页外观、超级链接及丰富的多媒体和动画处理工具，此外这些工具还提供了更多的网站开发和管理工具，典型的专用工具有Dreamweaver、Frontpage等；集成开发环境中的Web应用如IBM Websphere集成开发环境中的Web应用工具。利用此Web应用工具可以交互地调试客户端和服务器端的代码，无需编程或较少编程就能构造相关的数据驱动网页，简化开发过

27、程。,2.3 静态页面的表达及其技术,网页制作实例 利用Dreamweaver编写网页：,2.3 静态页面的表达及其技术,将网页发布到服务器 方法：使用专用的文件传送工具，如Cuteftp等；使用集成在如Dreamweaver中的文件发布功能,例 将Dreamweamer中制作的网页上传到远程Apache站点。操作步骤如下：1）用站点菜单下的新建站点功能建立一个新站点，站点属性设置示例如下：本地信息：站点名称为：mysite1 本地根文件夹：d:mysite1 远程信息：访问：本地/网络 远程文件夹：d:program filesapache groupsapachehtdocs 测试服务页：

28、服务器模型：无 2）新建一个HTML页，内容不妨为简单的字符串“mytest mytest”,并存盘为bb1.htm文件；3）在站点窗口中，利用文件上传的功能将文件bb1.htm上传到远程的Apache服务器上；4）打开浏览器进行测试,2.3 静态页面的表达及其技术,例 若远程端安装有Tomcat服务器，将Dreamweamer中制作的网页上传到远程端。操作步骤：1）用站点菜单下的新建站点功能建立一个新站点，设置属性设置示例如下：本地信息：站点名称为：mysite1 本地根文件夹：d:mysite1 远程信息：访问：本地/网络 远程文件夹：d:program filestomcat4webap

29、psroot 测试服务页：服务器模型：JSP 访问：本地/网络 测试服务器文件夹：D:Program Filestomcat4webappsROOT2）建一个JSP页，内容不妨为表2-11中的内容,并存盘为cc1.jsp文件；3）在站点窗口中，利用文件上传的功能将文件cc1.jsp上传到远程的Tomcat中；4）打开浏览器进行测试,2.3 静态页面的表达及其技术,可测试如下所示的JSP网页：无标题文档Request Method:Servlet Path:Query String:Content Type:Protocol:Path Info:Server Name:Server Port:R

30、emote Host:Remote Addr:Scheme:,作业1,编写一个静态网页，并发布到Apache服务器或Tomcat服务器中。,作业2,利用VB(或其它编程工具）编写一个程序,与Web服务器进行交互，验证Http协议的正确性。注：使用winsock或wininet控件编程都可以,附：Internet客户机与服务器交互的模式,执行的顺序：(Client在connect时，Server必须处于listen状态),ConnectionRequest,实例（VB）：,服务器端,客户端,注：,Winsock.RemoteHost=“string”，string可为形式，也可为Winsock.

31、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 Winsock.close()方法为关闭连接，对方收到通知后也会产生一个Winsock.close事件。,附：

32、与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?,