0. 前言
系列文章目录、演示网站、源码参见：项目实战系列文章
1. 任务
本篇来实现新闻浏览页面。
2. 功能
页面顶部是标题栏，标题栏左侧是网站名称SchoolNews--校园新闻网，右侧是登录按钮，管理员可以凭借账号密码登录后发布新闻。
页面内容区域是新闻列表，以表格的形式展示新闻，点击新闻标题可以跳转到具体新闻内容。
整体效果如下：
3. 开发
3.1 新建view.jsp页面
右击WebContent文件夹，选择New-JSP File，文件名为view.jsp，表示新闻浏览页面。默认生成的代码如下：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
此时右键项目-Run As-Run On Server启动Tomcat服务器后，浏览http://127.0.0.1:8080/schoolnews/view.jsp，效果如下：
3.2 修改页面编码和标题
为了让网页支持中文，将编码改为UTF-8；修改网页标题为新闻浏览页，修改后代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻浏览页</title>
</head>
<body>
</body>
</html>
3.3 添加JDBC数据库操作支持
由于本页面要从数据库中取出新闻信息展示，所以需要引入数据库操作相关的类库，添加import语句如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
3.4 添加顶部标题栏
在body区域添加顶部标题栏，包括网站名称和登录按钮。
<body>
<div class="header-bar">
<span class="header-title">SchoolNews--校园新闻网</span>
<a class="header-button" href="login.jsp">登录</a>
</div>
</body>
3.5 为标题栏添加样式
我们新建style.css文件用于保存css样式信息，同时在view.jsp中通过<link>标签引入style.css。
<head>
<meta charset="UTF-8">
<title>新闻浏览页</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
然后编辑style.css，首先设定body内容居中显示，然后设置标题栏的高度和背景色，然后设置标题的字体大小和颜色，最后设置按钮的样式。
/* 设置网页内容居中 */
body {
width: 1000px;
margin: 0 auto;
}
/* 设置标题栏高度和背景色 */
.header-bar {
height: 40px;
line-height: 40px;
background-color: #F0F0F5;
}
/* 设置网站标题靠左显示、字体大小和颜色 */
.header-title {
float: left;
font-size: 1.6em;
color: #31343B;
}
/* 设置登录按钮靠右显示、文字颜色、下划线取消 */
.header-button {
float: right;
color: #9DBF51;
text-decoration: none;
}
此时打开页面，效果如下，这个标题栏有点意思哈。
3.6 添加新闻表格
在标题栏下方添加新闻表格，内容先写死，后面改成从数据库获取，内容如下：
<div>
<table class="news_table">
<thead>
<tr>
<td>分类</td>
<td>标题</td>
<td>时间</td>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>鲁迅的文章写的真好</td>
<td>2020-04-07</td>
</tr>
</tbody>
</table>
</div>
此时页面效果如下：
