在第八章的例子裏面的頁面 login。jsp 頁面包括了<head><title><body>一個完整的頁面而在項目中通常的方法
是直接繼承一個模板，直接對form進行編寫
通常在項目中都是定義了css 通過制定styleclass來代替頁面中的font 標籤等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<html>
<head>
<title>
<h:outputText value="ProjectTrack"/>
</title>
</head>
<body>
<h:form>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<h:graphicImage url="/images/logo.gif" alt="Welcome to ProjectTrack"
title="Welcome to ProjectTrack" width="149" height="160"/>
</td>
<td>
<table cellpadding="5" cellspacing="3">
<tr>
<td colspan="2">
<font face="Arial, sans-serif" size="4" style="font-size: 26pt">
<h:outputText value="ProjectTrack"/>
</font>
<h:outputText value="ProjectTrack" styleClass="login-heading"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel for="userNameInput">
<h:outputText value="Enter your user name:"/>
</h:outputLabel>
</td>
<td>
<h:inputText id="userNameInput" size="20" maxlength="30"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel for="passwordInput">
<h:outputText value="Password:"/>
</h:outputLabel>
</td>
<td>
<h:inputSecret id="passwordInput" size="20" maxlength="20"/>
</tr>
</tr>
<tr>
<td/>
<td>
<h:commandButton action="success" title="Submit"
image="#{facesContext.externalContext.requestContextPath}/images/submit.gif"/>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
</body>
</html>
</f:view>
在css中可以寫成
.login-heading {
font-family: Arial, sans-serif;
font-size: 26pt;
font-weight: normal;
text-align: left;
}
並在頁面中的head中間加上 <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
