跳到主要内容

页面 (Page)

页面 (Page)（曾用名 Column）是一个灵活的内容容器，允许您将多种 H5P 内容类型垂直堆叠在一个页面中。

这就好比搭建积木，您可以按顺序组合文本、图像、视频、音频甚至各类测验，创建一个丰富且连贯的学习页面。它是创建长篇图文教程或组合式学习材料的理想选择。

本教程目标​

  1. 了解 页面 (Page) 作为垂直布局容器的特性
  2. 掌握如何添加、排序和组合多种 H5P 内容类型
  3. 学会使用分隔线优化页面布局与阅读体验

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『页面 (Page)』开始创作。

注册/登录

何时使用页面​

  1. 多媒体文章：创建类似博客文章的体验，将文本、图片和视频有机结合。
  2. 组合学习单元：在一个页面中先放置阅读材料（如文本或视频），紧接着放置理解检查（如填空或单选题）。
  3. 长内容展示：当单一的内容类型（如仅一张图片或一段文本）不足以表达完整概念时，将其串联起来。
  4. 资源聚合：将相关的链接、文档下载（通过 Text 组件的链接功能）和说明整合在一个页面。
前置知识

页面 (Page) 本质上是一个用于垂直堆叠内容的容器。它的强大之处在于能够容纳几乎所有其他 H5P 内容类型。 因此，要充分利用此组件，建议您先熟悉各类基础组件（如 图像热点、交互式视频、各类测验等）的使用方法。本教程将侧重于如何组织这些内容，而非讲解子组件的具体配置。

教程示例​

下面是一个关于“Kon-Tiki 探险”的页面示例，它组合了文本、图片、链接和匹配题，形成了一个完整的微课程。

示例：垂直滚动的页面，包含图文、链接与互动练习
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建页面：分步指南​

步骤 1：创建新内容​

  1. 在课灵工作区点击「创建」，进入 H5P 编辑器。
  2. 在内容类型列表中选择 『页面 (Page)』 或搜索 『Page』。
    • 注意：在旧版本或其他平台中，此组件可能名为 Column。
选择页面 (Page)
选择页面 (Page) 内容类型

步骤 2：设置标题与内容列表​

进入编辑器后，您会看到一个垂直的内容列表区域。

  1. 标题 (Title)：设置整个页面的主标题（例如“Kon-Tiki 探险史”）。
  2. 栏目内容列表 (Content)：这是页面的核心区域。您将在这里逐个添加“积木”。
页面编辑器概览
编辑器界面：顶部为标题，下方为内容列表，各项内容按顺序排列

步骤 3：添加内容项​

点击列表底部的 “添加内容” 按钮，会弹出一个下拉菜单，列出所有支持嵌入到页面中的 H5P 内容类型。

支持的类型非常丰富，包括但不限于：

  • 文本 (Text)：用于添加段落、标题和说明。
  • 图像 (Image) & 视频 (Video)：添加媒体素材。
  • 测验 (Quiz)：如 填空题 (Fill in the Blanks), 多选题 (Multiple Choice), 拖放 (Drag and Drop) 等。
  • 链接 (Link)：添加外部跳转按钮。
  • 手风琴 (Accordion)：用于折叠长文本。
选择内容类型
从丰富的下拉列表中选择要添加的内容类型

步骤 4：配置具体内容与分隔线​

添加某个内容（例如 文本 (Text)）后，该内容块会展开供您编辑：

  1. 内容 (Content)：根据所选类型填写具体信息。
    • 例如对于 文本 (Text)，您可以输入文字并进行格式化（加粗、链接等）。
  2. 用水平线分隔内容 (Separate content with horizontal line)：
    • 建议勾选。这会在当前内容块下方添加一条细灰线，在视觉上区分不同的内容段落，使页面看起来更整洁。
    • 例外：如果两个内容块关系非常紧密（如图片及其下方的说明文字），可以不勾选。
配置文本内容
编辑文本内容，并建议勾选“用水平线分隔内容”以优化排版

步骤 5：排序与管理​

随着内容增多，您可以通过以下方式管理列表：

  • 排序：点击内容块右侧的 “上移/下移”箭头（或拖拽图标）来调整顺序。
  • 折叠/展开：点击内容块标题栏，收起详细设置以便查看整体结构。
  • 删除：点击右上角的 “X” 按钮移除不需要的模块。

交互说明​

  • 滚动浏览：学习者通过垂直滚动来浏览内容，符合网页阅读习惯。
  • 即时反馈：如果页面中包含测验（如 填空题 (Fill in the Blanks)），学习者可以直接在页面上作答并获得即时反馈，无需跳转。

优化与无障碍访问​

  1. 逻辑顺序：确保内容的排列顺序符合逻辑（例如：先学习后练习），便于屏幕阅读器用户按顺序理解。
  2. 标题层级：在 文本 (Text) 组件中，合理使用 Heading 2, Heading 3 等格式，构建清晰的文档大纲。
  3. 分隔线的使用：适度使用水平分隔线，不仅有助于视觉分块，也能帮助认知障碍用户更好地处理信息块。

专家建议与最佳实践​

  1. “三明治”结构 设计页面时，试着采用 “引入 - 核心内容 - 总结/练习” 的结构。

    • 顶部用 图像 (Image) 或 文本 (Text) 引入主题。
    • 中间放置 视频 (Video) 或详细 文本 (Text) 讲解。
    • 底部用 问题集 (Question Set) 或 交互式视频 (Interactive Video) 进行考核。

  2. 避免过长页面 虽然 页面 (Page) 可以无限延伸，但过长的页面会导致学习者疲劳。如果内容极多，建议拆分为多个 页面 (Page)，或者使用 互动书 (Interactive Book) 将多个 页面 (Page) 组织成章节。

  3. 利用 Accordion 节省空间 如果有很多补充阅读材料，可以使用 手风琴 (Accordion) 组件将其折叠起来，保持页面主干清晰。

探索更多复合型内容类型

页面 (Page) 适合垂直流式布局。如果您的内容结构不同，可以尝试以下组件：

最后由 Sam Xu 于 更新