復習：

css的常用樣式：

border

background

padding

margin

float

position?定位top?left確定div在頁面中的位置，這兩個值可以為負數。

css+div?布局方式

css+div+table??先由div劃分大塊兒，再由table進行整齊布局。

下拉列表：層疊的布局效果，div+css定位，使這個列表浮動在頁面上，(popwindow?Android)

內嵌框架：iframe

Iframe可以使頁面布局中的局部進行刷新。

src?和name一起使用。

web開發：

開發好的程序放在web服務器(這是一個應用軟件)，程序需要符合http規范。

web服務器目錄內容。

bin：服務器的啟動和停止命令。

config：服務器的全局配置信息和應用程序的配置。

lib：包含web應用程序中使用的java類，web的api。

logs：服務器應用程序中產生的日志文件

temp：服務器在執行時產生的臨時文件(整個服務器的)

webapps：把自己的web應用程序發布在這里

work：應用程序在服務器執行同時產生的緩存文件以及對應的緩存數據(某個程序的)

找到這個路徑：

F:\xampp\tomcat\conf

里面的URIEncoding="utf-8"表示支持漢字編碼。

Web程序創建的幾種方式：

手動創建?和?IDE自動創建

之前需要了解

Web應用程序的目錄結構：

1、虛擬目錄：

a)?web頁面(html，images，等等)

b)?JSP

c)?WEB-INF?(文件夾)

i.?classes?(類，*.class的格式)

ii.?lib(庫，*.jar的格式)

iii.?自定義標簽

iv.?web.xml?部署描述

【部署文件中的內容至少要有：

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

】

其中紅色字體為一個工程中所必須擁有的，以標識它是一個web應用程序。

所以現在我們可以手動創建一個web應用程序了，按照上述結構。

Step1：

進入tomcat的webapps目錄中，創建一個工程名叫：WebAppByHand。

(路徑為：F:\xampp\tomcat\webapps\WebAppByHand)

Step2：

創建必須擁有的文件(及文件夾)：

a.?新建文件夾并更名為：WEB-INF

(路徑為：F:\xampp\tomcat\webapps\WebAppByHand\WEB-INF)

b.?進入WEB-INF,創建一個記事本文件，命名為：web.xml

(當前文件保存在：F:\xampp\tomcat\webapps\WebAppByHand\WEB-INF目錄下。)

c.?利用編輯工具(例如，Notepad++)打開web.xml，將以下內容復制到web.xml中并保存。

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

我們以后會詳細介紹這些內容的具體含義。

Step3：

為了進行瀏覽，我們還需要一個頁面。

a.?新建一個txt文件，命名為：MyWebPage.html.

b.?利用編輯工具(例如，Notepad++)打開

c.?輸入以下文字：

Welcome?to?my?first?web?Page！Wahaaa！~

為了能夠查看第一個網絡應用程序，需要開啟服務器：

進入：F:\xampp\tomcat\bin

執行startup.bat

等待。

Step4：

打開瀏覽器：

在地址欄中輸入：http://localhost:8080/WebAppByHand/MyWebPage.html

然后就可以看到對應結果。

方式二：利用myeclipse進行自動創建：

Step1：

創建工程：

File->New->?Web?Project

輸入名字：MyFirstWeb

由于我們要創建靜態網頁所以可以將jsp刪除掉。

Step2：

創建一個可供瀏覽的網頁：

右鍵WebRoot->new->?HTML(Advanced?Templates)

然后可以簡單編輯。比如再次輸入一個Hello和welcome。

Step3：

然后我們要做的是發布。

發布有兩種方式：(有兩種查看方式，有兩種發布方式。利用myeclipse集成的環境既可以查看也可以發布，也就是一共有三種方式。但是集成好的環境僅可用于測試，并不能實現真實發布，他只是一個虛擬發布。)

第一種手動發布。

File->Export->

找到WAR?file

為了方便查找，我們把路徑定位到桌面。

單擊finish：

之后可以在桌面找到MyFirstWeb.war,

剪切復制到：

F:\xampp\tomcat\webapps路徑下。

關閉服務器，在開啟服務器。

點擊：F:\xampp\tomcat\bin的shutdown.bat

然后在點擊：F:\xampp\tomcat\bin的startup.bat

回到F:\xampp\tomcat\webapps目錄下。

可以看到多出了一個MyFirstWeb文件夾。他是由tomcat服務器幫助自動解析的。也就是說，當我們提交過一個war文件到webapps目錄下時，只要重新啟動服務器，就會有tomcat自動幫我們更新war文件為一個可以瀏覽的web程序。

Step4：

瀏覽

打開瀏覽器，在地址欄中輸入：

http://localhost:8080/MyFirstWeb/MyHtml.html

就可以瀏覽我們剛寫好的web程序。

第二種發布方式：

在上面的框框中找到

Deploy?myeclipse?j2ee?project?to?server.

并單擊這個按鈕。

然后單擊Add。

當前為插入頁，這里需要知道的是版本對應問題。

版本對應。

javaEE6.0??要對應tomcat的7版本。

才14.6Mb真是又小又輕。

通過Server我們可以看到可以提供服務的服務器們。

但是?這里面由于還沒有配置并沒有可以支持我們進行操作的服務器。

單擊：Edit?server?connectors...

然后可以找到我們剛剛解壓出來的路徑：

瀏覽【這里記得勾選Enable。】

選擇到到bin的上一級目錄。

順勢點擊確定，apply?ok。三個按鈕。

(如果此時在Server的下拉列表里面沒有看到Tomcat?7.x的話，關閉當前窗口，點擊Add進行刷新)

出現tomcat?7.x單擊選中。

Finish

成功部署，點擊ok。

然后就可以

Run?on?server

點擊下拉三角符號，找到并點擊tomcat?7.x?然后點擊start。

看到控制臺輸出(成噸)的日志信息(尤其是日期)，說明已經可以在瀏覽器訪問了。

然后輸入：

對應網址，完成訪問。

我在這邊的網絡的地址就是?這個啦~。

這是第二種部署并查看的方式。

第三種僅用于測試使用，并不能完成部署。但是沒有部署就不可能看到網頁，所以這是myeclipse集成的虛擬的服務器。

也就是我們剛剛在?server下來菜單里面看到的其他的server。

比如myEclipser?tomcat?7。

然后run?on?server到myEclipse?tomcat7，?然后點擊小的服務器按鈕。就可以查看了。