为机构创建定制主页面是一种将徽标、颜色和重要信息推广到用户的直接方式。定制主页面可传达您机构的个性、愿望、承诺和服务。可以通过各种方式（从简单到复杂）来定制主页面。

开始定制主页面之前，请确定定制目的并规划方案。

  • 确定定制范围并选择实现它们的最佳且最简单的方法。例如，无需只是为了添加机构颜色和徽标而创建定制系统主题。改为尝试通过定制默认主页面来更改颜色和添加徽标。
  • 研究您机构的标识，以确保符合制订的主页面和样式准则。
  • 设计定制登录页面、首页和系统主题时请创建模型。
  • 为设计和测试定制色调和主题安排合适的开发时间。
  • 为定制系统主题的 QA 和维护制订计划。

定制登录页面和首页

定制登录页面 - 开始定制主页面的一种简单方式是定制登录页面。登录页面是包含自己的 CSS 和大多数可编辑标记的单个文件。重新设计登录页面不影响应用程序的其余部分，因此更改范围较小。创建定制登录页面需要 HTML 和 CSS 经验。还需要确定在何处存储任何关联图像。要了解详情，请参阅定制登录页面。

首页 - 首页是用户在访问 Blackboard 时看到的第一个网页（除非绕过了此设置）。可以添加定制欢迎消息和图像，以及添加包含重要和及时信息的模块。创建定制模块需要一些 HTML 和 CSS 经验。要了解详情，请参阅模块和定制首页。

设计门户页面的最佳实践

门户页面（如“我的机构”页面）通常是用户进入 Blackboard Learn 时看到的第一个页面。在此页面上认真设计和排列模块内容可以增强名牌和改进用户体验。可以通过两个常规步骤实现此目的：

  1. 复查所有模块内容以确保不与新应用的主页面冲突。设计模块内容时，尝试遵循按主题和色调建立的约定。尝试将模块编码为 HTML，以便模块文本可以响应按主题和色调定义的颜色和字体样式。有时模块使用单个大型图像（类似于网站上的横幅广告）传达消息。为使页面变得生动，图像是必需的，但有时“横幅广告”（充满标题文本、段落文本和图形）的外观可能与主页面使用的主题和色调不一致。使用 HTML 可确保模块灵活；其内容会随着浏览器窗口调整大小而调整大小。
  2. 尝试定义视觉层次结构，以便用户可以方便地扫描图像并查找可操作内容。但是说来容易做起来难。因为门户包括许多带有各种内容的模块，所以它通常必须满足许多内部利益关系人的需要。有时每个利益关系人希望突出其资料。一般而言，如果对所有模块一视同仁，则不会有任何内容突出，可能会使用户感到困惑。尝试以整体方式查看页面并排列模块，以便用户可以方便地找到主要内容。

适用于门户页面设计的其他最佳实践不特定于此页面类型，但是包括定义主页面外观时可能已考虑的那些。

无障碍访问

美观性

  • 使用与主页面和主题匹配的颜色
  • 字体易读
  • 使用高品质图形
  • 排列模块时使其填满页面
  • 创建视觉层次结构，以便可扫描内容
  • 避免杂乱拥挤的页面设计/布局
  • 定期刷新页面内容
  • 如果可以，请应用响应式设计技术，以便内容可针对不同显示相应地调整大小。

如果您觉得受 Learn 默认模块布局限制，请考虑编辑门户页面以使用一个（且只有一个）HTML 模块填充的单个列。您可以在单个模块中编辑定制 HTML 以使用所需的任何布局，从而模拟其他索引页面中的趋势。

图形用户界面 (GUI) 控件

GUI 控件 - 您可以通过为 Learn 安装选择一组颜色和布局选项，轻松更改主页面的外观。您可以：

  • 更改一组有限 UI 元素的颜色
  • 指定徽标图像和指向特定 URL 的链接
  • 选择系统标签颜色和布局选项。

无需任何 HTML 或 CSS 知识即可进行这些更改。您可以在进行系统范围更改之前，在预览窗格中查看选择。所有颜色选择都可以保存为调色板。

调色板和系统主题

调色板 - Blackboard Learn 带有十多个调色板。可以为默认主页面选择其中之一。可以使用 UI 在调色板中更改颜色，也可以下载调色板并使用文本编辑或 CSS 编辑工具进行更改。

系统主题 - 系统主题是定义机构外观的 CSS 层。可以选择 Blackboard Learn 提供的主题或设计自己的主题。创建自己主题的最简单方式是下载现有主题以用作模板。使用文本编辑或 CSS 编辑工具进行更改。

自定义调色板

定制调色板 - 通过创建自己的调色板以匹配机构的颜色方案、徽标或主页面，来拓宽 UI 定制。Blackboard Learn 具有多个调色板，这些调色板对系统应用不同颜色。可以编辑现有调色板以符合特定要求。

设计定制调色板的最佳实践

为定制调色板选择颜色时，请记住以下这些最佳实践中的一些。

  • 使用与机构视觉标识匹配的颜色。查看机构的样式手册以了解正式颜色。确保颜色组合选择可转换为适合在 UI 中使用的颜色方案。
  • 确保您的颜色选择很好地配合使用，创造和谐的视觉体验。 颜色事项 是了解单色、类似和互补配色方案的良好网站。了解颜色理论可以更容易地选择适合于机构的颜色。

自定义系统主题

定制系统主题 - 您可以通过创建定制系统主题，完全转变机构 Learn 安装的 UI。这是成本最高且最复杂的定制方法，需要复查和编辑 12,000 多行代码。这是使 Blackbaord Learn UI 与机构视觉标识匹配的最佳选项，但是需要不断测试每个新 Learn 版本。

设计定制系统主题的最佳实践

定制系统主题设计是复杂任务，绝不能视为是编外项目。需要大量 CSS 和 DOM 经验。此外，还需要具有用于开发、测试和维护主题的开发环境。

  • 颜色 - 研究机构的视觉标识。机构可能具有样式手册，其中包括有关机构主页面颜色的部分。确保颜色组合选择可转换为适合在 UI 中使用的颜色方案。
  • 颜色协调性 - 通过大致了解单色、模拟和补充颜色方案，可更轻松地选择配合良好且适用于机构主页面颜色的颜色。
  • 无障碍访问要求 - 对于确保生成的系统主题有足够的对比度且可供访问来说，熟悉程度非常重要。
  • 字体 - 可以为主页面指定不同字体。测试字体以确保它们可以在不同操作系统中显示。还可以引入定制字体，方法是将其包含在主题中并使用 @font-face 规则引用这些字体。确保定制字体可以支持您用于教学的语言。
  • 图标 - 可以重新设计某些图标并在整个应用程序中将这些图标用作背景图像。

定制主页面的更改管理

评估和测试升级时，请务必下载并保存所有定制以免需要恢复。使用 Theme Diff 工具，在不同版本的 Learn 之间比较 CSS 更改。通过这款工具，您可以轻松地检测 CSS 中发生更改的位置，便于您评估这一情况对定制的影响程度。

定义主页面的元素（通常为主题、调色板和/或徽标）与页面内容不同。一定要审核“公开”页面（如门户页面）的内容，确保它遵循主页面建立的视觉准则。

定制系统主题和安装新 Building Block

如果您有一个自定义的系统主题，可能希望您的自定义扩展到通过“软件更新”安装的 Building Block 中包含的新页面。并非所有通过此方式安装的 Building Block 都具有自己的工具特定样式表，只是其中的某些 Building Block 具有这类样式表。

在至少具有一个定制主题的系统上安装包含自己的样式表的 Building Block 时，您会在安装过程中收到信息性操作确认。此操作确认建议针对定制主题检查功能，正如升级 Learn 时所执行的操作一样。当系统已安装了定制主题时，您会收到此消息（即使该主题当前未使用）。

管理员面板中针对任何 Building Block 提供了有关 Building Block 是否包含工具特定样式表的信息。在 Building Block 区域中，选择 Building Block，然后选择已安装的工具。打开列出的任何 Building Block 的菜单并选择查看组件。如果 Building Block 包含用于 Learn 附带的任何主题的工具特定样式表，则主题句柄会在此页面上列出。

如果您通过脱机存储压缩包的副本来管理定制主题，请在升级到 SP14 之后通过从管理员面板 UI 下载脱机定制主题压缩包来刷新它，以便获取具有该 Service Pack 中引入的新压缩包结构的副本。不会对样式表本身进行任何更改，也不会对定制工作流程进行任何更改。但是在升级到 SP 14 之后，采用之前压缩包结构的脱机压缩包将不能再上传 - 在此情况下会显示错误消息。

相同 Learn 安装的不同主页面

如果您的机构有权访问门户管理功能，则您可以为不同用户组创建不同主页面（基于其在系统中的角色）。必须创建自定义主机名才允许在单个 Learn 实例中使用多个主页面。