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を駆使して画面の完成を目指しましょう。
