JavaWeb程序設(shè)計(jì) 課件 ch01 JavaWeb開發(fā)環(huán)境配置、ch02 HTML 基礎(chǔ)

第1章JavaWeb開發(fā)環(huán)境配置本課教學(xué)內(nèi)容B/S結(jié)構(gòu)服務(wù)器安裝IDE安裝第一個(gè)Web項(xiàng)目B/S簡(jiǎn)介兩種基本結(jié)構(gòu)C/S（客戶機(jī)/服務(wù)器）B/S（瀏覽器/服務(wù)器）B/S簡(jiǎn)介C/S（客戶機(jī)/服務(wù)器） C/S，分為客戶機(jī)和服務(wù)器兩層，把應(yīng)用軟件安裝在客戶機(jī)端，通過(guò)網(wǎng)絡(luò)與服務(wù)器端相互通信。如果客戶端改動(dòng)了(如界面豐富，功能增加)，就必須通知所有的客戶端重新安裝，維護(hù)稍有不便C/S結(jié)構(gòu)模式圖B/S簡(jiǎn)介B/S（瀏覽器/服務(wù)器） B/S結(jié)構(gòu)卻可以不用通知客戶端安裝某個(gè)軟件，內(nèi)容修改了，也不需要通知客戶端升級(jí)。B/S也分為客戶機(jī)和服務(wù)器兩層，但是客戶機(jī)上不用安裝軟件，只需要使用瀏覽器即可B/S結(jié)構(gòu)模式圖Web程序定義：Web原意是"蜘蛛網(wǎng)"，或"網(wǎng)"。在互聯(lián)網(wǎng)等技術(shù)領(lǐng)域，特指網(wǎng)絡(luò)，在應(yīng)用程序領(lǐng)域，又是"WorldWideWeb(萬(wàn)維網(wǎng))"的簡(jiǎn)稱。在Web程序結(jié)構(gòu)中，瀏覽器端與Web服務(wù)器端采用請(qǐng)求/響應(yīng)模式進(jìn)行交互。Web程序運(yùn)行描述客戶端Web服務(wù)器數(shù)據(jù)庫(kù)服務(wù)器1:用戶輸入2:發(fā)送請(qǐng)求5:返回響應(yīng)3:訪問(wèn)數(shù)據(jù)4:返回結(jié)果6:顯示

瀏覽器端與服務(wù)器端的交互模式Web程序運(yùn)行描述瀏覽器端與服務(wù)器端的交互模式過(guò)程描述：客戶端(通常是瀏覽器，如IE、Firefox等)接受用戶的輸入，如用戶名、密碼、查詢字符串等客戶端向Web服務(wù)器發(fā)送請(qǐng)求：輸入之后，提交，客戶端把請(qǐng)求信息（包含表單中的輸入以及其他請(qǐng)求等信息）發(fā)送到Web服務(wù)器端，客戶端等待服務(wù)器端的響應(yīng)Web程序運(yùn)行描述數(shù)據(jù)處理：Web服務(wù)器端使用某種腳本語(yǔ)言訪問(wèn)數(shù)據(jù)庫(kù)，查詢數(shù)據(jù)，并獲得查詢結(jié)果數(shù)據(jù)庫(kù)向Web服務(wù)器中的程序返回結(jié)果發(fā)送響應(yīng)：Web服務(wù)器端向客戶端發(fā)送響應(yīng)信息（一般是動(dòng)態(tài)生成的HTML頁(yè)面）顯示：由用戶的瀏覽器解釋HTML代碼，呈現(xiàn)用戶界面Web程序應(yīng)用于Web的編程語(yǔ)言：CGIPHPASPJSP服務(wù)器的作用要建立Web網(wǎng)站，最基本的要求是要讓客戶能夠通過(guò)http/https協(xié)議訪問(wèn)網(wǎng)站里面的網(wǎng)頁(yè)。為了能通過(guò)http/https協(xié)議訪問(wèn)網(wǎng)頁(yè)，需將網(wǎng)頁(yè)放在服務(wù)器中運(yùn)行。Java系列的服務(wù)器很多，如Tomcat、WebLogic等。服務(wù)器安裝-Tomcat下載。

在瀏覽器地址欄中輸入：，可以看到tomcat的可下載版本在Windows環(huán)境下，選擇"WindowsServiceInstaller"，即可下載安裝版本。下載之后,得到一個(gè)可執(zhí)行文件，在本章中為：apache-tomcat-6.0.45.exe。注意，也可以下載壓縮包服務(wù)器安裝-Tomcat雙擊安裝文件即可進(jìn)行安裝，具體安裝過(guò)程見(jiàn)課本圖解如果是默認(rèn)安裝，Tomcat安裝完畢之后，可以在C:\ProgramFiles\ApacheSoftwareFoundation\Tomcat6.0下找到安裝的目錄服務(wù)器安裝-TomcatTomcat安裝目錄中，比較重要的文件夾或文件的內(nèi)容如下表服務(wù)器安裝-TomcatTomcat安裝后完畢后需要測(cè)試其是否安裝成功，步驟為：1.進(jìn)入Tomcat安裝目錄下的bin目錄；2.雙擊bin目錄下的Tomcat6.exe；3.打開瀏覽器，在地址欄輸入“http://localhost:8080/index.jsp”，若能正常訪問(wèn)即安裝成功。服務(wù)器安裝-Tomcat啟動(dòng)Tomcat的過(guò)程中，可能會(huì)遇到端口被占用的情況，這時(shí)可以配置服務(wù)器，將服務(wù)器運(yùn)行的端口號(hào)改為別的端口。找到Tomcat安裝目錄下的文件“/conf/server.xml”；使用記事本或?qū)懽职宕蜷_文件，在文件中找到“Connectorport=8080”；將“8080”改為“8888”，然后保存配置文件；重啟Tomcat服務(wù)器。IDE安裝IDE(IntegratedDevelopmentEnvironment，集成開發(fā)環(huán)境)，是幫助用戶進(jìn)行快速開發(fā)的軟件。如JCreator、Eclipse、DreamWeaver，都屬于IDE。Java系列的IDE很多，如JBuilder、JCreator、Eclipse、MyEclipse等。其中，MyEclipse是收費(fèi)軟件，但是對(duì)JavaEE應(yīng)用開發(fā)進(jìn)行了很多支持，功能比較強(qiáng)大。IDE安裝-MyEclipse在瀏覽器地址欄中輸入：，能夠看到MyEclipse的各個(gè)版本?？梢愿鶕?jù)提示下載。下載之后，得到一個(gè)可執(zhí)行文件，為：MyEclipse_7.0_win32.exe。雙擊下載后的安裝文件，可以根據(jù)提示進(jìn)行安裝，具體安裝過(guò)程見(jiàn)課本圖解。綁定MyEclipse和服務(wù)器在MyEclipse中使用服務(wù)器，需要首先綁定JDK。雖然MyEclipse下已經(jīng)內(nèi)置了Java環(huán)境，但仍可以使用自行安裝的JDK來(lái)進(jìn)行支持。具體的綁定過(guò)程見(jiàn)課本圖解。綁定好了JDK后，需要在MyEclipse中配置自行安裝的Tomcat。建立Web項(xiàng)目創(chuàng)建Web網(wǎng)站所涉及的幾個(gè)步驟如下：創(chuàng)建Web項(xiàng)目，建立基本結(jié)構(gòu)；設(shè)計(jì)Web項(xiàng)目的目錄結(jié)構(gòu)，將網(wǎng)站中的各個(gè)文件分門別類；編寫Web項(xiàng)目的代碼，編寫網(wǎng)頁(yè)；部署Web項(xiàng)目，在服務(wù)器中運(yùn)行該項(xiàng)目。在MyEclipse中創(chuàng)建Web項(xiàng)目見(jiàn)課本圖解目錄結(jié)構(gòu)Web項(xiàng)目要求按特定的目錄結(jié)構(gòu)組織文件，當(dāng)在MyEclipse中創(chuàng)建完畢新的Web項(xiàng)目，就可以在MyEclipse的"PackageExplorer"中看到該Web項(xiàng)目的目錄結(jié)構(gòu)，由MyEclipse自動(dòng)生成。目錄用途src目錄：用來(lái)存放Java源文件。WebRoot目錄：是該Web應(yīng)用的頂層目錄，也稱為文檔根目錄，由以下部分組成：

兩個(gè)重要目錄(不要隨意修改或者刪除)：META-INF目錄：系統(tǒng)自動(dòng)生成，存放系統(tǒng)描述信息，一般情況下使用較少目錄用途W(wǎng)EB-INF目錄：該目錄存在于文檔根目錄下。但是該目錄不能被引用，即該目錄下存放的文件無(wú)法對(duì)外發(fā)布，則無(wú)法被用戶訪問(wèn)到。web.xml：Web應(yīng)用的配置文件，不能刪除或隨意修改。lib目錄：其中包含Web應(yīng)用所需的.jar或.zip文件。classes目錄：在MyEclipse中沒(méi)有顯示出來(lái)，里面包含的是src目錄下的Java源文件所編譯的class文件。目錄用途其他目錄：主要是網(wǎng)站中的一些用戶文件。靜態(tài)文件：包括所有的HTML網(wǎng)頁(yè)、CSS文件、圖像文件等。JSP文件。部署頁(yè)面編寫完成之后，必須要將整個(gè)項(xiàng)目放到服務(wù)器中去運(yùn)行，這叫做部署Web項(xiàng)目，具體操作步驟分為以下幾步：?jiǎn)螕鬗yEclipse工具欄上的部署圖標(biāo)在新彈出的對(duì)話框中選擇欲部署的項(xiàng)目，接著單擊Add按鈕在下一個(gè)新彈出的對(duì)話框中，選擇server為Tomcat6.x，然后單擊"Finish"按鈕運(yùn)行部署Web項(xiàng)目后，就要開始訪問(wèn)頁(yè)面： 運(yùn)行Tomcat6.x服務(wù)器(前面已經(jīng)敘述過(guò))，開啟IE窗口，輸入U(xiǎn)RL為http://localhost:8080/Prj01/index.jsp，按回車鍵并查看運(yùn)行結(jié)果項(xiàng)目已經(jīng)被放到了服務(wù)器中，路徑是： C:\ProgramFiles\ApacheSoftwareFoundation\Tomcat6.0\webappsURLURL是UniformResourceLocator的縮寫，譯為“統(tǒng)一資源定位符”，就是通常所說(shuō)的網(wǎng)址，URL是惟一能夠識(shí)別Internet上具體的計(jì)算機(jī)、目錄或文件位置的命名約定。URLURL的格式由下列三部分組成。http://localhost:8080/Prj01/index.jsp第一部分是協(xié)議，如http。第二部分是主機(jī)IP地址（有時(shí)也包括端口號(hào)），如localhost:8080，注意，localhost也可以用，或者主機(jī)IP地址代替。第三部分是主機(jī)資源的具體地址，如目錄和文件名等。開發(fā)Web程序的常見(jiàn)錯(cuò)誤未啟動(dòng)Tomcat未部署Web應(yīng)用就訪問(wèn)URL輸入錯(cuò)誤本章結(jié)束本章總結(jié)B/S結(jié)構(gòu)服務(wù)器安裝IDE安裝第一個(gè)Web項(xiàng)目上機(jī)習(xí)題第2章HTML基礎(chǔ)本課教學(xué)內(nèi)容靜態(tài)網(wǎng)頁(yè)制作HTML中的常見(jiàn)標(biāo)簽表格標(biāo)簽鏈接和圖片標(biāo)簽表單標(biāo)簽框架靜態(tài)網(wǎng)頁(yè)制作HTML簡(jiǎn)介HTML（HyperTextMark-upLanguage，超文本標(biāo)記語(yǔ)言），是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。一般情況下，網(wǎng)頁(yè)上看到的文字、圖形、動(dòng)畫、聲音、表格、鏈接等元素大部分都是由HTML語(yǔ)言描述的靜態(tài)網(wǎng)頁(yè)制作HTML簡(jiǎn)介

HTML語(yǔ)言的基本組成部分是各種標(biāo)簽，一張生動(dòng)的網(wǎng)頁(yè)往往含有大量的標(biāo)簽。使用標(biāo)簽，實(shí)際上就是采用一系列指令符號(hào)來(lái)控制輸出的效果，如：<BR>，是最常使用的控制格式的標(biāo)簽，它表示在網(wǎng)頁(yè)上換行靜態(tài)網(wǎng)頁(yè)制作HTML簡(jiǎn)介HTML有兩種類型的標(biāo)簽，一類是單標(biāo)簽，<BR>就是一種單標(biāo)簽，它只需要單獨(dú)一組符號(hào)就可以表示完整的功能。另一種是雙標(biāo)簽，形如<B>內(nèi)容</B>，表示將"內(nèi)容"顯示為粗體，這種標(biāo)簽所圍繞的內(nèi)容就是標(biāo)簽作用的作用域靜態(tài)網(wǎng)頁(yè)制作HTML簡(jiǎn)介標(biāo)簽還有屬性，如：<ahref=page.html/>，其中的“href”就是一個(gè)屬性名稱，“page.html”是屬性值。以HTML編寫成的文本文件的后綴名為.html，另外，版本較老的.htm后綴名也是被支持的，它們的意義相同。靜態(tài)網(wǎng)頁(yè)制作HTML簡(jiǎn)介HTML語(yǔ)言對(duì)于大小寫不敏感，比如馬上將要學(xué)習(xí)的表示HTML文檔的標(biāo)簽：<html></html>，也可寫做<HTML></HTML>，甚至可以寫為<HtmL></htMl>，但是一般推薦，自始至終使用同一種書寫方式HTML文檔的基本結(jié)構(gòu)HTML文檔的基本結(jié)構(gòu)如下：<html> <head>頭部信息 </head> <body> 主體 </body></html>文字布局及字體標(biāo)簽標(biāo)題、換行、段落標(biāo)簽標(biāo)題標(biāo)簽

在HTML中，標(biāo)題的一般形式為：<hn>內(nèi)容</hn>。n可取1~6，n越小，標(biāo)題字號(hào)就越大。換行標(biāo)簽

<br>是換行標(biāo)簽，在需要換行的地方加上此標(biāo)簽即可。段落標(biāo)簽

<p>為段落標(biāo)簽，一個(gè)段落開始由<p>來(lái)標(biāo)記，結(jié)束用</p>表示。<p>有一個(gè)常用屬性align，用來(lái)指明內(nèi)容顯示時(shí)的對(duì)齊方式，常用的有l(wèi)eft、center和right，分別表示左對(duì)齊、居中對(duì)齊和右對(duì)齊。文字布局及字體標(biāo)簽水平線段標(biāo)簽<hr>是水平線段標(biāo)簽，此標(biāo)簽較為常用的屬性有：size：水平線的寬度，單位為像素width：水平線的長(zhǎng)，如不設(shè)置則默認(rèn)為頁(yè)面長(zhǎng)度，單位默認(rèn)為像素，但也可以使用百分制，如width=50%表示長(zhǎng)度為頁(yè)面長(zhǎng)度的50%align：水平線的對(duì)齊方式，常用的有l(wèi)eft，center，right。noshade：線段無(wú)陰影屬性，沒(méi)有屬性值，若設(shè)置，則線段為實(shí)心線段color：線段內(nèi)部的顏色文字布局及字體標(biāo)簽文字設(shè)計(jì)標(biāo)簽

<font></font>

<font></font>標(biāo)簽一般用于標(biāo)記字體，此標(biāo)簽有以下幾種常見(jiàn)的屬性：size：用來(lái)設(shè)置字體大小，它的屬性值有兩種寫法：一種為size=X，其中X為從1到7，值越大，字體越大，屬性值為3是客戶端網(wǎng)頁(yè)的默認(rèn)字體大??；另一種方法是size=+X或-X，X同樣為從1到7的值，意思是以基準(zhǔn)字體大小為標(biāo)準(zhǔn)大X號(hào)字體或者小X號(hào)字體face：用來(lái)設(shè)置字體類型，默認(rèn)為宋體。如<fontface="楷體_GB2312">，即設(shè)置該內(nèi)容的輸出的字體為楷體但是需要注意的是，只有電腦中安裝的字體才可以在瀏覽器中出現(xiàn)相應(yīng)風(fēng)格，如果用戶沒(méi)有安裝該字體，則會(huì)顯示默認(rèn)字體的風(fēng)格color：用于設(shè)置字體顏色HTML中的常見(jiàn)標(biāo)簽常見(jiàn)的設(shè)置文字風(fēng)格的標(biāo)簽有：<b>內(nèi)容</b>：將內(nèi)容設(shè)置為粗體。<u>內(nèi)容</u>：將內(nèi)容設(shè)置下劃線。<i>內(nèi)容</i>：將內(nèi)容設(shè)置為斜體。^內(nèi)容：將內(nèi)容設(shè)置為上標(biāo)。_內(nèi)容：將內(nèi)容設(shè)置為下標(biāo)<blink>內(nèi)容</blink>：將內(nèi)容設(shè)置為閃爍（非標(biāo)準(zhǔn)元素）。列表標(biāo)簽在網(wǎng)頁(yè)制作過(guò)程中，常常要將某些信息以列表的方式列舉出來(lái)，這就需要用到HTML中的列表標(biāo)簽。列表標(biāo)簽分為兩種，一種是有序的，一種是無(wú)序的。<ul>內(nèi)容</ul>，表示它所包圍的內(nèi)容是無(wú)序列表標(biāo)簽，即列表中每一項(xiàng)目前不會(huì)加上序號(hào)，而是會(huì)加上●、○、■等符號(hào)。其中列表的每一項(xiàng)用<li>列表項(xiàng)</li>標(biāo)示。<ol>內(nèi)容</ol>表示有序標(biāo)簽，意義與使用方法和無(wú)序列表標(biāo)簽大致相同，不同點(diǎn)為它會(huì)在每個(gè)列表項(xiàng)前加上數(shù)字表格標(biāo)簽表格基本設(shè)計(jì)編寫表格所用到的標(biāo)簽如下：<table></table>：定義表格，表格的所有內(nèi)容都寫在這個(gè)標(biāo)簽之內(nèi)<caption></caption>：定義標(biāo)題，標(biāo)題會(huì)自動(dòng)出現(xiàn)在整張表格的上方<tr></tr>：定義表行<th></th>：定義表頭，包含在<tr></tr>之間，表頭中的文字會(huì)自動(dòng)變成粗體<td></td>：定義表元(表格的具體數(shù)據(jù))，包含在<tr></tr>之間表格標(biāo)簽以下為制作表格的標(biāo)簽中大多擁有的公共屬性：align：水平布局方式，常用屬性值有l(wèi)eft，right，center，表示左對(duì)齊，右對(duì)齊和居中對(duì)齊，<table>的該屬性表示表格在頁(yè)面的布局方式，<tr>、<td>的該屬性表示該行和該表元內(nèi)的內(nèi)容的布局方式。默認(rèn)布局方式為左對(duì)齊bgcolor：設(shè)置背景顏色border：設(shè)置邊框的寬度，屬性值為整數(shù)，為0時(shí)表格沒(méi)有邊框，默認(rèn)值為0width：寬度，默認(rèn)單位為像素，也可以使用百分制單位height：高度，默認(rèn)單位為像素；也可以使用百分制單位表格標(biāo)簽對(duì)于整張表格，<table>標(biāo)簽常用的屬性有以下幾個(gè)：bordercolor：表格邊框的顏色，默認(rèn)為黑色cellpadding：表元邊框的寬度cellspacing：表元的邊框與表格邊框之間的寬度合并單元格合并單元格必須對(duì)<td>標(biāo)簽中的rowspan、colspan進(jìn)行設(shè)置，屬性值都為整數(shù)，默認(rèn)為1，表示沒(méi)有合并。這兩個(gè)屬性的意思分別為：從該表元起，該表元在行或者列上占有的單元格數(shù)，比如設(shè)置某個(gè)<td>標(biāo)簽rowspan=2，表示該表元及其下面的表元合并成一個(gè)。鏈接和圖片標(biāo)簽鏈接標(biāo)簽可以使用戶鏈接到另一個(gè)頁(yè)面，它的寫法是<a>內(nèi)容</a>，標(biāo)簽內(nèi)的內(nèi)容為鏈接所顯示的內(nèi)容，可以是文字、空格占位符、圖片等，此標(biāo)簽的一個(gè)重要屬性是：href，它的值表示鏈接所指向的資源地址鏈接和圖片標(biāo)簽圖片標(biāo)簽比較重要和常用的標(biāo)簽有以下幾個(gè)：src：表示圖片儲(chǔ)存的位置width，height，border，align：作用與前文所提到屬性相同alt：當(dāng)圖片未載入或者載入失敗時(shí)提供的替代性的文字說(shuō)明表單標(biāo)簽很多網(wǎng)頁(yè)上，可以讓用戶在一些控件中輸入一些內(nèi)容，如文本框、密碼框等，輸入之后，提交，這些控件所在的區(qū)域叫做表單(form)。表單中的控件叫做表單元素。一個(gè)表單是這樣組成的：<formaction="提交地址"> 表單內(nèi)容（包括按鈕、輸入框、選擇框等）</form>表單標(biāo)簽表單最基本的標(biāo)簽是<input>標(biāo)簽，該標(biāo)簽可以用來(lái)顯示輸入框和按鈕等表單元素。它的屬性type決定了表單元素的類型，可以為以下的值：text：文本框，text也為type的默認(rèn)屬性password：密碼框radio：?jiǎn)芜x按鈕，可以將多個(gè)單選按鈕的name屬性設(shè)置相同，使其成為一組。checked屬性可設(shè)置默認(rèn)被選checkbox：復(fù)選框，checked屬性可設(shè)置默認(rèn)被選表單標(biāo)簽

reset：重置按鈕，按下之后，所有的表單元素內(nèi)容變?yōu)槟J(rèn)值button：普通按鈕submit：提交按鈕，按下之后，網(wǎng)頁(yè)會(huì)將表單的內(nèi)容提交給action設(shè)