上篇文章说了后台的sevlet和JSP,这篇要把他们连接在一块展示出来。
首先,看看最终的成果吧。(实在有点丑呀)
添加
编辑
点击编辑之后
查看
下面看一下都是怎么实现的。
首先,建立一个HTML框架。
//Dreamweaver CC这一版本不能像从前一样直接建立框架了,我们需要自己打代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box">
<div id="top"><iframe width="1000px" float=right height="150px" name="top" scrolling="no" frameborder="0" src="top.html"></iframe></div>
<div id="main"><iframe width="700px" float=right height="610px" name="main" scrolling="auto" frameborder="0" ></iframe></div>
<div id="left"><iframe width="300" height="610" name="left" scrolling="auto" frameborder="0" src="left.html"></iframe></div>
</div>
</body>
</html>
顶部文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">
<p>欢迎进入学生管理系统</p>
</div>
</body>
</html>
左端文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><a href="../studinfo/addstdinfo.jsp" target="main">添加</a></div>
<div><a href="../studinfo/stdinfolistformodi.jsp" target="main">编辑</a></div>
<div><a href="../studinfo/stdinfolist.jsp" target="main">查看</a></div>
</body>
</html>
中间文件
链接上篇所提到的三个jsp文件
CSS样式表
//自己瞎画的
@charset "utf-8";
#box { width: 1000px; height: auto; overflow: hidden; margin: 0px auto 30px auto; background-color: #FFFFFF; }
#main { clear: both; width: 800px; height: 610px; float: right; /* [disabled]border-top-right-radius: 100px; */ /* [disabled]border-top-left-radius: 100px; */ background-color: #fca26b; }
#top p{ height: 10px; color:#fca26b; font-weight: bolder; }
#top { text-align: center; font-size: xx-large; width: 1000px; height: 150px; background-color: #eae4cc; border-top-left-radius: 100px; border-top-right-radius: 100px; background-image: url(head_bg.jpg); }
#left { width: 200px; height: 610px; background-repeat: no-repeat; float: left; background-color: #cabd91; border-top-left-radius: 0px; border-top-right-radius: 0px; }
至此,这个小小的系统就完成了。