JavaWeb-模仿百度首頁並部署在Tomcat本地伺服器上執行
阿新 • • 發佈：2018-12-15
一、Tomcat簡介
Tomcat 伺服器是一個免費的開放原始碼的Web 應用伺服器，屬於輕量級應用伺服器，在中小型系統和併發訪問使用者不是很多的場合下被普遍使用，是開發和除錯JSP 程式的首選。對於一個初學者來說，可以這樣認為，當在一臺機器上配置好Apache 伺服器，可利用它響應HTML（標準通用標記語言下的一個應用）頁面的訪問請求。實際上Tomcat是Apache 伺服器的擴充套件，但執行時它是獨立執行的，所以當你執行tomcat 時，它實際上作為一個與Apache 獨立的程序單獨執行的。
訣竅是，當配置正確時，Apache 為HTML頁面服務，而Tomcat 實際上執行JSP 頁面和Servlet。另外，Tomcat和 IIS等Web伺服器一樣，具有處理HTML頁面的功能，另外它還是一個Servlet和JSP容器，獨立的Servlet容器是Tomcat的預設模式。不過，Tomcat處理靜態HTML的能力不如Apache伺服器。目前Tomcat最新版本為9.0。
二、Adobe Dreamweaver簡介
Adobe Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，最初為美國MACROMEDIA公司開發，2005年被Adobe公司收購。DW是集網頁製作和管理網站於一身的所見即所得網頁程式碼編輯器。利用對 HTML、CSS、JavaScript等內容的支援，設計師和程式設計師可以在幾乎任何地方快速製作和進行 網站建設。
三、模仿百度首頁
HTML與CSS寫一起：
baidu.html
<!doctype html> <html> <head> <!-- 問題:字元編碼 --> <meta charset="utf-8"> <title>百度一下,你就知道</title> </head> <body> <!-- 路徑 ： 相對路徑 絕對路徑 --> <p align="right"> <a href="">新聞</a> <a href="http://www.hao123.com">hao123</a> <a href="">地圖</a> <a href="">視訊</a> <a href="">貼吧</a> <a href="">學術</a> <a href="">登入</a> <a href="">設定</a> </p> <p align="center"> <img src="bd_logo1.png" width="270" height="130" /> <br/> <input type="text" width="540" height="38" style=" width:540px; height:38px;" /> <input type="button" value="百度一下" style="width:100px; height:38px; background-color:#3385ff; color:#FFF" /> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <img src="165223.png" /> <br/> <p align="center" style="color:#666"> <a href="">把百度設為主</a> 頁關於百度About Baidu百度推廣 <br/> ©2018 Baidu 使用百度前必讀 意見反饋 京ICP證030173號 京公網安備11000002000001號 </p> </p> </body> </html>
HTML與CSS分離：
baidu.html
<!doctype html>
<html>
<head>
<!-- 問題:字元編碼 -->
<meta charset="utf-8">
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 路徑 ： 相對路徑 絕對路徑 -->
<p class="hyperlink">
<a href="">新聞</a>
<a href="http://www.hao123.com">hao123</a>
<a href="">地圖</a>
<a href="">視訊</a>
<a href="">貼吧</a>
<a href="">學術</a>
<a href="">登入</a>
<a href="">設定</a>
</p>
<p class="search_bar">
<img class="logo" src="logo.png"/>
<br/>
<input class="input_area" type="text"/>
<input class="search_btn" type="button" value="百度一下"/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img src="qrcode.png" />
<br/>
<p class="footer">
<a href="">把百度設為主</a>
頁關於百度About Baidu百度推廣
<br/> ©2018 Baidu 使用百度前必讀 意見反饋 京ICP證030173號 京公網安備11000002000001號
</p>
</p>
</body>
</html>baidu.css
.hyperlink {
text-align: right;
}
.search_bar {
text-align: center;
}
.footer {
text-align: center;
color:#666;
}
.input_area {
width:540px;
height:38px;
}
.search_btn {
width:100px;
height:38px;
background-color:#3385ff;
color:#FFF;
}
.logo {
width:270px;
height:130px;
}效果：
三、部署到Tomcat伺服器並執行
Tomcat下載地址
部署步驟
- 先解壓，然後把裡面的資料夾，我這裡是apache-tomcat-8.5.34移到你喜歡的位置即可。
- 進入***/apache-tomcat-8.5.34\bin目錄，點選startup.bat，然後不要把出現的視窗關掉，如下圖：
- 把baidu.html,存放css,圖片的資料夾放入C:\Users\iDest\Desktop\apache-tomcat-8.5.34-windows-x64\apache-tomcat-8.5.34\webapps\ROOT下，如下圖：
