3.6.2 项目实战 · JavaWeb项目开发学习手册

# :-: 华圣物流信息系统 >[danger][点击此处进行源码下载](http://kt.yiniuedu.com/web/material/details.html?id=12) ## 1.创建一个动态web项目 ## 2.解压缩模板，然后拷贝到项目的WebContent里面 ## 3.把html页面改成jsp页面，从html页面中抽取出共同的头部导航和底部导航。 ### 头部导航head.jsp修改为如下代码： ![](http://h.yiniuedu.com/8efdd2364d5edef4072c1ac905d81bc1) ### 底部导航foot.jsp修改为如下代码： ![](http://h.yiniuedu.com/27e63a57cd12c1fc685601308729d98b) ![](http://h.yiniuedu.com/80d15cc3e2805c703191754b3075e031) ### 首页index.jsp修改为如下代码 ``` <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String title = "华圣物流信息科技有限公司"; String mobile = "18605395651"; %> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><%=title %></title> <meta name="keywords" content="<%=title %>" /> <meta name="description" content="<%=title %>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/hover-dropdown.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script> $(function(){ $(".close").click(function(){ $("#address").attr("value",""); }) }) </script> </head> <body> <div class="top hidden-xs"> <div class="container"> <div class="top-fl">Hi，欢迎来到<%=title %>！</div> <div class="top-fr">客服热线：<%=mobile %></div> </div> </div> <header class="header-frontend"> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="images/logo.png"/></a> </div> <div class="navbar-collapse collapse" style="height: 1px;">  <%@ include file="head.jsp" %>   </div> </div> </div> </header>  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/banner.png" alt="<%=title %>"> </div> <div class="item"> <img src="images/banner.png" alt="<%=title %>"> </div> </div>  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="container"> <div class="biaoti"> <h2>项目管理及实施</h2> <p>致力于数字化、网络化弱电系统解决方案</p> <div class="english"><span>PROJECT</span></div> </div> </div> <div class="line"></div> <div class="container mt"> <div class="row"> <div class="col-lg-4 col-sm-4"> <section> <a href=""> <div class="f-box"> <i class="iconfont">&#xe601</i> <h2>弱电系统工程</h2> <p class="yw">system engineering</p> <u></u> <p class="f-text">致力于弱电智能工程和服务，努力成为业内一级的弱电工程商和服务提供商</p> </div> </a> </section> </div> <div class="col-lg-4 col-sm-4"> <section> <a href=""> <div class="f-box"> <i class="iconfont">&#xe602</i> <h2>行业解决方案</h2> <p class="yw">Industry solutions</p> <u></u> <p class="f-text">致力于弱电智能工程和服务，努力成为业内一级的弱电工程商和服务提供商</p> </div> </a> </section> </div> <div class="col-lg-4 col-sm-4"> <section> <a href=""> <div class="f-box"> <i class="iconfont">&#xe600</i> <h2>项目案例</h2> <p class="yw">PROJECT CASE</p> <u></u> <p class="f-text">致力于弱电智能工程和服务，努力成为业内一级的弱电工程商和服务提供商</p> </div> </a> </section> </div> </div> </div> <div class="container"> <div class="biaoti"> <h2>项目案例</h2> <p>系统集成和运维外包在内的整体服务方案</p> <div class="english"><span>CASE</span></div> </div> </div> <div class="line"></div>  <div class="container hidden-xs mt"> <div class="row">  <div class="col-xs-12 col-sm-4 col-md-4 "> <div class="recent-work-wrap"> <a href=""> <img class="img-responsive" src="images/item1.jpg" alt=""> <div class="overlay"> <div class="recent-work-inner"> <h3>福隆超市连锁</h3> <p> 用连锁形式经营多家超市，实行统一进货、统一配送、统一管理。采用网状型分布的经营策略，遍布汕头各大村镇的大街小巷，其中包括夏桂埔、辛厝寮、陈厝合、广兴村、金砂乡等，全市连锁超市管理系统、超市收银软件、监控系统、防盗报警系统</p>  </div> </div> </a> </div> </div>   <div class="col-xs-12 col-sm-4 col-md-4 "> <div class="recent-work-wrap"> <a href=""> <img class="img-responsive" src="images/item1.jpg" alt=""> <div class="overlay"> <div class="recent-work-inner"> <h3>福隆超市连锁</h3> <p> 用连锁形式经营多家超市，实行统一进货、统一配送、统一管理。采用网状型分布的经营策略，遍布汕头各大村镇的大街小巷，其中包括夏桂埔、辛厝寮、陈厝合、广兴村、金砂乡等，全市连锁超市管理系统、超市收银软件、监控系统、防盗报警系统</p>  </div> </div> </a> </div> </div>   <div class="col-xs-12 col-sm-4 col-md-4 "> <div class="recent-work-wrap"> <a href=""> <img class="img-responsive" src="images/item1.jpg" alt=""> <div class="overlay"> <div class="recent-work-inner"> <h3>福隆超市连锁</h3> <p> 用连锁形式经营多家超市，实行统一进货、统一配送、统一管理。采用网状型分布的经营策略，遍布汕头各大村镇的大街小巷，其中包括夏桂埔、辛厝寮、陈厝合、广兴村、金砂乡等，全市连锁超市管理系统、超市收银软件、监控系统、防盗报警系统</p>  </div> </div> </a> </div> </div>   <div class="col-xs-12 col-sm-4 col-md-4 "> <div class="recent-work-wrap"> <a href=""> <img class="img-responsive" src="images/item1.jpg" alt=""> <div class="overlay"> <div class="recent-work-inner"> <h3>福隆超市连锁</h3> <p> 用连锁形式经营多家超市，实行统一进货、统一配送、统一管理。采用网状型分布的经营策略，遍布汕头各大村镇的大街小巷，其中包括夏桂埔、辛厝寮、陈厝合、广兴村、金砂乡等，全市连锁超市管理系统、超市收银软件、监控系统、防盗报警系统</p>  </div> </div> </a> </div> </div>   <div class="col-xs-12 col-sm-4 col-md-4 "> <div class="recent-work-wrap"> <a href=""> <img class="img-responsive" src="images/item1.jpg" alt=""> <div class="overlay"> <div class="recent-work-inner"> <h3>福隆超市连锁</h3> <p> 用连锁形式经营多家超市，实行统一进货、统一配送、统一管理。采用网状型分布的经营策略，遍布汕头各大村镇的大街小巷，其中包括夏桂埔、辛厝寮、陈厝合、广兴村、金砂乡等，全市连锁超市管理系统、超市收银软件、监控系统、防盗报警系统</p>  </div> </div> </a> </div> </div>   <div class="col-xs-12 col-sm-4 col-md-4 "> <div class="recent-work-wrap"> <a href=""> <img class="img-responsive" src="images/item1.jpg" alt=""> <div class="overlay"> <div class="recent-work-inner"> <h3>福隆超市连锁</h3> <p> 用连锁形式经营多家超市，实行统一进货、统一配送、统一管理。采用网状型分布的经营策略，遍布汕头各大村镇的大街小巷，其中包括夏桂埔、辛厝寮、陈厝合、广兴村、金砂乡等，全市连锁超市管理系统、超市收银软件、监控系统、防盗报警系统</p>  </div> </div> </a> </div> </div>  </div> <a href="" class="more">查看更多</a> </div> <div class="row product hidden-lg" style=" margin: 0; padding-top: 20px;"> <div class="col-lg-12"> <ul class="bxslider"> <li> <a href=""> <div class="element item view view-tenth" data-zlname="reverse-effect"> <img src="images/item1.jpg" alt="" /> <div class="mask"> <a data-zl-popup="link" href="javascript:;"> <i class="icon-link"></i> </a> <a data-zl-popup="link2" class="fancybox" rel="group" href="images/img1.jpg"> <i class="icon-search"></i> </a> </div> </div> </a> </li> <li> <a href=""> <div class="element item view view-tenth" data-zlname="reverse-effect"> <img src="images/item1.jpg" alt="" /> <div class="mask"> <a data-zl-popup="link" href="javascript:;"> <i class="icon-link"></i> </a> <a data-zl-popup="link2" class="fancybox" rel="group" href="images/img1.jpg"> <i class="icon-search"></i> </a> </div> </div> </a> </li> <li> <a href=""> <div class="element item view view-tenth" data-zlname="reverse-effect"> <img src="images/item1.jpg" alt="" /> <div class="mask"> <a data-zl-popup="link" href="javascript:;"> <i class="icon-link"></i> </a> <a data-zl-popup="link2" class="fancybox" rel="group" href="images/img1.jpg"> <i class="icon-search"></i> </a> </div> </div> </a> </li> <li> <a href=""> <div class="element item view view-tenth" data-zlname="reverse-effect"> <img src="images/item1.jpg" alt="" /> <div class="mask"> <a data-zl-popup="link" href="javascript:;"> <i class="icon-link"></i> </a> <a data-zl-popup="link2" class="fancybox" rel="group" href="images/img1.jpg"> <i class="icon-search"></i> </a> </div> </div> </a> </li> <li> <a href=""> <div class="element item view view-tenth" data-zlname="reverse-effect"> <img src="images/item1.jpg" alt="" /> <div class="mask"> <a data-zl-popup="link" href="javascript:;"> <i class="icon-link"></i> </a> <a data-zl-popup="link2" class="fancybox" rel="group" href="images/img1.jpg"> <i class="icon-search"></i> </a> </div> </div> </a> </li> <li> <a href=""> <div class="element item view view-tenth" data-zlname="reverse-effect"> <img src="images/item1.jpg" alt="" /> <div class="mask"> <a data-zl-popup="link" href="javascript:;"> <i class="icon-link"></i> </a> <a data-zl-popup="link2" class="fancybox" rel="group" href="images/img1.jpg"> <i class="icon-search"></i> </a> </div> </div> </a> </li> </ul> </div> </div> <div class="news mt"> <div class="container"> <div class="row"> <div class="newtit"> <h2>新闻中心</h2> <span>new center</span> </div> <p class="newstext">让您第一时间内掌握最新动态</p>  <ul class="nav nav-tabs col-lg-offset-4 col-md-offset-4 col-xs-offset-1" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">行业资讯</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">公司新闻</a></li> <li role="presentation"><a href="">查看更多</a></li> </ul>  <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="container"> <div class="row"> <div class="col-lg-4 col-lg-offset-2 hidden-xs hidden-md img"><img src="images/adv.png"/></div> <div class="col-lg-4 col-xs-12"> <ul class="newslist"> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流高清化发展是主流</i><span>2016-7-12</span></a></li> </ul> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile"> <div class="container"> <div class="row"> <div class="col-lg-4 col-lg-offset-2 hidden-xs hidden-md img"><img src="images/adv.png"/></div> <div class="col-lg-4 col-xs-12 col-md-12"> <ul class="newslist"> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流</i><span>2016-7-12</span></a></li> <li><a href=""><i>网络视频监控备受青睐高清化发展是主流高清化发展是主流</i><span>2016-7-12</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container mt"> <div class="biaoti"> <h2>合作伙伴</h2> <p>价值创新，创造双赢</p> <div class="english"><span>Partner</span></div> </div> </div> <div class="container partner mt"> <div class="row"> <div class="col-lg-2 col-md-2 col-xs-4"><a href=""><img src="images/1_03.png"/></a></div> <div class="col-lg-2 col-md-2 col-xs-4"><a href=""><img src="images/1_03-03.png"/></a></div> <div class="col-lg-2 col-md-2 col-xs-4"><a href=""><img src="images/1_09.png"/></a></div> <div class="col-lg-2 col-md-2 col-xs-4"><a href=""><img src="images/1_11.png"/></a></div> <div class="col-lg-2 col-md-2 col-xs-4"><a href=""><img src="images/1_13.png"/></a></div> <div class="col-lg-2 col-md-2 col-xs-4"><a href=""><img src="images/1_05.png"/></a></div> </div> </div> <div class="add mt"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-3 col-xs-12"> <h2>我们的地址：</h2> <p>日照市龙湖区科技中路高新创业大厦一期358</p> <h2 class="contact">联系方式：</h2> <p> 电话：<%=mobile%> </p> <p>传真：<%=mobile%> </p> <p> 邮箱：demo@163.com</p> <p>联系人：柏先生</p> </div> <div class="col-lg-4 col-md-3 col-xs-12"><img src="images/map.png"/></div> <div class="col-lg-4 col-md-3 col-xs-12"> <h2>留言板</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">*姓名</label> <input type="text" class="form-control" placeholder=""> </div> <div class="form-group"> <label for="exampleInputPassword1">*电话</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder=""> </div> <label for="exampleInputPassword1">*给我们留言</label> <textarea class="form-control" rows="3"></textarea> <button type="submit" class="btn btn-default">提交留言</button> </form> </div> </div> </div> </div> <%@ include file="foot.jsp" %>  <script src="js/common-scripts.js"></script> <script src="js/jquery.bxslider.js"></script> <script> RevSlide.initRevolutionSlider(); $(window).load(function() { $('[data-zlname = reverse-effect]').mateHover({ position: 'y-reverse', overlayStyle: 'rolling', overlayBg: '#fff', overlayOpacity: 0.7, overlayEasing: 'easeOutCirc', rollingPosition: 'top', popupEasing: 'easeOutBack', popup2Easing: 'easeOutBack' }); }); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", start: function(slider) { $('body').removeClass('loading'); } }); }); jQuery(".fancybox").fancybox(); </script> </body> </html> ```