跳到主要内容

标签页 (Tabs)

标签页 (Tabs) 是一种高效的内容容器，通过水平切换的选项卡界面来组织信息。它允许你在同一页面空间内并行展示多个同层级的主题（如不同类别的资源、不同语言的版本），帮助学习者按需浏览，保持界面整洁。

本教程目标​

  1. 掌握标签页的并行结构设计逻辑
  2. 学习创建标签页内容的完整操作流程
  3. 了解如何利用它作为容器整合多种媒体内容

第一次使用课灵？

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

注册/登录

何时使用标签页​

  1. 课程内容分类：将同一主题下的视频、阅读材料和测验归纳在一个标签页中。
  2. 产品功能介绍：并行展示产品的不同型号、规格或应用场景。
  3. 多语言/多版本：为同一内容提供不同语言版本（如“中文版”、“English Version”）。
  4. 系列资源集合：整理一系列相关的工具、文档或案例，方便用户快速切换查找。
前置知识

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

教程示例​

下面是我们将在本教程中创建的标签页示例，主题为「Berry Tabs (浆果介绍)」。

示例标签页界面：展示草莓、树莓和蓝莓的丰富信息
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建标签页：分步指南​

步骤 1：创建新内容​

  1. 在课灵工作区点击"创建"，进入 H5P 编辑器
  2. 在内容类型列表中选择 『标签页』 或搜索 Tabs
  3. 进入编辑界面开始配置
选择标签页内容类型
从 H5P 内容类型列表中选择『标签页』

步骤 2：设置标题​

在 『标题』 字段中输入：Berry Tabs。这将作为内容的元数据标题，用于搜索和版权信息。

设置标题
设置标签页的标题

步骤 3：配置标签页内容​

点击左侧的 “添加标签页” 按钮来创建新的标签。本例中我们需要创建三个标签：

标签 1：Strawberries (草莓)​

  • 标题：输入 Strawberries
  • 内容：
    • 在标签页中，你可以像使用“页面 (Page)”一样垂直堆叠多种内容类型。它支持包括 交互式视频 (Interactive Video)、课程演示 (Course Presentation)、图像热点 (Image Hotspots) 以及各类 测验题 (Quiz) 在内的 30+ 种组件，这使其成为一个强大的综合性容器。
    • 在本例中，我们为该标签依次添加了图片、文本介绍、图像热点以及一个小测验，以展示 Tabs 承载丰富内容的能力。

标签 2：Raspberries (树莓)​

  • 点击左侧列表底部的 “添加标签页”。
  • 标题：输入 Raspberries。
  • 内容：同样添加相关的图片和介绍文本。

标签 3：Blueberries (蓝莓)​

  • 标题：输入 Blueberries。
  • 内容：添加一个 “图像热点 (Image Hotspots)”，用于展示蓝莓的详细数据图表。
配置标签页内容
添加标签页并配置其中的内容列表（支持图片、文本、热点等多种类型）

步骤 4：行为设置​

点击编辑器底部的 “行为设置”，根据示例进行如下配置：

  • 标签页放置 (Tab placement)：选择 “基于屏幕尺寸 (Based on screen size)”。这样标签页在宽屏上显示在左侧，在窄屏（如手机）上会自动调整为顶部导航。
  • 标签页扩展 (Tab expansion)：输入 70。这定义了标签内容区域在水平方向上占用的百分比（例如左侧标签导航占 30%，右侧内容占 70%）。
  • 标签页颜色与背景颜色：可根据需要调整主题色。
行为设置
配置标签页的布局和宽度比例

步骤 5：保存与预览​

点击 『保存并关闭』 生成完整的示例内容。您现在应该能看到一个包含三个水果标签的互动页面。

交互说明​

  • 标签切换：用户点击顶部的标签标题即可切换显示的内容。
  • 响应式布局：
    • 桌面端：通常以横向标签条或左侧导航栏的形式展示（取决于“行为设置”中的选择）。
    • 移动端：为节省空间，标签页可能会自动转换为手风琴 (Accordion) 样式或下拉菜单，用户点击标题展开相应内容。

优化与可访问性​

  • 控制标签数量：建议将标签数量控制在 4 个以内。过多的标签会导致导航拥挤，尤其是在移动设备上。
  • 简短的标题：保持标签标题简洁明了，便于用户快速扫描和理解。
  • 内容加载：虽然 Tabs 会预加载内容，但为了保证流畅体验，避免在单个标签页中堆砌过多的大型媒体文件（如高清视频）。
  • 无障碍支持：H5P 核心组件已内置良好的 ARIA 支持。作为创作者，请确保为标签内的图片添加替代文本 (Alt Text)，并使用正确的标题层级。

专家提示：用例灵感与相关内容类型推荐​

想拓展『标签页』的使用场景？以下是一些常见用例，帮助你打开创作思路：

  • 产品手册：用不同标签展示产品的外观、规格、使用说明和常见问题。
  • 多语言内容：为每种语言创建一个标签（如“English”, “中文”, “Español”）。
  • 课程模块：按周或按主题组织学习材料，保持页面整洁。
选型指南：标签页 (Tabs), 页面 (Page) 还是 互动书 (Interactive Book)?

这三个组件都是强大的“内容容器”，但适用场景不同：

组件核心特征适用场景
标签页 (Tabs)并行切换内容是同层级的、互斥的（如“不同语言版本”、“不同产品型号”），用户通常只需查看其中一个或几个。
页面 (Page)垂直堆叠内容是线性的、连续的（如“一篇长文章”），用户需要从上到下完整阅读。
互动书 (Interactive Book)章节结构内容量大、有层级结构（如“一本电子书”），需要侧边栏导航、章节划分和进度追踪。

简单判断法则：

  • 内容很少且独立？用 Tabs。
  • 内容是一篇长文？用 Page。
  • 内容是一整门课？用 Interactive Book。
更多替代方案
最后由 Sam Xu 于 更新