一、实验目的
1．掌握JSP程序运行环境配置的基本要求。
2．熟悉HTML的常用标签使用以及静态网页的制作。
二、实验性质
验证性实验
三、实验内容
制作一个静态网站的基本页面index.html，要求如下：
1．页面布局采用框架实现，页面布局及样式如图1所示。（20分）
图1 index.html页面布局
2．在页面的A部分显示显示“登录”和“注册”链接。单击“登录”链接，在C部分显示登录页面，登录页面包含一个HTML表单，页面参考样式如图2所示；单击“注册”链接，在C部分显示注册页面，注册页面也包含一个HTML表单，页面参考样式如图3所示。注册和登录页面可自行设计。（40分）
3．在页面的B部分显示一个链接，即网站作者的个人简介，单击该链接，能够在右边的C部分出现作者的个人简介信息。个人简介内容包括：个人基本信息（班级、学号、姓名等）、个人照片、个人简介信息等，请使用合理的HTML标签完成页面的设计。（30分）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验一</title>
</head>
<frameset rows="30%,70%">
<frame src="top.html" noresize="noresize" name="top">
<frameset cols="25%,75%">
<frame src="left.html" noresize="noresize" name="left">
<frame src="main.html" noresize="noresize" name="main">
</frameset>
</frameset>
</html>top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
</head>
<body>
<a href="login.html" target="main">登录</a>
<a href="rigister.html" target="main">注册</a>
</body>
</html>login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<div>
<h2>登录页面</h2>
</div>
<form>
<div>
用户名：<br> <input type="text" placeholder="请输入用户名"><br><br>
</div>
<div>
密码：<br> <input type="text" placeholder="请输入密码"><br><br>
</div>
<br> <input type="submit" value="登录">
</form>
</body>
</html>rigister.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<div>
<h2>登录页面</h2>
</div>
<div>用户名：<br>
<input type="text">
</div>
<div>密码：<br>
<input type="text"><br>
</div>
<div>
性别：<br>
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</div>
<div>
兴趣爱好：<br>
<input type="checkbox">旅游
<input type="checkbox">运动
<input type="checkbox">美食
</div>
<div>
<input type="submit" value="注册">
</div>
</body>
</html>left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<a href="intro.html" target="main">个人简介</a>
</body>
</html>intro.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
oraola
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示</title>
</head>
<body>
实验一
</body>
</html>
