基于java的web开发--控制界面设计.doc

题 目： 基于Java的Web开发 控制界面设计 引言随着网络的不断普及，基于网络的计算机应用也在飞速发展，其中基于B/S模式（Browser/Server模式，浏览器/服务器模式）的Web应用从出现到现在一直具有非常旺盛的生命力，而且应用面也越来越广。这些都得益于Web应用方便的部署和使用方式，以及强大的交互和展现能力。正因为Web应用的前景看好，Web开发技术也发展迅速。Web开发，就是开发应用于Web之上的系统。而随着Internet成为现如今覆盖面最大和应用最广泛的网络，Web开发技术也主要集中在开发基于Internet的网络应用系统。Internet是一系列网络结构和网络协议等网络技术的集合，这些技术也是基于Internet的Web应用的基础，了解基本的Internet网络技术对于深入理解Web开发技术是不能缺少的。随着Web技术的发展，基于实验资源共享的网络平台技术已经得到了广泛的研究和发展，特别是在高校的教学环境中已有初步的应用。网咯实验平台技术经历了以下几个阶段：1.基于Web的虚拟实验室：一般采用B/S（浏览器/服务器）架构，用户只需要通过浏览器登录虚拟实验室就可以远程进行实验。2.基于Web服务的虚拟实验室：这种形式的实验室，从用户的角度来看和基于Web的虚拟实验室没有区别。但是从服务器端开来，这两者之间就有很大的区别了。基于Web的虚拟实验室只解决了远程操作问题，实验的资源和设备只能在同一个实验室，为了将分布于不同地点的设备和资源整合起来，提出了基于Web服务的虚拟实验室。3.基于网络的虚拟实验室：Web服务虽然解决了异构实验设备的整合，以及互联网平台上的访问等关键问题，但随着分布式资源的增加，要求虚拟实验室必须具备分布式系统管理方面的功能，比如资源的发现、监测、调度等，这样就提出了基于网络的虚拟实验室。本项目的整体目标是基于Web服务的虚拟实验室，基于Web 服务的网络实验平台都由用户接口，Web 服务器及Web 服务组成。我们这里所设计的是信号处理方面的实验，例如信号变换，信号调制，DFT，FFT 等等，一般都没有涉及到状态的持续。基本的结构图如下所示：图1 Web服务的虚拟实验室结构图用户通过互联网或者局域网访问Web 服务器，服务器随即调用相应的实验服务，经过计算返回结果给访问者。基于WEB 服务的网络实验平台架构被分为三层。第一层为实验设备接口层。设备接口层负责网络实验平台的服务层与虚拟仪器系统、物理实验系统和仿真实验系统的数据交换。各种不同的数据流, 通过这一层被转换成规定的格式提交给执行系统。第二层为WEB 服务层。完成实验资源的整合，提供实验服务。第三层为用户接口层。 这一层是直接面对实验进行操作的用户的，用户通过浏览器访问网络实验室服务平台, 提交定制的实验参数得到实验结果。用户接口Web服务引擎MATLAB引擎信号变换信号调制DFTFFT其他实验虚拟文字接口虚拟仪器用户接口层Web服务层设备接口层图2 基于WEB 服务的网络实验平台架构整个项目的主要目的是实现系统能够进行数据采集，模型仿真和网关发布一系列操作。我在整个项目中负责的是基于Web服务的虚拟实验室的控制界面的设计，用来提高使用者对于这个系统的体验度，使页面显示更加灵活，提高系统与用户的交互性。网页设计要使用多种技术，包括HTML语言、脚本程序设计、CSS样式表以及美工技术等。仅仅使用HTML语言设计的页面属于静态页面。Web刚出现的一段时间内，Web是一个静态信息发布平台，所设计的页面都是静态页面；而如今的Web已经具有更丰富的功能。现在，人们不仅需要浏览Web提供的信息，而且还需要进行信息搜索等功能。为实现此类功能，增加用户的体验度，必须使用更新的网络编程技术设计动态网页。所谓动态，指的是按照访问者的需求，对访问者输入的信息作出不同的响应，提供响应信息。本文通过HTML语言结合脚本程序设计、CSS样式表以及jQuery动画特效进行基本的页面设计，了解页面设计的思路方法。1Web编程基本介绍1.1Web简介1.1.1Web的基本概念现在Internet已经成为世界上最大的信息宝库，然而Internet上的信息资源既没有统一的目录，也没有统一的组织和系统，这些信息分布在Internet位于世界各地的计算机系统中。人们为了充分利用Internet上的信息资源，迫切需要一种方便快捷的信息浏览和查询工具，在这种情况下，Web诞生了。Web全称为word wide web,缩写为www。Web是一种体系结构，通过它可以访问分布于Internet主机上的链接文档。也就是说，Web是Internet提供的一种服务，是存储在全世界Internet计算机中、数量巨大的文档的集合，是世界上最大的电子信息仓库。Web上的海量信息是由彼此关联的文档组成的，这些文档称为主页或页面，它是一种超文本信息，而使其连接在一起的是抄链接。Web的内容保存在Web站点，即Web服务器中，用户可以通过浏览器访问Web站点。因此Web是一种基于浏览器、服务器的结构。也就是说，Web其实是一种全球性通信系统，他通过Internet使计算机互相传送基于超媒体的数据信息。近年来，Web得到了迅猛的发展，如今的Web应用已远远超出了原先对它的设想。它具有以下特点：(1)Web是一种超文本信息系统；(2)Web是图形化的和易于导航的；(3)Web与平台无关，即对系统平台没有限制，无论系统的软硬件平台是什么，都可以通过Internet访问WWW；(4)Web是分布式的；(5)Web具有新闻性；(6)Web是动态的、交互的。1.1.2Web的工作原理及应用结构1.Web的工作原理Web是一种基于浏览器、服务器的体系结构。典型的B/S结构将计算机应用分为三个层次，即客户端浏览器层、Web服务器曾和数据库服务器层。B/S结构有许多优点，他简化了客户端的维护，所有应用逻辑都是在Web服务器上配置的。B/S结构突破了传统客户机/服务器(C/S)结构中的局域网计算机应用的限制，用户可以在任何地方登录Web服务器，按照用户角色执行自己的业务流程。Web通过HTTP协议实现客户端浏览器和Web服务器的信息交换。客户端浏览器和服务器之间的关系：服务器处理数据并生成页面，客户端浏览器请求页面和显示页面。其优点是采用IP协议通讯，位于Internet任何的一个人都可以访问；以浏览器为客户端程序，客户对数据不得处理简化，客户端不需要编写单独的应用程序；容易布置，升级和维护。2.Web的应用简介Web应用是指能够通过Web提供一系列功能的应用系统。如果脱离了Eclipse和Tomcat等开发工具盒Web服务器，一个Web应用就是具有特定的目录结构的文件盒目录。不同的Web服务器中的Web应用具有不同的目录结构。Tomcat中的Web应用也具有特定的文件结构，并且每个Web应用都包含一个配置文件。本文将介绍Tomcat中的Web应用。了解了Web应用的结构，对于理解后续所介绍的应用实例中的页面设计实现过程会有很大的帮助。(1)Web应用结构实质上一个Web应用通常就是文件系统中的一个目录，称为Web应用根目录。Web应用根目录中的文件是该Web应用中的资源，包括：需要通过Web提供给客户端访问的资源以及Web应用本身的配置和描述文件等。不同的Web服务器对Web应用根目录中文件的结构和意义又不同的规定，只有结构符合规定的Web应用部署到Web服务器中后才能获得预期的效果。典型的Tomcat Web应用具有如下图所示的目录结构。WebTestWEB-INFImageIndex.htmltest.jsplibclassesWeb.xmla.jpg图1-1 Web应用目录结构该Web应用的根目录是WebTest，通常称该Web应用为WebTest应用。Web应用的所有资源和配置文件都应该放置在Web应用的根目录中，也只有Web应用根目录中的资源才能通过该Web应用访问。所有的静态Web对象和JSP文件可以按照任意的目录层次放置在Web应用根目录下，在将Web应用部署到Tomcat服务器中后这些文件都可以根据其目录结构通过URL直接访问；WEB-INF目录是一个特殊的子目录，它存在的目的不是为了能让客户端直接访问其中的文件，而是通过间接的方式支持Web应用的运行，比如提供Web应用需要访问的资源文件、放置Web应用的属性文件或配置文件等。WEB-INF目录必须位于Web应用根目录下，通常该文件夹中包含lib子目录，classes子目录和web.xml文件。其中，lib目录用于放置该Web应用使用的库文件，classes目录用于放置该Web应用使用的class文件，web.xml是Web应用描述符，用于设置Web应用特有的配置。WEB-INF目录中的文件是不能通过URL直接访问的。(2)Web应用的上下文路径Web应用在文件系统中存储时表现为一个目录，在文件系统中可以使用不同的路径用于区分目录。当将Web应用部署到Tomcat中时，Web应用就是一个抽象的概念，而且Tomcat中可以部署很多的Web应用，通过使用Web应用的上下文路径区分每个Web应用。Web应用的上下文路径是一个字符串，在Tomcat中与Host名一起用于唯一确定Tomcat中的一个Web应用。在将Web应用部署到Tomcat中时必须为Web应用制定一个上下文路径，并且在同一个Host中每个Web应用的上下文路径必须唯一。例如，localhost中部署了2个Web应用，它们的上下文路径分别是：app1和app2。访问上下文路径为app1的Web应用时，使用的URL前缀为： http：/localhos：8080/app1；访问上下文路径为app2的Web应用时，使用的URL前缀为：http：/localhos：8080/app2。反过来，Tomcat也可以利用上下文路径根据客户端请求URL的前缀将客户端请求分发到适当的Web应用。例如请求URL的前缀为http：/localhos：8080/app1的客户端请求被分发到第一个Web应用；请求URL的前缀为http：/localhos：8080/app2的客户端请求被分发到第二个Web应用。需要注意的是，上下文路径与Web应用的根目录不是一个概念，对于同一个Web应用来说，这两个值未必是一样的。在将Web应用部署到Tomcat中时可以为Web应用设置不同于Web应用根目录的上下文路径。1.2 HTTP协议HTTP的全称是HyperText Transfer Protocal，即超文本传输协议。它是Internet的应用层协议，它定义了客户机的浏览器与服务器的Web应用之间如何进行通信，以及通信时用于传递数据的数据包的格式等内容。HTTP是采用请求/响应模式的无状态协议。客户机浏览器和服务器Web应用采用HTTP协议进行通信时，通信由浏览器发起；浏览器向Web应用发送一个请求，Web应用接受并处理该请求，然后向浏览器发回响应。在请求/响应过程中，Web应用不保存与任何一个客户机通信的状态，它只对到来的当前请求进行处理，处理完返回对应于该请求的响应；任何两个请求的处理都是独立的，无论这两个请求是来自同一个客户机还是不同的客户机。2超文本标记语言2.1HTML语言概述HTML和XML是进行Web程序设计的两种重要的基础语言，这里主要介绍超文本标记语言HTML。超文本标记语言HTML是在万维网上建立超文本文件的语言，它是万维网的核心计算机语言。创建Web站点时，需使用HTML语言向组成Web站点的各个Web页面放置文本、图形、动画、音频、视频信息等内容，以及按钮和超链接等可以进行交互的内容。HTML源于“标准通用标记语言”SGML的设计概念。SGML标记，英文称为tag，就是在文档需要的地方，插入特定的记号，来控制文档内容的显示，这就是文档格式定义。HTML采用SGML的“文档格式定义”概念，通过标记与属性对一段文本的语义进行描述，并提供由一个文件到另一个文件、或在一个文件内部不同部分之间的链接。HTML标记是区分文本各个部分的分界符,用于将HTML文档划分为不同的逻辑部分（如段落、标题等），它描述文档的结构，与属性一起向浏览器提供该文档的格式化信息以传递文档的外观特征。HTML是一种文本标记语言，而非编程语言。HTML文件是普通文本文件，与平台无关，可用任何文本编辑器进行编辑，文件扩展名为.htm或.html。HTML文档使用一系列标签将文本组织成特定的结构，并且可以通过特定的标签使得文档在浏览器中展示时可以引入丰富的颜色、图片、文字等信息。HTML文档的结构是由标签包含关系标示的一种层次结构，厅层标签是。2.2标签和属性HTML文档的内容通过一系列标签进行格式化，例如,等都是HTML标签。HTML标签分为开始标签和结束标签，开始标签由一对尖括号括起来，尖括号中的文字是标签的名称，结束标签与开始标签有相同的名称，并且在左尖括号和标签名称之间加了一个/；HTML中的大部分标签都是成对的，例如和、和；一对标签之间可以包含文字也可以包含其他标签。另外，有一种特殊的写法，就是将/写在尖括号的前面，这是的简写形式，它表示标签中不包含任何内容。HTML标签除了可以组织内容之外，大多数的HTML标签还可以定义一系列的属性用于补充说明标签的一些附加信息，属性都写在开始标签中，例如： 表示将该HTML页面的背景色设置为红色。HTML的常用标签可以分为页面标签，格式标签，表格，表单等。(a)格式标签：一个HTML文档的基本结构，其中用、和规定了文档的整体结构，标签中是头部信息，其中可以定义一些辅助信息，这些信息不会显示在浏览器页面的正文中。中除了可以包含外，还可以包含其他的标签(link：可以用于链接一些其它文档，最常见的是使用该标签链接样式表，例如表示链接theme.css，用它定义的样式作为本页的格式。Meta：用于定义页面的一些元数据信息，最常见的是使用该标签定义页面的媒体格式和字符编码方式，例如表示该页面的类型是text/html，字符编码格式是ISO-8859-1)定义了页面的标题，它显示在浏览器的标题栏中；标签中的内容是HTML文档的主体，需要显示在浏览器页面正文中的内容全部写在该标签中。(b)格式标签：在HTML文件中文字的位置、文字之间的回车换行和空格等都不会被最终显示到浏览器上，要控制HTML文档中的文字最终如何在浏览器中布局，需要使用HTML的格式标签。文字控制：HTML中提供了一个通用的标签用于设置文字的属性，即，它是一个用于设置文字字体的通用方法，它通过不同属性来设置文字的不同方面：size属性用于设置文字的大小、face属性用于设置字体、color属性用于设置文字的颜色；标签是一组标签的总称，x可以是1、2、3、它们都表示页面的标题，不同的x表示的标题级别不一样，x越大级别越低，所包含文字的字体也会越小；每个标题占一行；和标签表示将文字加粗；和标签表示将文字变成斜体；标签表示给文字加下划线。布局控制：即对页面的布局格式进行控制的标签。Align属性通常用于规定标签内容的对齐方式，、标签都有该属性，可以通过将该属性的值指定为center、left或right以用于将内容居中、居左或居右对齐。(c)表格：表格是HTML中使用最多也是最重要的一种技巧，通常大部分网页设计师用表格控制页面内容在整个页面中的分布，并且可以通过使用嵌套的表格将页面进行任意的划分。表格都用顶层标签进行定义，标签用于定义表头，标签用于定义一行，标签用于定义一行中的一列。(d)表单：表单在HTML中是非常重要的，它提供了一系列可以展现在浏览器中并且能够提供交互的功能组件，例如文本框、密码框、文本域。按钮等。可以使用表格来组织表单中的组件。(f)其他：标签主要用于定义一个超链接，其href属性用于指定超链接的地址；标签用于在网页中以链接的方式加入一个图片，其src属性用于指定待链接图片的位置；标签可以在页面上加一个水平的分隔线。HTML有很多标签，大部分标签也都定义了很多属性，熟悉掌握它们对于Web应用开发是非常重要的。3 脚本语言3.1什么是脚本语言脚本语言（Script）语言的概念源于UNIX操作系统，在UNIX操作系统中，将主要以行命令组成的命令集称为Shell脚本程序。Shell脚本程序具有一定的控制结构，可以带参数，由系统解释执行。除了UNIX Shell Script外，在UNIX环境下，具有强大的字符串处理能力的Perl语言也是脚本语言的典型代表。HTML语言提供较完善的设计页面的功能，但它提供的信息大多是静态的。这些信息被下载到客户计算机后，是固定不变的。无法利用客户计算机的计算能力，也就无法在客户端处理与用户的交互，从而无法构造出客户端的交互式动态页面。一些原本可以在客户端完成的任务（如数据合法性检查等）也不得不依靠CGI规范提交给服务器去完成，这一方面加重了服务器的负担，另一方面也增加了网络传输量，同时还加长了响应时间，降低了实时性。另外，对于用户来说，设计CGI程序也有相当的难度。JavaScript和VBScript的出现恰好弥补了这一缺憾，它大大提高了客户端的交互性，使用非常简答、灵活，利用它可以设计客户端动态网页。本文所介绍的脚本语言是指用于Web页面及程序设计的脚本语言，它们通常是嵌入式（嵌入到HTML文件中）的、具有解释执行的特征。根据脚本程序被执行的地点不同，可将它们分为客户端脚本和服务器端脚本，前者由浏览器负责解释执行，后者由Web服务器负责解释执行。JavaScript.VBScript既可以作为客户端脚本语言，又可以作为服务器端脚本语言，而Perl、Shell、Script以及PHP等则通常是服务器端脚本语言。本文主要讨论用于客户端的JavaScript语言。3.2 JavaScript语言JavaScript是一种嵌入在HTML文件中的脚本语言，它是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、页面浏览等用户事件做出反应并进行处理。JavaScript具有如下特点：(1)简单性。JavaScript是一种被大幅度简化了的编程语言，即使用户没有编程经验也可较快的掌握它。它不像高级语言的使用有很严格的限制，而是非常简介灵活，例如在JavaScript中变量可以直接使用，不必事先声明，对变量的类型规定也不是十分严格等。(2)基于对象。JavaScript是基于对象的，它允许用户自定义对象，同时浏览器还提供了大量内建对象，使编程者可以将浏览器中不同的元素作为对象来处理，体现了现代面向对象程序设计的基本思想。但JavaScript不是完全面向对象的，它不支持类和继承。(3)可移植性。在大多数浏览器上，JavaScript脚本程序可以不经过修改而直接运行。(4)动态性。JavaScript是DHTML（动态HTML）的一个十分重要的部分，是设计交互式动态网页，特别是“客户端动态”页面的重要工具。这里需要特别强调一下，JavaScript语言和Java语言的不同。虽然它们在命名。结构和语言上都很相似，但不能把它们混淆，两者存在如下重要的差别：(1)Java是有Sun公司推出的新一代的完全面向对象的程序设计语言，它支持类和继承，主要应用与网络程序设计，对于非程序设计人员来说不易掌握；而JavaScript只是基于对象的，主要用于编写网页中的脚本，易于学习和掌握。(2)Java程序是编译后以类的形式存放在服务器上，浏览器下载到这样的类，用Java虚拟机去执行它。而JavaScript的源代码不需要编译，它是嵌入在HTML文件中的，作为网页的一部分；当使用能处理JavaScript语言的浏览器浏览该网页时，浏览器将对该网页中的JavaScript源代码进行识别、解释并执行。(3)Java程序可以单独执行，但是JavaScript程序只能嵌入HTML文件中，不能单独运行。(4)Java具有严格的类型限制，但JavaScript则比较宽松。(5)Java程序的编辑、编译需要使用专门的开发工具，如JDK、Visual J+等；而JavaScript程序则不需要特殊的开发环境，由于它只是作为网页的一部分嵌入到HTML文件中，所以编辑JavaScript程序只要用一般的文本编辑器就可以完成。4 页面设计 4.1 页面设计概述一般来说，Web网站开发的全过程大致分为5个阶段：策划与定义、设计、开发、测试和发布。首先要根据建站的目的和定位进行策划与定义，确定网站风格、栏目、布局方式等；接下来要进行页面设计和后台程序开发。页面设计包括静态页面设计和动态页面设计。静态页面设计技术主要采用的是HTML。对于静态页面，用户只能浏览Web服务器上预先安排好的信息。但是现在，人们不仅需要浏览Web提供的信息，而且还需要进行信息搜索，开展电子商务等，这些目标是静态网页技术不能达到的，而动态网页却可以按照访问者的需要，对访问者输入的信息做出不同的响应，提供响应信息。所以，动态网页是发展的必然趋势。动态网页设计技术又可分为客户端和服务端，客户端动态网页设计技术主要使用动态样式表（CSS）和在浏览器中执行的脚本程序，而服务器端动态网页设计技术主要使用CGI、ASP、JSP、PHP等脚本程序。动态网页是由Web服务器动态生成的文件。之所以称其为“动态”，是因为此种网页的部分甚至全部内容都是未确定的。当用户访问该页，Web服务器按照用户的请求，通过应用程序服务器对相关的服务器端的数据进行处理，根据计算结果生成标准的HTML文件下传给用户浏览器。不同的用户请求以及访问数据的变化都会随之生成不同的HTML文件下载给用户。流程如下：Web浏览器Web服务器请求响应动态页面HTML应用程序服务器步骤一：Web浏览器请求动态页步骤二：Web服务器查找该页并将其传递给应用程序服务器步骤三：应用程序服务器查找并执行该页中的动态指令步骤五：Web服务器将完成的页发送回请求浏览器步骤四：应用程序服务器将完成的页传递回Web服务器图4-1 动态网页的处理流程4.2 层叠样式表CSS 4.2.1 层叠样式表的概述HTML中的显示特性是通过标记的属性来进行设置的，一旦设置就难以变化，且不能由程序控制，具有很大的局限性。CSS（Cascading Style Sheets）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。它扩展了HTML标记的属性设定，称为CSS样式，通过脚本程序控制，可以使页面的变现方式更加灵活，更具动态性。CSS可提供多种样式，以减少GIF动画的使用，从而能设计出规模更小、下载更快的网页。CSS标准中重新定义了HTML语言原来的文字样式，并且增加了一些新概念，如类、层等，可以对文字重叠、定位等提供更加丰富的样式；同时CSS可进行集中样式管理。CSS还允许将样式定义单独存储在样式文件中，这样把要显示的内容和显示样式的定义分离开，便于多个HTML文件共享样式定义。另外一个HTML文件也可以引用多个CSS样式文件中的样式定义。所谓“层叠”，实际就是将显示样式独立于显示的内容，进行分类管理，如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用即可。1.样式表的定义CSS样式表定义的基本语法为： 选择符（selector）规则（rule）表其中：(1)选择符是指要引用的样式的对象，它可以是一个或多个HTML标记（各标记之间以逗号分开）；(2)规则表是由一个或多个样式属性组成的样式规则，各个样式属性之间用分号隔开，每个样式属性的定义格式为： 样式名：值样式定义中可以加入注解，格式为： /*字符串*/2.样式的引用在HTML文件中，样式引用的方式主要有以下4种方式：(1)链接到外部样式表如果多个HTML文件要共享样式表（这些页面的显示特性相同或相近），则可将样式表定义为一个独立的CSS样式文件，使用该样式表的HTML文件在头部用标记链接到这个CSS样式文件即可。需要注意的是，CSS样式文件不包含标记，因为它是HTML标记，而不是CSS样式。在HTML文件头部使用多个标记就可以链接到多个外部样式表。标记的属性主要有REL、HREF、TYPE、MEDIA。REL属性定义链接的文件和HTML文档之间的关系通常取值为stylesheet。HREF属性指出CSS样式文件。TYPE属性指出样式的类别，通常取值为text/css。MEDIA属性指定接收样式表的显示终端，默认值为screen（显示器），还可以是print（打印机）、projection（投影机）等。(2)引入外部样式表这种方式在HTML文件的头部、标记之间，利用CSS的import声明引入外部样式表。格式为： import URL(“外部样式文件名”)； 引入外部样式表方式（简称引入方式）与链接到外部样式表（简称链接方式）很相似，都是将样式定义单独保存为文件，在需要使用的HTML文件中进行说明。两者的区别在于：引入方式在浏览器下载HTML文件时就将样式文件的全部内容复制到import关键字所在位置，以替换该关键字；而连接方式在浏览器下载HTML文件时并不进行替换，而是仅仅在HTML文件体部需要引用CSS样式文件的某个样式时，浏览器才链接样式文件，读取需要的内容。(3)嵌入样式表这种方式利用标记将样式表嵌入HTML文件的头部。嵌入样式表的作用范围是本HTML文件。(4)内联样式这种方式是在HTML标记中引用样式定义，方法是将标记的style属性值赋为所定义的样式规则。由于样式是在标记内部使用的，故称为“内联样式”。例如：这是一个CSS示例！4.2.2 相关标记和属性 随着CSS的出现，有几个新的HTML标记和属性被增加到HTML语言中，以使样式表与HTML文件更好的组合起来，它们是：类选择符和class属性、id选择符和id属性、上下文选择符、伪类、span标记和div标记。1. 类选择符和class属性在样式引用的4种方式中，除了内联方式外，其他三种方式下，样式表中的样式定义在整个页面范围内都是有效的。但有时在页面中可能不希望同一种标记都遵循同一种样式，或者希望不同的标记能够遵循相同的样式。利用类选择符和标记的class属性就能做到这两点。方法是：在标记中定义类选择符，在体部标记中将标记的class属性值设置为类名。2. id选择符和id属性id选择符（ID Selector）定义一个元素特有的样式。它与类选择符的区别在于，id选择符在一个HTML文件中只能引用一次，但是类选择符可以多次引用。id选择符的定义格式为：#id名 规则1；规则2；。要引用id选择符定义的样式，需要在体部标记中将该id属性值设置为id名。当一个样式只需要在任何文档中应用一次时，使用id选择符是很合适的。前面已经提到过的内联样式也适用于此场合。两者相比，适用id选择符更好些，因为它可以将样式定义和引用分开，并且可以应用于多个HTML文件。3. 上下文选择符上下文选择符（Contextual Selector）定义嵌套标记的样式。例如： h2 emcolor：darkred指明HTML文件中出现嵌套标记之处将引用该样式 。4. 伪类伪类是特殊的类，可区别标记的不同状态，能自动的被支持CSS的浏览器所识别。伪类定义格式为： 选择符：伪类 属性：值 伪类不用HTML语言的class属性来指定。伪类的一个最常见的应用是指定超链接（）以不同的方式显示链接（links）、已访问链接（visited links）和可激活链接（active links）。5. span标记标记是随CSS的产生而被新加入到HTML语言中的，增加该标记的目的是允许我们给出样式而不必将样式附加在一个HTML的原有标记（称为结构元素）上。它的存在纯粹是为了应用样式，所以当样式表失效时它就没有任何作用了。标记可以带有class、id、style等于CSS样式有关的属性。6. div标记是一个块级元素。和之间可以包含段落、标题、表格等其他块级元素。将其中包含的内容形成一个独立的段落。在HTML3.2中只有属性align，HTML4.0新增加了class、id、style属性。与的功能基本相同区别在于是块级元素，而是行元素；另外，可以包含，反之则不行。CSS1属性可以分为字体属性。颜色及背景属性。文本属性、方框属性、分类属性和定位属性几个部分。以下将简单简单介绍字体属性、颜色即=及背景属性的概况。1.字体属性字体属性包括字体（font-family）、字号（font-size）、字体风格（font-style）、字体加粗（font-weight）、字体变化（font-variant）及字体综合设置（font）等属性。字体属性的含义明确，使用简单。2颜色及背景属性颜色属性允许设计者指定页面元素的颜色，背景属性是指定页面的背景颜色或者背景图像的属性。颜色和背景属性包括（前景）颜色（color）、背景颜色（background-color）、背景图像（background-image）、背景重复（background-repeat）、背景附属方式（background-attachment）、背景图像位置（background-position）以及背景属性（background）。5 jQuery开发5.1 jQuery概述5.1.1 认识jQuery jQuery是由美国人John Resig于2006年创建的一个开源项目，随着人们的熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大的框架体系。它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。jQuery是一个类库，和prototype，mootools等类库一样为Web的JavaScript开发提供辅助功能。之所以选择jQuery是因为在Web开发中使用 JavaScript时，绝大多数时间都是采用getElementByld在文档中找到DOM元素，然后取值或设定值，采用innerHTML取其内容或设定其内容，或进行事件的监听（如click）,在控制样式方面，会进行height、weight。display等的改变，达到视觉的效果，对于AJAX方面，也是取到数据在页面的某元素里面去添充内容。总之是在对DOM元素进行操作。这个元素可能是一个或者是多个。Prototype可以说是开创了Js类库的先河，给我们耳目一新的感觉。它解决大部分的浏览器的兼容问题。同时简化了原始函数名长难于记忆的经常书写出错的问题，提供了AJAX的访问方式。但是这些还是不能满足开发的需要，比如在DOM树中寻找DOM元素，仅仅只能是通过元素的ID，但是我们想要更方便的查找方法，同时还希望能有一个统一的入口，不要太泛，学习曲线过高或难于使用。jQuery就是从这里出发，把所有一切都统一在jQuery对象中。使用jQuery就是使用jQuery对象。其实jQuery开创性的工作就是如其名一样：query。它强大的查找功能令所有的框架都黯然失色。jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操作的功能。AJAX是Web2.0的基石，现在网上流行几种开源的AJAX框架，如jQuery，Mootools，Dojo，Ext JS等等，在不同的情况下需要使用不同的框架：从轻量级选择：主要是mootools和jquery,由于它们的设计思想不同，jquery是追求简洁和高效，mootools除了追求这些目标外，其核心在于面向对象，所以jquery更适合快速开发，mootools适合稍大型和复杂的项目，其中需要面向对象的支持；另外，在Ajax的支持上，jQuery稍强一些；在Comet的支持上，jQuery有相关的插件，Mootools目前没有，但是Comet的核心在于服务器的支持，浏览器端的接口很简单，开发相关的插件很简单。 jQuery有以下基本功能：1.访问和操作DOM元素使用jQuery库，可以很方便的获取和修改页面中的某元素，无论是删除、移动还是复制某元素，jQuery都提供了一整套的方便。快捷的方法，既减少了代码的编写，有大大提高了用户对页面的体验度。2. 控制页面样式通过引入jQuery，程序开发人员可以很便捷的控制页面的CSS文件。浏览器对页面文件的兼容行，一直以来都是页面开发者最为头疼的事，而使用jQuery操作页面的样式却可以很好的兼容各种浏览器。3. 对页面事件的处理引入 jQuery库后，可以使页面表现层和功能开发分离开，开发者更多的关注于程序的逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以很轻松的实现二者的结合。4. 大量插件在页面中的运用在引入 jQuery库后，还可以使用大量的插件来完善页面的功能和效果，这些插件的使用极大地丰富了页面的展示效果，使原来使用JavaScript代码遥不可及的功能通过插件的引入而轻松的实现。5. 与Ajax技术的完美结合Ajax的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而引入jQuery库后，不尽完善了原有功能，还减少了代码的编写，通过其内部对象或者函数，加上几行代码就可以实现复杂的功能。5.1.2 搭建jQuery开发环境在jQuery的官方网站（http:/ jQ）中，下载jQuery文件库。下载好jQuery框架文件后，并不需要任何安装，仅需要使用文件导入标记，将jQuery框架文件导入页面即可。假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的中加入如下代码： 需要注意的是，src后面的代码中写的是jQuery框架文件的路径，其中jquery-1.4.2.min.js是jQuery框架文件的版本号。5.1.3 jQuery程序的代码风格1.“$”美元符的使用在jQuery程序中，使用最多的就是“$”美元符了，无论是页面元素的选择、功能函数的前缀，都必须使用该符号，可以说它是jQuery程序的标志。2. 事件操作链接式书写在编写页面某元素事件时，jQuery程序可以使用链接式的方式编写该元素的所有事件。jQuery事件操作链接式书写的功能描述：在页面中，有一个标记，在该标记内，包含二个标记，一个为主题，另一个为内容，页面首次加载时，被包含的内容标记是不可见的，当用户单击主题标记时，改变自身的背景颜色，并将内容标记显示出来。5.2 jQuery的动画与特效如何能最大化的优化页面的用户体验度，是每个前端页面开发人员在设计页面时需要考虑的一个重要问题。无可置疑，jQuery中众多的动画与特效方法为提高页面的用户体验度带来了极大的方便，通过少量的几行代码，就可以实现元素的飞动、淡入淡出等动画效果，还可以自定义各种动画效果。jQuery的基本动画与特效有：显示与隐藏、滑动、淡入淡出、自定义动画、动画效果综述等。5.2.1 显示与隐藏在页面中，元素的显示与隐藏是使用最频繁的操作，在传统的JavaScript中，一般通过改变元素显示的方式，下列代码将ID号为“p1”的元素显示出来： Document.getElementById(“p1”).style.display=”block”;如果想隐藏该元素，则可以通过下列代码：Document.getElementById(“p1”).style.display=”none”;而在jQuery中，元素的显示与隐藏的方法比传统的JavaScript要多，并且实现的效果也很优雅。下面我们介绍在jQuery中如何实现元素的显示与隐藏的方法。1. 在jQuery中，使用show()显示页面中的元素，代码如下$(“#p1”).css(“display”:”block”);使用hide()隐藏页面中的元素，与前面show()的方法刚好相反，代码如下：$(“#p1”).css(“display”:”none”);功能描述：在显示大量的文本内容时，为了能显示更多的段落内容，有时仅显示一部分的提要，隐藏另一部分的内容，当用户需要查看这些隐藏的内容时，只要单击页面中的“显示”链接就可以了，查看完后，再单击“隐藏”链接便将该部分内容再次隐藏起来。效果图如下图所示：图5-1 显示与隐藏效果图2. toggle()方法在使用show()或者hide()方法显示或隐藏页面元素时，为了正确执行切换显示的动作，通常需要检测当前元素的显示状态，然后根据该状态再执行元素是否显示或隐藏。这样代码会显得有些冗长，在jQuery中，为了解决这个问题，可以使用toggle()方法，该方法的功能就是切换元素可见状态，即如果是显示状态，则变成隐藏状态；如果是隐藏状态，则变成显示状态。该方法有三种调用方式，代码如下所示。形式一，无参数调用格式：toggle()形式二，逻辑参数调用格式：toggle( switch )其中参数switch是一个布尔值，即true或false。当该值是true时，显示元素；否则，隐藏元素。形式三，动画效果调用格式：toggle( speed,callback )其中参数speed和可选参数callback与方法show( speed,callback )中的参数所表示的意义是一样的，在此不作详细叙述。5.2.2 滑动在jQuery中，还有一种华东的动画效果改变元素的高度，即“拉窗帘”的效果。要实现元素的滑动效果，需要调用jQuery中的两个方法，一个是slideDown()，另一个是slideUp()，其调用的语法格式如下。slideDown()方法的格式如下：slideDown( speed，callback )其功能是以动画的效果将所选择元素的高度向下增大，使其呈现出一种“滑动”的效果，而元素的其他属性并不会发生变化；参数speed为动画显示的速度，可选项callback为动画显示完成后，执行的回调函数。slideUp()方法的格式如下：slideUp( speed，callback )其功能是以动画的效果将所选元素的高度向上缩小，同样也是仅仅改变高度属性，其包含的参数作用于slideDown()方法一样。图5-2 滑动效果图如图是滑动的效果图，当鼠标放置在图片上是，使图片放大。6应用实例根据本课题的要求，应用Java Web开发技术进行简单的控制界面的设计。该例子是一个基于Web网关发布系统的首页，其主要包括了三个基本框架，分别为主页面、用户注册页面以及参考书单页面。在整个设计过程中，主要采用的是超文本标记语言HTML和JavaScript语言结合，实现了基本的页面框架结构以及文本输入。再利用层叠样式表CSS，对内容元素进行属性定义，进行了插图和颜色的调整，是整个页面变得更加美观。最后加入了jQuery中基本的特效：显示与隐藏，使得页面整体的用户体验度有所增加。具体设计如下：框架一：用户注册页面用户通过表单将数据传递给服务器，如果表单内的所有数据都交由服务器处理，则将加重服务器数据处理的负担，可利用JavaScript的交互能力，对用户的输入在客户端进行语法检查，然后把合法的数据传递给服务器。其次，在注册说明方面，为了使整个页面显得更加简洁，设计时我们采用了jQuery技术中的显示与隐藏特效，将说明的主要条款进行隐藏，当用户需要阅读说明时，单击“显示”链接即可显示说明信息，阅读完毕后单击“隐藏”链接说明的主要内容就会隐藏。具体代码相见附录frame4.htm文件。图6-1 用户注册页面设计效果图框架二：主页面在网页设计中，网页布局最基本的要求是需要考虑浏览者的方便程度并能够明确的传达信息，以及坚固网页设计的审美，给浏览者一定的视觉享受。网页布局就是把网页的各种构成要素，如文字、图像、图标、菜单等合理的排列起来。以前常用表格来对页面进行布局，随着互联