電子商務(wù)平臺(tái)開發(fā)技術(shù)課件(全)全書教學(xué)教程完整版電子教案最全幻燈片

1、電子商務(wù)平臺(tái)開發(fā)技術(shù) 第一章 概述 電子商務(wù)是以信息網(wǎng)絡(luò)技術(shù)為手段，以商品交換為中心的商務(wù)活動(dòng)；也可理解為在互聯(lián)網(wǎng)（Internet）、企業(yè)內(nèi)部網(wǎng)（Intranet）和增值網(wǎng)（VAN，Value Added Network）上以電子交易方式進(jìn)行交易活動(dòng)和相關(guān)服務(wù)的活動(dòng)，是傳統(tǒng)商業(yè)活動(dòng)各環(huán)節(jié)的電子化、網(wǎng)絡(luò)化、信息化。 電子商務(wù)平臺(tái)即是一個(gè)為企業(yè)或個(gè)人提供網(wǎng)上交易洽談的平臺(tái)。企業(yè)電子商務(wù)平臺(tái)是建立在Internet網(wǎng)上進(jìn)行商務(wù)活動(dòng)的虛擬網(wǎng)絡(luò)空間和保障商務(wù)順利運(yùn)營的管理環(huán)境；是協(xié)調(diào)、整合信息流、貨物流、資金流有序、關(guān)聯(lián)、高效流動(dòng)的重要場(chǎng)所。企業(yè)、商家可充分利用電子商務(wù)平臺(tái)提供的網(wǎng)絡(luò)基礎(chǔ)設(shè)施、支付平臺(tái)

2、、安全平臺(tái)、管理平臺(tái)等共享資源有效地、低成本地開展自己的商業(yè)活動(dòng)。 Web簡(jiǎn)介 Web是一個(gè)基于超文本和HTTP的、全球性的、動(dòng)態(tài)交互的、跨平臺(tái)的分布式圖形信息系統(tǒng)，一般而言，Web包括web服務(wù)器和web客戶端兩部分；Web開發(fā)是用程序設(shè)計(jì)語言來解決相關(guān)互聯(lián)網(wǎng)領(lǐng)域問題的技術(shù)，Web開發(fā)主要集中在服務(wù)器端的開發(fā)，目前，服務(wù)器端的開發(fā)技術(shù)非常豐富，比如ASP、JSP、PHP、ASP.NET和第三方框架等等。這些技術(shù)對(duì)Web領(lǐng)域的發(fā)展注入了強(qiáng)大的動(dòng)力。 Web技術(shù)是Internet的核心技術(shù)之一，它的主要功能是信息發(fā)布和信息處理，這也是基于互聯(lián)網(wǎng)的信息系統(tǒng)的一個(gè)重要功能。它具有以下特點(diǎn)：（1）We

3、b是一種超文本信息系統(tǒng)。（2）Web是圖形化的和易于導(dǎo)航的。（3）Web是平臺(tái)無關(guān)的。（4）Web是分布式的。（5）Web是動(dòng)態(tài)的、交互的。（6）Web具有新聞性。 由于技術(shù)的進(jìn)步和網(wǎng)絡(luò)環(huán)境的進(jìn)化，Web 應(yīng)用程序開發(fā)技術(shù)也在不斷的進(jìn)步，在最早，人們?yōu)榱朔奖汩_展科學(xué)研究，設(shè)計(jì)出了Internet用于連接美國的少數(shù)幾個(gè)頂尖研究機(jī)構(gòu)，之后隨著進(jìn)一步的發(fā)展，人們開始應(yīng)用HTTP協(xié)議（Hypertext Transfer Protocol，超文本傳輸協(xié)議）進(jìn)行超文本（hypertext）和超媒體（hypermedia）數(shù)據(jù)的傳輸，從而將一個(gè)個(gè)的網(wǎng)頁展示在每個(gè)用戶的瀏覽器上，今天的Web已經(jīng)從最早的靜態(tài)

4、Web發(fā)展到了動(dòng)態(tài)Web階段，隨之而來的像網(wǎng)上銀行、網(wǎng)絡(luò)購物等電子商務(wù)站點(diǎn)的興起，更是將Web帶進(jìn)了人們的生活和工作之中。 Web應(yīng)用程序的運(yùn)行原理 互聯(lián)網(wǎng)中有數(shù)以億計(jì)的網(wǎng)站，用戶可以通過瀏覽這些網(wǎng)站獲得所需要的信息。這些信息存放在服務(wù)器上，服務(wù)器就是網(wǎng)絡(luò)中的一臺(tái)主機(jī)，由于它提供Web、FTP等網(wǎng)絡(luò)服務(wù)，因此稱其為服務(wù)器。 Web應(yīng)用程序通常由大量的頁面、資源文件、部署文件等文件組成，組成網(wǎng)站的大量文件之間通過特定的方式進(jìn)行組織，并且由一個(gè)軟件系統(tǒng)來管理這些文件。管理這些文件的軟件系統(tǒng)通常稱為應(yīng)用服務(wù)器，它的主要作用就是管理網(wǎng)站的文件。網(wǎng)站的文件通常由以下幾種類型： （1）網(wǎng)頁文件：主要是提供

5、用戶訪問的頁面，包括靜態(tài)的和動(dòng)態(tài)的，這是網(wǎng)站中最重要的部分，如.html、.jsp等；（2）網(wǎng)頁的格式文件：可以控制網(wǎng)頁信息顯示的格式、樣式，如.css等； （3）資源文件：網(wǎng)頁中用到的圖形、聲音、動(dòng)畫、資料庫、以及各式各樣的軟件；（4）配置文件：用于聲明網(wǎng)頁的相關(guān)信息、網(wǎng)頁之間的關(guān)系、以及對(duì)所在運(yùn)行環(huán)境的要求等；（5）處理文件：用于對(duì)用戶的請(qǐng)求進(jìn)行處理，如供網(wǎng)頁調(diào)用、讀寫文件或訪問數(shù)據(jù)庫等。 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁是指網(wǎng)頁的內(nèi)容是固定的，不會(huì)根據(jù)瀏覽者的不同而改變。靜態(tài)網(wǎng)頁一般使用HTML（超文本標(biāo)記語言）語言進(jìn)行編寫。其文件后綴通常為.htm、.html、.shtml、.xml等。靜

6、態(tài)網(wǎng)頁的基本特點(diǎn)是除非網(wǎng)頁設(shè)計(jì)者修改了網(wǎng)頁的內(nèi)容否則網(wǎng)頁內(nèi)容不會(huì)發(fā)生變化。靜態(tài)網(wǎng)頁的信息流向是單向的，在執(zhí)行過程中不能和客戶端進(jìn)行交互，即內(nèi)容信息流只能從服務(wù)器到瀏覽器。需要注意的是在靜態(tài)網(wǎng)頁上，也可以出現(xiàn)各種“動(dòng)態(tài)效果”，如.GIF格式的動(dòng)畫、FLASH、滾動(dòng)字母等，但這些“動(dòng)態(tài)效果”只是視覺上的，而不是內(nèi)容上的動(dòng)態(tài)。所以這樣的網(wǎng)頁依然是靜態(tài)網(wǎng)頁。 靜態(tài)Web頁面存在著一些重要的問題：（1）所有的用戶看到的頁面效果都是一樣的，因?yàn)榉?wù)器向所有用戶提供的內(nèi)容都是一樣的。 （2）在靜態(tài)Web技術(shù)中，一個(gè)重要的缺點(diǎn)是靜態(tài)Web頁面無法訪問數(shù)據(jù)庫資源，而現(xiàn)在用數(shù)據(jù)庫保存數(shù)據(jù)又是絕大多數(shù)應(yīng)用系統(tǒng)必需的

7、選擇，因?yàn)樾枰褂脭?shù)據(jù)庫進(jìn)行數(shù)據(jù)的CDUR操作（增加Creat，刪除Delete，更新Update，查詢Requery）。 動(dòng)態(tài)網(wǎng)頁就是該網(wǎng)頁文件不僅包括HTML標(biāo)記，而且包含一些程序代碼。這種網(wǎng)頁文件名的后綴依不同的程序設(shè)計(jì)語言而不同，如使用JAVA語言的JSP文件的后綴為.JSP，除此之外，還有一些動(dòng)態(tài)網(wǎng)頁形式，如.asp、.php、.perl、.cgi等形式。動(dòng)態(tài)網(wǎng)頁主要用于實(shí)現(xiàn)客戶端和服務(wù)器端的交互，其內(nèi)容是根據(jù)不同用戶的不同請(qǐng)求由服務(wù)器運(yùn)行程序后生成不同的網(wǎng)頁后返回的。采用動(dòng)態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、搜索查詢、用戶管理、訂單管理等。還需要注意的是動(dòng)態(tài)網(wǎng)

8、頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大提高網(wǎng)站的效率和降低網(wǎng)站維護(hù)的工作量。 動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的根本區(qū)別在于服務(wù)器端返回的HTML文件是事先存儲(chǔ)好的還是由動(dòng)態(tài)網(wǎng)頁程序生成的。靜態(tài)網(wǎng)頁文件里只有HTML標(biāo)記，沒有程序代碼，網(wǎng)頁的內(nèi)容都是事先寫好，存放在服務(wù)器上的，用戶請(qǐng)求哪個(gè)頁面就將哪個(gè)頁面發(fā)送給客戶端即可；動(dòng)態(tài)網(wǎng)頁文件不僅含有HTML標(biāo)記，并且還含有程序代碼，當(dāng)用戶發(fā)出請(qǐng)求時(shí)，服務(wù)器由動(dòng)態(tài)網(wǎng)頁程序生成HTML文件。動(dòng)態(tài)網(wǎng)頁能夠根據(jù)不同的時(shí)間、不同的用戶生成不同的HTML文件，顯示不同的內(nèi)容。 Web應(yīng)用程序開發(fā)模式C/S模式 C/S模式（Client/Server，客戶端/服務(wù)器端模式）是一種傳統(tǒng)的

9、開發(fā)模式，在這種開發(fā)模式中，客戶端是安裝在客戶機(jī)上的，負(fù)責(zé)用戶端業(yè)務(wù)邏輯的處理，且可以根據(jù)不同的用戶的需求進(jìn)行定制。在服務(wù)器端僅僅對(duì)重要的過程和數(shù)據(jù)庫進(jìn)行處理和存儲(chǔ)。在C/S開發(fā)模式中，需要注意將任務(wù)合理分配到客戶端和服務(wù)器端，最簡(jiǎn)單的C/S體系架構(gòu)由兩部分組成，即客戶應(yīng)用程序和數(shù)據(jù)庫服務(wù)器程序，可分別稱為前臺(tái)程序與后臺(tái)程序。 不足之處：（1）伸縮性差：客戶機(jī)與服務(wù)器聯(lián)系很緊密，在修改客戶機(jī)或服務(wù)器的某一方程序時(shí)一般還要修改另一方，這使軟件不易伸縮、維護(hù)量大。（2）性能較差：在數(shù)據(jù)量較大的情況下，數(shù)據(jù)從服務(wù)器端傳送到客戶端進(jìn)行處理時(shí)，會(huì)消耗客戶機(jī)的系統(tǒng)資源，出現(xiàn)網(wǎng)絡(luò)擁塞，從而使整個(gè)系統(tǒng)的性能下

10、降。（3）重用性差：數(shù)據(jù)庫訪問、業(yè)務(wù)規(guī)則等都固化在客戶端應(yīng)用程序中，如果客戶另外提出的其他應(yīng)用需求中也包含了相同的業(yè)務(wù)規(guī)則，程序開發(fā)者將不得不重新編寫相同的代碼。 （4）移植性差：某些處理任務(wù)是在服務(wù)器端由觸發(fā)器或存儲(chǔ)過程來實(shí)現(xiàn)的，其適應(yīng)性和可移性較差。因?yàn)檫@樣的程序可能只能運(yùn)行在特定的數(shù)據(jù)庫平臺(tái)下，當(dāng)數(shù)據(jù)庫平臺(tái)變化時(shí)，這些應(yīng)用程序可能需要重新編寫。 B/S模式 B/S模式（Browser/Server，瀏覽器/服務(wù)器模式）是Web興起后的一種新型的網(wǎng)絡(luò)結(jié)構(gòu)模式，它是在客戶層（Client）和數(shù)據(jù)服務(wù)器層（Data Server）之間添加第三層：應(yīng)用服務(wù)器層。其中客戶層只用來實(shí)現(xiàn)人機(jī)交互,數(shù)據(jù)

11、服務(wù)器層提供數(shù)據(jù)信息服務(wù),應(yīng)用服務(wù)器層來完成應(yīng)用邏輯的實(shí)現(xiàn)、數(shù)據(jù)訪問等功能。這種模式中，系統(tǒng)功能實(shí)現(xiàn)的核心部分集中到服務(wù)器上，簡(jiǎn)化了系統(tǒng)的開發(fā)、維護(hù)和使用。 Web瀏覽器是客戶端最主要的應(yīng)用軟件，客戶機(jī)上只需要安裝一個(gè)瀏覽器即可，如Internet Explorer或Netscape Navigator，服務(wù)器端安裝Oracle、Sybase、Informix或SQL Server等數(shù)據(jù)庫，瀏覽器通過服務(wù)器同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互。大大簡(jiǎn)化了客戶端計(jì)算機(jī)的邏輯功能，減輕了系統(tǒng)維護(hù)與升級(jí)的成本和工作量，降低了用戶的總體成本。 優(yōu)點(diǎn)：（1）B/S結(jié)構(gòu)最大的優(yōu)點(diǎn)就是可以在任何地方進(jìn)行操作而不用安裝任何專

12、門的軟件。只要有一臺(tái)能上網(wǎng)的計(jì)算機(jī)或掌上設(shè)備就能使用，客戶端零維護(hù)。系統(tǒng)的使用性非常容易，只要能上網(wǎng)，再由系統(tǒng)管理員分配一個(gè)用戶名和密碼，就可以使用了。（2）安全性高，隔離了客戶端與數(shù)據(jù)服務(wù)器的直接訪問。（3）易維護(hù)，業(yè)務(wù)邏輯在中間件服務(wù)器上，當(dāng)業(yè)務(wù)規(guī)則發(fā)生改變時(shí)，客戶端不須改動(dòng)，只升級(jí)中間件服務(wù)器層的程序即可。 （4）快速響應(yīng)，通過中間件服務(wù)器層上的負(fù)載均衡及緩存數(shù)據(jù)的能力。（5）系統(tǒng)擴(kuò)展靈活，通過在中間件服務(wù)器層上部署新的程序組件來擴(kuò)展系統(tǒng)規(guī)模。 缺點(diǎn)：（1）B/S架構(gòu)在圖形的表現(xiàn)能力上以及運(yùn)行的速度上弱于C/S架構(gòu)。（2）受程序運(yùn)行環(huán)境限制。由于B/S架構(gòu)依賴瀏覽器，而瀏覽器的版本繁多，

13、很多瀏覽器核心架構(gòu)差別也很大，導(dǎo)致對(duì)于網(wǎng)頁的兼容性有很大影響，尤其是在CSS布局，JAVASCRIPT腳本執(zhí)行等方面，會(huì)有很大影響。 在C/S和B/S 兩種架構(gòu)之間，并沒有嚴(yán)格的界限，兩種架構(gòu)之間沒有好壞之分，使用這兩種架構(gòu)都可以實(shí)現(xiàn)系統(tǒng)的功能。開發(fā)人員可以根據(jù)實(shí)際的需要進(jìn)行選擇，例如需要豐富的用戶體驗(yàn)(如一些網(wǎng)絡(luò)游戲)，那就選擇C/S架構(gòu)，如果更偏重的是功能服務(wù)方面的實(shí)現(xiàn)，就需要選擇B/S架構(gòu)，還有部分管理應(yīng)用系統(tǒng)采用兩種軟件架構(gòu)相結(jié)合的方法。 第二章 靜態(tài)網(wǎng)頁開發(fā)基礎(chǔ) 在網(wǎng)站設(shè)計(jì)中，純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，它的文件擴(kuò)展名是htm或html，可以包含文本、圖像、聲音、F

14、LASH動(dòng)畫、客戶端腳本和ActiveX控件及JAVA小程序等。靜態(tài)網(wǎng)頁是網(wǎng)站建設(shè)的基礎(chǔ)，早期的網(wǎng)站一般都是由簡(jiǎn)單靜態(tài)網(wǎng)頁制作的。靜態(tài)網(wǎng)頁是相對(duì)于動(dòng)態(tài)網(wǎng)頁而言，是指沒有后臺(tái)數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。 HTML語言概述HTML 簡(jiǎn)介 HTML 的英文全稱是Hypertext Marked Language，即超文本標(biāo)記語言, 是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)，用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)，自1990年以來HT

15、ML就一直被用作（是World Wide Web的縮寫，也可簡(jiǎn)寫WEB、中文叫做萬維網(wǎng))的信息表示語言，使用HTML 語言描述的文件，需要通過WEB瀏覽器顯示出效果。 HTML 的基本結(jié)構(gòu)HTML語言格式：卷標(biāo)名稱 屬性名稱屬性值 數(shù)據(jù)內(nèi)容/卷標(biāo)名稱如：您好 一個(gè)HTML文檔是由一系列的元素和標(biāo)簽組成，元素名不區(qū)分大小寫。HTML 用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置，HTML 超文本文檔分文檔頭和文檔體兩部分，文檔頭主要是對(duì)這個(gè)文檔進(jìn)行一些必要的定義，文檔體中才是要顯示的各種文檔信息。 一個(gè)最基本的HTML文檔的代碼： 顯示title的內(nèi)容 內(nèi)容 bgcolor背景色，backgroun

16、d背景圖案, text文本顏色link鏈接文字顏色alink活動(dòng)鏈接文字顏色vlink已訪問鏈接文字顏色leftmargin頁面左側(cè)的留白距離topmargin頁面頂部的留白距離body屬性列表網(wǎng)頁基本結(jié)構(gòu)簡(jiǎn)單舉例 這是標(biāo)題 這是文檔主體，正文部分 常用HTML排版標(biāo)記對(duì)于HTML頁面，文字排版標(biāo)記必不可少，一個(gè)美觀大方的文字頁面能夠確切地傳達(dá)出頁面的主要信息。常見的HTML語言排版標(biāo)記如下：1、標(biāo)記 文本分段一般以開頭、以結(jié)尾。段落標(biāo)記是HTML中最常用的標(biāo)記，雖然可以省略，因?yàn)橄乱粋€(gè)的開始就意味著上一個(gè)的結(jié)束，但最好還是遵循規(guī)范，正規(guī)書寫。標(biāo)記的常用語法格式為： 其中，align用來定義段

17、落的對(duì)齊方式，它可以取以下值：center：居中對(duì)齊。left：靠左對(duì)齊，是默認(rèn)值。right：靠右對(duì)齊。2、和標(biāo)記段落與段落之間一般會(huì)空出一行距離。如果不想分段而只想分行，可以使用標(biāo)記，常用格式為： 一般來說，每當(dāng)瀏覽器窗口被縮小時(shí)，瀏覽器會(huì)自動(dòng)將段落右邊的文字轉(zhuǎn)折至下一行。所以編寫者對(duì)于自己需要斷行的地方，應(yīng)加上標(biāo)記。標(biāo)記僅僅分行而不分段。需要注意的是不是成對(duì)出現(xiàn)的，也就是說，沒有。 在瀏覽器窗口縮小時(shí)，如果不想自動(dòng)折行，可以使用和標(biāo)記，格式為： 在通過各種標(biāo)記對(duì)文字進(jìn)行排版時(shí)如果要保留原始排版效果，例如文本中的空格、制表符等都要保留，則需要使用、標(biāo)記，主要格式為： 其中，width用于指

18、明每行的最大字符數(shù)，wrap說明可以折行，默認(rèn)是不加wrap，也就是不折行。3、標(biāo)記為了使網(wǎng)頁更有層次感，可以使用水平線標(biāo)記，語法為： 4、標(biāo)記 一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽和，其中n為標(biāo)題的等級(jí)。HTML一共提供六個(gè)等級(jí)的標(biāo)題，分別從到。n越小，標(biāo)題字號(hào)就越大，主要格式為： 其中對(duì)齊方式有l(wèi)eft、right、center三種，默認(rèn)為center。5、文字標(biāo)記 在HTML標(biāo)記中，有兩個(gè)標(biāo)記可以指定字體大小，一個(gè)是上一節(jié)講過的標(biāo)記，還有一個(gè)就是標(biāo)記。但標(biāo)記只能用于有限的范圍，而標(biāo)記的功能則更加強(qiáng)大。另外，還有一些設(shè)置字體某個(gè)特點(diǎn)的標(biāo)記，如、等標(biāo)記，它

19、們都是成對(duì)的。HTML常用文本格式 HTML圖片 圖片格式有很多種，在網(wǎng)絡(luò)中使用的圖片格式應(yīng)該能被各種操作系統(tǒng)所接受才行。目前，在網(wǎng)上流行的圖片格式以GIF、JPEG 和PNG為主，圖片文件一般要經(jīng)過壓縮，否則文件太大不利于在網(wǎng)上傳輸。 可以使用標(biāo)記把圖像插入到網(wǎng)頁中了。標(biāo)記的主要語法為： 例如在頁面中插入如下代碼：運(yùn)行程序后會(huì)在頁面中顯示效果如圖所示： 在頁面中image/myimage.jpg是相對(duì)路徑，在HTML頁面中涉及到資源文件的地方(如音樂、視頻、圖片等)就會(huì)涉及絕對(duì)路徑與相對(duì)路徑的概念。 絕對(duì)路徑是指文件在硬盤上真正存在的路徑。 相對(duì)路徑，就是相對(duì)于自己的目標(biāo)文件位置。 在相對(duì)路

20、徑里常使用“./”來表示上一級(jí)目錄。如果有多個(gè)上一級(jí)目錄，可以使用多個(gè)“./”，例如“/”代表上上級(jí)目錄。假設(shè)網(wǎng)頁文件所在目錄為“E:book HTML 第2章”，而“bg.jpg”圖片所在目錄為“E:book HTML”，那么“bg.jpg”圖片相對(duì)于網(wǎng)頁文件來說，是在其所在目錄的上級(jí)目錄里，則引用圖片的語句應(yīng)該為： 超鏈接 所謂超鏈接（hyperlink），就是當(dāng)單擊某個(gè)字或圖片時(shí)，就可以打開另一個(gè)網(wǎng)頁或畫面。 超鏈接的語法根據(jù)其鏈接對(duì)象的不同而有所變化，但都是基于標(biāo)記的，主要語法為： 或者 其中，href是hypertext refernce（超文本引用）的縮寫。 target用于指定如

21、何打開鏈接的網(wǎng)頁，有以下幾個(gè)值：_blank：打開一個(gè)新的瀏覽器窗口顯示。_self：用網(wǎng)頁所在的瀏覽器窗口顯示，是默認(rèn)設(shè)置。_parent：在上一級(jí)窗口打開，常用在框架頁面中，請(qǐng)參看第八章“框架”。_top：在瀏覽器的整個(gè)窗口打開，將會(huì)忽略所有的框架結(jié)構(gòu)。 超鏈接還可以用來發(fā)電子郵件，語法為：鏈接的文字這就創(chuàng)建了一個(gè)自動(dòng)發(fā)送電子郵件的鏈接，“mailto:”（注意其中有一個(gè)半角的冒號(hào)）后邊緊跟想要制動(dòng)發(fā)送的電子郵件的地址，例如：給站長發(fā)email HTML超鏈接 HTML列表 列表（List）是一種常用的數(shù)據(jù)排列方式，它以條列式的模式來顯示數(shù)據(jù)，使讀者能一目了然。在HTML有三種列表，分別是

22、無序列表（unordered lists）、有序列表（ordered lists）和定義列表（definition lists）。 1、無序列表（unordered lists）是一種不編號(hào)的列表方式，而在每一個(gè)項(xiàng)目文字之前，用符號(hào)作為分項(xiàng)標(biāo)識(shí)，最常用的符號(hào)是圓黑點(diǎn)。常用語法為： 第1項(xiàng) 第2項(xiàng) 第n項(xiàng)無序列表由開始，每個(gè)列表項(xiàng)由開始，最后由結(jié)束。 在默認(rèn)情況下，無序列表的項(xiàng)目符號(hào)是“”，但通過type屬性可指定項(xiàng)目符號(hào)，其值有三個(gè)，分別是：disc：默認(rèn)的項(xiàng)目列表符號(hào)“”。circle：空心園符號(hào)“”。square：方塊符號(hào)“” 有序列表（ordered lists）中的每個(gè)列表項(xiàng)使用編號(hào)、

23、而不是符號(hào)來進(jìn)行排列，以表示順序性，一般采用數(shù)字或字母作為順序號(hào)。常用語法為： 第1項(xiàng) 第2項(xiàng) 第n項(xiàng) 有序列表由開始，每個(gè)列表項(xiàng)由開始，最后由結(jié)束。 在默認(rèn)情況下，無序列表的編號(hào)是阿拉伯?dāng)?shù)字，但通過type屬性可指定編號(hào)，其值有五個(gè)，分別是： 1（阿拉伯?dāng)?shù)字1）：用1、2、3、4、編號(hào)。 a：用小寫英文字母a、b、c、d、編號(hào)。 A：用大寫英文字母A、B、C、D、編號(hào)。 i：用小寫羅馬數(shù)字i、ii、iii、iv、編號(hào)。 I（大寫的字母i）：用大寫羅馬數(shù)字、編號(hào)。 在默認(rèn)情況下，有序列表的列表項(xiàng)從1開始編號(hào)，但通過start屬性可設(shè)置起始數(shù)值，它不僅對(duì)數(shù)字起作用，而且對(duì)英文和羅馬字母起作用。

24、定義列表（definition lists）通常用于術(shù)語的定義，它包含兩個(gè)層次的列表，第一層次是需要解釋的名詞，第二層次是具體的解釋。常用語法為： 第1項(xiàng)解釋1 第2項(xiàng)解釋2 第n項(xiàng)解釋n 定義列表由開始，每個(gè)列表項(xiàng)由開始，列表項(xiàng)的解釋由開始。最后由結(jié)束。 HTML列表標(biāo)記 HTML表格 HTML表格用表示。一個(gè)表格可以分成很多行(row)，用表示；每行又可以分成很多單元格(cell)，用表示。這三對(duì)標(biāo)記是創(chuàng)建表格最常用標(biāo)記，需要統(tǒng)一使用。 在、標(biāo)記中嵌套、標(biāo)記，在、標(biāo)記中嵌套、標(biāo)記。 標(biāo)記標(biāo)記中的屬性很多，用于控制表格的整體顯示。常用語法格式為： 標(biāo)記 標(biāo)記用來設(shè)置表格各行的屬性。標(biāo)記的常用

25、語法格式為： 標(biāo)記標(biāo)記的常用語法格式為： 標(biāo)記的一些和或不同的屬性的意義如下：colspan：該單元格在水平方向上跨的列數(shù)，默認(rèn)為1。rowspan：該單元格在垂直方向上跨的行數(shù)，默認(rèn)為1。colspan和rowspan是為制作復(fù)雜表格準(zhǔn)備的，具體使用見例子。nowrap：如果單元格格中的內(nèi)容超過了單元格的寬度，則用此屬性禁止內(nèi)容折行顯示。 HTML表格應(yīng)用 表單的使用 表單(Form)是實(shí)現(xiàn)圖形用戶界面的基本元素，它包括按鈕、文本框、單選框、復(fù)選框等，它們是HTML實(shí)現(xiàn)交互功能的主要接口。程序通過表單向服務(wù)器提交用戶數(shù)據(jù)。表單的使用包括兩個(gè)部分：一部分是用戶界面，提供用戶輸入數(shù)據(jù)的組件；另一

26、部分是處理程序，可以是客戶端程序，在客戶端的瀏覽器中執(zhí)行；也可以是服務(wù)器端程序，在服務(wù)器端執(zhí)行，無論是在客戶端還是在服務(wù)器端處理用戶提交的數(shù)據(jù)，都需要將處理結(jié)果返回到瀏覽器中。 設(shè)計(jì)一個(gè)表單示例程序，定義一個(gè)簡(jiǎn)單的用戶注冊(cè)界面。 編寫一個(gè)表單示例程序，定義了一個(gè)如圖所示簡(jiǎn)單的員工管理錄入界面。 使用frame框架分割瀏覽器窗口 框架（Frame）最主要的功能是用來分割頁面窗口，使每個(gè)“小窗口”能顯示不同的HTML文件。這樣的頁面結(jié)構(gòu)稱為框架結(jié)構(gòu)的頁面，而這些“小窗口”就被稱為框架的“窗口”。 框架又常被稱為幀。利用框架可以將瀏覽器窗口分割成多個(gè)相互獨(dú)立的區(qū)域，每個(gè)區(qū)域可以顯示獨(dú)立的HTML頁面

27、。用標(biāo)記劃分區(qū)域，用標(biāo)記定義各區(qū)域要執(zhí)行的程序。 框架的基本語法如下： 框架的外層標(biāo)志是和，這對(duì)標(biāo)志用來定義主文檔中有幾個(gè)幀、并且各個(gè)幀是如何排列的，定義的方法是使用cols屬性或rows屬性，cols屬性值用來垂直分割窗口，rows屬性值用來水平分割窗口。使用標(biāo)志時(shí)，這兩個(gè)屬性必須至少選擇一個(gè)，否則瀏覽器只顯示第一個(gè)定義的幀。 rows和cols的屬性值可以是百分?jǐn)?shù)、像素值或星號(hào)“*”，其中星號(hào)代表那些未被說明的空間，即除了已說明的部分后的剩下所有的。同時(shí)，所有的幀按照rows和cols的值從左到右、然后從上到下排列。 標(biāo)志放在之間，用來定義某一個(gè)具體的框架。標(biāo)志具有src和name屬性，這

28、兩個(gè)屬性一般都需要賦值。src是此框架要顯示的HTML文件名（包括路徑），name是此框架的名字，這個(gè)名字用來供超鏈接標(biāo)志使用的。 使用frame框架技術(shù)實(shí)現(xiàn)如下頁面的內(nèi)容 應(yīng)用音樂與視頻標(biāo)記 使用標(biāo)記可以將多媒體文件添加進(jìn)網(wǎng)頁中。但僅僅這樣做還不夠，還需要在客戶端的計(jì)算機(jī)中安裝相應(yīng)的播放軟件，這樣瀏覽器才能順利播放。 標(biāo)記的主要語法為： 在該語法中，width和height一定要設(shè)置，單位是像素，否則無法正確顯示播放多媒體文件的軟件。 1、加背景音樂標(biāo)記:2、在頁面中添加影片標(biāo)記:3、在頁面中插入FLASH可以使用+標(biāo)記 滾動(dòng)標(biāo)記在HTML中要設(shè)置動(dòng)態(tài)文字，需要使用標(biāo)記，主要語法為： 滾動(dòng)的

29、文字 一個(gè)垂直滾動(dòng)的消息提示板。 使用Dreamweaver編輯網(wǎng)頁 Dreamweaver 是由Micromedia公司出品的一款流行的專業(yè)從事網(wǎng)頁設(shè)計(jì)、網(wǎng)站管理、網(wǎng)頁可視化編程的應(yīng)用軟件。具有跨平臺(tái)、跨瀏覽器的特點(diǎn)。它與Flash、Fireworks合在一起被稱為網(wǎng)頁制作三劍客，這三個(gè)軟件相輔相承，是網(wǎng)頁制作的最佳選擇。Dreamweaver制作網(wǎng)頁的效率很高，制作出來的網(wǎng)頁兼容性也比較好，F(xiàn)lash主要用來制作精美的網(wǎng)頁動(dòng)畫，而Fireworks用來處理網(wǎng)頁中的圖形。 Dreamweaver的基本操作1、建立站點(diǎn)2、建立網(wǎng)頁3、建立超鏈接 創(chuàng)建表格插入新表格有三種方法：從插入菜單中選擇表

30、格命令。使用組合鍵Ctrl+Alt+t。將對(duì)象面板調(diào)整到Common類上，單擊插入表格按鈕。 設(shè)置表格基本屬性：行數(shù)（rows）、列數(shù)(columns)、表格寬度(width, 單位可用象素或百分比表示)、邊框?qū)挾?border)、單元格間距(cell spacing)、單元格中的內(nèi)容與邊框之間的間隙 (cell padding)。 選定表格：與Word中的操作基本相同。添加行/列：將光標(biāo)置入需在其前面插入行的單元格中，右擊表格插入行/列。刪除行/列：將光標(biāo)置入需刪除的單元格中，右擊表格刪除行/列。 調(diào)整行高/列寬有兩種方法：用類似于Word中表格操作，直接用鼠標(biāo)拖動(dòng)到需要的高/寬。選中所需要

31、的行/列，在屬性面板上的height/width框中輸入所需要的數(shù)值。合并/拆分單元格： 與Word中操作類似，先選中該單元格，然后單擊屬性面板上的合并/拆分按鈕，再從對(duì)話框中給出需要的數(shù)值即可?；蛘哌x中目標(biāo)后右擊，從菜單中選擇Merge Cells(合并)/Spilt Cell（拆分）命令。 表格的嵌套： 在表格中可以再插入一個(gè)完整的表格。選中單元格后，直接從插入菜單里單擊表格即可。導(dǎo)入表格數(shù)據(jù)文件： 可以把其它應(yīng)用程序（如Excel、Access）建立的表格數(shù)據(jù)假如到網(wǎng)頁中。方法：先將表格數(shù)據(jù)文件轉(zhuǎn)換成文本文件，并且每行數(shù)據(jù)要帶分隔符（如逗號(hào)、分號(hào)、冒號(hào)）然后選擇文件導(dǎo)入導(dǎo)入表格數(shù)據(jù)。或從

32、插入菜單中選擇表格數(shù)據(jù)命令。 用表格進(jìn)行頁面布局： 用表格可以對(duì)頁面上的多個(gè)對(duì)象進(jìn)行復(fù)雜的排版。注意：在進(jìn)行頁面布局設(shè)計(jì)時(shí)，表格的邊框（border）一定要設(shè)置為0，這樣設(shè)計(jì)中可以看到表格的虛線框，而瀏覽是沒有任何痕跡，否則比較難看。另外，瀏覽器在下載網(wǎng)頁時(shí)，先下載整個(gè)表格，然后再下載表格中的內(nèi)容，所以在用表格布置頁面時(shí)，不能將整個(gè)網(wǎng)頁的內(nèi)容都放在一個(gè)大表格中，以免影響網(wǎng)頁的下載速度。 層的使用 在Dreamweaver中，通過層（Layer）可以對(duì)文檔內(nèi)容實(shí)現(xiàn)精確的絕對(duì)定位。層相當(dāng)于網(wǎng)頁內(nèi)的一種容器，凡是可以放到網(wǎng)頁上的對(duì)象幾乎都可以放在層中，如：文本、圖像、表格、表單等，層中還可以包含層。

33、層可以重疊，可以控制隱藏或顯示其中的任何一個(gè)，通過設(shè)置行為可以使其交替出現(xiàn)，以產(chǎn)生動(dòng)態(tài)效果。在HTML中，層用 或來標(biāo)記，現(xiàn)在版本的瀏覽器一般都支持層標(biāo)記。 創(chuàng)建： 從插入菜單中選擇層命令，即可插入一個(gè)默認(rèn)大小的層（200 x115）。需要改變其大小時(shí)，可以直接用鼠標(biāo)拖動(dòng)邊框上的控制塊，或用從屬性面板中修改其高度（H）和寬度（W）。屬性設(shè)置： 通過屬性面板可以控制層的可見性、溢出處理、背景顏色、背景圖片、距網(wǎng)頁左邊距/頂邊距、層中可見區(qū)域大小。 使用Dreamweaver設(shè)計(jì)如圖所示的網(wǎng)頁 案例實(shí)踐案例需求說明 使用Dreamweaver建立網(wǎng)站站點(diǎn)，并在網(wǎng)站中建立簡(jiǎn)單的網(wǎng)頁，在網(wǎng)頁中使用表單

34、設(shè)計(jì)新用戶注冊(cè)頁面，頁面的設(shè)計(jì)效果如圖所示。 技能訓(xùn)練要點(diǎn)1. 熟悉Dreamweaver工作環(huán)境。2. 掌握創(chuàng)建、編輯和刪除本地站點(diǎn)的方法。3. 掌握創(chuàng)建網(wǎng)頁文檔的方法。4. 掌握頁面屬性設(shè)置的方法。5. 掌握表單的使用方法。6. 掌握創(chuàng)建和編輯表格的方法。第三章 WEB客戶端編程技術(shù) 在瀏覽網(wǎng)頁時(shí)，除了能看到靜態(tài)的文本、圖像，有時(shí)也會(huì)看到浮動(dòng)的動(dòng)畫、信息框動(dòng)態(tài)變換的時(shí)鐘信息以及用戶名和密碼的確認(rèn)等。頁面上這些實(shí)時(shí)的、動(dòng)態(tài)的、可交互的網(wǎng)頁效果在web應(yīng)用開發(fā)時(shí)可以使用JavaScript語言來編寫實(shí)現(xiàn)。JavaScript是一種用于Web程序開發(fā)的編程語言，它功能強(qiáng)大，主要用于開發(fā)交互式的W

35、eb頁面。JavaScript不需要進(jìn)行編譯，可以直接嵌入在HTML頁面中。 CSS(Cascading Style Sheet)即層疊樣式表，又稱為級(jí)聯(lián)樣式,它是一種用來表現(xiàn)HTML文件樣式的計(jì)算機(jī)語言。是網(wǎng)頁設(shè)計(jì)不可缺少的工具之一。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫法，針對(duì)各類人群，有較強(qiáng)的易讀性。CSS文件可由記事本和Dreamweaver等網(wǎng)頁文件編輯器打開。 JavaScript概述 JavaScript是Web程序開發(fā)過程中一種功能強(qiáng)大的編程語言，用于開發(fā)交互式的Web頁面。它不需要進(jìn)行編譯，而是直接嵌入在HTML頁面中，把靜態(tài)頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動(dòng)態(tài)

36、頁面。 JavaScript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的腳本語言。JavaScript的前身叫做LiveScript，是由Netscape(網(wǎng)景)公司開發(fā)的腳本語言。后來在Sun公司推出著名的Java語言之后，Netscape公司和Sun公司于1995年一起重新設(shè)計(jì)了LiveScript，并把它改名為JavaScript。 在概念和設(shè)計(jì)方面，JAVA和JavaScript是兩種完全不同的語言。Java是面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，用于開發(fā)企業(yè)級(jí)應(yīng)用程序，而JavaScript是在瀏覽器中執(zhí)行，用于開發(fā)客戶端瀏覽器的應(yīng)用程序，能夠?qū)崿F(xiàn)用

37、戶與瀏覽器的動(dòng)態(tài)交互。JavaScript是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（Event Driven）并具有安全性能的解釋性腳本語言，它具有以下幾個(gè)主要特點(diǎn)：解釋性基于對(duì)象事件驅(qū)動(dòng)跨平臺(tái)性安全性 JavaScript語法變量聲明與賦值 在JavaScript中，使用變量前需要先對(duì)其進(jìn)行聲明。所有的JavaScript變量都由關(guān)鍵字var聲明，語法格式如下：var abc; 在聲明變量的同時(shí)也可以對(duì)變量進(jìn)行賦值，例如：var abc=1;聲明變量時(shí)，需要遵循的規(guī)則如下：（1）可以使用一個(gè)關(guān)鍵字var同時(shí)聲明多個(gè)變量，例如：var a,b,c （2）可以在聲明變量的同時(shí)對(duì)其賦值，即初始化，

38、例如： var a=1,b=2,c=3； （3）如果只是聲明了變量，并未對(duì)其賦值，則其默認(rèn)為undefined。（4）var語句可以用作for循環(huán)和for/in循環(huán)的一部分，這樣就使循環(huán)變量的聲明成為循環(huán)語法自身的一部分，使用起來比較方便。（5）使用var語句多次聲明同一個(gè)變量，如果重復(fù)聲明的變量已經(jīng)有一個(gè)初始值，那么此時(shí)的聲明就相當(dāng)于對(duì)變量的重新賦值。 由于JavaScript采用弱類型的形式，因此可以不理會(huì)變量的數(shù)據(jù)類型，即可把任意類型的數(shù)據(jù)賦值給變量。 例如，聲明一些變量，具體代碼如下：var a=100 /數(shù)值類型var str=網(wǎng)頁平面設(shè)計(jì)學(xué)院 /字符串類型var bue=true

39、/布爾類型 在JavaScript中，變量可以先不聲明，而在使用時(shí)，根據(jù)變量的實(shí)際作用來確定其所屬的數(shù)據(jù)類型，為了良好的編程習(xí)慣和能夠及時(shí)發(fā)現(xiàn)代碼中的錯(cuò)誤，建議在使用變量前就對(duì)其聲明。 JavaScript的基本語法規(guī)則1、執(zhí)行順序流程控制語句依然分為順序結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)。（1）順序結(jié)構(gòu)按代碼順序執(zhí)行。（2）選擇結(jié)構(gòu)使用關(guān)鍵字if、switch。 if語法格式為：if(判斷條件)/條件為真時(shí)執(zhí)行的語句else/條件為假時(shí)執(zhí)行的語句其中，else部分是可選的 switch語句稱為開關(guān)語句，實(shí)現(xiàn)多重條件判斷，語法格式為：switch(variable) case1: /doeswhenca

40、se1istrue break; case2:/doeswhencase2istrue break . default:/doeswhennonecaseistrue (3)循環(huán)結(jié)構(gòu)：關(guān)鍵字while、do、for, 語法格式為：while循環(huán)語法格式為：while(循環(huán)條件表達(dá)式)/循環(huán)體dowhile循環(huán)語法格式為：do/循環(huán)體 while(循環(huán)條件表達(dá)式) for循環(huán)的語法格式為：for(控制變量賦初值;測(cè)試條件表達(dá)式;修改控制變量) /循環(huán)體 2、大小寫敏感 JavaScript嚴(yán)格區(qū)分字母大小寫。也就是說，在輸入關(guān)鍵字、函數(shù)名、變量以及其他標(biāo)識(shí)符時(shí)，都必須采用正確的大小寫形式。例如，

41、變量username與變量userName是兩個(gè)不同的變量。3、每行結(jié)尾的分號(hào)可有可無 JavaScript語言并不要求必須以分號(hào)（；）作為語句的結(jié)束標(biāo)記。如果語句的結(jié)束處沒有分號(hào)，JavaScript會(huì)自動(dòng)將該行代碼的結(jié)尾作為語句的結(jié)尾。 4、注釋 JavaScript為開發(fā)人員提供了兩種注釋：?jiǎn)涡凶⑨尯投嘈凶⑨?，具體如下： 單行注釋使用雙斜線“/”作為注釋標(biāo)記，將“/”放在一行代碼的末尾或者單獨(dú)一行的開頭，它后面的內(nèi)容就是注釋部分。 多行注釋可以包含任意行數(shù)的注釋文本。多行注釋是以“/*”標(biāo)記開始，以“*/”標(biāo)記結(jié)束，中間的所有內(nèi)容都為注釋文本。這種注釋可以跨行書寫，但不能有嵌套的注釋。

42、函數(shù)1、函數(shù)定義function 函數(shù)名 (參數(shù)1,參數(shù)2,) 函數(shù)體 function：在聲明函數(shù)時(shí)必須使用的關(guān)鍵字。函數(shù)名：創(chuàng)建函數(shù)的名稱，是唯一的。 參數(shù)：外界傳遞給函數(shù)的值，它是可選的，當(dāng)有多個(gè)參數(shù)時(shí)，各參數(shù)用“，”分隔。函數(shù)體：函數(shù)定義的主體，專門用于實(shí)現(xiàn)特定的功能。 2、函數(shù)的調(diào)用當(dāng)函數(shù)定義完成后，要想在程序中發(fā)揮函數(shù)的作用，必須得調(diào)用這個(gè)函數(shù)。函數(shù)的調(diào)用非常簡(jiǎn)單，只需引用函數(shù)名，并傳入相應(yīng)的參數(shù)即可。函數(shù)調(diào)用的語法格式如下：函數(shù)名稱(參數(shù)1,參數(shù)2,)在上述語法格式中，“參數(shù)1，參數(shù)2”是可選的，用于表示參數(shù)列表，其值可以是一個(gè)或多個(gè)。 例3-1 函數(shù)調(diào)用示例 常用對(duì)象 wind

43、ow對(duì)象是所有對(duì)象中最頂層的對(duì)象，HTML 文檔在 window對(duì)象中顯示。navigator對(duì)象可以讀取瀏覽器相關(guān)的信息。screen對(duì)象可以讀取瀏覽器運(yùn)行的物理環(huán)境，例如屏幕的寬和高，此處單位為像素。document對(duì)象是整個(gè)網(wǎng)頁HTML內(nèi)容，每個(gè)HTML文檔被瀏覽器加載以后都會(huì)在內(nèi)存中初始化一個(gè)document對(duì)象。history對(duì)象可以控制瀏覽器的前進(jìn)和后退。location對(duì)象可以控制頁面的跳轉(zhuǎn)。 window對(duì)象window對(duì)象是所有JavaScript對(duì)象中最頂層的對(duì)象，整個(gè)HTML文檔就是一個(gè)瀏覽器窗口，當(dāng)打開一個(gè)瀏覽器窗口以后，不管有沒有內(nèi)容，都會(huì)在內(nèi)存中形成一個(gè)window

44、對(duì)象。window對(duì)象所提供的方法很多，在下面的內(nèi)容中將進(jìn)行對(duì)最常用的幾種方法進(jìn)行介紹。（1）窗體的創(chuàng)建和關(guān)閉 利用window對(duì)象可以新建瀏覽器窗口，也可以關(guān)閉瀏覽器窗口，下面來看具體的操作代碼。 例3-2 窗體的創(chuàng)建和關(guān)閉示例 var win; function createWin() win = window.open(,width=300,height=200); function closeWin() if (win) win.close(); （2） 三種常用的對(duì)話框 在window對(duì)象中，有三種常用的對(duì)話框，第一種是警告對(duì)話框，第二種是確認(rèn)對(duì)話框，第三種是輸入對(duì)話框。在面這個(gè)示例

45、中展示了這三個(gè)對(duì)話框的用法。 例3-3 三種常用的對(duì)話框 document對(duì)象 利用document對(duì)象可以訪問頁面上的任何元素。通過控制這些元素可以完成與用戶的互動(dòng) （1）利用 document 定位 HTML 頁面元素 所有的 HTML 頁面元素都可以用 document.getElementById()這個(gè)方法訪問，還有一部分HTML頁面元素可以使用數(shù)組來訪問，例如表單元素就可以使用 document.forms“formName”或者是document.forms“formIndex”來訪問，其中formName是表單的名稱，formIndex是表單的序號(hào)。 當(dāng)HTML頁面中使用了框架

46、集frameset時(shí)，使用document對(duì)象定位frame中的元素時(shí)，首先要取得frame的document 對(duì)象，然后在這個(gè)對(duì)象上繼續(xù)操作。這個(gè)document對(duì)象可以這樣獲得：document.frames“framesName”.document，這里的frameName是frame的名稱，取得的這個(gè)frame的document對(duì)象使用方法和其他document的使用方法是一樣的，在這個(gè)document基礎(chǔ)上可以繼續(xù)定位frame 中的元素。 (2) 利用document對(duì)象動(dòng)態(tài)生成HTML頁面 用document對(duì)象不僅僅可以取出或者設(shè)置HTML頁面元素的值，而且可以動(dòng)態(tài)的生成整個(gè)新

47、的HTML文檔。下面的例子就是利用document對(duì)象生成一個(gè)新的HTML文檔。 例3-4 動(dòng)態(tài)生成HTML頁面 注意：在JavaScript的字符串操作中，不允許在單引號(hào)中嵌套單引號(hào)或者在雙引號(hào)中嵌套雙引號(hào)，但是這兩種引號(hào)可以交叉使用，可以在雙引號(hào)中嵌套單引號(hào)，也可以在單引號(hào)中嵌套雙引號(hào)。 3、location對(duì)象 在HTML標(biāo)簽中可以用超鏈接標(biāo)簽來控制網(wǎng)頁中的跳轉(zhuǎn)，在JavaScript中如果要實(shí)現(xiàn)類似的網(wǎng)頁跳轉(zhuǎn)功能只能選擇 location 對(duì)象，這個(gè)對(duì)象的使用方法非常簡(jiǎn)單，只需要在 JavaScript 代碼中添加下面這行代碼即可。 window.location.href=“”; w

48、indow對(duì)象就是要控制的目標(biāo)窗體，賦值的內(nèi)容就是窗體將要跳轉(zhuǎn)到的頁面，這行代碼可以實(shí)現(xiàn)類似超鏈接標(biāo)簽的效果。 JavaScript的應(yīng)用1、在HTML頁面嵌入JavaScript腳本 在HTML文檔中，通過標(biāo)記及其相關(guān)屬性可以引入JavaScript代碼。標(biāo)簽的常用屬性如表所示。屬性說明language設(shè)置所使用的腳本語言及版本src設(shè)置一個(gè)外部腳本文件的路徑位置type設(shè)置所使用的腳本語言，此屬性已代替language屬性defer表示當(dāng)HTML文檔加載完畢后再執(zhí)行腳本語言 在HTML頁面中鏈接外部的JavaScript文件在Web頁面引入JavaScript的另一種方法是采用鏈接外部Ja

49、vaScript文件的形式。如果腳本代碼比較復(fù)雜或是同一段代碼需要被多個(gè)頁面使用，則可以將這些腳本代碼放置在一個(gè)單獨(dú)的文件中（保存文件的擴(kuò)展名是.js），然后在需要使用該代碼的Web頁面中鏈接該JavaScript文件即可。在Web頁面中鏈接外部JavaScript文件的語法格式如下： 需要注意的是，調(diào)用外部文件myjs.js時(shí)，首先需要編寫外部的JavaScript文件，并命名為myjs.js。然后，在HTML頁面中調(diào)用外部的JavaScript文件myjs.js 設(shè)計(jì)如下表單: CSS(Cascading Style Sheet)即層疊樣式表，又稱為級(jí)聯(lián)樣式,它是一種用來表現(xiàn)HTML文件樣

50、式的計(jì)算機(jī)語言。是網(wǎng)頁設(shè)計(jì)不可缺少的工具之一。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫法，針對(duì)各類人群，有較強(qiáng)的易讀性。CSS文件可由記事本和Dreamweaver等網(wǎng)頁文件編輯器打開。 通常情況下，CSS的描述部分由三部分組成，分別是選擇器、屬性和屬性值，寫法如下：選擇器屬性：屬性值； ，例如：h1 color: red; font-size: 25px; 。 在網(wǎng)頁中引用CSS1、內(nèi)部樣式表： 內(nèi)部樣式表即在網(wǎng)頁中使用標(biāo)記把一個(gè)或多個(gè)CSS樣式定義包含起來。使用這種方法通常會(huì)把標(biāo)記置于標(biāo)記內(nèi)，這樣做的好處是能讓瀏覽器預(yù)先加載該樣式表。 2、外部樣式表： 可以把CSS樣式代碼單獨(dú)寫

51、在一個(gè)以“css”為擴(kuò)展名的文件中，然后在需要應(yīng)用該樣式的網(wǎng)頁中使用標(biāo)記引入該樣式表。例如編寫了一個(gè)樣式表文件Mycss.css，如果某頁面需要使用該樣式表文件，則可在標(biāo)記內(nèi)用以下列語句引用它： 3、內(nèi)嵌樣式： 如果只要修改網(wǎng)頁中的單個(gè)組件（如某個(gè)文本框元素），就可以使用內(nèi)嵌樣式為一個(gè)標(biāo)記指定style屬性。如： 這種樣式只作用于這個(gè)元素，而不影響其他元素的樣式。內(nèi)嵌樣式表多用于修改局部元素的CSS樣式。 使用import導(dǎo)入樣式表的方法類似于使用標(biāo)記引入外部樣式表。該方法也是在HTML文檔的和標(biāo)記之間插入，而且要出現(xiàn)在標(biāo)記內(nèi)。 CSS選擇器1、標(biāo)記選擇器 語法定義實(shí)例：h1 color: r

52、ed; font-size: 25px; “h1”代表的是HTML語言中的內(nèi)部標(biāo)記語言，如p、body、hr等關(guān)鍵詞。color、font-size都為其屬性，“：”后面的為其對(duì)應(yīng)的值。 2、類別選擇器 語法定義實(shí)例：.myclass123 color: red; font-size: 25px; 以“.”為開頭的格式，而“myclass123”是自定義的名字，不是HTML語言中的內(nèi)部標(biāo)記語言。3、ID選擇器 語法定義實(shí)例：# myid789 color: red; font-size: 25px; 以“#”為開頭的格式，而“myid789”是自定義的名字，不是HTML語言中的內(nèi)部標(biāo)記語言。

53、CSS屬性設(shè)置CSS常用文本屬性包括文本對(duì)齊屬性(text-align)，其值可取left、right和center；文本修飾屬性的取值為：none（無任何修飾）、underline（下劃線）、line-through（在文字中間劃線）、overline（在文字上邊劃線）。除此之外，還有文本縮進(jìn)屬性(text-indent)、行高屬性(line-height)、字間距屬性(letter-spacing)等，這幾個(gè)屬性都可以使用毫米、厘米、像素?cái)?shù)、百分比等類型。 字體屬性是CSS最基本的屬性，其最常用的屬性包括font-family、font-style、font-weight、font-siz

54、e等，其中font-family定義使用哪種字體，font-style定義是否使用斜體，font-weight定義字體的粗細(xì)，font-size定義字體的大小。 字體及顏色屬性示例 JavaScript+DIV+CSS結(jié)合 在Web應(yīng)用中，可以使用JavaScript+DIV+CSS結(jié)合實(shí)現(xiàn)下拉菜單，下拉菜單在網(wǎng)頁中使用很普遍，在學(xué)習(xí)了JavaScript和CSS就可以輕松實(shí)現(xiàn)。其原理就是用 JavaScript 控制不同DIV的顯示和隱藏，其中所有的 DIV都是用CSS定位方法提前定義好位置和表現(xiàn)形式，下拉的效果只是當(dāng)鼠標(biāo)經(jīng)過的時(shí)候觸發(fā)一個(gè)事件，把對(duì)應(yīng)的DIV內(nèi)容顯示出來而已。下面的例子中將

55、會(huì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單。 下拉菜單示例: 案例實(shí)踐1、案例需求說明 2、技能訓(xùn)練要點(diǎn) 本案例主要讓讀者自己實(shí)現(xiàn)頁面驗(yàn)證效果，學(xué)會(huì)如何書寫JavaScript程序，了解各元素的功能和實(shí)現(xiàn)方法；并學(xué)會(huì)如何使用JavaScript程序來驗(yàn)證網(wǎng)頁的常用控件。掌握CSS樣式表功能；熟悉樣式表的創(chuàng)建，并會(huì)在網(wǎng)頁中運(yùn)用樣式表。 3、案例實(shí)現(xiàn)第四章 JSP開發(fā)技術(shù) JSP 簡(jiǎn)介 JSP是Java Server Pages的縮寫，是1999年推出的一種動(dòng)態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。JSP是基于Java Servlet 以及整個(gè)Java體系的動(dòng)態(tài)Web頁面開發(fā)技術(shù)，利用這一技術(shù)可以建立安全、跨平臺(tái)的高效動(dòng)態(tài)網(wǎng)站。 在網(wǎng)頁程

56、序中加入Java程序片段和JSP標(biāo)記就構(gòu)成了一個(gè)JSP頁面程序。JSP頁面程序文件以“.jsp”為擴(kuò)展名。一個(gè)JSP頁面程序可由5種元素組合而成：分別是HTML相關(guān)標(biāo)記（包括JavaScript腳本）、Java腳本、JSP指令、JSP動(dòng)作標(biāo)記和JSP內(nèi)置對(duì)象。 JSP的運(yùn)行原理 當(dāng)服務(wù)器上的一個(gè)JSP頁面被第一次請(qǐng)求執(zhí)行時(shí)，服務(wù)器上的JSP引擎首先將JSP頁面文件轉(zhuǎn)譯成一個(gè)java文件，再將這個(gè)java文件編譯生成字節(jié)碼文件，然后通過執(zhí)行字節(jié)碼文件響應(yīng)客戶的請(qǐng)求，而當(dāng)這個(gè)JSP頁面再次被請(qǐng)求執(zhí)行時(shí)，JSP引擎將直接執(zhí)行這個(gè)字節(jié)碼文件來響應(yīng)客戶，這也是JSP比ASP速度快的一個(gè)原因。 (1)把J

57、SP頁面中普通的HTML標(biāo)記符號(hào)（頁面的靜態(tài)部分）交給客戶的瀏覽器負(fù)責(zé)顯示。(2)執(zhí)行“”之間的java程序片（JSP頁面中的動(dòng)態(tài)部分），并把執(zhí)行結(jié)果交給客戶的瀏覽器顯示。(3)當(dāng)多個(gè)客戶請(qǐng)求一個(gè)JSP頁面時(shí)，JSP引擎為每個(gè)客戶啟動(dòng)一個(gè)線程而不是啟動(dòng)一個(gè)進(jìn)程，這些線程由JSP引擎服務(wù)器來管理，與傳統(tǒng)的CGI為每個(gè)客戶啟動(dòng)一個(gè)進(jìn)程相比較，效率要高的多。 JSP開發(fā)環(huán)境安裝與配置 JDK的下載、安裝及環(huán)境變量配置 Tomcat安裝,在安裝Tomcat之前最好要配置一個(gè)環(huán)境變量叫JAVA_HOME，它的值是安裝JDK的根目錄。例如： D: Javajdk1.6.0_12 通常為了方便，我們把tom

58、cat.exe這個(gè)文件創(chuàng)建一下桌面的快捷方式。運(yùn)行Tomcat服務(wù)器后，在IE地址欄里面輸入http:/localhost:8080或:8080， 出現(xiàn)圖所示的界面表明Tomcat服務(wù)器安裝成功。 JSP動(dòng)態(tài)網(wǎng)頁開發(fā) JSP基本語法 JSP是一種很容易學(xué)習(xí)和使用的在服務(wù)器端編譯執(zhí)行的Web程序設(shè)計(jì)語言，其腳本語言采用Java，完全擁有Java的優(yōu)點(diǎn)。通過JSP能使網(wǎng)頁的動(dòng)態(tài)部分與靜態(tài)部分有效分開，只要用熟悉的DW之類網(wǎng)頁制作工具，編寫普通的HTML，然后通過專門的JSP標(biāo)簽將動(dòng)態(tài)程序設(shè)計(jì)部分包含進(jìn)來就可以了。被“開始標(biāo)簽（）”包圍的部分稱為JSP元素內(nèi)容，主要是符合Java語法的Java程序，

59、這些內(nèi)容由JSP引擎解讀和處理。 表4-1 JSP基本元素和語法一覽表元素類型JSP元素語 法解 釋腳本元素表達(dá)式表達(dá)式經(jīng)過運(yùn)算然后輸出到頁面程序碼片段嵌入Java代碼聲明嵌入JSP中，用于聲明變量、方法、類、對(duì)象注釋在將JSP轉(zhuǎn)譯成Servlet時(shí)，將被忽略指令元素JSP頁面指令 在載入時(shí)提供JSP引擎使用JSP包含指令 一個(gè)在經(jīng)過轉(zhuǎn)譯成Servlet之后被包含進(jìn)來的文件動(dòng)作組件jsp：include 當(dāng)頁面得到請(qǐng)求時(shí)，所包含的 文件jsp：forward 將頁面得到的請(qǐng)求轉(zhuǎn)向下-頁jsp：param 該組件配合和一起使用，可以將param組件中的值傳遞到include和forword動(dòng)作組

60、件要加載的文件中jsp：useBean找到并建立JavaBean對(duì)象jsp：setProperty設(shè)置JavaBean的屬性jsp：getProperty 得到JavaBean的屬性 JSP腳本元素1表達(dá)式JSP表達(dá)式的輸出格式為：。JSP表達(dá)式的結(jié)果可以轉(zhuǎn)換成字符串并且直接輸出到網(wǎng)頁上。2程序碼片段JSP程序碼片段包含在標(biāo)簽里。這段Java程序代碼會(huì)在Web服務(wù)器端執(zhí)行。使用程序代碼片段可以在原始的HTML或XML內(nèi)部建立有流程控制程序。 3聲明JSP聲明可以定義網(wǎng)頁內(nèi)的變量、類、函數(shù)或存儲(chǔ)信息，讓JSP網(wǎng)頁的其余部分能夠使用。聲明的格式為：。需要注意的是要在變量聲明的后面加上分號(hào)，就跟任何