如何在网页中使用页眉和页脚

Question

这是在html footeradmin.jsp中使用的页脚文件，用来让你的页面看起来更漂亮。

        <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
            pageEncoding="ISO-8859-1"%>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="<%=request.getContextPath()%>/css/style.css" rel="stylesheet" type="text/css">
         <script src="<%=request.getContextPath()%>/js/SpryCollapsiblePanel.js" type="text/javascript"></script>
        <script src="<%=request.getContextPath()%>/js/SpryMenuBar.js" type="text/javascript"></script>
        <link href="<%=request.getContextPath()%>/css/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
        <link href="<%=request.getContextPath()%>/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="tinybox.js"></script>
        </head>
        <body>        
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="bottom">
        <ul>
          <li style="border-left: medium none;"><a href="nsephome.jsp">Home</a></li>
          <li><a href="aboutusadmin.jsp">About&nbsp;Us</a></li>
           <li><a href="Contactusadmin.jsp">Contact Us</a></li>
          <li><a href="feedbackadmin.jsp">Feedback</a></li>
          <li><a href="index.jsp">Logout</a></li>
           <li><a href="sitemapadmin.jsp">Site map</a></li>
        </ul>
        <p>Copyright &copy; 2013. Designed by <a>****</a></p>
        </div>
        </div>

        </body>
        </html>

这是我在网页中使用的头文件headeradmin.jsp使用这个文件使你的网页看起来更好

        <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
            pageEncoding="ISO-8859-1"%>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Header</title>
         <script src="<%=request.getContextPath()%>/js/SpryCollapsiblePanel.js" type="text/javascript"></script>
        <script src="<%=request.getContextPath()%>/js/SpryMenuBar.js" type="text/javascript"></script>
        <link href="<%=request.getContextPath()%>/css/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
        <link href="<%=request.getContextPath()%>/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
        <link href="<%=request.getContextPath()%>/css/style2.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/tinybox.js"></script>
        <link href="<%=request.getContextPath()%>/css/tinystyle.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
        <div class="main-out">
        <div class="main">
        <div class="page">
        <div class="top">
        <div class="header">
        <div class="header-top">
        <h1>National <span>Self Employment Program</span></h1>
        <p>Call Us: 987 3478 278</p>
        </div>
        <div class="topmenu">
        <ul>
         <li></li>
          <li><a href="nsephome.jsp">Home</a></li>
          <li><a href="aboutusadmin.jsp">About&nbsp;Us</a></li>
          <li><a href="Contactusadmin.jsp">Contact Us</a></li>
          <li><a href="feedbackadmin.jsp">Feedback</a></li>
          <li><a href="index.jsp">Logout</a></li>
        </ul>
        </div>
        <div style="height:550px; width:980px;margin-top:5px;">
        <div style="height:600px;width:160px;float:left;">
        <div style="width:160px;height:20px;background-color:#708090;float:left;"><FONT color="white"><center><b>Our Services</b></center></FONT></div>
        <%@include file="verticalbar1.jsp"%>
        </div>
        <div style="height:600px;width:20px;float:left;">
        </div>
        <div style="height:600px;width:800px;">

        </body>
        </html>

这个页面包含在headerfile verticalbar1.jsp中，让你的页面看起来更漂亮

        <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
            pageEncoding="ISO-8859-1"%>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <link href="<%=request.getContextPath()%>/css/style.css" rel="stylesheet" type="text/css">
        <script src="<%=request.getContextPath()%>/js/SpryCollapsiblePanel.js" type="text/javascript"></script>
        <script src="<%=request.getContextPath()%>/js/SpryMenuBar.js" type="text/javascript"></script>
        <link href="<%=request.getContextPath()%>/css/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
        <link href="<%=request.getContextPath()%>/css/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
        <script src="<%=request.getContextPath()%>/js/bank.js" type="text/javascript"></script>
        <script type="text/javascript" src="tinybox.js"></script>
        </head>
        <body>
        <div id="CollapsiblePanel1" class="CollapsiblePanel" style="float:left;margin-top:5px;margin-bottom:10px;"> 
               <ul id="MenuBar1" class="MenuBarVertical">
                  <li><a  href="empregister.jsp">Create Employee</a>
                  </li>
                  <li><a  href="empupdate.jsp">Read Employee</a>
                   </li>
                    <li><a  href="employee_list.jsp">Employee List</a>
                  <li><a  href="empdelete.jsp">Delete Employee</a>

                  </li>
                  <li><a href="feed1.jsp">Feedbacks</a>
                  </li>
                  <li><a class="MenuBarItemSubmenu" href="#">Opinion poll</a>
                    <ul>
                      <li><a href="SubmitQuestion.jsp" >Post Question</a>
                      </li>
                      <li><a href="showpolling.jsp" >View Opinions</a>
                      </li>
                      </ul></li>

                </ul>

              </div> 
        <script type="text/javascript">
             <!--
        var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
        var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../../../SpryAssets/SpryMenuBarRightHover.gif"});
        //-->
        </script>
        <center>
        <img src="../images/emp2.JPG" alt="emp1" width="170" height="200"></img></center>

        </body>
        </html>

Answer 1

当JSP页面被执行时，就会处理jsp:include元素。include操作允许您在JSP文件中包含静态或动态资源。包含静态资源和动态资源的结果截然不同。如果资源是静态的，则将其内容插入到调用的JSP文件中。如果资源是动态的，则将请求发送到包含的资源，执行包含的页面，然后将结果包含在调用JSP页面的响应中。

jsp:include元素的语法为：

<jsp:include page="includedPage" />

您可以在verticalbar1.jsp中同时包含hearder.jsp和footer.jsp

..........
.........
<jsp:include page="header.jsp" />
.........
........
.....
<jsp:include page="footer.jsp" />  

相关链接

• Java EE Reusing Content in JSP Pages

Answer 2

您应该尝试使用：

<jsp:include page="..." />

在“正文内容”页面的顶部和页脚的底部包含您想要的页面。