路线图:确定 HTML 原型的设计需求

信息架构设计师将从设计机构接收的设计原型转变为技术需求。查看主页和登录页面的样本 HTML 原型。然后,浏览如何将设计分解成具有特定设计需求和技术注意事项的各个部分。开发人员和管理员使用这些技术需求将 HTML 原型中显示的设计转变为定制主题、页面组件以及站点的登录页面模板等等。

主页 HTML 原型

您是一位信息架构设计师,负责接收新主页的设计 HTML 原型。从设计中,您将看到在内容作者可创建新主页前必须开发的多个设计部分。

其中某些设计部分由主题控制。其他设计部分(例如,页面组件)在 Web 内容库中开发,并使用站点管理器针对内容作者开发以添加到页面。

主页设计的 HTML 原型。此图像突出显示设计的以下方面:具有公司徽标和导航的页眉、具有英雄图像和文本的条幅、两个促销文本组件、两个特色内容项、两个预告、一个注册应用程序和一个页脚。设计需要具有一列和一行的页面布局。

1 具有公司徽标和导航的页眉
主题控制页眉、公司徽标和导航。要创建新主题,主题开发人员可在主题管理器中创建简单主题的副本。
您可以为站点的根页面设置主题。
2 具有图像和文本的条幅
  • 内容作者通过从页面组件选用板中选择预定义的条幅页面组件来将条幅添加到页面中。
  • 作为开发人员,您必须首先使用 Web 内容创作应用程序的生成功能来生成条幅页面组件。
3 促销文本
  • 内容作者通过从页面组件选用板中选择预定义的促销文本页面组件来将促销文本添加到页面中。
  • 作为开发人员,您必须首先使用 Web 内容创作应用程序的生成功能,从预告模板类型生成促销文本页面组件。然后,您可以定制文本样式。例如,可指定字体大小、字体灰度等以匹配 HTML 原型。
4 内容项引用
  • 从主页突出显示“产品”登录页面上的内容项。内容作者可使用站点管理器将引用添加到存储在“产品”登录页面的隐藏的“内容”页面上的内容项中,以展示新产品发布。“产品”登录页面是站点主页的子页面。
5 带您直接进入“产品”登录页面的预告
  • 内容作者可通过从链接到站点中的“产品”登录页面的页面组件选用板中选择预定义的预告页面组件,从而将站点导航添加到页面中。“产品”登录页面是站点主页的子页面。
  • 作为开发人员,您必须首先使用 Web 内容创作应用程序的生成功能来生成预告页面组件。然后,您可以定制所生成的预告。例如,可定制使您链接到“事件”页面的按钮,以匹配 HTML 原型中所展示的设计。
6 内容项引用
  • 从主页突出显示“事件”登录页面上的内容项。内容作者可使用站点管理器将引用添加到存储在“事件”登录页面的隐藏的“内容”页面上的内容项中,以展示最近的事件。“事件”登录页面是站点主页的子页面。
7 带您直接进入“事件”登录页面的预告
  • 内容作者通过从链接到站点中的“事件”登录页面的页面组件选用板中选择预定义的预告页面组件,从而将站点导航添加到主页中。“事件”登录页面是站点主页的子页面。
  • 作为开发人员,您必须首先使用 Web 内容创作应用程序的生成功能来生成预告页面组件。然后,您可以定制所生成的预告。例如,可定制使您链接到“事件”页面的按钮,以匹配 HTML 原型中所展示的设计。
8 第二个促销文本
  • 内容作者通过从页面组件选用板中选择预定义的促销文本页面组件来将促销文本添加到页面中。
  • 作为开发人员,您必须首先使用 Web 内容创作应用程序的生成功能,从预告模板类型生成促销文本页面组件。然后,您可以定制文本样式。例如,可指定字体大小、字体灰度等以匹配 HTML 原型。
7 注册应用程序
  • 内容作者通过从页面组件选用板中选择预定义的脚本 Portlet 来将注册应用程序添加到页面中。
  • 作为站点管理员,您可以创建配置为注册应用程序的定制脚本 Portlet。
8 页脚
主题控制页脚。请参见第 1 项。

登录页面 HTML 原型

登录页面 HTML 原型利用了许多主页 HTML 原型中所含的相同的设计部分。登录页面 HTML 原型包含与主页相同的页眉和页脚。登录页面和主页 HTML 原型上同样使用了条幅页面组件。然而,登录页面 HTML 原型利用了可展示多个内容项的动态列表页面组件。主页 HTML 原型不需要动态列表页面组件。

登录页面设计的 HTML 原型。图像会突出显示设计的以下方面:具有公司徽标和导航的标题、具有英雄图像和文本的条幅、引用了 4 个内容项的动态列表页面组件以及一个页脚。

1 具有公司徽标和导航的页眉
主题控制页眉、公司徽标和导航。要创建新主题,主题开发人员可在主题管理器中创建简单主题的副本。
您可以为站点的根页面设置主题。
转至文档资源,以了解有关使用简单主题和主题管理器的信息。
2 具有图像和文本的条幅
  • 内容作者通过从页面组件选用板中选择预定义的条幅页面组件来将条幅添加到页面中。
  • 作为开发人员,您必须首先使用 Web 内容创作应用程序的生成功能来生成条幅页面组件。
3 动态列表页面组件
  • 内容作者通过从页面组件选用板中选择预定义的动态列表页面组件来将动态列表添加到登录页面中。
  • 作为开发人员,您必须使用 Web 内容创作应用程序的生成功能来生成动态列表页面组件。您可以从预告模板类型生成列表的起点。然后,可以定制创作模板并创建菜单页面组件以定义列表的排序顺序。最后,可修改所生成的演示模板以使用摘要演示,并允许内容作者指定路径以查询列表中应显示的内容项。
4 页脚
主题控制页脚。请参见第 1 项。

创建设计库

关于此任务

创建设计库以将设计内容项与 Web 内容项分开。在设计库中生成页面组件和页面模板。将设计内容与 Web 内容分开具有以下两项优势:
  • 您可以独立于 Web 内容来控制设计元素的联合
  • 您可以使门户网站更新(如合并的累积修订)避免覆盖您对设计元素所作的更新

过程

  1. 单击管理菜单图标。然后,单击门户网站内容 > Web 内容库
  2. 创建设计库。 例如,您可以将库命名为 Greenwheels 设计
  3. 单击设置许可权图标以打开“资源许可权”窗格。
  4. 单击以下资源的编辑角色图标以编辑角色:
    • 参与者
    • 编辑者
    • 管理者
    • 管理员
    为角色添加相应的用户和组以赋予其访问权。
  5. 单击应用程序菜单图标。然后,单击内容 > Web 内容编写
  6. 单击首选项 > 配置
  7. 展开库选择
  8. 将设计库添加到所选库列表中。
  9. 单击确定