JavaWeb-模仿百度首页并部署在Tomcat本地服务器上运行

一、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等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

三、模仿百度首页

总代码：https://github.com/iDestro/JavaWeb/tree/master/Quiz1

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下载地址

32位下载地址：http://mirror.bit.edu.cn/apache/tomcat/tomcat-8/v8.5.34/bin/apache-tomcat-8.5.34-windows-x86.zip

64位下载地址：http://mirror.bit.edu.cn/apache/tomcat/tomcat-8/v8.5.34/bin/apache-tomcat-8.5.34-windows-x64.zip

部署步骤

先解压，然后把里面的文件夹，我这里是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下，如下图：
打开网页：http://localhost:8080/baidu.html，即可运行网页。

iDestro

发布了20 篇原创文章 · 获赞 5 · 访问量 1780

私信关注