Presentation is loading. Please wait.

Presentation is loading. Please wait.

第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。

Similar presentations


Presentation on theme: "第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。"— Presentation transcript:

1 第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。

2 8.1 HTML语言简介 HTML简介 HTML(HyperText Markup Language,超文本链接标记语言)是一种计算机程序语言,专门设计用来编写Web网页。 1991年,CERN开发WWW时,由IETF(Internet Engineering Task Force)所属的HTML─MG工作小组负责制定HTML的标准,当时CERN所使用的HTML1.0版,所提供的指令只能标出一般普通文件格式,例如标题、段落、字体大小、表格和图形。

3 1994年初,Dan Conneely也提出了另一份HTML建议书,就是后来的HTML 2
1994年初,Dan Conneely也提出了另一份HTML建议书,就是后来的HTML 2.0版。它能够描述一些非常重要的结构,例如Form表格文件。此时的HTML可以提供给浏览者与服务器主机一个双向沟通的界面,称为CGI。通过此界面程序,浏览者可以在网页上直接输人资料和选择键,使得浏览者与WWW的服务器主机之间能够立即在网上互相回应。

4 在1994年10月,由MITLCS(Massachusetts Institute of Technology’s Laboratory for Computer Science,美国麻省理工学院计算机科学实验室)成立了W3C(World Wide Web Consortium,全球信息网协会)。到了1995年4月,INRIA(France’s National Institute for Research in Computer Science and Control,法国国家计算机科学与控制研究中心)与此协会建立合作关系,成为W3C在欧洲的分会。由于网络是全球性的且无国籍之分,所以W3C迅速地扩展至亚洲地区。1996年8月,日本的Keio大学成为W3C第三个分会。

5 W3C的主要任务是领导WWW的发展,时时注意网络的现状与社会发展。国际互联网是全球性的科技,不分国家与地区,所以必须有统一的网络沟通语言。此外,W3C也同IETF一样必须研究发展网络科技及网络沟通语言,还要审核测试各界对HTML所提的建议书以更新HTML版本、功能、内容。截止1997年12月,包括商业性会员和学术性会员,W3C已有超过220个全球会员,其中包含软硬件计算机制造商、电信服务商、私人公司以及政府和科研单位。

6 到了1997年下半年,W3C又公开了HTML 4. 0的草稿,供社会各界人士测试。于1997年12月8日,W3C正式通过了HTML4
到了1997年下半年,W3C又公开了HTML 4. 0的草稿,供社会各界人士测试。于1997年12月8日,W3C正式通过了HTML4.0版。HTML4.0不同于HTML3.2或早先的HTML+之处在于 HTML 4. 0支持更多的多媒体项目,也让 Table(图表)和 Forms(表格)的运用更加灵活,同时也更趋于国际化管理。

7 1997年3月W3C首次公开XML(Extensible Markup Language,另一种扩展性的标记语言)的草稿,供全球各界讨论。同年6月及12月初,W3C更新XML草稿并将之发表在Internet网上。 XML设计目标主要有下列几点: (1)直接应用在Internet网上; (2)广泛支持各种多媒体应用程序; (3)程序语法必须更简单易懂; (4)XML的文件必须人性化、合理、清楚 明白; (5)WL必须容易设计、不复杂;

8 (l)XML可以由网站设计者自行定义标记用法; (2)网页文件的组织结构可以任意弹性变化;
在HTML里,图形、声音必须用其他软件制作,再用HTML的标记编排在网页的原始文件里,然后浏览器才能编译解读这些原始文件,并在屏幕上展示其效果。XML事实上和Java语言一样,把文字和图形、声音同时用程序语言来描述,但XML不同于Java的是,XML更简明易懂,没有深奥的程序语法,而且不必再转换编译程序格式,而直接可以在浏览器上观看结果,所以。 XML和HTML不同之处在于: (l)XML可以由网站设计者自行定义标记用法; (2)网页文件的组织结构可以任意弹性变化; (3)任何XML文件都可以自由选择任一种应用程序来表现其网页结构与确认性。

9 8.1.2 HTML基本框架 HTML文件主要包括两个方面: 1. 文件的内容; 2. 对文件的格式、特性进行描述的HTML标记。
HTML文件是用ASCII代码写成的,可以保存为最简单的TXT文本文件,这样用任何一个文字处理软件都可以编写,这也是它能够迅速普及,并十分受欢迎的一个原因。当然,使用一些专门软件编写的效率会更高,效果也会更好。

10 <标记名>文件内容</标记名> 但也有单独使用的,如:<BR> 三、几个基本标记的解释
一、用HTML编写的一个例子 二、HTML的书写格式 大多数HTML的书写格式如下: <标记名>文件内容</标记名> 但也有单独使用的,如:<BR> 三、几个基本标记的解释 1. <HTML>……</HTML> 2. <HEAD>……</ HEAD> 3. <TITLE>……</ TITLE> 4. <BODY>……</BODY> 5. <Hn>……</Hn> 6. <PRE>……</PRE> 7. <P>……</P> 8. <BR>

11 8.1.3 网页生成信息 在HTML中有一个很特别的标记——<META>,当阅读一些他人制作的网页或使用一些制作网页的工具来自动生成网页时,可能网页中会带有该标记。<META>所带的信息并不在浏览网页中显示出来,它所附带的信息是提供给发送该网页的服务器系统或接收该网页的浏览器软件所用的。

12 一、指示浏览器所用的字符集 二、指定网页的说明和关键字清单 三、确定网页评估
<meta http-equiv=“content-Type” content=“text/html;charset=gb_ > 二、指定网页的说明和关键字清单 由于<META>标记是Web服务器和浏览器的说明性标记,而不是为浏览网页的人提供的,故可以用两个标记为访问站点的Web搜索工具提供说明和关键字。 < METANAME=“description” CONTENT=“This Is a description of the page> <META NAM E=“keywords” CONTENT=“keywords1,keywods2,keywords3”> 三、确定网页评估 对不同的站点进行评估,设立不同的等级(用不同的数字表示),然后在网页的<META>标记中放上一定的参数,通过这样的参数来判别该网页适合什么样的人浏览。

13 8.1.4 DHTML简介 DHTML(Dynamic HyperText Markup Language,动态超文本标记语言)是Microsoft和原Netscape公司的共同开发并经W3C(World Wide Web Consortium)认可的动态网页程序语言。 DHTML在继续保持以往HTML程序跨平台的特性之外,更加强了许多格式化以及动态效果的指令,最主要是能够减少网页的下载时间和增强网页与用户之间的互动效果。

14 动态HTML是操纵HTML文档中HTML标记和元素行为的一个应用程序接口,文档中的元素会按程序的安排做任何事情。
动态DHTML的文档内容的展示方式是动态的,这是它与基本HTML内容的最主要的区别。

15 CSS(Cascading Style Sheet,多重网页样式)Object Model允许创建一个动态改变文档外观的风格单规则,动态HTML接纳该规则,并推出一个动态改变HTML文档外观的机制。
对于 HTML 3.0来说,新的动态 HTML程序除了继续保持以往 HTML 3.0以前的格式外,主要增加了两大功能: 1. 动态对象的效果: 2. CSS:

16 1. 动态对象的效果: 让网页内包含的对象能够具有动态的特殊效果,这些对象包括文字。图形、网页大纲等等。例如:当用户下载一个具有动态HTML对象的网页时,他可以看到网页标题题文字从窗口的右方缓缓移入,或是一个图片在窗口内转了几圈后才停留在某一角落,而这些特效在以往都必须利用Java程序或是ActiveX控件才能完成。 2. CSS: CSS是W3C新公开的HTML格式之一,最主要的目的是让网页作者能够更有效地定义所设计的网页样式,使网页作者可以一次制定多份网页文件的版面配置。

17 8.2 Web页面设计 8.2.1网页设计的原则 制作网页的目的是要让尽可能多的人来浏览,但很多因素是网页制作人无法控制的,这包括浏览者的行为、浏览内容的显示、链入Web的链接等。网页制作者不能控制浏览者的访问和访问信息的方式,他们可能从Web的”首页”进人,也可能利用URL从任何点链人。而最理想的情况是能够引导浏览者从首页进人,由你作为浏览的向导,沿着你设计好的路线行进。

18 网页浏览者在进行浏览时所使用的浏览器可能是多种多样的,由于新的浏览器的大量涌现,必然会提供更多和不同的功能,而且所使用的网页制作标准可能不完全一样,这样就使得网页浏览者浏览时显示的效果大不一样。这样制作网页时要充分考虑到这种情况,最好在制作完成后能够使用不同的浏览器及不同的版本进行测试,以求能够达到尽量好的显示效果。 网页制作完成,可能会链接到网络上其他网页制作者所不能控制的资源上,而这些资源经常由于这种或那种原因的变动而出现问题,从而导致链接不再有效,浏览者得不到原来他们想得到的效果,因此将降低用户浏览其网页的价值,影响其声誉。

19 在网页设计过程中应记住以下的原则和目标:
1. 符合用户的需求。网页不是为了满足设计人员的个人喜好(除非是纯粹的为了展示自己的所谓”个人主页”),也不是为了实现者的方便或规划人员的一时念头而做的,网页的设计是为读者服务的,满足用户的需求是最优先的考虑。 2. 有效地使用资源。在设计和实现一个网页时,选择那些以空间、访问时间、图表和长期维护最小代价来达到的用户需求的功能。也就是说,网页功能的目标是高效地操作,方便的使用,轻松的维护。

20 3. 生成一个一致的、令人愉快的、有效的网页外观和感观。网页设计的目标应该是给用户一个有关它的页面的印象,这些网页反映了一种共同结构和一致的视觉线索。网页的每一个页面应该给用户有关网页本身和页面竭力的暗示。网页整体的外表应该帮助用户通过界面达到他或她的目标,这个界面在对符合美学的外观以及简单性与完整性的追求中求得平衡。 4. 在制作网页之前,应该明确制作的目的、需完成的任务,以及要达到的要求。应尽可能地收集素材,并将这些内容做成书面材料,以免制作时遗漏某些材料。

21 5. 网页设计要有自己的风格,通常应伴有一定的标志。对网页的布局要事先考虑什么位置安排什么内容,如何建立链接关系。要将所有的设计内容绘制成流程图,以供制作时参考。
6. 网页的页面不必太花哨,上面的图片不宜太多,每一幅图的尺寸也不应太大,以免使浏览网页时花费太多的时间。网页的制作要考虑浏览时的不同情况,如显示时的颜色、显示的分辨率、HTML标准、浏览器种类及版本等。尽量的使其通用,或者最好有一些提示信息,以免影响浏览效果。

22 8.2.2网页设计的方法 一、可以利用HTML语言所定义的标记及其属性来直接编写网页。打开任何一种文字处理软件,在其中写人HTML的各种标记及它的属性参数,然后以最简单的文本文件格式保存起来,只是要用.htm或.html作为保存文件的扩展名。这种方式的编辑软件随处都可以找到,它不依赖于任何网页编写工具软件。在编写或修改网页源代码文件时较简单,特别是有些网页的内容或格式在用特定的网页编写软件工具不支持时,这种方式就显示出其方便了

23 二、也可以采用另一种方法来制作网页,就是利用特制的网页制作工具软件。这样制作网页的效率会很高,而且几乎不必学习HTML语言的多少知识就可以很容易地制作出网页来,这种方法广受制作人员欢迎。这样的工具软件非常多。但是,每一种网页制作工具软件都有它的局限性,如支持的标准不一样,这样制作的网页在用浏览器显示时效果会不一样。比如,当要在网页中加人一些特殊的功能时,可能它就不支持。

24 利用工具软件来制作网页是一种趋势,但它又有一些局限,在实际制作过程中,常常将两种方法合起来应用。
首先,用某种工具制作出能够满足设计的大部分基本要求的网页。 然后,再结合其网页源代码文件进行细微处的加工修饰。 学会制作网页并不困难,但要编写出好的网页并不容易,它不仅需要计算机的知识,还需要其他方面的知识,比如美术方面的知识,而更重要的是好的创意,这样制作出来的网页才会吸引浏览者,也才会受到大家的欢迎。

25 网页的制作,以其说是一种技术,不如说是一种艺术,或者是两者的结合。
制作网页时可以借鉴别人的作品。 一方面是学习。 别一方面可在其基础上进行一些修改,这样可以节省时间,提高效率。 但需注意,要尊重别人的劳动,当使用了别人的网页,特别是用于商业目的时,要注意版权问题。

26 8.2.3利用标记直接制作网页 一、对网页进行修饰 1、 定义字符风格
如果将一张张网页理解成是一张张的报纸版面或一页页书籍的封面,那就需要对它们进行一定的美工装潢设计,使它们美观、漂亮,更吸引人。至少应该进行一些简单的修饰,使之效果更好。 1、 定义字符风格 在网页文本的显示中,常常会需要一些特殊的字型或字体来进行一些修饰,使之产生一定的强调和突出效果,就像在文字处理软件中对待各种特殊文字一样。如使某些文字加黑、变斜、加下划线等,以使网页更加美观、漂亮。HTML文档中也有实现类似功能的标记,它们分为两类:物理修饰类型(有形类)和逻辑修饰类型(含义类)。

27 物理修饰类型的标记直接指定了文本显示的具体形式,如使一个词显示为粗体(黑体)、斜体或下划线等。逻辑修饰类型的标记只是说明文本需要如何加以突出,如强调、引文或定义。假设有一段文字需要强调,可以用强调标记定义它,但它在浏览器上的显示形式是由各个浏览器自己决定的,不同浏览器对某个逻辑类型的标记可能有不同的显示效果,大多数的效果是约定俗成的。 (l)物理修饰类型标记 常用的物理修饰类型标记

28 利用<FONT>标记可以改变文本中文字的大小,就如同在文字处理软件中做的那样。 其书写格式为:
(2)逻辑类型标记 常用的逻辑修饰类型标记 这些标记也都有起始和结束标记符,放在起始和结束符之间的文本将受其控制。 2. 改变字号 利用<FONT>标记可以改变文本中文字的大小,就如同在文字处理软件中做的那样。 其书写格式为: <FONT SIZE=n>文本内容</FONT> SIZE属性用来设定字号大小,其取值的范围为l-7,缺省值为3。希望改变字号大小的那段内容应放在<FONT>与<FONT>标记之间。

29 3. 加人横线 <HR>标记可以在网页中生成一条横线,从而将不同内容的信息分开,使文本看起来清晰、明确。<HR>不需要结束标记,也无需辅助性文字解释。可以给<HR>标记设置一定的属性,使它具有更强的功能。 <HR>标记的属性主要有三种: (1)SIZE属性 以像素值为单位,定义横线的粗细,其缺省值为2,这也是横线可以选择的最小宽度。 (2)WIDTH属性 指定横线的长短,它的取值可以采用像素值,也可以用满宽度的百分比来设定。 其中采用百分比取值的好处是横线的长度可随窗口的大小的变化而改变。WIDTH的缺省值为100%。

30 (3)ALIGN属性 如果横线的长短小于窗口宽度,则可以给ALIGN属性赋值: LEFT、CENTER、RIGHT,用来规定横线的左右位置。 ALIGN=LEFT 横线左对齐 ALIGN=RIGHT 横线右对齐 ALIGN=CENTER 横线居中 ALIGN 缺省值 横线左对齐

31 4. 加人注释 为了使网页编制者或其他人对HTML文件的内容或状态进行描述,以便理解和今后修改方便,可以在HTML文件中加人注释。其使用的标记为: <!- 注释内容 -> 放在注释中的文本不出现在屏幕上,只是作为网页编制者或其他人查阅文件时使用的”备忘录”,一旦忘记或不明白其含义,可以利用该备忘录进行理解或回忆,对人对己都有帮助。这是一个很好的编程手段,应该养成这种良好的习惯。

32 5. 加人引文 标记<BLOCKQUOTE>可以被用来建立一个引文,它特别适合于较长文本的引用,被引用的文本沿左边缩进。在<BLOCKQUOTE>与</BLOCKQUOTE>之间可以加人行中断或段落等标记,否则内容将在屏幕上连续显示。 6. 加人著作权标志和注册商标符号 HTML中使用了两个标记来代表著作权(copyright)和注册商标(registesed),这两个符号分别使用”&copy;”和”&reg;”。

33 7. 在网页上署名 署名标记<ADDRESS>用于网页作者在网页上签名,或留下地址,以便得到读的反馈信息。它通常写在网页的结尾处,以说明这个网页是由谁或由哪个单位编写的,以及其他有关的信息。它的显示效果是一段斜体字。 8. 文本居中 使文本在网页上居中有两个方法:一个是可以使用<CENTER>标记,另一个可以使用HTML标记的ALIGN=CENTER属性来实现。 当使用<CENTER>标记实现文本居中时,必须把要居中的内容放置在<CENTER>与</CENTER>之间。 ALIGN属性在许多HTML标记中都能够使用,它可以有三个取值:left,right,center。其中若对某段文本定义ALIGN=center,即可实现文本居中的效果。类似的功能在前面对横线的处理时已经见到。

34 9. 改变背景 HTML可以用任意一种颜色或一幅图画作为网页的背景,这种功能是通过<BODY>标记的 BGCOLOR和 BACKGROUND属性实现的。 ① 使用<BODY>标记中的BGCOLOR属性可以定义填充背景的颜色,其格式如下: <BODY BGCOLOR= #nnnnnn> 计算机内部将各种颜色都用数字表示,网页的背景色也不例外。BGCOLOR的值为六位十六进制数,每两位的取值均是00-FF,前两位设置红色的深浅,中间两位设置绿色的深浅,最后两位设置蓝色的深浅,由这六个数字组成了五颜六色的背景色。这六个数字如果全是 0,是黑色;反之,若全是 F,就是白色。

35 <BODY BACKGROUND=“文件名或URL”>
② 用平铺图画作为背景 除了用单一颜色作为网页的背景外,还可以用平铺图画的方法制作网页的背景。所谓平铺图画就是把一小小的图画在屏幕上一个个顺序排列起来,构成一个屏幕的完整背景。 图画平铺设置背景的方法要使用<BODY>标记中的BACKGROUND属性来调用某个图象文件,将这个文件作为BACKGROUND的取值参数,它既可以是一个文件名,也可以是一个URL。如果图象文件在当前目录下,可以直接使用一个图象文件名;如果图象文件在其他的地方,则需要使用一个URL,由此调用一个图象文件。其书写格式下: <BODY BACKGROUND=“文件名或URL”>

36 二、超文本链接 超链接是超文本的一个重要特征,指的是通过标记符号的作用,把并不连续的两段文字或两个文件联系起来。 这两个文件可能在同一台机器的同一个文件夹里,也可能在不同机器的不同文件夹中;机器可能在同一地点,也可能远隔千山万水。而有了超链接,通过鼠标一点就可以从网页上的某处一下跳转到另一处,这一跳可能就从东半球跳到了西半球。

37 1. 链接文件的标记 要建立一个链接,必须具备两个条件: (1)确认被链接的文件的名称或URL;
(2)在文件中确定链接点,使用户可以在浏览窗口中看到一个特殊形式表现的文字串(通常是带有下划线或鼠标前头指向时其形状变成手掌形),以便用户在该处选择这个链接。 HTML文件的链接是通过链接标记<A>……</A>来实现的。在<A>标记中除标记名”A”外还包括其他扩展信息,这些扩展信息称为属性。其中HREF(Hypertext Reference,超文本引用)属性最常用到,该属性用来指出所要链接点的位置,或链接点的文件名或URL;其简单结构形式为: <A HREF=“被链接点”>说明文本</A>

38 2. 同一文件的链接 当一个网页内容较长,常常在浏览器窗口放不下时,而对于网页中的内容,浏览者可能并不是对所有的内容都感兴趣,也并不想阅读所有的内容,可能只对其中一部分感兴趣,这样就可以在文件中建立一些链接,使浏览者很容易地跳到他所感兴趣的地方,阅读所感兴趣的内容。这可以利用链接标记来办到: 1) 在要跳转的地方加上要跳转的标记。 2) 给被跳转到的特定位置起个名字,并加上相应的跳转标记。 被跳转到的特定位置名字称为“anchor”(锚)或叫“定位名称”,它通过<A>标记中的(NAME属性来加以定义,NAME属性用来指出文件中被跳转到的链接点的锚名,其结构的定义格式为:<A NAME=“锚名”>

39 3. 不同文件的链接 在编制HTML网页时,常常需要把要链接的两部分内容分别存放在两个HTML文件中,各自都有自己的文件名,其中一个是主链接文件,另一个被链接文件。如果被链接的文件是全部内容被链接,只要在主链接文件中的链接处加上<A HREF=“被链接文件名”>……</A>的标记,就可以实现两个文件之间的链接。 (1)本地链接 如果需要链接的文件都在本地机器的磁盘上,则这种链接称为“本地链接”,它不必链接网络,在编制网页时,只要本地的机器上有一个编辑器和浏览器就足够了

40 < A HREF=“htmlfile.html#part_A”>……< /A>
如果被链接的文件不是全部内容被链接,而是只链接其中的一部分内容,这时应在被链接文件中设置锚名,就如同一个文件中链接设置的锚名一样。如链接到文件htmlfile.html的Part_A处(锚名就为Part_A),则书写的格式为: < A HREF=“htmlfile.html#part_A”>……< /A> 如果被链接的文件不在同一文件夹下,则在链接时必须写清楚文件的路径,以免找不到。路径的写法有两种: ①相对路径 以当前文件所在路径和文件夹为基准,然后进行相对的文件查找。

41 ②绝对路径 以绝对路径进行文件的查找。绝对路径中的盘符后用“|”符号,而不用“:”,这一点与DOS环境下的使用不一样。 注意:无论是相对路径,还是绝对路径,路径名的书写必须遵循UNIX操作系统所规定的格式,而不能像DOS中那样的书写。也就是说,路径名与文件夹名均要用“/”作为分隔符分隔开来。如果是当前文件夹的上一级文件夹,最前面还应加上“..”。 链接本机上的文件时,绝大多数情况下都使用相对路径。而使用绝对路径定义链接时,看起来似乎简单,实际上并不是最好的方法。当把文件做了移动或将文件夹名更改之后,所有的链接都将失效,这时必须对所有的 HTML

42 <A HREF=“http://www.light.edu.cn/”>中国光明大学</A>
(2)网络链接 有时,我们需要从一个站点链接到另一个站点,这种通过网络实现链接的方法与本地两个文件的链接方法相同,仍然可以使用<A>标记和属性以及提示链接的一些文字,只是在文件名处应写上文件在网络上的URL,例如: <A HREF=“ 上面的URL中没有写出其文件名,它的缺省名为index.html;如果文件名定义为其他名,就应该写在URL中,否则将出错。

43 4. 图片链接 三、在网页中加入图片 1:图片文件的格式
前面介绍的超链接都是使用文字字符串进行链接,其实利用图片也可以建立链接,这只需在链接标记<A>和</A>中间再放上一个<IMG>标记,这个标记后面所标识的图片就会成为一个可击点,产生一个链接。 当运行这种HTML文件时,加人链接的图片会自动加上了一个边框,以示和其他普通的图片的区别,当用鼠标点击这个图片后,就会被链接到另一个文件上去。 三、在网页中加入图片 若在网页中加人一些五颜六色的图片,会使网页更加生动、活泼,更吸引人。 1:图片文件的格式 图片的文件有许多种,如 BMP、PCX、 GIF、TIF、 JPG(JPEG)等。而在浏览器中能够显示的为数不多,有一定的限制。目前使用的浏览器中,通常都支持GIF和JPG,这两种都是压缩型的格式,可减少下载时间。前者为无损压缩,可处理8位256种颜色;后者为有损压缩,可处理24位真彩色。

44 2. 图片标记及示例 在网页中加人图片,是通过<IMG>标记来实现的,其书写格式为:
<IMG SRC="图片文件名或URL"> 在<IMG>标记中使用了一个很重要的属性SRC,其作用是指出一个图片文件名或是指出URL,此时的路径名书写规则与上节中介绍的超文本链接时的书写规则相同。 如果在同一文件中需要反复使用一个相同的图片文件时,最好在<IMG>标记中使用相对路径名,而不是使用绝对路径名或URL。因为使用相对路径名,浏览器只需将图片文件下载一次,再次使用这个图片时,只要再重新显示一遍即可。而如果使用的是绝对路径名,每次显示图片时,都要下载一次图片文件,这会大大降低图片的显示速度。

45 3. 用文字代替图片显示 虽然在网页中加人图片后可以使网页变得绚丽多彩,吸引力大增,但也会有副作用,那就是会使传输速度大大的降低。尤其是网页中的图片较多,或者图片大大,这种情况就会特别明显。 为了提高网页的下载速度,很多浏览者就会关掉浏览器中下载图片的命令,这种情况下,浏览器不再下载图片,网页中原来放置图片的地方将会空出来。 为了让只浏览文字的用户能够了解图片的内容,可以利用<IMG>标记的ALT属性,加人图片的文字说明。这样在浏览器不显示图片时,它可以将ALT引导的文本显示在屏幕上,从而代替看不到的图片。

46 4. 动画 网页上非常吸引人的一项技术是动画,于是越来越多的网页中出现了动画。动画最基本的原理就是用不同的几幅图,让每一幅图在屏幕上停留一小段时间后消失,紧接着另一幅画马上出现,然后在屏幕上停留一小段时间后消失,紧接着另一幅画马上又出现……循环往复,就成了“动画”。 真正在网页上实现动画,可利用很多现成的制作动画的工具软件,如GIF Animator、GIF Construction等,Internet上有很多共享或免费软件可供下载后使用。编写者只需制作几幅原始图片,然后交由这些工具软件,让它们自动来生成动画文件,如GIF89A格式的动画文件。当用浏览器调用这种文件时,将会出现动画效果。 若在网页中插入动画,可在HTML代码中插人该动画文件,如:<IMG SRC="动画文件名">,到时用浏览器调用包含上述标记的HTML文件后,就会在浏览器中出现动画情景。

47 四、在网页中加入表格 从HTML2.0版本标准开始就有了对表格(Table)的支持,在HTML3.2版本中又进行了扩充。表格的使用使得HTML的内容可以按行和列的方式进行组织,它把网页组织得有条有理,井然有序。 1. 表格的组成 网页中的一张表格一般由以下部分组成: (l)标题(Caption):指出表格的含义。表格的该标题可有可无。 (2)标签(Table Headings Label):指出行、列存放内容的说明。一般用黑体、大字号突出显示。 (3)数据(Table Data):指出表格中的内容。 (4)单元(Table Cell):指出表格中各个独立的区域,其中每一个区域可以放置表格标题或表格数据。

48 2. 创建表格 <TABLE>标记是定义表格的总标记,HTML要求一个表格的全部内容要包含在<TABLE>…</TABLE>之中,其中可有标题及表格的诸内容。<TABLE>标记中最常用的属性是BORDER属性。从 HTML3.2以后,该属性的含义发生变化:它的值不再表示边框的有无,而是以像素点为单位表示边框的宽度,这与HTML 2.0有所不同。 表格是由行和列内的表格单元组成的。它的定义顺序是首先定义表格的一行,然后定义此行的表格单元。再定义第二行,依次定义第二行的表格单元;表格的列是由每行包含的单元数目自动计算得到的。行标记用<TR>…<TR>表示,表格标签用<TH>…<TH>表示,数据单元用<TD>…</TD>。为确保表格中每列对齐,应在每行中包含相同的单元。

49 8.2.4 网页制作工具及应用 一、Microsoft Word 二、FrontPage

50 8.3 Java语言初步 Java是由SUN公司开发而成的新一代编程语言,它具有平台无关性、安全性、稳固性和多线程等诸多特性,因而特别适合于Internet应用的开发。 Java语言已成为网络时代最重要的面向对象程序设计语言。

51 8.3.1 Java语言的发展 Java的产生最早可以追溯到1991年,当时还没有出现所谓的WWW。当初Sun公司成立这个开发小组的开发目标,只是希望能将SUN公司从传统起家的工作站市场,进一步扩展到消费性电子产品市场。开发小组的方向是希望能够建立分布式的系统结构,同时将软件上的各种新技术移植到消费性电子产品上。 随着全球信息网(WWW)的势头在Internet上愈来愈猛,在积累了过去的开发经验,以及检查整个WWW的结构以后,开发小组认为过去Java的主要目标——与平台无关,系统的可靠性、安全性等,都非常适合WWW世界。在经过Sun公司内部一系列评估之后,在1995年5月23日,Sun公司正式发表了Java和Hot java。

52 8.3.2 Java语言的功能 Web技术提供了一种以极低的价格在全球交换信息的方法,Web信息是具有惟一地址的主页,你只需将地址提供给浏览器即可找到相应的主页。 Web的缺憾是它只能以有限的方式连接到主页上,Java不仅可增强 Web的功能,而且打破了这些限制,Java程序嵌人 HTML主页后可以生成动态图形和产生完全交互的主页。 Java所适应的程序设计环境,是一个充满各式各样不同种类的机器和软件的平台,并且用网络连接的复杂分散式环境,Java程序能够通过网络在不同的地方不同的机器上运行。

53 8.3.3 Java语言的特点 概括的说,Java语言的特点包括:面向对象的程序设计语言、操作平台无关性、安全性和多线程。

54 Java语言的第二个特点是操作平台无关性;Java的策略是采取半编译、半解释的方式,定义出Java自己的虚拟机(Virtual Machine),以及这套虚拟机上所使用的机器码——Java Byte code。 Java语言的第三个特点是它的安全性;Java作为网络环境上使用的编程语言,不能不考虑程序在执行时的安全问题,如不能让病毒等以Java Applet等方式通过WWW传播。Java通过三级机制——Java语言本身的设计、对Byte code的检查及程序执行系统(Java解释器Runtime system)来防止其遭到恶意破坏。

55 Java语言的第四个特点是多线程。一般可以在同一时间内执行多个程序的操作,即所谓多进程(process)的概念。简单的说,一个进程就是一个执行中的程序,每一个进程都有自己独立的一块内存空间、一组系统资源。线程和进程类似,也是一个执行的程序,但是和进程不同之处是:多个线程(multithread)是共享一块内存空间和一组系统资源的。而线程本身的数据通常只有微处理器的寄存器数据,以及一个供程序执行时使用的堆栈,所以系统在产生一个线程,或者在各个线程之间切换时,负担要比进程小得多。

56 8.3.4 Java程序的分类 Java程序分为两类:Applet和Application。,即Java小应用程序和应用程序。Java是一个优秀的面向对象编程语言,它与C++有类似的语法和一套实用的扩展类库。 Applet和Application的不同之处在于Applet只运行于HTML主页中,此种能力使主页设计者在设计时有更大的灵活性。可以说,Applet可以运行于任何机器上。而Application只能运行于它所编译的特定的机器上,并且不能在浏览器中运行。

57 8.3.5 Java程序的墓本语法 一、标识符 变量、函数、类和对象的名称都是标识符,程序员需要标识和使用的东西都需要标识符。在Java语言里,标识符以字符或“_”,“$”开头,后面可以包含数字,标识符是大小写有区别的,没有长度限制。 二、关键词

58 三、数据类型 Java使用四种基本类型:integer(整数),floating(浮点数),Boolean(布尔变量),Character or String(字符或字符串)。 四、表达式 Java语言的表达式和C语言非常类似

59 8.3.6 Java小应用程序示例 一、Java开发工具JDK
Java开发工具(JDK)是许多Java专家最初使用的开发环境。尽管许多编程人员已经使用第三方的开发工具,但JDK仍被当作Java开发的重要 工具。 JDK由一个标准类库和一组建立、测试及建立文档的Java实用程序组成。其核心JavaAPI是一些预定义的类库,开发人员需要用这些类来访问Java语言的功能。JavaAPI包括一些重要的语言结构以及基本图形,网络和文件I/O。一般来说,JavaAPI的非I/O部分对于运行Java的所有平台是相同的,而I/O部分则仅在通用Java环境中实现。

60 作为JDK实用程序,工具库中有七种主要程序。
Javac: Java编译器,将Java源代码转换成字节码。 Java: Java解释器,直接从类文件执行Java应用程序字节代码。 appletviewer: 小应用程序浏览器,一种执行HTML文件上的Java小应用程序的浏览器。 Javadoc:根据Java源码及说明语句生成HTML文档。 Jdb: Java调试器,可以逐行执行程序,设置断点和检查变量。 Javah: 产生可以调用Java过程的C过程,或建立能被Java程序调用的C过程的头文件。 Javap: Java反汇编器,显示编译类文件中的可访问功能和数据,并显示字节代码含义。

61 二、用 JDK建立小应用程序 下面我们用一个例子来说明如何用JDK建立小应用程序,这个小应用程序非常简单,只在运行时输出字串向你指定的人问候。 import java.awt.*; import java.applet.Applet; public class OutputHello extends Applet{ //定义类 String s; //数据成员 public void init(){ //成员函数 String temps; temps=getParameter("name"); s="everyone"; if(temps!=null){ s=temps; } public void paint(Graphics g){ //成员函数 g.drawString("Hello " +s, size().width*4, size().height*4);

62 这个小程序定义了一个类OutputHello,它从Applet父类中派生得到。它包括有一个数据成员和两个成员函数。数据成员s存放外部输人的参数即姓名。成员函数init()和paint()都是重载了父类的成员函数,前者完成小程序初始化,主要是读取参数值,后者主要是输出结果。将小程序存为OutputHello.java,并使用Javac编译这个程序: Javac OutputHello.java 如果程序被编译器接受,则不显示信息,并生成OutputHello.class文件。如果有错误信息,则必须修改源代码重新编译,直到通过为止。在运行小程序前,我们还必须生成一个文件名为OutputHello.html的HTML文档来放置它。HTML文档中有多种标识,与JavaApplet有关的标识为: APPLET CODE=applet 文件名.class WIDTH=宽度 HEIGHT=高度 PARAM NAME=参数名 VALUE=值

63 其中CODE,WIDTH和HEIGHT是必须有的属性。CODE属性是applet编译后类文件名,WIDTH和HEIGHT分别为小程序运行时窗口的宽度和高度。NAME为参数名,VALUE为参数值。一个小程序可以有多个输人参数。这里只列出最常用的一些标识,还有一些可选属性项未列出。 本程序对应的HTML文档如下: <html> <head> </head> <body> <applet code=“OutputHello.class” WIDTH=200 HEIGHT=60> <param name=name value=”World”> </applet> </body> </html>

64 运行小应用程序可以使用appletviewer或任何一种支持JavaApplet的浏览器如 NetScape、Internet Explorer等。
appletviewer OutputHello.html

65 8.4 VRML语言 VRML( Virtual Reality Modeling Language)是一种模型语言,用来描述一个目标对象是如何呈现在Web上的。 VRML提供对三维世界及其内部基本对象的描述(包括球体、平面、圆锥、圆柱、立方体等),并把他们同二维的页面链接起来。

66 8.4.1 VRML的定义和功能 VRML(Virtual Reality Modeling Language,虚拟现实造型语言)是描述虚拟环境中场景的一种标准。它定义了三维应用系统中常用的语言描述,如层次变换、光源、视点、几何、动画、雾、材料特性和纹理映射等,并具有简单的行为特征描述功能。 设计VRML的一个主要目标就是保证它成为多个虚拟现实(VR)系统或其组成部分中有效的三维文件交换格式,并且这些VR系统或其组成部分可分布在网络中的不同计算机上。 VRML类似于HTML,它趋向于发展成为一种单一的多平台用于发布三维WWW网页的语言。事实上,一些信息适于用三维来表达,典型应用如游戏、工程、科学计算可视化、教学实验、建筑等,这些都需要大量的交互、动画及用户的参与和探索,是基于页、文字或图象格式的语言(如HTML)所不能表达的。

67 8.4.2 VRML的特点 1. 可编辑性 可以开发应用程序来创建、编辑和保存VRML文件,也可将其他常用的三维文件格式转换为VRML格式的文件。 2. 可重用性 提供了使用、组合并允许重用动态三维对象的能力。 3. 可扩展性 提供了增加新的对象类型的能力。 4. 多平台操作 VRML在众多不同平台的系统上都可实现。 5. 性能 在不同的计算机平台上都能达到可扩展和交互的性能。 6. 可伸缩性 允许任意大小的动态三维世界。

68 从概念上讲,每个VRML文件都是一个基于时间的三维空间,它包含了可通过多种机制动态修改的图形对象和听觉对象。VRML文件的一个重要特性是能够通过包含关系把文件组织在一起,并能够通过超链接把文件联系在一起。利用层次性文件的包含关系可以创建任意大的动态境界。 VRML的另一必要特性是它试图用在分布式环境中,因而内建了支持多个分布式文件的多种对象和机制,包括内联式(In-lining)嵌人其他VRML文件、通过超链接指向其他文件、采用业已制订的针对其他文件格式的Internet和ISO标准等。

69 VRML的访问方式是基于客户/服务器模式,如图8-8所示。其中服务器提供VRML文件及支持资源(图象、视频、声音等),客户端通过网络下载希望访问的文件,并通过本地平台上的VRML浏览器交互式地访问该文件描述的虚拟境界。由于浏览器是平台提供的,从而实现了平台无关性。 传统的VR中使用的实时3D着色引擎在VRML得到了更好的体现。这一特性使VR建模与实时访问更明确地隔离开,这也是VR不同于3D建模和动画的一个特点。后者是预先着色,因而不能提供交互性。VRML提供了6+1个自由度,即三个方向的移动和旋转,以及和其他3D空间的超链接。

70 VRML,具有可伸缩性。 首先,对VRML浏览器来说,从理论上讲,应能处理由数亿个对象组成的分布在Internet上的境界。 其次,VRML在高、低档的机器上都应该工作得很好,它应允许浏览器为了提高性能而降低图象或仿真质量,而在硬件性能增强时质量可以变得更好。 第三,VRML境界可以相对于网络性能而伸缩,从目前常见的56K调制解调器到高速连接。 可伸缩性对 VRML 2.0的整个设计影响很大,尽管目前仍有很多未解决的问题,但 VRML2.0所定义的基本框架在境界规模更大和机器、网络更快时应继续保持伸缩能力。

71 VRML作为一种标准,不可能满足所有应用的具体需要,如希望交互性更强,希望画面质量更高,希望VR世界更复杂。

72 VRML是一个开发标准,为了加强协作,避免技术重复和市场冲突,而鼓励其他技术引用VRML或成为VRML的一部分。与VRML关系密切的三项技术是Java3D、MPEG-4和Chrome。
其中,Java3D和VRML都把3D Web作为关键应用对象,前者的优势在于程序设计,后者的优势在于场景构造,二者在可编程性3D Web应用方面密切合作。 MPEG-4是面向基于内容的交互式视讯应用,可以为VRML提供流技术、压缩和音响同步技术,而MPEG-4用VRML来描述3D内容。在2D页面集成方面,可以探索VRML和Microsoft的Chrome协作的可能性。

73 8.4.3 VRML的结构规范和实现方法 一、VRML 2. 0规范介绍 (1)坐标系统( Coordinate System)
使用三维右手坐标系,缺省情况下目标被投影到一个二维的显示设备上时,以Z轴的正方向投影,X轴正向向右,Y轴方向向上。视点的变换以及模型的几何变换可以改变这种缺省的投影方式。标准的描述长度的单位是米,而描述角的单位是弧度。 (2)场景图形(Scene Graph) 三维场景主要通过场景图形结构来描述的。场景图形结构主要通过一种层次结构来体现相互关系。这有点类似于在Microsoft Direct 3D中的以FRAME为单位的层次结构。不过在这里是以节点(NODE)为基本单位。

74 (3)节点(node) (4)字段(Fields)
VRML是描述目标的一种文本格式,理论上这里的对象(OBJECTS)可以包含任何事物,如三维几何图形、声音、图象、动画、视频、事件、动作等等。但在VRML1.0中节点主要描述图形对象。其余的类型在 VRML 2.0中有一定的支持。VRML一个对象使用一个节点。每个节点包括一个类型名称,一组属性和一组字段。 (4)字段(Fields) 字段是用来描述节点的最基本元素。字段可以包含一个值或多个值,单值的字段类型以SF(Single Field)开头而多值的字段类型以MF(Multiple Field)开头。VRML定义了很丰富的字段类型等。

75 (5)节点类型(Node type) VRML定义了很多种类型的节点,一般说来节点可以分成三大类:形体类、特征类及组类和其他节点。
形体节点:定义目标的几何形状,如圆锥体、立方体、柱体、面、线、点集、球体等等。 特征节点:定义了目标的显示特征如颜色。纹理、表面材质等; 组节点:定义了由一个或多个子节点的集合,组节点可以使同组的几个节点象一个节点一样进行变换。比如说一起移动和旋转。 其余的节点:对文本的支持,能连接到指定的WWW点的连结节点(通过指定URL)等。

76 (6)颜色、纹理、材质及灯光 (7)新的信息节点 通过红、绿、蓝三色的比例调配控制物体的颜色和材质。
视频纹理节点(MovieTexture节点)可以将MPEG-4视频映射到任意对象上。 (7)新的信息节点 导航信息节点(NAVIGATION INFO)描述了航行风格,如走着看,快速飞着看,还是查看(仅变换视点、视角,位置不变)。 世界信息节点(WORLD INFO)允许你指定文件标题和其他浏览文件的信息,如关于作者和版权的事。

77 (8)场景效果(Scene effect) (9)三维声音(3D Sound)
新的节点能让你给场景创建地面和天空的背景,添加远方的山和天上的云以及远处朦胧被雾笼罩的物体(用模糊效果fog)。 (9)三维声音(3D Sound) 主要通过SOUND和AUDIOCLIP等节点支持声音,进一步增强了逼真性——可以在一个场景中放人水流声、打破玻璃的声音(比如在打破玻璃事件发生时调用)或其他任何声音。VRML世界里的声音是三维声音,即声音效果是和音源和观察者的距离、方向有关的。或者说,是与地点相关的声音。

78 (11)场景动态、交互特性(事件、传感器、路由及响应动作)
(10)动画(Animation) 这是通过内插件(interpolators)节点实现VRML2.0包括创建各种各样的动画对象,称它们为内插件,这样就能够为虚拟世界中的物体创建预先定义好的动画并在某个适当的时刻播放。 (11)场景动态、交互特性(事件、传感器、路由及响应动作) VRML2.0中全部名字信号包括:运动和动态。用虚拟开关将灯光打开,当走近汽车时车声逐渐变大,而你向驶来的汽车招手时汽车会停下来把你载上。 所有这些都可以如下实现:VRML定义了各种传感器(sensor mode),可以感知到浏览器上鼠标的移动、转动、点击及时间等各种事件(event)(节点具有事件域node event fields,能接受事件)。

79 a. 事件(Event) 每个节点可以有一些字段能接受外部的事件输人(从而可动态改变自己的状态)。同时又有一些字段可被外部的节点或脚本程序所读取。节点之间相互作用机制是通过路由(Routing)机制来实现的。 b. 传感器(Sensor) 一些物体可连有传感器。当交互设备如鼠标在该物体上作用时,传感器被激发,引发特定的事件。从而最终引起脚本程序的运行或一些节点状态的改变。 c. 脚本(Script) 脚本节点包括VRML script、JavaScript或指向一个外部Java applet的关联,允许开发者扩充VRML的行为和动态。如果没有新的脚本节点(Script nodes), VRML2.0将不能运动。脚本语言可以是Java、Java Script等多种类型。

80 (12)原型(Prototype) d. 碰撞检测(Collision Detection)
由于存在碰撞检测,人们再也不会穿墙而过了。碰撞检测保证固体对象就如同固体般的响应;当你撞上它们的时候,会被反弹回事(或简单地停止运动)。 e. 地形跟随(Terrain Following) 地形跟随允许你沿着楼梯或斜坡上上下下。 (12)原型(Prototype) 用Proto和Extern—Proto节点类型实现。可以通过实时地从Web上下载新的VRML原型并加以改变来生成新的场景。

81 (13)超文本链接的支持(Hyper Link)
在VRML程序中可以调用其他的VRML文件,直接将另一个VRML空间的事物插入到三维世界中,而且在 VRML虚拟现实文件中能够设定热点连接到其他 VRML文件。 VRML 文件中也能够设定热点连接到Internet任一个Web主页等等。 VRML的迷人之处就在于它与Web之间日趋完美的紧密结合,以及与Web所涉及的其他部分的结合和与Java的结合。 实例:

82 8.5 分布式数据库系统和客户服务体系 8.5.1分布式数据库的定义 分布式数据库指具有物理上分布、逻辑上系统结构集中的数据库。
一个分布式数据库系统由一个逻辑数据库组成,这个逻辑数据库的数据存储在一个或多个结点的物理数据库上,通过两阶段提交(2PC)协议来提供透明的数据访问和事务管理。 数据在物理上分布后,由系统统一管理,使用户不感到数据是分布存储的。用户看到的似乎不是一个分布式数据库,而是一个数据模式为全局数据模式的集中式数据库。分布式数据库有利于改善性能,具有可扩充性好、可用性好以及具有自治性等优点。

83 8.5.2 客户服务系统 客户服务系统是将各个客户机与服务器通过网络连接起来而构成的计算机网络系统。
它将一个复杂的计算机应用问题适当地分解为多个子任务,再将这些子任务分布到客户机(Client)和服务器(Sever)两种环境中,在前端客户机上运行应用程序,在后端服务器上提供某些特定的服务,如数据库服务、文件服务和通信服务。

84 在典型的客户机/服务器(Client/Server)结构中,数据库系统的界面和逻辑表现放在客户机上处理,而数据的修改、分类、检索、安全性确认、事务恢复和对共享数据的访问管理等全部放在服务器上执行。
客户机直接面向用户,接受并处理任务,并将任务中需要由服务器完成的部分通过网络请求服务器执行,服务器处理后将处理结果又通过网络传回给客户。 事务逻辑所涉及到的安全性、数据完整性和逻辑完整性都可以集中在服务器上统一由系统解决,形成分布式处理,而不是让访问该数据的每个应用程序自己解决,从而有利于提高性能和完善控制,并减少应用程序开发和维护的开销。

85 8.5.3 Web数据库的开发和发布 实现Web数据库应用一般可以采用两种做法:
另一种是把应用程序下载到客户端并在客户端直接访问数据库。 中间件负责管理Web服务器和数据库服务器之间的通信并提供应用程序服务,它能够直接或调用外部程序或脚本代码来访问数据库,因此可以提供与数据库相关的动态HTML页面,或执行用户查询,并将查询结果格式化成HTML页面,通过Web服务器返回给用户浏览器。

86 最基本的中间件技术有通用网关接口(CGI)和应用程序编程接口(API)两种。
除了在Web服务器端采用中间件以外,我们还可以通过Web浏览器把应用下载到客户端运行,在客户端直接访问数据库。 客户端应用包括:Java Applet、ActiveX、Plug-in等等,其中最典型的就是Java Applet。

87 8.5.4通过ODBC联接数据库 ODBC(Open Database Connectivity)是由微软公司提出的一个用于访问数据库的统一界面标准,随着客户机/服务器体系结构在各行业领域广泛应用,多种数据库之间的互连访问成为一个突出的问题,而ODBC成为目前一个强有力的解决方案。 ODBC之所以能够操作众多的数据库,是由于当前绝大部分数据库全部或部分地遵从关系数据库概念,ODBC看待这些数据库时正是着眼了这些共同点。

88 虽然支持众多的数据库,但这并不意味ODBC会变得复杂,ODBC是基于结构化查询语言( SQL),使用 SQL可大大简化其应用程序设计接口(API)。由于ODBC思想上的先进性,而且缺少同类标准或产品与之竞争,因而越来越受到众多厂家和用户的青睐。已经成为客户机/服务器系统中的一个重要支持技术。 在使用ODBC访问数据库之前,必须建立ODBC数据源。可使用ODBC数据源管理器建立数据源,在控制面板中的ODBC图标表示ODBC数据源管理器。

89 VB中ODBC的开发过程 ASP网页与ODBC的连接 一、初始化ODBC 二、与ODBC数据源建立连接 三、存取数据 四、检索结果集
五、结束应用程序 ASP网页与ODBC的连接


Download ppt "第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。"

Similar presentations


Ads by Google