练习 2.2:定制门户网站站点

在开始之前,必须先完成练习 2.1:创建新的门户网站以显示 portlet 应用程序

创建新的主题

在创建门户网站应用程序的过程中,可以选择在 Portal Designer 中创建全新的主题。主题提供了门户网站应用程序的整体外观,同时还提供了用于门户网站设计的许多元素,其中包括图像、导航、工具栏以及页面级别视觉效果。遵循下列步骤来为我们在此教程中已经开发的门户网站站点创建新的主题:

  1. 从菜单栏中选择文件 > 新建 > 主题
  2. 标题字段中输入拍卖
  3. 通过滚动,选择 Corporate 主题作为源主题。以现有主题为基础来创建新主题会更容易,这是因为您不必从头开始创建所有必需的主题元素。
  4. 单击下一步
  5. 从提供的皮肤列表中选择“阴影”皮肤,单击设置为缺省皮肤,以使“阴影”皮肤成为新的“拍卖”主题的缺省皮肤。

    皮肤就是门户网站页面中每个 portlet 周围的边框。皮肤与主题有所不同,主题适用于门户网站的整个外观,而皮肤仅限于您插入到门户网站应用程序中的每个 portlet 的外观。缺省情况下,只有有限的皮肤可供每个主题选择。

  6. 单击完成
  7. 在“大纲”视图中展开元素 > 主题,然后选择“拍卖”。
  8. 在“属性”视图中,选择缺省值复选框以将新主题应用于门户网站应用程序。

    更改将立即应用于“门户网站配置”:
    具有新主题的“门户网站配置”

  9. 保存“门户网站配置”。

在此部分练习中,将使用 CSS Designer 和 Page Designer 来更新“拍卖”门户网站应用程序中的样式、主题和皮肤。

更改当前主题的条幅图像

要更换“拍卖”门户网站的缺省主题的条幅图像,遵循下列步骤:

  1. 首先,将把新的条幅图像导入项目中:
    1. 从菜单栏中选择文件 > 导入。将出现“导入”对话框。
    2. 选择导入源下面,单击文件系统
    3. 单击下一步
    4. 因为不同的 Rational 产品使用不同的安装目标位置,所以必须离开产品的用户界面以查找包含新条幅图像的插件。使用文件搜索工具在本地文件系统的产品安装路径中查找 com.ibm.etools.portal.examples.application_6.0.0.1 插件文件夹。
    5. 返回至“导入”向导,并单击源目录字段旁边的浏览。浏览至以下目录:
      x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
      其中 x: 是计算机上包含 com.ibm.etools.portal.examples.application_6.0.0.1 插件的路径。
    6. 选择 auction.gif 作为导入目标,并单击确定
    7. 单击目标文件夹字段旁边的浏览,并指定 AuctionPortal/PortalContent/themes/html/Auction
    8. 单击完成

      向导就会把该文件导入到您的工作空间中。

  2. 打开了 AuctionPortal 项目的“门户网站配置”文件之后,从 Portal Designer 弹出菜单中选择编辑样式。这将在 CSS Designer 中打开 Styles.css 文件。Styles.css 是应用程序中的缺省主题的缺省样式表。

    CSS Designer 对为 CSS 文件定义的样式提供了两个视图:一个是“预览”视图(位于左边),当样式规则出现在用于显示 Web 资源的浏览器中时,该视图可提供这些样式规则的可视化示例;另一个视图是“源代码”视图(位于右边),该视图将显示 CSS 文件的文字版。可以使用这两个视图中的任何一个视图来编辑样式。

  3. 通过滚动,选择“预览”视图中的条幅背景图标。
  4. 从弹出菜单中选择编辑样式规则 [.wpsToolbarBannerBackground]
  5. 单击设置样式属性对话框左边的背景属性。
  6. 图像字段中输入 ../../auction.gif
    “设置样式属性”对话框
  7. 单击确定
  8. 保存 CSS 文件并关闭 CSS Designer。注意,已将新的条幅图像应用于 Portal Designer 中打开的页面。

    新的条幅

  9. 保存并关闭“门户网站配置”文件。

可以使用 Page Designer 来对主题进行各种各样的更改,例如,更改标题区域中工具栏的布局。可以编辑主题的布局(和样式)及相关联的皮肤。所作的更改存储在主题的 default.jsp 文件、相关联皮肤的 control.jsp 文件以及其它相关 JSP 文件中。另外,在编辑器中所作的任何更改都将应用在您在门户网站应用程序中使用此主题的所有地方。

现在,您可以开始进行练习 2.3:在 WebSphere Portal 测试环境中运行门户网站应用程序了。

使用条款 | 反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.