【互联网及其应用】第5章网络应用制作技术

一、HTML语言简介

1.1 HTML 介绍

HTML(超文本标记语言)是一种计算机程序语言，专门用来编写Web网页。HTML是一种标记式的语言。

1.2 HTML语言

HTML是一种描述文件格式的语言，以标记标识及排列各对象。而标记本身则以“<”和“>”符号标识，标记内的内容称为元素（Element）。元素代表了标记的意义，与大小写无关。在浏览器中所有“< >”和位于其中的文字都不会被显示出来。

# 标记的一般格式为：<ELEMENT>对象</ELEMENT>
<ELEMENT 属性=参数>对象</ELEMENT>
或者
<ELEMENT>

HTML文件时层次结构文件，它分为文件头和文件体两部分。文件头包含与文件有关的信息，文件体包含全部正文信息。在HTML里，图形、声音必须用其他软件制作，<p>再用HTML的标记编排在网页的原始文件里，然后浏览器才能编译解读<br>这些原始文件，并在屏幕上展示其效果。一个HTML文件从<HTML>标记开始，到</HTML>结束。文件中所有文本和HTML标记都包含在HTML的起始和结束标记中。头部标记：在<HEAD>和</HEAD>中间的内容，是网页的头部。如果其间的文字没写在“TITLE”中，则成为正文的头部，显示在正文之前。
文件标题：位于<TITLE>和</TITLE>标记中间的文字，是这篇文章的主题，将显示在浏览器窗口的标题栏中。主体标记：<BODY>和</BODY>标记文件实际内容的开始和结束，称为主体部分。在<BODY>元素中可以设置文件的背景色、背景图形等基本属性。
标题：HTML中通过<Hn>....</Hn>标记设定标题。它允许有6个层次的标题：<H1>、<H2>.......段落：<p>是HTML格式中特有的段落元素，指出了此处为段落结束，下面的文字将换行。若没有遇到<P>这个符号，它就会与前面的文字都排在一个段落里，直到遇到窗口的边界才会换行。预格式化文本标记：<PRE>....</PRE>的作用是按照文本的原样显示文本，不作改变。行终端标记：<br>，文本将从<br>之后开始新的一行。<br>标记单独使用，需要试才插入。

超文本链接：HTML文件的另一个特色就是在文章段落间任意的跳转。可以跳到另一台计算机上的文件，也可以跳到文章的另一个段落或本机的另一篇文章。
设置超级链接的标记为<A>和</A >，属性HREF是必须的，HREF的值给出所链接的URL。# 跳转至另一个文件
<A HREF = 'first.html'>第一个文件</A># 跳转至另一个网址
<A HREF = 'http://www.edu.cn'>CERNET主页</A># 跳转至另一个段落
<A HREF = '#clients'>目标文字/A>

多媒体信息编制：
①显示图形(GIF、TIEF、JPG、RGB或HDF等格式）：<IMG SRC='file name'>
②音频和视频（AU、WAV、AIFF 、SND）：<A HREF ='test.mpeg'>影像</A>

表格制作：表格由<TABLE>标记定义，每个表格开始是一个可选的标题（由<CAPTION>标记定义）。表格行用<TR>和</TR>标记，数据内容用<TD>和</TD>标记。
表单是网络用户进行信息交流和信息反馈的重要工具。与表单有关的标记为<form>和<input>。表单支持单行文本框、密码文本框、滚动文本框、下拉菜单、单选按钮、复选框、提交按钮、复原按钮等。

=========================================================================================================

二、Web页面设计

2.1 网页设计的原则

网页设计的原则：
①符合用户的需求，网页的设计是为读者服务的，满足用户的需求是最优先的考虑。
②有效使用资源，网页设计的目标是高效地操作、方便地使用、轻松地维护。
③生成一个一致的、令人愉快的、有效的网页外观。
④在制作网页之前，应该明确制作目的、需完成的任务和要达到的要求。应尽可能地收集素材，并将这些内容做成书面材料，以免制作时遗漏某些材料。
⑤网页设计要有自己的风格，通常应有一定的标志。
⑥网页的页面不必太花哨，上面的图片不宜太多，每一幅图的尺寸不应太大，以免浏览网页时花费太多的时间。
⑦网页的制作要考虑浏览时的不同情况，如显示的颜色、显示的分辨率，HTML标准，浏览器种类及版本等。尽量使其通用，最好有一些提示信息，以免影响浏览效果。

2.2 网页设计的方法

①利用HTML语言所定义的标记及其属性来直接编写网页。（用.htm或.html作文文件的扩展名）。
②利用特定的网页制作够不够级软件制作网页（如Microsoft FrontPage、Dreamweaver）。

2.3 Dreamweaver的使用

Dreamweaver是有Macromedia公司开发的进行网络站点和网页创作的专业化可视编程工具，而且可以在无须编写代码的情况下实现动态HTML的功能。

网页制作三剑客（DreamTeam）：Dreamweaver、Flash、Fireworks。

2.4 Flash的使用

Flash是一个制作动态网页的软件。是网络矢量图形的标准。
Flash的特点：
①矢量图形②交互性③流技术

元件是一种特殊的对象，只需创建一次就可以在动画的各个地方使用，具体应用使用的是元件的实例。

帧分为关键帧和普通帧，关键帧用黑点表示。

2.5 网页的浏览

网页制作时一般先在本地计算机上编辑，待效果满意后再放到网络上。公司或企业要放置主页，可以向ISP申请虚拟主机。

=========================================================================================================

三、JavaScript语言

JavaScript是一种基于对象和事件驱动、并具有安全性的脚本语言。它能够和HTML一起实现在Web页面中链接多个对象，实现与页面的交互作用。

3.1 JavaScript介绍

JavaScript是一种脚本语言，有Netscape公司开发并推出。它是一种介于Java和HTML之间的、基于对象和事件驱动的编程语言，能够开发客户端应用程序，弥补了静态HTML语言的缺陷。

JavaScript是一种基于客户端浏览器的语言，用户在浏览过程中的交互只是通过浏览器对调入的HTML文件中的JavaScript源代码进行解释，无须同服务器交互，减少了服务器和网络的开销。

JavaScript的特点：①简单性②动态性③跨平台性
-简单性：JavaScript采用小程序段的方式实现编程，是一种解释性语言，不需要编译就能解释执行，所以开发和使用操作很简单。
-动态性：JavaScript可以直接对用户的输入作出响应，无须经过Web服务器。它对用户的响应，是以事件驱动的方式进行的。
-跨平台性：JavaScript依赖于浏览器本身，与服务器和客户端的操作环境无关。

3.2 JavaScript的引入

在HTML文档中，JavaScript代码用<script language="JavaScript">和</script>标识括起来，可以将其任意分布于<HRAD>标识和<BODY>标识之中。JavaScript放置的最佳位置，写在标识之中。JavaScript代码还有大小写之分。

3.3 基本数据结构

JavaScript有6种数据类型：string类型、number类型、Boolean类型、Object对象类型，Null值，Undefined值。

变量的命名：JavaScript的变量名称的长度是任意的、但要区分大、小写；第一个字符必须是字母、下划线“_”或“$”符号；后续字符可以是字母、数字、下划线和“$”符号；不能使用JavaScript关键字作为变量名。

JavaScript的变量可以在使用前用var关键字声明，并可以赋值，变量声明和赋值的语法为： var 变量名称[=初始值]

变量的作用于：JavaScript中有全局变量和局部变量。全局变量定义所有函数体之外，作用范围是当前文件中的所有JavaScript脚本及函数；局部变量定义在函数体中，只对该函数可见，对其他函数是不可见的。

表达式是变量、常量和运算符的集合。表达式可分为算术表达式、字符串表达式和布尔表达式。

3.4 事件驱动及事件处理

JavaScript是基于对象的，基本特征就是采用事件驱动。通常鼠标或热键的动作称为事件；由鼠标或热键引发的一连串程序的动作，称为事件驱动；而对事件进行处理的程序或函数，称为事件处理程序。

# 事件处理程序通常由函数完成，格式如下：
Function 事件处理名（参数表）{事件处理语句值；....}

JavaScript的主要事件：①单击事件onClick②改变事件onChange③选中事件onSelect④获得焦点事件onFocus⑤失去焦点事件onBlur⑥载入文件事件onLoad⑦ 卸载文件事件onUnload⑧鼠标悬停事件onMouseover

3.5 基于对象的JavaScript语言

JavaScript是基于对象的，但不是面向对象的编程语言，所以没有对象的继承、重载等功能，而是充分利用大量的外部对象开发客户端的应用程序。

JavaScript中可以使用已有的对象，也可以创建新的对象。在使用时，必须为该对象创建一个实例，它拥有对象的基本特征。
date对象是动态对象，必须用new运算符创建实例后才可以使用。

=========================================================================================================

四、XML

XML可扩展标记语言是标准通用标记语言（SGML）的一个优化子集，提供了一种展现数据的标准方法，它允许数据在通过互联网连接的设备之间进行存储和交换，还允许不同的软件系统操作这些数据。

4.1 XML介绍

1990年使用了SGML规则，为web文档提供了标准标记语言。1996年万维网联盟开始着手进行XML的工作。1998年2月，出版了第一个XML标准，即1.0版本。

XML发展的部分动机来源于HTML的缺陷。HTML的目的是描述信息在web文档中的布局，为实现这个目的，HTML定义了一套标记和属性的集合，HTML用户只能使用这些标记和属性的集合。

XML允许使用者按需自定义标记，XML的可扩展性就在此。

标记、标记的内容以及结束标记一起合称为元素。
XML提供表示数据的文件格式、描述数据结构的计划、以及用语义信息扩展和注释HTML的机制。
XML文件由解析器来处理。

XML只是HTML的补充。HTML是用来表示信息布局的，同时也给出一些如何来显示信息的导向；而XML是用来描述信息本身的，所以XML和HTML是彼互补的，并能够同时使用。

HTML和XML的区别是：HTML将数据和显示混合在一起，而XML将数据和显示分开。

4.2 XML文档结构

XML文档就是用XML标记书写的XML源代码文件。XML文档是ASCII的纯文本文件，可以用Notepad创建和修改。

XML文档的后缀名为.xml。

XML文档包括3个部分：一个XML文档声明；一个关于文档类型的定义；用XML标识创建的内容。

XML文档中的相关术语：Element、Tag、Attribute、Declaration、DTD
-Element(元素）：在XML中一个元素由一个标记来定义，包括开始和结束标记以及其中的内容。每个XML文档必须定义一个根元素。
-Tag(标记)：标记是用来定义元素的。在HTML中，标记必须成对出现，将数据包围在中间。标记的名称和元素的名称是一样的。
-Attribute(属性)：属性是对标记的进一步描述和说明，一个标记可以有多个属性。属性是标记的一部分。属性值都必须加引号，无论是单引号还是双引号。建议尽量不使用属性，而将属性改成子元素，因为属性不易扩充和被程序操作。
-Declaration(声明)：所有XML文档的第一行都有一个XML声明。
-DTD(文件类型定义）：DTD用来定义XML文档中元素、属性以及元素之间的关系。通过DTD文件可以检测XML文档的结构是否正确，但建立XML文档不一定需要DTD文件。

通常一个XML文档会用到两个辅助文件：文件类型定义和样式表。文件类型定义用于定义文档中的元素以及这些元素如何展示，样式表用于描述如何打印和显示文档的内容。

4.3 XML语法

XML语法规则：首先必须由XML声明语句。

XML文档是有大小写区别的，属性值必须加引号，所有的标记都必须有相应的结束标记（标记可能不是成对出现的，如<br>），所有空标记必须关闭（空标记关闭的方法是原标记最后加/）。

空标记就是标记对之间没有内容的标记。

元素由一对标记以及其中的内容组成，元素的名称和标记的名称是一样的，标记可以用属性来进一步没描述。在XML中没有任何保留字、所以可以用任何词语来作为元素的名称。

元素规范：
①名称中可以包含字母、数字以及其他字母。
②不能以数字或“_”（下划线）开头。
③不能以字母xml(或XML或Xml…)开头。
④不能包含空格。
⑤不能包含“：”（冒号）。

注释的语法：
<>! --这里是注释信息-->

4.4 XSL介绍

XML文档可以通过两种方式向浏览器提供样式表的信息：第一种是级联样式表(CSS)来实现；一种是使用可扩展样式表语言(XSL)实现。

XSL包含3部分：①一个转换XML文档的方法②一个定义XML部分和模式的方法③一个格式化XML文档的方法。
XSL是一种可以将XML转换成HTML的语言，一种可以过滤和选择XML数据的语言，一种能够格式化XML数据的语言。

XSL样式表本身也是一个XML文档，XSL文件的开头以一个XML声明开始。在XSL文档中包含一个特殊元素stylesheet，用来声明这是一个样式表文件。

XSL元素的前缀是xsl。元素stylesheet必须包含至少一个元素template，XSL处理器使用元素template显示文档的元素层次中的某个分支，这个分支元素由match定义。

每个XML文档中必须包含一个模板用于表示“/”，可以包含其他模板来表示元素层次中的某个分支。

XSL样式表有两种独特的元素类型，其中一类直接包含内容，另一类指定从关联XML文档合并而来的内容。通常使用表示HTML的元素的XSL元素指定内容，这些元素具有与之关联的HTML元素显示的格式。

用于合并XML数据最简单的元素是value-of。
　　
文档以一个XML声明开始，第二行为XML注释，第三行中的xsl: stylesheet标记定义了
样式表的开始。第四行中的xsl: template标记定义了一个模板的开始。模板属性match="/"将模板与XML源文档的根(/)匹配。文档的其他部分包含了模板本身，最后两行定义了模板的结束和样式表的结束。

=========================================================================================================

五、动态页面技术

5.1 web数据库

分布式数据的管理和访问解决的技术是：分布式数据库系统和客户服务体系。

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

网络数据库的架构可以基于B/S或者C/S架构。
C/S又称 Client/Serve(客户/服务器)模式。服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如 Oracle、Sybase、 Informix或 SQL Server。客户端需要安装专用的客户端软件。

C/S的优点是能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器。对应的优点是客户端响应速度快。缺点主要有:
1)C/S结构是单一服务器且以局域网为中心，所以难以扩展至大型企业广域网或互联网。
2)软硬件的组合及集成能力有限。
3)通常需要专门的客户端软件访问数据库。
4)客户端软件的升级和维护比较烦琐。

B/S是 Brower/ Server(浏览器/服务器)的缩写，客户机上只要安装一个浏览器，如Netscape Navigator或 Internet Explorer。服务器上安装 Oracle、 Sybase、 Informix或 SQL Server等数据库。浏览器通过 Web Server同数据库进行数据交互，属于典型的3层结构。
采用B/S方式的网络数据库的优点有:
1)浏览器可以移植。不需要随身带着计算机和个人软件。只要有浏览器就可以通过网络访问相关的数据。
2)无须分发专门用于访问数据库的软件。
3)无须考虑为每个客户端提供软件升级；只要升级服务器上的软件就可以了。
4)无须专门培训客户如何使用，只需要熟悉浏览器的相关操作就可以了。

Web数据库通常是指以Web查询接口方式访问的数据库资源，其结构是后台采用数据库管理系统存储数据信息，对外提供包含表单的Web页面作为访问接口，查询结果也以包含数据列表的Web页面形式返回给用户。

实现Web数据库应用一般可以采用两种方法:一种是在Web服务器端提供中间件来连接Web服务器和数据库服务器；另一种是把应用程序下载到客户端，并在客户端直接访数据库。

中间件负责管理Web服务器和数据库服务器之间的通信并提供应用程序服务，它能够直接或调用外部程序或脚本代码来访问数据库，因此可以提供与数据库相关的动态HTML页面，或执行用户查询，并将查询结果格式化成HTML页面，通过Web服务器返回给用户浏览器。
最基本的中间件技术有通用网关接口(CGI)和应用程序编程接口(API)。
客户端应用包括 Java Applet、ActiveX、 Plug in等，其中最的就是 Java Applet。

ODBC( Open DataBase Connectivity)是由微软公司提出的一个用于访问数据库的统一界面标准，它是基于结构化查询语言SQL的。

ODBC支持3种不同的数据源类型：用户(user)、系统(system)和文件(file)。
-User数据源只能用于创建用户，并且只能在所定义的机器上运行；
-System数据源可用于当前机器上的所有用户和当前机器上正在运行的服务；
-File数据源将数据源信息保存在一个.dsn文件中，可用于企业用户。

5.2 ASP介绍

程序的执行端分为浏览器端和web服务器端。
Java script和VB script是典型的浏览器端执行程序，ASP是服务器端执行程序。

ASP脚本通过“<%”和“%>”嵌入HTML中。

ASP的特点是：
①集成于HTML中，无须编译或链接就能够执行。
②使用常规文本编辑器（如Windows的记事本），就可以设计ASP程序。
③与浏览器无关：用户端只要使用常规浏览器，即可浏览ASP所设计的主页内容。
④ASP的源程序代码，不会传到用户的浏览器，传到浏览器的只是包含脚本执行结果的HTML代码，因此可以保护源程序不会外泄。
⑤可通过ActiveX服务器元件来扩充能力。
⑥面向对象。

ASP的5个内置的对象：Response对象、Request对象、Server对象、Application对象、Session对象。
-Response对象传送信息给用户，将程序执行的记过传送给浏览器。
-Request对象用于读取浏览器的信息。
-Server对象提供访问服务器的方法和属性。
-Application对象提供多个网页之间保留和使用的一些共用信息，它被访问该网站的所有用户共享。是所有连接者和所有网页公用的对象。
-Session对象是ASP文件公用的对象，提供网页之间的共用信息，只能被一个连接者访问，每个连接者都拥有自己的Session对象。

通过浏览器访问数据库的网页是ASP的一个重要功能，ASP访问数据库是通过ADO对象实现的。当服务器解释到ADO对象时，会调用相应的数据库驱动程序来访问数据库中的资源，并把访问结果返回给浏览器。

5.3 PHP介绍

PHP超文本预处理器是一种在服务器端执行的嵌入HTML的脚本语言。与ASP不同的是，PHP是一种源代码开放程序，拥有很好的跨平台兼容性。能够访问几乎目前所有较为流行的数据库系统。

5.4 JSP介绍

JSP是Sun公司推出的新一代站点开发语言，可以在Servlet和JavaBean的支持下完成功能强大的站点。

JSP技术特点：
①内容的生成和显示进行分离。
②生成可重用的组件。
③采用标识简化页面开发。
④JSP页面具有java技术的优点，包括健壮的存储管理和安全性。
⑤具有“一次编写，各处运行”的特点。