news 2026/4/22 19:48:32

课灵h5p-页面 (Page)教程

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
课灵h5p-页面 (Page)教程

页面 (Page)教程

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

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

本教程目标

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

何时使用页面

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

前置知识

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

教程示例

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

点击这里浏览示例

示例:垂直滚动的页面,包含图文、链接与互动练习

创建页面:分步指南

步骤 1:创建新内容

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

选择页面 (Page) 内容类型

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

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

  1. 标题 (Title):设置整个页面的主标题(例如“Kon-Tiki 探险史”)。
  2. 栏目内容列表 (Content):这是页面的核心区域。您将在这里逐个添加“积木”。

编辑器界面:顶部为标题,下方为内容列表,各项内容按顺序排列

步骤 3:添加内容项

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

支持的类型非常丰富,包括但不限于:

  1. 文本 (Text):用于添加段落、标题和说明。
  2. 图像 (Image)&视频 (Video):添加媒体素材。
  3. 测验 (Quiz):如填空题 (Fill in the Blanks),多选题 (Multiple Choice),拖放 (Drag and Drop)等。
  4. 链接 (Link):添加外部跳转按钮。
  5. 手风琴 (Accordion):用于折叠长文本。

从丰富的下拉列表中选择要添加的内容类型

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

添加某个内容(例如文本 (Text))后,该内容块会展开供您编辑:

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

编辑文本内容,并建议勾选“用水平线分隔内容”以优化排版

步骤 5:排序与管理

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

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

交互说明

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

优化与无障碍访问

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

专家建议与最佳实践

  1. 三明治”结构设计页面时,试着采用“引入 - 核心内容 - 总结/练习”的结构。
    1. 顶部用图像 (Image)文本 (Text)引入主题。
    2. 中间放置视频 (Video)或详细文本 (Text)讲解。
    3. 底部用问题集 (Question Set)交互式视频 (Interactive Video)进行考核。
  2. 避免过长页面虽然页面 (Page)可以无限延伸,但过长的页面会导致学习者疲劳。如果内容极多,建议拆分为多个页面 (Page),或者使用互动书 (Interactive Book)将多个页面 (Page)组织成章节。
  3. 利用 Accordion 节省空间如果有很多补充阅读材料,可以使用手风琴 (Accordion)组件将其折叠起来,保持页面主干清晰。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/22 19:46:16

LVDS技术详解:从入门到精通

什么是LVDS?从一个简单的比喻开始想象一下,你在一个嘈杂的房间里和朋友对话。如果你们大声喊叫(高电压信号),不仅容易吵到别人,还可能听不清楚。但如果你们凑近耳朵悄悄说(低电压)&a…

作者头像 李华
网站建设 2026/4/22 19:46:13

6款亲测好用的论文降AI工具,轻松过审不用愁

最近不少同学和我吐槽,明明花了好几天调整AI辅助写的论文,结果一检测AIGC率直接飘红,连导师的初审都过不了。现在AI工具帮我们提升了写作效率不假,但怎么抹去AI生成的机械痕迹、让内容更像真人创作,已经成了毕业前绕不…

作者头像 李华
网站建设 2026/4/22 19:46:12

Kali Linux 系统语言本地化与 Zenmap 网络扫描工具实战部署

1. Kali Linux系统语言本地化实战指南 刚接触Kali Linux的新手经常会遇到一个头疼的问题——满屏的英文界面。作为一款专业的渗透测试系统,Kali Linux默认使用英文环境,这对英语基础薄弱的学习者确实不太友好。不过别担心,其实只需要几个简单…

作者头像 李华