软件工程网页设计与网站建设（JSP）实验 静态页面制作
软件工程，网页设计与网站建设（JSP）实验，静态页面制作，完整源码，运行截图，个人主页的实现，tomcat环境配置，个人简介作业代码，server.xml，可运行。
文章目录
实验名称
静态页面制作
实验目的
- 掌握tomcat-server配置方法。
- 掌握HTML、CSS的编写操作。
- 掌握javascript的基本语法、主要对象的使用。
- 熟练使用javascript完成表单的交互程序的开发。
实验内容
webserver环境配置
- 配置tomcat并成功运行
静态页面制作
- 个人主页的实现
实验原理或流程图
webserver环境配置
在Ubuntu或Debian等基于apt包管理器的Linux系统中，可以使用apt命令来安装Tomcat。
个人主页的实现
首先需要设计和编写个人主页的网页，包括布局、样式、内容等。可以使用HTML、CSS和JavaScript等前端技术来实现网页的结构和样式。一般来说页面结构包括header、nav、section、footer等。
实验过程或源代码
webserver环境配置
在终端中输入以下命令安装Tomcat。
sudo apt install tomcat9
检查启动脚本/usr/share/tomcat9/bin/catalina.sh。为了避免污染控制脚本，需要将相关的环境变量设置在CATALINA_BASE/bin目录下的setenv.sh脚本中。其中CATALINA_BASE表示Tomcat的基础目录，可在脚本中设置，而CATALINA_HOME指向Tomcat的安装目录。
# -----------------------------------------------------------------------------
# Control Script for the CATALINA Server
#
# For supported commands call "catalina.sh help" or see the usage section at
# the end of this file.
#
# Environment Variable Prerequisites
#
# Do not set the variables in this script. Instead put them into a script
# setenv.sh in CATALINA_BASE/bin to keep your customizations separate.
#
# CATALINA_HOME May point at your Catalina "build" directory.
需要配置/usr/share/tomcat9/bin/setenv.sh启动。这个命令的作用是设置Tomcat的运行环境变量，并启动Tomcat服务。
echo "export CATALINA_BASE=/var/lib/tomcat9" > /usr/share/tomcat9/bin/setenv.sh
sudo /usr/share/tomcat9/bin/catalina.sh run
It works !
接着配置下项目路径/var/lib/tomcat9/conf/server.xml即可。这是Tomcat中的一个XML配置文件，通常称为server.xml，用于配置Tomcat的各种参数。
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<!-- SingleSignOn valve, share authentication between web applications
Documentation at: /docs/config/valve.html -->
<!--
<Valve className="org.apache.catalina.authenticator.SingleSignOn" />
-->
<!-- Access log processes all example.
Documentation at: /docs/config/valve.html
Note: The pattern used is equivalent to using pattern="common" -->
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
<Context path="" docBase="/ide/workspace/workspace/jsp/"
reloadable="true" />
</Host>
这是一个JSP页面的代码片段，用于生成一个包含"Hello World"文本的HTML页面。<%@ page %>指令用于定义JSP页面的各种属性。language属性指定JSP页面使用的编程语言是Java，contentType属性指定输出的内容类型为"text/html"，charset属性指定输出的字符集为UTF-8，pageEncoding属性指定JSP页面本身的字符集为UTF-8。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>你好 世界</h1>
</body>
</html>
个人主页的实现
这是一个使用 JSP 编写的个人主页页面，页面分为头部导航栏和主要内容区域。导航栏包括三个链接，分别指向个人介绍、生活靓照和学习经历页面。
photos.jsp 生活靓照页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>个人主页</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./introduction.jsp">个人介绍</a></li>
<li><a href="./photos.jsp">生活靓照</a></li>
<li><a href="./education.jsp">学习经历</a></li>
</ul>
</nav>
</header>
<main>
<section id="photos">
<h2>生活靓照</h2>
<img src="./photo1.png" alt="照片1">
</section>
</main>
</body>
</html>
education.jsp 学习经历页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>个人主页</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./introduction.jsp">个人介绍</a></li>
<li><a href="./photos.jsp">生活靓照</a></li>
<li><a href="./education.jsp">学习经历</a></li>
</ul>
</nav>
</header>
<main>
<section id="education">
<h2>学习经历</h2>
<table>
<tr>
<th>学校名称</th>
<th>时间</th>
<th>职务信息</th>
</tr>
<tr>
<td>XX大学</td>
<td>2010-2014</td>
<td>本科生</td>
</tr>
<tr>
<td>XX公司</td>
<td>2014-2016</td>
<td>程序员</td>
</tr>
<tr>
<td>XX软件公司</td>
<td>2016-至今</td>
<td>高级程序员</td>
</tr>
</table>
</section>
</main>
</body>
</html>
introduction.jsp 个人介绍页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>个人主页</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./introduction.jsp">个人介绍</a></li>
<li><a href="./photos.jsp">生活靓照</a></li>
<li><a href="./education.jsp">学习经历</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<h2>个人介绍</h2>
<p>我叫王五，是一名程序员。</p>
</section>
</main>
</body>
</html>
HTML文档的头部（head）部分，包含了页面的标题和引入了一个外部样式表（style.css）。
<head>
<title>个人主页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
nav {
background-color: #333;
color: #fff;
font-size: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
margin: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
margin: 50px;
}
h2 {
font-size: 30px;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
实验结论及心得
个人主页的实现可以让我们更好地展示自己的信息和作品，通过学习和实践，我们可以了解并掌握HTML、CSS、JavaScript等相关知识和技能，进一步提升我们的编程能力和美术设计能力。配置Tomcat是一项非常重要的技能，无论是在开发网站还是在部署Web应用程序时都必须使用。在学会配置Tomcat之前，需要对Java Servlet和JSP有基本的了解，以便正确配置Tomcat服务器。
附件
疑问
有疑问可以评论区留言。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
