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

标签页 (Tabs)教程标签页 (Tabs)是一种高效的内容容器通过水平切换的选项卡界面来组织信息。它允许你在同一页面空间内并行展示多个同层级的主题如不同类别的资源、不同语言的版本帮助学习者按需浏览保持界面整洁。本教程目标掌握标签页的并行结构设计逻辑学习创建标签页内容的完整操作流程了解如何利用它作为容器整合多种媒体内容何时使用标签页课程内容分类将同一主题下的视频、阅读材料和测验归纳在一个标签页中。产品功能介绍并行展示产品的不同型号、规格或应用场景。多语言/多版本为同一内容提供不同语言版本如“中文版”、“English Version”。系列资源集合整理一系列相关的工具、文档或案例方便用户快速切换查找。前置知识Tabs (标签页)本质上是一个用于组织内容的容器。它的强大之处在于能够容纳几乎所有其他 H5P 内容类型。 因此要充分利用此组件建议您先熟悉各类基础组件如图像热点、交互式视频、各类测验等的使用方法。本教程将侧重于如何组织这些内容而非讲解子组件的具体配置。教程示例下面是我们将在本教程中创建的标签页示例主题为「Berry Tabs (浆果介绍)」。点击这里浏览示例示例标签页界面展示草莓、树莓和蓝莓的丰富信息快速复制示例点击这里➜将示例复制到你的课灵工作区在打开的页面点击复制 (注意请确保已登录课灵账号否则无法复制)随后在生成的副本中点击编辑即可查看并操作本教程所示的设置。创建标签页分步指南步骤 1创建新内容在课灵工作区点击创建进入 H5P 编辑器在内容类型列表中选择『标签页』或搜索Tabs进入编辑界面开始配置从 H5P 内容类型列表中选择『标签页』步骤 2设置标题在『标题』字段中输入Berry Tabs。这将作为内容的元数据标题用于搜索和版权信息。设置标签页的标题步骤 3配置标签页内容点击左侧的“添加标签页”按钮来创建新的标签。本例中我们需要创建三个标签标签 1Strawberries (草莓)标题输入Strawberries内容在标签页中你可以像使用“页面 (Page)”一样垂直堆叠多种内容类型。它支持包括交互式视频 (Interactive Video)、课程演示 (Course Presentation)、图像热点 (Image Hotspots)以及各类测验题 (Quiz)在内的 30 种组件这使其成为一个强大的综合性容器。在本例中我们为该标签依次添加了图片、文本介绍、图像热点以及一个小测验以展示 Tabs 承载丰富内容的能力。标签 2Raspberries (树莓)点击左侧列表底部的“添加标签页”。标题输入Raspberries。内容同样添加相关的图片和介绍文本。标签 3Blueberries (蓝莓)标题输入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。更多替代方案如果你需要线性的时间顺序请使用『时间线 (Timeline)』。如果你需要决策分支请使用『分支场景 (Branching Scenario)』。