前言
在浏览主题网站时会发现，这些网站的不同须道都是用相同的Logo和频道导航做题头。本任务就是要完成一个主题网站。如果在每个页面的题头部分都放置网站的Logo和须道导航，导致的问题是，当网站Logo或须道需要更换时，需要对每一个频道的网页重新设计，这样维护既费时又费力。因此，为了便于实现快速维护，将两个相对独立的网页拼接成如图所示的页面，更改Logo图片时，只需要对top.html进行调整即可。
效果图如下
提前准备
我们这里使用的是idea软件，新建一个项目，配置好服务器之后，在web目录下，新建一个imgages文件夹，然后在web目录下分别新建
contact.html、contact,jsp、welcome.html、welcome.html、feature.jsp、feature.html、index.jsp、top.html具体如下图所示
然后将图片引入到images文件夹下（图片可以随便在网上下载一个，明白原理即可）
首先是html页面设计
1.top.html
2.feature.html
3.welcome.html
jsp页面设计（jsp设计的目的是为了top.html能够与相对应的html对应起来）
1.welcome.jsp
2.feature.jsp
3.contact.jsp
4.index.jsp
在tom.html中设置choice=1、2、3是为了传递参数，这参数可以用request.getParameter获取
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>物理与电子信息学院网站</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%@ include file="top.html"%>
<%
//从超级链接获取特征值
String s=request.getParameter("choice");
//如果没有获取到，则默认为“1”
if (s==null)
s="1";
int choice=Integer.parseInt(s);
switch(choice){
case 1: %> <!--专业频道，引入welcome.htm -->
<%@ include file="welcome.html" %>
<%break;
case 2:%> <!--特色频道，引入special.htm -->
<%@ include file="feature.html"%>
<%break;
case 3:%> <!--联络频道，引入contact.htm -->
<%@ include file="contact.html"%>
<%break;
}
%>
</body>
</html>
整体思路分析
首先创建四个html页面，然后创建四个jsp页面top.jsp页面是我们这个主题网站的网页部分，然后通过html相对应的jsp页面将其拼接成一个页面，最后的index页面是综合的，也是最后运行的页面.其中在里面通过request.getParameter(“choice”);来获取相对应的值，如果获取不到通过if默认为1，所以当我们打开页面的时候，呈现出来的是choice=1的值得页面
其实在此页面中也设置了top.html可以实现效果
如有侵权，请及时联系删除，谢谢配合。