題目： 基于Java的Web開發(fā)——控制界面設計引言隨著網(wǎng)絡的不斷普及，基于網(wǎng)絡的計算機應用也在飛速發(fā)展，其中基于 B/S模式（Browser/Server模式，瀏覽器 /服務器模式）的 Web應用從出現(xiàn)到現(xiàn)在一直具有非常旺盛的生命力，而且應用面也越來越廣。這些都得益于 Web應用方便的部署和使用方式，以及強大的交互和展現(xiàn)能力。正因為 Web應用的前景看好，Web開發(fā)技術也發(fā)展迅速。 Web開發(fā)，就是開發(fā)應用于 Web之上的系統(tǒng)。而隨著 Internet成為現(xiàn)如今覆蓋面最大和應用最廣泛的網(wǎng)絡， Web開發(fā)技術也主要集中在開發(fā)基于 Internet的網(wǎng)絡應用系統(tǒng)。 Internet是一系列網(wǎng)絡結構和網(wǎng)絡協(xié)議等網(wǎng)絡技術的集合， 這些技術也是基于 Internet的Web應用的基礎， 了解基本的Internet網(wǎng)絡技術對于深入理解 Web開發(fā)技術是不能缺少的。隨著Web技術的發(fā)展，基于實驗資源共享的網(wǎng)絡平臺技術已經(jīng)得到了廣泛的研究和發(fā)展， 特別是在高校的教學環(huán)境中已有初步的應用。 網(wǎng)咯實驗平臺技術經(jīng)歷了以下幾個階段：.基于 Web的虛擬實驗室：一般采用 B/S（瀏覽器 /服務器）架構，用戶只需要通過瀏覽器登錄虛擬實驗室就可以遠程進行實驗。.基于 Web服務的虛擬實驗室： 這種形式的實驗室， 從用戶的角度來看和基于Web的虛擬實驗室沒有區(qū)別。但是從服務器端開來，這兩者之間就有很大的區(qū)別了?；?Web的虛擬實驗室只解決了遠程操作問題，實驗的資源和設備只能在同一個實驗室， 為了將分布于不同地點的設備和資源整合起來， 提出了基于Web服務的虛擬實驗室。.基于網(wǎng)絡的虛擬實驗室： Web服務雖然解決了異構實驗設備的整合，以及互聯(lián)網(wǎng)平臺上的訪問等關鍵問題， 但隨著分布式資源的增加， 要求虛擬實驗室必須具備分布式系統(tǒng)管理方面的功能，比如資源的發(fā)現(xiàn)、監(jiān)測、調度等，這樣就提出了基于網(wǎng)絡的虛擬實驗室。本項目的整體目標是基于 Web服務的虛擬實驗室，基于 Web服務的網(wǎng)絡實驗平臺都由用戶接口， Web服務器及 Web服務組成。我們這里所設計的是信號處理方面的實驗，例如信號變換，信號調制， DFT，F(xiàn)FT等等，一般都沒有涉及到狀態(tài)的持續(xù)?；镜慕Y構圖如下所示：

1Web服務的虛擬實驗室結構圖用戶通過互聯(lián)網(wǎng)或者局域網(wǎng)訪問 Web服務器，服務器隨即調用相應的實驗服務，經(jīng)過計算返回結果給訪問者?；?WEB服務的網(wǎng)絡實驗平臺架構被分為三層。第一層為實驗設備接口層。 設備接口層負責網(wǎng)絡實驗平臺的服務層與虛擬儀器系統(tǒng)、物理實驗系統(tǒng)和仿真實驗系統(tǒng)的數(shù)據(jù)交換。 各種不同的數(shù)據(jù)流 ,通過這一層被轉換成規(guī)定的格式提交給執(zhí)行系統(tǒng)。第二層為 WEB服務層。完成實驗資源的整合，提供實驗服務。第三層為用戶接口層。 這一層是直接面對實驗進行操作的用戶的， 用戶通過瀏覽器訪問網(wǎng)絡實驗室服務平臺 ,提交定制的實驗參數(shù)得到實驗結果。用戶接口Web服務引擎用戶接口Web服務引擎2基于 WEB服務的網(wǎng)絡實驗平臺架構設備接口層Web2基于 WEB服務的網(wǎng)絡實驗平臺架構設備接口層整個項目的主要目的是實現(xiàn)系統(tǒng)能夠進行數(shù)據(jù)采集， 模型仿真和網(wǎng)關發(fā)布一系列操作。我在整個項目中負責的是基于 Web服務的虛擬實驗室的控制界面的設計，用來提高使用者對于這個系統(tǒng)的體驗度， 使頁面顯示更加靈活， 提高系統(tǒng)與用戶的交互性。網(wǎng)頁設計要使用多種技術，包括 HTML語言、腳本程序設計、 CSS樣式表以及美工技術等。僅僅使用 HTML語言設計的頁面屬于靜態(tài)頁面。 Web剛出現(xiàn)的一段時間內， Web是一個靜態(tài)信息發(fā)布平臺， 所設計的頁面都是靜態(tài)頁面； 而如今的 Web已經(jīng)具有更豐富的功能。 現(xiàn)在，人們不僅需要瀏覽 Web提供的信息，而且還需要進行信息搜索等功能。 為實現(xiàn)此類功能， 增加用戶的體驗度， 必須使用更新的網(wǎng)絡編程技術設計動態(tài)網(wǎng)頁。 所謂動態(tài)， 指的是按照訪問者的需求， 對訪問者輸入的信息作出不同的響應，提供響應信息。本文通過 HTML語言結合腳本程序設計、 CSS樣式表以及 jQuery動畫特效進行基本的頁面設計，了解頁面設計的思路方法。Web編程基本介紹Web簡介Web的基本概念現(xiàn)在Internet已經(jīng)成為世界上最大的信息寶庫，然而 Internet上的信息資源既沒有統(tǒng)一的目錄，也沒有統(tǒng)一的組織和系統(tǒng)，這些信息分布在 Internet位于世界各地的計算機系統(tǒng)中。人們?yōu)榱顺浞掷?Internet上的信息資源，迫切需要一種方便快捷的信息瀏覽和查詢工具，在這種情況下， Web誕生了。Web全稱為wordwideweb,縮寫為www。Web是一種體系結構，通過它可以訪問分布于 Internet主機上的鏈接文檔。也就是說， Web是Internet提供的一種服務，是存儲在全世界 Internet計算機中、數(shù)量巨大的文檔的集合，是世界上最大的電子信息倉庫。 Web上的海量信息是由彼此關聯(lián)的文檔組成的， 這些文檔稱為主頁或頁面，它是一種超文本信息，而使其連接在一起的是抄鏈接。 Web的內容保存在 Web站點， 即Web服務器中， 用戶可以通過瀏覽器訪問 Web站點。因此Web是一種基于瀏覽器、服務器的結構。也就是說， Web其實是一種全球性通信系統(tǒng)，他通過 Internet使計算機互相傳送基于超媒體的數(shù)據(jù)信息。近年來，Web得到了迅猛的發(fā)展，如今的 Web應用已遠遠超出了原先對它的設想。它具有以下特點： (1)Web是一種超文本信息系統(tǒng)； (2)Web是圖形化的和易于導航的； (3)Web與平臺無關，即對系統(tǒng)平臺沒有限制，無論系統(tǒng)的軟硬件平臺是什么，都可以通過 Internet訪問WWW；(4)Web是分布式的； (5)Web具有新聞性； (6)Web是動態(tài)的、交互的。Web的工作原理及應用結構.Web的工作原理Web是一種基于瀏覽器、 服務器的體系結構。 典型的B/S結構將計算機應用分為三個層次，即客戶端瀏覽器層、 Web服務器曾和數(shù)據(jù)庫服務器層。 B/S結構有許多優(yōu)點，他簡化了客戶端的維護，所有應用邏輯都是在 Web服務器上配置的。B/S結構突破了傳統(tǒng)客戶機 /服務器 (C/S)結構中的局域網(wǎng)計算機應用的限制，用戶可以在任何地方登錄 Web服務器， 按照用戶角色執(zhí)行自己的業(yè)務流程。 Web通過HTTP協(xié)議實現(xiàn)客戶端瀏覽器和 Web服務器的信息交換?？蛻舳藶g覽器和服務器之間的關系： 服務器處理數(shù)據(jù)并生成頁面， 客戶端瀏覽器請求頁面和顯示頁面。 其優(yōu)點是采用 IP協(xié)議通訊， 位于Internet任何的一個人都可以訪問； 以瀏覽器為客戶端程序， 客戶對數(shù)據(jù)不得處理簡化， 客戶端不需要編寫單獨的應用程序；容易布置，升級和維護。.Web的應用簡介Web應用是指能夠通過 Web提供一系列功能的應用系統(tǒng)。 如果脫離了 Eclipse和Tomcat等開發(fā)工具盒 Web服務器， 一個 Web應用就是具有特定的目錄結構的文件盒目錄。不同的 Web服務器中的 Web應用具有不同的目錄結構。 Tomcat中的Web應用也具有特定的文件結構，并且每個 Web應用都包含一個配置文件。本文將介紹 Tomcat中的 Web應用。了解了Web應用的結構， 對于理解后續(xù)所介紹的應用實例中的頁面設計實現(xiàn)過程會有很大的幫助。Web應用結構實質上一個 Web應用通常就是文件系統(tǒng)中的一個目錄，稱為 Web應用根目錄。 Web應用根目錄中的文件是該 Web應用中的資源，包括：需要通過 Web提供給客戶端訪問的資源以及 Web應用本身的配置和描述文件等。不同的 Web服務器對Web應用根目錄中文件的結構和意義又不同的規(guī)定，只有結構符合規(guī)定的Web應用部署到 Web服務器中后才能獲得預期的效果。典型的 TomcatWeb應用具有如下圖所示的目錄結構。1-1Web應用目錄結構該Web應用的根目錄是 WebTes，t通常稱該 Web應用為 WebTest應用。 Web應用的所有資源和配置文件都應該放置在 Web應用的根目錄中，也只有 Web應用根目錄中的資源才能通過該 Web應用訪問。所有的靜態(tài) Web對象和 JSP文件可以按照任意的目錄層次放置在 Web應用根目錄下， 在將 Web應用部署到 Tomcat服務器中后這些文件都可以根據(jù)其目錄結構通過 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應用在文件系統(tǒng)中存儲時表現(xiàn)為一個目錄， 在文件系統(tǒng)中可以使用不同的路徑用于區(qū)分目錄。 當將Web應用部署到 Tomcat中時， Web應用就是一個抽象的概念， 而且Tomcat中可以部署很多的 Web應用，通過使用 Web應用的上下文路徑區(qū)分每個 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也可以利用上下文路徑根據(jù)客戶端請求 URL的前綴將客戶端請求分發(fā)到適當?shù)?Web應用。例如請求 URL的前綴為 http：//localhos：8080/app1的客戶端請求被分發(fā)到第一個 Web應用；請求 URL的前綴為 http：//localhos：8080/app2的客戶端請求被分發(fā)到第二個 Web應用。需要注意的是，上下文路徑與 Web應用的根目錄不是一個概念，對于同一個Web應用來說， 這兩個值未必是一樣的。 在將Web應用部署到 Tomcat中時可以為Web應用設置不同于 Web應用根目錄的上下文路徑。1.2HTTP協(xié)議HTTP的全稱是 HyperTextTransferProtoca，l即超文本傳輸協(xié)議。 它是Internet的應用層協(xié)議，它定義了客戶機的瀏覽器與服務器的 Web應用之間如何進行通信，以及通信時用于傳遞數(shù)據(jù)的數(shù)據(jù)包的格式等內容。HTTP是采用請求 /響應模式的無狀態(tài)協(xié)議?？蛻魴C瀏覽器和服務器 Web應用采用HTTP協(xié)議進行通信時，通信由瀏覽器發(fā)起；瀏覽器向 Web應用發(fā)送一個請求，Web應用接受并處理該請求，然后向瀏覽器發(fā)回響應。在請求 /響應過程中， Web應用不保存與任何一個客戶機通信的狀態(tài)， 它只對到來的當前請求進行處理，處理完返回對應于該請求的響應； 任何兩個請求的處理都是獨立的， 無論這兩個請求是來自同一個客戶機還是不同的客戶機。2超文本標記語言HTML語言概述HTML和XML是進行Web程序設計的兩種重要的基礎語言，這里主要介紹超文本標記語言 HTML。超文本標記語言 HTML是在萬維網(wǎng)上建立超文本文件的語言，它是萬維網(wǎng)的核心計算機語言。 創(chuàng)建Web站點時，需使用HTML語言向組成 Web站點的各個Web頁面放置文本、圖形、動畫、音頻、視頻信息等內容，以及按鈕和超鏈接等可以進行交互的內容。 HTML源于“標準通用標記語言” SGML的設計概念。 SGML標記，英文稱為 tag，就是在文檔需要的地方，插入特定的記號，來控制文檔內容的顯示，這就是文檔格式定義。 HTML采用SGML的“文檔格式定義”概念，通過標記與屬性對一段文本的語義進行描述， 并提供由一個文件到另一個文件、 或在一個文件內部不同部分之間的鏈接。 HTML標記是區(qū)分文本各個部分的分界符 ,用于將 HTML文檔劃分為不同的邏輯部分（如段落、標題等） ，它描述文檔的結構， 與屬性一起向瀏覽器提供該文檔的格式化信息以傳遞文檔的外觀特征。HTML是一種文本標記語言，而非編程語言。 HTML文件是普通文本文件，與平臺無關，可用任何文本編輯器進行編輯，文件擴展名為 .htm或.html。HTML文檔使用一系列標簽將文本組織成特定的結構， 并且可以通過特定的標簽使得文檔在瀏覽器中展示時可以引入豐富的顏色、 圖片、文字等信息。 HTML文檔的結構是由標簽包含關系標示的一種層次結構，廳層標簽是 <html>。標簽和屬性HTML文檔的內容通過一系列標簽進行格式化，例如<html>,<head>,</head>,</body>等都是 HTML標簽。HTML標簽分為開始標簽和結束標簽， 開始標簽由一對尖括號括起來， 尖括號中的文字是標簽的名稱， 結束標簽與開始標簽有相同的名稱，并且在左尖括號和標簽名稱之間加了一個 /；HTML中的大部分標簽都是成對的，例如 <html>和</html>、<head>和</head>；一對標簽之間可以包含文字也可以包含其他標簽。另外，有一種特殊的寫法<tag/>，就是將 /寫在尖括號的前面，這是 <tag></tag>的簡寫形式，它表示 <tag>標簽中不包含任何內容。 HTML標簽除了可以組織內容之外，大多數(shù)的 HTML標簽還可以定義一系列的屬性用于補充說明標簽的一些附加信息， 屬性都寫在開始標簽中，例如：<bodybgcolor=red>?</body>表示將該 HTML頁面的背景色設置為紅色。HTML的常用標簽可以分為頁面標簽，格式標簽，表格，表單等。(a)格式標簽：一個 HTML文檔的基本結構，其中用 <html>、<head>、<title>和<body>規(guī)定了文檔的整體結構， <head>標簽中是頭部信息，其中可以定義一些輔助信息， 這些信息不會顯示在瀏覽器頁面的正文中。 <head>中除了可以包含<title>外，還可以包含其他的標簽 (link：可以用于鏈接一些其它文檔，最常見的是使用該標簽鏈接樣式表，例如<linkrel=”styleshee”ttype=”text/css”href=”theme.css”/>表示鏈接 theme.css，用它定義的樣式作為本頁的格式。Meta：用于定義頁面的一些元數(shù)據(jù)信息， 最常見的是使用該標簽定義頁面的媒體格式和字符編碼方式，例如<metahttp-equiv=”Content-type”content=”text/html;charset=iso-8859-1”>表示該頁面的類型是 text/html，字符編碼格式是 ISO-8859-1)<title>定義了頁面的標題，它顯示在瀏覽器的標題欄中； <body>標簽中的內容是HTML文檔的主體，需要顯示在瀏覽器頁面正文中的內容全部寫在該標簽中。(b)格式標簽：在 HTML文件中文字的位置、文字之間的回車換行和空格等都不會被最終顯示到瀏覽器上，要控制 HTML文檔中的文字最終如何在瀏覽器中布局，需要使用 HTML的格式標簽。文字控制： HTML中提供了一個通用的標簽用于設置文字的屬性， 即<font>，它是一個用于設置文字字體的通用方法，它通過不同屬性來設置文字的不同方面：size屬性用于設置文字的大小、 face屬性用于設置字體、 color屬性用于設置文字的顏色； <hx>標簽是一組標簽的總稱， x可以是 1、2、3、?它們都表示頁面的標題，不同的 x表示的標題級別不一樣， x越大級別越低，所包含文字的字體也會越??； 每個標題占一行； <b>和<strong>標簽表示將文字加粗； <i>和<em>標簽表示將文字變成斜體； <u>標簽表示給文字加下劃線。布局控制：即對頁面的布局格式進行控制的標簽。 Align屬性通常用于規(guī)定標簽內容的對齊方式， <hx>、<p>、<div>標簽都有該屬性，可以通過將該屬性的值指定為 center、left或right以用于將內容居中、居左或居右對齊。(c)表格：表格是 HTML中使用最多也是最重要的一種技巧，通常大部分網(wǎng)頁設計師用表格控制頁面內容在整個頁面中的分布， 并且可以通過使用嵌套的表格將頁面進行任意的劃分。 表格都用頂層標簽 <table>進行定義， <th>標簽用于定義表頭， <tr>標簽用于定義一行， <td>標簽用于定義一行中的一列。(d)表單：表單在 HTML中是非常重要的，它提供了一系列可以展現(xiàn)在瀏覽器中并且能夠提供交互的功能組件，例如文本框、密碼框、文本域。按鈕等?？梢允褂帽砀駚斫M織表單中的組件。(f)其他：<a>標簽主要用于定義一個超鏈接，其 href屬性用于指定超鏈接的地址；<img>標簽用于在網(wǎng)頁中以鏈接的方式加入一個圖片，其 src屬性用于指定待鏈接圖片的位置；<hr>標簽可以在頁面上加一個水平的分隔線。HTML有很多標簽，大部分標簽也都定義了很多屬性，熟悉掌握它們對于Web應用開發(fā)是非常重要的。3腳本語言3.1什么是腳本語言腳本語言（ Script）語言的概念源于 UNIX操作系統(tǒng)，在 UNIX操作系統(tǒng)中，將主要以行命令組成的命令集稱為 Shell腳本程序。 Shell腳本程序具有一定的控制結構，可以帶參數(shù)，由系統(tǒng)解釋執(zhí)行。除了 UNIXShellScript外，在UNIX環(huán)境下，具有強大的字符串處理能力的 Perl語言也是腳本語言的典型代表。HTML語言提供較完善的設計頁面的功能，但它提供的信息大多是靜態(tài)的。這些信息被下載到客戶計算機后， 是固定不變的。 無法利用客戶計算機的計算能力，也就無法在客戶端處理與用戶的交互， 從而無法構造出客戶端的交互式動態(tài)頁面。一些原本可以在客戶端完成的任務 （如數(shù)據(jù)合法性檢查等） 也不得不依靠CGI規(guī)范提交給服務器去完成， 這一方面加重了服務器的負擔， 另一方面也增加了網(wǎng)絡傳輸量，同時還加長了響應時間，降低了實時性。另外，對于用戶來說，設計CGI程序也有相當?shù)碾y度。 JavaScript和VBScript的出現(xiàn)恰好彌補了這一缺憾，它大大提高了客戶端的交互性，使用非常簡答、靈活，利用它可以設計客戶端動態(tài)網(wǎng)頁。本文所介紹的腳本語言是指用于 Web頁面及程序設計的腳本語言，它們通常是嵌入式（嵌入到 HTML文件中）的、具有解釋執(zhí)行的特征。根據(jù)腳本程序前者由瀏覽器負被執(zhí)行的地點不同， 可將它們分為客戶端腳本和服務器端腳本，前者由瀏覽器負責解釋執(zhí)行，后者由 Web服務器負責解釋執(zhí)行。 JavaScript.VBScript既可以作為客戶端腳本語言， 又可以作為服務器端腳本語言， 而 Perl、Shell、Script以及PHP等則通常是服務器端腳本語言。本文主要討論用于客戶端的JavaScript語言。等則通常是服務器端腳本語言。本文主要討論用于客戶端的3.2JavaScript語言JavaScript是一種嵌入在 HTML文件中的腳本語言， 它是基于對象和事件驅動的，能對諸如鼠標單擊、 表單輸入、 頁面瀏覽等用戶事件做出反應并進行處理。JavaScript具有如下特點：(1)簡單性。 JavaScript是一種被大幅度簡化了的編程語言，即使用戶沒有編程經(jīng)驗也可較快的掌握它。 它不像高級語言的使用有很嚴格的限制， 而是非常簡介靈活，例如在 JavaScript中變量可以直接使用，不必事先聲明，對變量的類型規(guī)定也不是十分嚴格等。(2)基于對象。 JavaScript是基于對象的，它允許用戶自定義對象，同時瀏覽器還提供了大量內建對象，使編程者可以將瀏覽器中不同的元素作為對象來處理，體現(xiàn)了現(xiàn)代面向對象程序設計的基本思想。但 JavaScript不是完全面向對象的，它不支持類和繼承。(3)可移植性。在大多數(shù)瀏覽器上， JavaScript腳本程序可以不經(jīng)過修改而直接運行。(4)動態(tài)性。 JavaScript是 DHTML(動態(tài)HTML)的一個十分重要的部分，是設計交互式動態(tài)網(wǎng)頁，特別是“客戶端動態(tài)”頁面的重要工具。這里需要特別強調一下， JavaScript語言和 Java語言的不同。雖然它們在命名。結構和語言上都很相似，但不能把它們混淆，兩者存在如下重要的差別：(1)Java是有 Sun公司推出的新一代的完全面向對象的程序設計語言，它支持類和繼承， 主要應用與網(wǎng)絡程序設計， 對于非程序設計人員來說不易掌握； 而JavaScript只是基于對象的，主要用于編寫網(wǎng)頁中的腳本，易于學習和掌握。(2)Java程序是編譯后以類的形式存放在服務器上，瀏覽器下載到這樣的類，用Java虛擬機去執(zhí)行它。 而JavaScript的源代碼不需要編譯， 它是嵌入在 HTML文件中的，作為網(wǎng)頁的一部分；當使用能處理 JavaScript語言的瀏覽器瀏覽該網(wǎng)頁時，瀏覽器將對該網(wǎng)頁中的 JavaScript源代碼進行識別、解釋并執(zhí)行。(3)Java程序可以單獨執(zhí)行，但是 JavaScript程序只能嵌入 HTML文件中，不能單獨運行。(4)Java具有嚴格的類型限制，但 JavaScript則比較寬松。(5)Java程序的編輯、 編譯需要使用專門的開發(fā)工具， 如JDK、VisualJ++等；而JavaScript程序則不需要特殊的開發(fā)環(huán)境，由于它只是作為網(wǎng)頁的一部分嵌入到HTML文件中，所以編輯 JavaScript程序只要用一般的文本編輯器就可以完成。4頁面設計.1頁面設計概述一般來說， Web網(wǎng)站開發(fā)的全過程大致分為 5個階段：策劃與定義、設計、開發(fā)、測試和發(fā)布。 首先要根據(jù)建站的目的和定位進行策劃與定義， 確定網(wǎng)站風格、欄目、布局方式等；接下來要進行頁面設計和后臺程序開發(fā)。頁面設計包括靜態(tài)頁面設計和動態(tài)頁面設計。 靜態(tài)頁面設計技術主要采用的是 HTML。對于靜態(tài)頁面，用戶只能瀏覽 Web服務器上預先安排好的信息。但是現(xiàn)在，人們不僅需要瀏覽 Web提供的信息，而且還需要進行信息搜索，開展電子商務等，這些目標是靜態(tài)網(wǎng)頁技術不能達到的， 而動態(tài)網(wǎng)頁卻可以按照訪問者的需要， 對訪問者輸入的信息做出不同的響應， 提供響應信息。 所以，動態(tài)網(wǎng)頁是發(fā)展的必然趨勢。動態(tài)網(wǎng)頁設計技術又可分為客戶端和服務端， 客戶端動態(tài)網(wǎng)頁設計技術主要使用動態(tài)樣式表（ CSS）和在瀏覽器中執(zhí)行的腳本程序，而服務器端動態(tài)網(wǎng)頁設計技術主要使用 CGI、ASP、JSP、PHP等腳本程序。動態(tài)網(wǎng)頁是由 Web服務器動態(tài)生成的文件。之所以稱其為“動態(tài)” ，是因為此種網(wǎng)頁的部分甚至全部內容都是未確定的。當用戶訪問該頁， Web服務器按照用戶的請求， 通過應用程序服務器對相關的服務器端的數(shù)據(jù)進行處理，根據(jù)計算結果生成標準的 HTML文件下傳給用戶瀏覽器。 不同的用戶請求以及訪問數(shù)據(jù)的變化都會隨之生成不同的 HTML文件下載給用戶。流程如下：步驟五： Web服務步驟五： Web服務器將完成的頁發(fā)送回請求瀏覽器步驟四：應用程序服務器將完成的頁傳遞回 Web服務器4-1動態(tài)網(wǎng)頁的處理流程.2層疊樣式表 CSS層疊樣式表的概述HTML中的顯示特性是通過標記的屬性來進行設置的，一旦設置就難以變化，且不能由程序控制，具有很大的局限性。 CSS(CascadingStyleSheets)是W3C協(xié)會為彌補 HTML在顯示屬性設定上的不足而制定的一套擴展樣式標準。它擴展了 HTML標記的屬性設定，稱為 CSS樣式，通過腳本程序控制，可以使頁面的變現(xiàn)方式更加靈活，更具動態(tài)性。 CSS可提供多種樣式，以減少 GIF動畫的使用，從而能設計出規(guī)模更小、下載更快的網(wǎng)頁。CSS標準中重新定義了 HTML語言原來的文字樣式，并且增加了一些新概念，如類、層等，可以對文字重疊、定位等提供更加豐富的樣式；同時 CSS可進行集中樣式管理。 CSS還允許將樣式定義單獨存儲在樣式文件中， 這樣把要顯示的內容和顯示樣式的定義分離開，便于多個 HTML文件共享樣式定義。另外一個HTML文件也可以引用多個 CSS樣式文件中的樣式定義。所謂“層疊” ，實際就是將顯示樣式獨立于顯示的內容，進行分類管理，如分為字體樣式、顏色樣式等，需要使用樣式的 HTML文件進行套用即可。.樣式表的定義CSS樣式表定義的基本語法為：選擇符( selector){規(guī)則( rule)表 }其中： （1）選擇符是指要引用的樣式的對象，它可以是一個或多個 HTML標記（各標記之間以逗號分開） ；（2）規(guī)則表是由一個或多個樣式屬性組成的樣式規(guī)則，各個樣式屬性之間用分號隔開，每個樣式屬性的定義格式為：樣式名：值樣式定義中可以加入注解，格式為：/*字符串 */.樣式的引用在HTML文件中，樣式引用的方式主要有以下 4種方式：（1）鏈接到外部樣式表如果多個 HTML文件要共享樣式表（這些頁面的顯示特性相同或相近） ，則可將樣式表定義為一個獨立的 CSS樣式文件，使用該樣式表的 HTML文件在頭部用<link>標記鏈接到這個 CSS樣式文件即可。 需要注意的是， CSS樣式文件不包含 <style>標記，因為它是 HTML標記，而不是 CSS樣式。在HTML文件頭部使用多個 <link>標記就可以鏈接到多個外部樣式表。<link>標記的屬性主要有 REL、HREF、TYPE、MEDIA。REL屬性定義鏈接的文件和HTML文檔之間的關系通常取值為 styleshee。tHREF屬性指出 CSS樣式文件。TYPE屬性指出樣式的類別，通常取值為 text/css。MEDIA屬性指定接收樣式表的顯示終端， 默認值為 scree（n顯示器），還可以是 prin（打印機）t 、projection（投影機）等。（2）引入外部樣式表這種方式在 HTML文件的頭部 <style>、</style>標記之間，利用 CSS的@import聲明引入外部樣式表。格式為：<style>@importURL（“外部樣式文件名 ”）；,,</style>引入外部樣式表方式 （簡稱引入方式） 與鏈接到外部樣式表 （簡稱鏈接方式）很相似，都是將樣式定義單獨保存為文件，在需要使用的 HTML文件中進行說明。兩者的區(qū)別在于：引入方式在瀏覽器下載 HTML文件時就將樣式文件的全部內容復制到 @import關鍵字所在位置，以替換該關鍵字；而連接方式在瀏覽器下載HTML文件時并不進行替換， 而是僅僅在 HTML文件體部需要引用 CSS樣式文件的某個樣式時，瀏覽器才鏈接樣式文件，讀取需要的內容。(3)嵌入樣式表這種方式利用 <style>標記將樣式表嵌入 HTML文件的頭部。嵌入樣式表的作用范圍是本 HTML文件。(4)內聯(lián)樣式這種方式是在 HTML標記中引用樣式定義，方法是將標記的 style屬性值賦為所定義的樣式規(guī)則。由于樣式是在標記內部使用的，故稱為“內聯(lián)樣式” 。例如：<h1style=”font-family:’隸書 ’,’宋體 ’;color:#ff8800”>這是一個 CSS示例！<h1>4.2.2相關標記和屬性隨著CSS的出現(xiàn)，有幾個新的 HTML標記和屬性被增加到 HTML語言中，以使樣式表與 HTML文件更好的組合起來， 它們是：類選擇符和 class屬性、id選擇符和 id屬性、上下文選擇符、偽類、 span標記和div標記。類選擇符和 class屬性在樣式引用的 4種方式中， 除了內聯(lián)方式外， 其他三種方式下， 樣式表中的樣式定義在整個頁面范圍內都是有效的。 但有時在頁面中可能不希望同一種標記都遵循同一種樣式， 或者希望不同的標記能夠遵循相同的樣式。 利用類選擇符和標記的 class屬性就能做到這兩點。方法是：在 <style>標記中定義類選擇符，在體部標記中將標記的 class屬性值設置為類名。id選擇符和 id屬性id選擇符( IDSelector)定義一個元素特有的樣式。它與類選擇符的區(qū)別在于，id選擇符在一個 HTML文件中只能引用一次， 但是類選擇符可以多次引用。id選擇符的定義格式為： #id名｛規(guī)則 1；規(guī)則 2；?｝。要引用 id選擇符定義的樣式，需要在體部標記中將該 id屬性值設置為 id名。當一個樣式只需要在任何文檔中應用一次時，使用 id選擇符是很合適的。前面已經(jīng)提到過的內聯(lián)樣式也適用于此場合。兩者相比，適用 id選擇符更好些，因為它可以將樣式定義和引用分開，并且可以應用于多個 HTML文件。上下文選擇符上下文選擇符( ContextualSelector)定義嵌套標記的樣式。例如：h2em{color：darkred}指明HTML文件中出現(xiàn)嵌套標記 <h2>?<em>?</em>?</h2>之處將引用該樣式。偽類偽類是特殊的類，可區(qū)別標記的不同狀態(tài)，能自動的被支持 CSS的瀏覽器所識別。偽類定義格式為：選擇符：偽類 {屬性：值 }偽類不用 HTML語言的 class屬性來指定。 偽類的一個最常見的應用是指定超鏈接( <a>)以不同的方式顯示鏈接( links)、已訪問鏈接( visitedlinks)和可激活鏈接( activelinks)。span標記<span>標記是隨 CSS的產生而被新加入到 HTML語言中的，增加該標記的目的是允許我們給出樣式而不必將樣式附加在一個 HTML的原有標記(稱為結構元素)上。它的存在純粹是為了應用樣式， 所以當樣式表失效時它就沒有任何作用了。 <span>標記可以帶有 class、id、style等于CSS樣式有關的屬性。div標記<div>是一個塊級元素。 <div>和</div>之間可以包含段落、標題、表格等其他塊級元素。 <div>將其中包含的內容形成一個獨立的段落。 <div>在 HTML3.2中只有屬性 align，HTML4.0新增加了 class、id、style屬性。<div>與<span>的功能基本相同區(qū)別在于 <div>是塊級元素，而 <span>是行元素；另外， <div>可以包含<span>，反之則不行。CSS1屬性可以分為字體屬性。顏色及背景屬性。文本屬性、方框屬性、分類屬性和定位屬性幾個部分。以下將簡單簡單介紹字體屬性、顏色即 =及背景屬性的概況。.字體屬性字體屬性包括字體( font-family)、字號( font-size)、字體風格( font-style)、字體加粗( font-weight)、字體變化( font-variant)及字體綜合設置( font)等屬性。字體屬性的含義明確，使用簡單。2．顏色及背景屬性顏色屬性允許設計者指定頁面元素的顏色， 背景屬性是指定頁面的背景顏色或者背景圖像的屬性。顏色和背景屬性包括(前景)顏色( color)、背景顏色(background-color)、背景圖像(background-image)、背景重復(background-repea)t、背景附屬方式( background-attachmen)t、背景圖像位置(background-position)以及背景屬性( background)。jQuery開發(fā)jQuery概述認識jQueryjQuery是由美國人 JohnResig于2006年創(chuàng)建的一個開源項目，隨著人們的熟知，越來越多的程序高手加入其中， 完善并壯大其項目內容， 如今已發(fā)展成為集JavaScript、CSS、DOM、Ajax于一體的強大的框架體系。它的主旨是：以更少的代碼，實現(xiàn)更多的功能( Writeless，domore)。jQuery是一個類庫， 和prototype，mootools等類庫一樣為 Web的JavaScript開發(fā)提供輔助功能。之所以選擇 jQuery是因為在 Web開發(fā)中使用 JavaScript時，絕大多數(shù)時間都是采用 getElementByld在文檔中找到 DOM元素，然后取值或設定值，采用 innerHTML取其內容或設定其內容，或進行事件的監(jiān)聽(如click),在控制樣式方面，會進行 height、weight。display等的改變，達到視覺的效果，對于 AJAX方面，也是取到數(shù)據(jù)在頁面的某元素里面去添充內容。總之是在對 DOM元素進行操作。這個元素可能是一個或者是多個。Prototype可以說是開創(chuàng)了 Js類庫的先河，給我們耳目一新的感覺。它解決大部分的瀏覽器的兼容問題。同時簡化了原始函數(shù)名長難于記憶的經(jīng)常書寫出錯的問題，提供了 AJAX的訪問方式。但是這些還是不能滿足開發(fā)的需要，比如在 DOM樹中尋找 DOM元素，僅僅只能是通過元素的 ID，但是我們想要更方便的查找方法，同時還希望能有一個統(tǒng)一的入口，不要太泛，學習曲線過高或難于使用。 jQuery就是從這里出發(fā)，把所有一切都統(tǒng)一在jQuery對象中。使用 jQuery就是使用 jQuery對象。其實 jQuery開創(chuàng)性的工作就是如其名一樣： query。它強大的查找功能令所有的框架都黯然失色。jQuery實質就是一個查詢器。在查詢器的基礎還提供對查找到的元素進行操作的功能。AJAX是Web2.0的基石，現(xiàn)在網(wǎng)上流行幾種開源的 AJAX框架，如jQuery，Mootools，Dojo，ExtJS等等，在不同的情況下需要使用不同的框架：從輕量級選擇：主要是 mootools和jquery,由于它們的設計思想不同，jquery是追求簡潔和高效， mootools除了追求這些目標外，其核心在于面向對象，所以 jquery更適合快速開發(fā)， mootools適合稍大型和復雜的項目，其中需要面向對象的支持；另外，在 Ajax的支持上， jQuery稍強一些；在 Comet的支持上，jQuery有相關的插件， Mootools目前沒有，但是 Comet的核心在于服務器的支持，瀏覽器端的接口很簡單，開發(fā)相關的插件很簡單。jQuery有以下基本功能：訪問和操作 DOM元素使用jQuery庫，可以很方便的獲取和修改頁面中的某元素，無論是刪除、移動還是復制某元素， jQuery都提供了一整套的方便。 快捷的方法， 既減少了代碼的編寫，有大大提高了用戶對頁面的體驗度?？刂祈撁鏄邮酵ㄟ^引入 jQuery，程序開發(fā)人員可以很便捷的控制頁面的 CSS文件。瀏覽器對頁面文件的兼容行， 一直以來都是頁面開發(fā)者最為頭疼的事， 而使用jQuery操作頁面的樣式卻可以很好的兼容各種瀏覽器。對頁面事件的處理引入jQuery庫后，可以使頁面表現(xiàn)層和功能開發(fā)分離開，開發(fā)者更多的關注于程序的邏輯與功效； 頁面設計者側重于頁面的優(yōu)化與用戶體驗。 然后，通過事件綁定機制，可以很輕松的實現(xiàn)二者的結合。大量插件在頁面中的運用在引入jQuery庫后，還可以使用大量的插件來完善頁面的功能和效果，這些插件的使用極大地豐富了頁面的展示效果，使原來使用 JavaScript代碼遙不可及的功能通過插件的引入而輕松的實現(xiàn)。與Ajax技術的完美結合Ajax的異步讀取服務器數(shù)據(jù)的方法，極大地方便了程序的開發(fā)，加深了用戶的頁面體驗度；而引入 jQuery庫后，不盡完善了原有功能，還減少了代碼的編寫，通過其內部對象或者函數(shù)，加上幾行代碼就可以實現(xiàn)復雜的功能。搭建jQuery開發(fā)環(huán)境在jQuery的官方網(wǎng)站( http://jQ)中，下載 jQuery文件庫。下載好jQuery框架文件后，并不需要任何安裝，僅需要使用 <script>文件導入標記，將jQuery框架文件導入頁面即可。假設該文件下載后保存在項目文件夾 Jscript中，那么，在頁面的 <head></head>中加入如下代碼：<scriptlanguage=”javascript”type=”text/javascript”src=”Jscript/jquery-1.4.2.min.js”></script>需要注意的是， src后面的代碼中寫的是 jQuery框架文件的路徑，其中jquery-1.4.2.min.js是jQuery框架文件的版本號。jQuery程序的代碼風格.“$”美元符的使用在jQuery程序中，使用最多的就是 “$”美元符了， 無論是頁面元素的選擇、功能函數(shù)的前綴，都必須使用該符號，可以說它是 jQuery程序的標志。.事件操作鏈接式書寫在編寫頁面某元素事件時， jQuery程序可以使用鏈接式的方式編寫該元素的所有事件。 jQuery事件操作鏈接式書寫的功能描述：在頁面中，有一個 <div>標記，在該標記內，包含二個 <div>標記，一個為主題，另一個為內容，頁面首次加載時，被包含的內容 <div>標記是不可見的，當用戶單擊主題 <div>標記時，改變自身的背景顏色，并將內容 <div>標記顯示出來。jQuery的動畫與特效如何能最大化的優(yōu)化頁面的用戶體驗度， 是每個前端頁面開發(fā)人員在設計頁面時需要考慮的一個重要問題。 無可置疑， jQuery中眾多的動畫與特效方法為提高頁面的用戶體驗度帶來了極大的方便， 通過少量的幾行代碼， 就可以實現(xiàn)元素的飛動、淡入淡出等動畫效果，還可以自定義各種動畫效果。jQuery的基本動畫與特效有：顯示與隱藏、滑動、淡入淡出、自定義動畫、動畫效果綜述等。顯示與隱藏在頁面中， 元素的顯示與隱藏是使用最頻繁的操作， 在傳統(tǒng)的 JavaScript中，一般通過改變元素顯示的方式，下列代碼將 ID號為“ p1”的元素顯示出來：Document.getElementById(“p1”).style.display=”block”;如果想隱藏該元素，則可以通過下列代碼：Document.getElementById(“p1”).style.display=”none”;而在jQuery中，元素的顯示與隱藏的方法比傳統(tǒng)的 JavaScript要多，并且實現(xiàn)的效果也很優(yōu)雅。下面我們介紹在 jQuery中如何實現(xiàn)元素的顯示與隱藏的方法。在jQuery中，使用 show()顯示頁面中的元素，代碼如下$(“#p1”).css(“display”:”block”);使用 hide()隱藏頁面中的元素，與前面 show()的方法剛好相反，代碼如下：$(“#p1”).css(“display”:”none”);功能描述： 在顯示大量的文本內容時， 為了能顯示更多的段落內容， 有時僅顯示一部分的提要，隱藏另一部分的內容，當用戶需要查看這些隱藏的內容時，只要單擊頁面中的“顯示”鏈接就可以了，查看完后，再單擊“隱藏”鏈接便將該部分內容再次隱藏起來。效果圖如下圖所示：圖5-1顯示與隱藏效果圖toggle()方法在使用 show()或者 hide()方法顯示或隱藏頁面元素時，為了正確執(zhí)行切換顯示的動作， 通常需要檢測當前元素的顯示狀態(tài)， 然后根據(jù)該狀態(tài)再執(zhí)行元素是否顯示或隱藏。這樣代碼會顯得有些冗長，在 jQuery中，為了解決這個問題，可以使用 toggle()方法， 該方法的功能就是切換元素可見狀態(tài)， 即如果是顯示狀態(tài)，則變成隱藏狀態(tài)；如果是隱藏狀態(tài)，則變成顯示狀態(tài)。該方法有三種調用方式，代碼如下所示。形式一，無參數(shù)調用格式： toggle()形式二，邏輯參數(shù)調用格式： toggle(switch)其中參數(shù) switch是一個布爾值，即 true或 false。當該值是 true時，顯示元素；否則，隱藏元素。形式三，動畫效果調用格式： toggle(speed,[callback])其中參數(shù) speed和可選參數(shù) [callback]與方法show(speed,[callback])中的參數(shù)所表示的意義是一樣的，在此不作詳細敘述。滑動在jQuery中，還有一種華東的動畫效果改變元素的高度，即“拉窗簾”的效果。要實現(xiàn)元素的滑動效果，需要調用 jQuery中的兩個方法，一個是slideDown()，另一個是 slideUp()，其調用的語法格式如下。slideDown()方法的格式如下：slideDown(speed，[callback])

其功能是以動畫的效果將所選擇元素的高度向下增大， 使其呈現(xiàn)出一種“滑的效果，而元素的其他屬性并不會發(fā)生變化； 參數(shù) speed為動畫顯示的速度，[callback]為動畫顯示完成后，執(zhí)行的回調函數(shù)。slideUp()方法的格式如下：slideUp(speed，[callback])其功能是以動畫的效果將所選元素的高度向上縮小， 同樣也是僅僅改變高度slideDown()方法一樣。圖5-2滑動效果圖如圖是滑動的效果圖，當鼠標放置在圖片上是，使圖片放大。應用實例根據(jù)本課題的要求，應用 JavaWeb開發(fā)技術進行簡單的控制界面的設計。Web網(wǎng)關發(fā)布系統(tǒng)的首頁，其主要包括了三個基本框架，分用戶注冊頁面以及參考書單頁面。 在整個設計過程中， 主要采用的是超文本標記語言 HTM