3章チェックテスト

準備

プロジェクトの作成

JSP準備と実行 を参考に Check3 というプロジェクトを作成してください。
※「web.xml」ファイルが必要になりますので、プロジェクト作成時に作成するようにしてください。

作成が完了したら、以下の各ファイルを画像のフォルダ構造と同じになるように Check3 のプロジェクトに格納してください。
※ style.css に関しては準備段階では作成だけになります。

フォルダ構造

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- フッターを作成 -->

</body>
</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<header></header>

<!-- </body>
</html> -->

jspTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- name、idの入力エリアを作成しなさい -->

</body>
</html>

課題

課題①
以下の画像の様なページが表示される様に、作成したjspファイルを修正して下さい。

作成時のルール
jspTest.jsp内でincludeディレクティブを使用し、header.jspとfooter.jspを外部から読み込んで下さい。
下記画像のheaderは緑部分、footerは青部分となります。
(説明のために色付けしていますが、皆さんはグレーの画面を作ってください。

Calendar・SimpleDateFormatライブラリをimportし、ヘッダーへ作成日時をフォーマットして、 年月日 を表示させる事。

styleの指定は下記の通り行うこと。
【jspTest.jsp】

// div
padding-top: 50px;
padding-bottom: 50px;

【header.jsp】

// div
background-color: gray;
// label
display: inline-block;
padding: 10px;
color: white;
// label
padding: 10px;
font-size: 10px;

【footer.jsp】

// div
background-color: gray;
// label
display: inline-block;
padding: 10px;
color: white;

「各要素を作成して、どこへ上記styleを適用すれば、画像通りのデザインになるかな」と、
考えながら組み立ててみましょう。

作成時のヒント
しかしながら、なかなか思ったように表示されないこともあるかと思いますので、各ファイルの使用タグを提示しておきます！

【jspTest.jsp】

<div>
<table>（※<tr>、<th>、<td>なども含みます）

【header.jsp】【footer.jsp】

<div>
<label>

name・id入力テキストエリアを設けましたが、当然ログイン機能は実装しなくて大丈夫です。
jspとHTML・CSSを駆使して画面の完成を目指しましょう。