IBM®WebSphere®Studio现在具有功能强大的网站管理工具-网站设计器和页面模板。 本文向您展示如何使用“网站设计器”和页面模板创建一个示例网站，并介绍如何创建页面模板以及如何将其应用于多个页面。
网站设计器和页面模板概述
页面模板是WebSphere Studio网站设计器的新功能之一。 使用页面模板，您可以：
- 使用称为页面模板文件的单独文件管理多个网页的公共内容，例如页眉和页脚部分。
- 管理多个网页的布局。
- 只需更新页面模板并保存，即可同时自动地更新一组Web页面。
当您创建页面模板并创建模板要应用到的多个网页时，一旦保存了模板文件，页面模板的更新将立即应用于所有网页。 模板文件和网页具有特殊的注释标签，这些注释标签定义了内容中的公共区域或特定于页面的区域。 您可以将注释标签放在模板中的任何位置。 而且，您可以将页面模板与静态和动态Web页面一起使用。
使用网站设计器，您可以：
- 使用图形图表编辑器定义网站架构。
- 同时在多个页面上更改信息，包括样式表，页面标题，关键字或页面模板。
- 在每个页面上生成导航链接（导航栏），以反映您使用图编辑器创建的网站结构。 导航栏会在您更新并保存网站结构时自动更新。
- 生成一个反映网站结构的站点地图。
虽然Web站点设计器具有其他有用的功能来管理Web站点，但本文主要关注动态生成的导航栏。 通过一起使用导航栏和页面模板，可以创建具有一致布局的多个页面，公共部分（如页眉或页脚）以及动态生成的导航栏链接。
您也可以使用特殊注释标签定义导航栏。 他们使用两个文件生成导航栏：一个用于描述站点结构的网站导航文件，以及一个使用HTML标签和特殊注释标签定义导航栏外观的导航规范文件。
此概述显示了网站设计器，页面模板和HTML / JSP页面之间的关系：
图1。 网站设计器和页面模板概述
创建一个网站
本文向您展示如何通过使用WebSphere Studio的“ 导入”功能导入现有网站来使用网站设计器。 您可以导入自己的网站，也可以下载.zip文件并导入其中包含的示例网站。 该zip文件是基于WebSphere Studio V5.1.2随附的网站示例创建的。 使用网站设计器，您可以：
- 通过添加，移动和删除网页图标来创建网站结构。
- 根据网站结构自动生成导航栏链接。
- 使用页面模板在Web页面中保持一致的外观。
导入现有网站
使用WebSphere Studio V5.1或更高版本创建新的Web项目之后，通过在“项目浏览器”视图中双击“ 网站导航”来打开“网站设计器”。 然后导入现有的网页：
- 创建一个新的静态Web项目：选择File => New => Static Web project。 。
- 导入现有网页：复制您自己的网页在WebContent文件夹下，或按照以下步骤从下载的.zip文件中导入示例网页：
- 在您的Web项目中选择WebContent文件夹。
- 选择导入 。 导入向导打开。
- 在向导页面之一中，选择Zip文件作为导入源。
- 在“ 从zip文件”字段中指定WebSite.zip，然后单击“ 完成” 。
- 导入网页后，您需要将现有网页添加到网站导航中：从上下文菜单中选择“ 添加现有页面 ”。 将打开“添加现有页面”向导。
- 在向导的“选择首页”页面上，选择项目中的首页。 选择/WebContent/index.html（或您自己的网页的首页）。 如果您选择的首页具有指向其他页面的链接，请通过选择添加链接的页面来添加其他页面 。 指定深度限制 ，以便从首页设置爬网链接的限制。 对于此示例，选择“无限制”以添加从首页链接到的所有页面。
- 单击下一步 。 向导的“将现有页面添加到网站”页面打开。
- 再次单击下一步 。 向导的“ 继续应用页面模板”页面打开。 您可以通过选择继续向导并应用页面模板来连续应用页面模板 ，但是，选择退出向导并稍后应用页面模板 。 此步骤描述如下。
- 单击完成以关闭向导。
将添加首页中所有链接的页面，然后将打开Web Site Designer编辑器，如图2所示。此网站结构将用于自动生成导航栏，如下所述。
图2.网站设计器-导航视图
您可以通过单击“ 转换为网站”将网页添加到“网站设计器”中。 如果您的项目具有网站导航 ，则可以使用“ 添加现有页面”而不是“ 转换为网站”来添加现有网页 。
应用页面模板
您可以通过应用页面模板来保持网站的一致外观。 通过在网站设计器中使用示例页面模板来应用页面模板：
- 通过在上面创建的项目中双击网站导航来打开“网站设计器”。
- 选择Ctrl + A可以将页面模板应用于所有页面。 您也可以通过拖动选取框来选择页面。
- 选择页面模板=>应用模板 。 将打开“ 应用页面模板”向导。
- 在向导的第一页上，从示例中选择所需的模板。 对于此示例，选择B-03_blue.htpl。 该模板包含导航栏标签，因此应用它后，导航栏将放置在您的所有页面上。 单击下一步 。
- 页面模板具有一些可以映射到实际内容的内容区域，因此您需要将页面模板的内容区域与Web页面配对。 在第二页上，指定代表页，以便可以将模板应用于所选的所有页。 您可以在第三页上指定它们之间的组合。 在这里，index.html被指定为默认值。 单击下一步 。
- 在第三页上，将页面模板的内容区域与实际内容配对。 您在第一页上选择的B-03_blue.htpl模板具有以下两个内容区域：
-
头部区域
- 映射到<head>标记下的内容的区域。 因此，模板中的头部区域将替换为<head>标记下的内容。 身体区域
- 映射到主要内容的区域。 指定该区域的目标内容。 例如，在下面的图3中，主要内容由红色边框指示。 该区域应映射到模板中的主体区域作为主要内容。 在第三页上指定bodyarea的目的地。 默认情况下，为每个内容区域选择<head>和<body>标签。 对于此示例，您可以使用这些默认对。 单击下一步 。
图3.内容区域的映射 
- 在最后一页上，预览应用了模板的页面，然后单击“ 完成” 。
您选择的页面模板（B-03_blue.htpl）应该已经应用到网站中的所有页面，并且所有页面都应该带有蓝线，这表明已应用模板：
图4.模板已应用于所有页面
应用模板后，每个页面的正文内容已包含在页面模板的内容区域bodyarea中：
图5.应用模板后的正文内容
另一方面，导航条也会在所有页面上生成，因为所应用的模板具有导航条标签（请参见图6）。 这些导航栏是根据站点结构自动生成的。 您还可以通过更改导航栏标签的属性值来控制导航栏的目标：
图6.自动生成的导航栏。
创建导航栏
您可以使用网站设计器编辑器添加，移动和删除网站结构的页面。 本文在此处介绍如何使用“网站设计器”编辑器。 该网站结构将用于在页面上创建导航栏。 换句话说，网站结构是每个导航栏之间的关系的定义。 要使用导航栏，您需要将放置在“组件面板”视图上的“网站导航”标签插入您的网页。 但是，由于示例页面模板包含网站导航标记，因此您已经通过应用示例页面模板完成了此操作。 网站导航标签是一个特殊的注释标签，它将根据网站结构转换为导航栏。 导航栏的目标链接由导航栏标签的属性值确定。 因此，要更改目的地，您需要编辑导航栏标签的属性值。 在这里，让我们更改目的地。 您的导航栏标签包含在您已应用的模板页面中。 您应该做的第一件事是使用Page Designer打开页面模板。 要打开页面模板：
- 打开网站设计器。
- 在网站设计器中选择带有蓝线（应用了模板）的页面。
- 从上下文菜单中选择“ 页面模板=>使用=>打开模板的模板 ”。 页面模板页面（B-03_blue.htpl）在页面设计器中打开。
接下来，更改链接目标：
- 选择导航栏标签
在模板页面中。 以下属性视图显示在左下方。 单击“属性”视图中的“ 链接目标”选项卡。 你可以看到，你可以使用所有的地址链接，你会发现，指定页面顶部儿童 。 这意味着此导航栏始终显示首页的子页面。 因此，生成了上面的（图6）导航栏。
图7.导航栏标签的属性视图
- 接下来，更改此导航栏的目的地。 选择以下属性而不是首页的子级 ：
- 首页 -显示首页
- 当前页面 -显示带有突出显示装饰的当前页面。
- 子页面 -显示当前页面的子页面
- 保存模板页面（B-03_blue.htpl）。 导航栏将根据站点结构重新生成：
图8.更改属性之前，“公司”页面的导航栏
图9.更改属性后，“公司”页面的导航栏
这样，您可以通过更改导航栏标签的属性来更改站点结构之间的链接目标（图4）。
创建一个新页面模板
现在，您已经完成使用页面模板和导航栏创建网站！ 但是该模板是WebSphere Studio提供的样本模板。 要创建具有您的网站喜好的模板，我们提供三个选项：
- 修改样本模板-样本模板已复制到您的项目中，以将该页面模板应用于您的站点页面。 因此，您可以通过修改项目中的示例模板来创建模板。
- 从现有网页创建页面模板-具有将网页文件另存为页面模板的功能。 打开网站的典型页面，删除特定于页面的内容，并保留公共内容。 通过选择File => Save As page template将文件另存为页面模板 。
- 使用“新建文件”向导从头开始创建页面模板。
本文介绍如何从头开始创建页面模板。 您可以像使用“页面设计器”的其他网页一样创建或修改页面模板：从调色板中拖放对象，在“设计”选项卡中键入文本内容，依此类推。
要创建新页面模板：
- 在项目浏览器视图的WebContent文件夹下选择主题文件夹
- 从系统菜单中选择File => New => Page template File 。 将打开新页面模板文件向导。
- 指定文件名newTemplate。
- 从“ 模型”组合框中选择仅包含HTML的模板
- 点击完成 。
现在，将在主题文件夹下创建新的模板文件newTemplate.htpl，并使用Page Designer打开它。 您将收到一个消息框：
图10.打开新页面模板文件时显示一个消息框
新创建的模板没有一个区域，以后每个网页都将其填充（称为“内容区域”）。 因此，此消息框显示您需要在模板中定义一个或多个“内容区域”。 单击确定，然后您可以开始编辑页面模板。 在编辑页面模板之后，可以按照以下过程类似地处理HTML或JSP页面，从而定义内容区域：
- 在“组件面板”视图的“ 页面”模板抽屉中选择“ 内容区域”项目
- 将选定的调色板项目拖放到要填充每个页面内容的位置，然后打开“ 为页面模板插入内容区域”对话框。
- 单击确定 。
- 通过选择文件 - 保存来保存页面模板
图11.将内容区域插入页面模板
各种页面模板
在创建暂存页面模板文件时，您在新建页面模板文件向导中看到了模型组合框。 WebSphere Studio提供了三种创建模板的选项。
-
仅包含HTML的模板
- 您可以将HTML标记插入到这种类型的模板中，但不能插入JSP标记。 这适用于HTML和JSP网页。 您可以管理具有HTML和JSP页面以及静态Web项目的Web项目的一致外观。 这种模板的文件扩展名是HTPL。 包含JSP的模板
- 您可以将JSP标记以及HTML标记插入此类型的模板中。 但这仅适用于JSP网页。 如果您的项目没有静态（HTML）页面，则此选项是最佳建议。 这种模板的文件扩展名是JTPL。 包含Faces组件的模板
- 这种类型的模板基本上类似于包含JSP选项的模板 ，但是该模板中已经定义了Faces Components的taglib指令和自定义标签。 这种模板的文件扩展名是JTPL。
图12.新建页面模板文件向导
将导航栏插入页面模板
由于模板页面是从头开始创建的，因此您刚创建的模板页面中没有导航栏。 因此，您需要将导航栏插入到自己的模板页面中。 要插入导航栏，您需要执行以下操作：
- 通过双击刚创建的newTemplate.htpl文件，使用“页面设计器”打开模板页面。
- 从网站导航抽屉中拖放导航栏对象。 您可以选择任何导航栏，但是在本示例中，请将“水平栏”放入公共区域。 通常，导航栏用于公共区域，例如页眉或页脚。 因此，您需要将导航栏插入公共区域。
- 插入导航栏后，更改导航栏的属性值以导航到正确的页面。
图13.页面模板文件，第二行带有导航栏，表的左侧蓝色列
当您从“网站导航”抽屉中插入导航栏时，导航规范文件也会复制到您的项目中。 在Navigation规范文件中描述了Navigation的生成规则，在其中您可以使用与JSTL类似的特殊注释标签。
替换页面模板
现在，您已经创建了自己的页面模板！ 您需要做的最后一件事是将新的页面模板应用于网页文件。 现有的网页文件已使用示例页面模板，因此我们将替换页面文件的页面模板。 与应用页面模板的方式相同，可以使用Web站点设计器一次替换多个页面文件的模板。 替换页面模板：
- 双击Web项目中的“ 网站导航” ，打开“网站设计器”。
- 通过按Ctrl + A选择所有页面，以替换所有页面的页面模板。 您也可以通过在选框选择框中拖动鼠标光标来选择页面。
- 从上下文菜单中选择页面模板 - 替换模板 。 然后，打开替换页面模板向导。
- 在向导的第一页中，选择“ 用户定义的页面模板”单选按钮以选择您为项目创建的页面模板。 然后，复制的样本模板和原始模板将显示在“ 缩略图”区域中。
- 从“ 缩略图”区域中选择newTemplate.htpl，然后单击“ 下一步”转到下一页 。
- 与应用页面模板类似，您需要指定网页和新模板之间的内容区域映射。 在第二页中，您需要指定一个代表页，以便可以将模板替换为一次选择的所有页。 您可以在第三页中指定它们之间的组合。 在这里，index.html页面被指定为默认页面。 因此，单击下一步 。
- 在第三页中，需要将网页的内容区域与新模板配对。 由于代表性页面index.html和模板newTemplate.htpl具有相同的内容区域-headarea和bodyarea ，因此映射是默认设置的。 单击下一步转到下一页 。
- 在最后一页中，您可以预览其模板被新页面替换的页面。 单击完成以完成此任务。
现在，所有页面文件都被转换为使用新的页面模板。 您可以看到具有新模板外观和自动生成的导航栏的页面文件。
图14.带有新页面模板的网页文件
结论
本文向您展示了如何使用页面模板技术和网站设计器创建高效的网站。 通过使用页面模板技术，您可以创建具有一致外观的网站，还可以使用网站设计器在网站中使用自动生成的导航栏。
翻译自: https://www.ibm.com/developerworks/websphere/library/techarticles/0409_koinuma/0409_koinuma.html
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
