课灵h5p-标签页 (Tabs)教程

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

本教程目标

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

何时使用标签页

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

前置知识

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

教程示例

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

点击这里浏览示例

示例标签页界面：展示草莓、树莓和蓝莓的丰富信息

快速复制示例

1. 点击这里➜将示例复制到你的课灵工作区
2. 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
3. 随后在生成的副本中点击"编辑"
4. 即可查看并操作本教程所示的设置。

创建标签页：分步指南

步骤 1：创建新内容

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

从 H5P 内容类型列表中选择『标签页』

步骤 2：设置标题

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

设置标签页的标题

步骤 3：配置标签页内容

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

标签 1：Strawberries (草莓)

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

标签 2：Raspberries (树莓)

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

标签 3：Blueberries (蓝莓)

1. 标题：输入Blueberries。
2. 内容：添加一个“图像热点 (Image Hotspots)”，用于展示蓝莓的详细数据图表。

添加标签页并配置其中的内容列表（支持图片、文本、热点等多种类型）

步骤 4：行为设置

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

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

配置标签页的布局和宽度比例

步骤 5：保存与预览

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

交互说明

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

优化与可访问性

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

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

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

1. 产品手册：用不同标签展示产品的外观、规格、使用说明和常见问题。
2. 多语言内容：为每种语言创建一个标签（如“English”, “中文”, “Español”）。
3. 课程模块：按周或按主题组织学习材料，保持页面整洁。

选型指南：标签页 (Tabs), 页面 (Page) 还是 互动书 (Interactive Book)?

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

简单判断法则：

1. 内容很少且独立？用Tabs。
2. 内容是一篇长文？用Page。
3. 内容是一整门课？用Interactive Book。

更多替代方案

1. 如果你需要线性的时间顺序，请使用『时间线 (Timeline)』。
2. 如果你需要决策分支，请使用『分支场景 (Branching Scenario)』。