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

第1章JavaWeb開發(fā)環(huán)境配置本課教學(xué)內(nèi)容B/S結(jié)構(gòu)服務(wù)器安裝IDE安裝第一個Web項目B/S簡介兩種基本結(jié)構(gòu)C/S（客戶機(jī)/服務(wù)器）B/S（瀏覽器/服務(wù)器）B/S簡介C/S（客戶機(jī)/服務(wù)器） C/S，分為客戶機(jī)和服務(wù)器兩層，把應(yīng)用軟件安裝在客戶機(jī)端，通過網(wǎng)絡(luò)與服務(wù)器端相互通信。如果客戶端改動了(如界面豐富，功能增加)，就必須通知所有的客戶端重新安裝，維護(hù)稍有不便C/S結(jié)構(gòu)模式圖B/S簡介B/S（瀏覽器/服務(wù)器） B/S結(jié)構(gòu)卻可以不用通知客戶端安裝某個軟件，內(nèi)容修改了，也不需要通知客戶端升級。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ǎng))"的簡稱。在Web程序結(jié)構(gòu)中，瀏覽器端與Web服務(wù)器端采用請求/響應(yīng)模式進(jìn)行交互。Web程序運行描述客戶端Web服務(wù)器數(shù)據(jù)庫服務(wù)器1:用戶輸入2:發(fā)送請求5:返回響應(yīng)3:訪問數(shù)據(jù)4:返回結(jié)果6:顯示

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

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

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

HTML語言的基本組成部分是各種標(biāo)簽，一張生動的網(wǎng)頁往往含有大量的標(biāo)簽。使用標(biāo)簽，實際上就是采用一系列指令符號來控制輸出的效果，如：<BR>，是最常使用的控制格式的標(biāo)簽，它表示在網(wǎng)頁上換行靜態(tài)網(wǎng)頁制作HTML簡介HTML有兩種類型的標(biāo)簽，一類是單標(biāo)簽，<BR>就是一種單標(biāo)簽，它只需要單獨一組符號就可以表示完整的功能。另一種是雙標(biāo)簽，形如<B>內(nèi)容</B>，表示將"內(nèi)容"顯示為粗體，這種標(biāo)簽所圍繞的內(nèi)容就是標(biāo)簽作用的作用域靜態(tài)網(wǎng)頁制作HTML簡介標(biāo)簽還有屬性，如：<ahref=page.html/>，其中的“href”就是一個屬性名稱，“page.html”是屬性值。以HTML編寫成的文本文件的后綴名為.html，另外，版本較老的.htm后綴名也是被支持的，它們的意義相同。靜態(tài)網(wǎng)頁制作HTML簡介HTML語言對于大小寫不敏感，比如馬上將要學(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)題字號就越大。換行標(biāo)簽

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

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

<font></font>

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