把 panel - group box 拖到页面的底部。此时，选择 grid，如图31 所示。grid 以叠放的方式组织组件。
　　
　　图 31.选择 grid
　　　

　　从选项板选择 faces components 下的 image 组件（图 32），然后把它拖到页面的底部。
　　　
　　图32. image 组件
　　　
　　图 33. 面板中的图像
　　　
　　高亮显示图像框，然后转到 attribute 视图（图34）。像前面一样选择 file 文本框后的 browse。
　　图 34. 浏览图像
　　　
　　选择 websphere_22p.gif，如图35 所示。（记得更改文件名以使用相对路径。）
　　图 35.选择 websphere_22p.gif
　　　
　　模板应该看起来如图36 所示。
　　图 36. 带有全部组件的 template页面
　　　
　　最后，我们需要更新最后一个属性。页面中的所有组件都嵌入到一个 body 标签中。转到属性视图并从下拉菜单中选择 body（图 37）。
　　图 37. 从 attribute 视图中选择 body
　　　
　　单击 image 字段后面的下拉框，然后选择 browse（图 38）。
　　图 38. 浏览图像
　　　
　　选择 theme 文件夹中的 grid.gif （图 39）。
　　图 39. 选择 grid.gif
　　　
　　最后得到的页面应该看起来如图 40 所示。
　　图 40. 最后得到的页面
　　　
　　选择 preview 标签查看最后的结果，如图 41 所示。
　　图 41. 预览标签
　　
　　保存并关闭模板文件。
　　
　　结束语
　　在本文中，我们介绍了 websphere studio version 5.1.1 提供的新 java server faces 工具，构建了一个 web 项目，然后利用 faces 组件创建了一个页面模板。在本系列的下一部分，我们将创建 jsf 提交表单并利用 websphere universal 测试环境来测试它们。