当前位置：首页 > news >正文

JavaWeb：实验一JSP运行环境安装及配置

news 来源：原创 2024/9/20 4:25:46

一、实验目的

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>

<!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>