跳到主要内容

时间轴 (Timeline)

时间轴 (Timeline) 允许您创建带有媒体支持的交互式时间轴。不仅可以按时间顺序展示事件，还能为每个节点添加图片、详细描述和来源链接。这种可视化的叙事方式非常适合展现历史变迁、人物生平或事物的发展脉络，帮助学习者建立清晰的时空观念。

本教程目标​

  1. 掌握时间轴的基本结构与时代 (Eras) 分组设置
  2. 学习创建包含多媒体元素的时间节点
  3. 了解如何配置外观样式与初始缩放等级

第一次使用课灵？

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

注册/登录

何时使用时间轴​

  1. 历史沿革：直观展示历史事件、朝代更替或文明演进
  2. 人物生平：记录科学家、艺术家或历史人物的重要生平节点
  3. 事物演变：展示技术、物种（如本教程的草莓历史）或艺术流派的发展历程
  4. 项目里程碑：清晰呈现项目规划、阶段成果与关键截止日期

教程示例​

下面是我们将在本教程中创建的时间轴示例，主题为「草莓的历史 (History of strawberries)」。

示例时间轴界面，展示草莓从野生植物到现代水果的演变
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建时间轴：分步指南​

步骤 1：创建新内容​

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

步骤 2：设置标题和说明​

在 『标题』 字段中输入：History of strawberries

在 『说明文本』 字段中输入：

The strawberry plant is a member of the Rosaceae family and the genus Fragaria. 
Against the common belief that strawberry is a fruit, the fleshy red outgrowth is actually the receptacle of the strawberry flower.

Source: http://www.buzzle.com/articles/history-of-strawberries.html
设置标题和说明
设置时间轴的标题和说明信息

步骤 3：创建时间轴事件​

添加以下时间轴事件（参考截屏中的数据）：

事件1：公元前234年 - 起源

  • 开始日期：-234
  • 标题：Origins
  • 内文文字：
    The history of Strawberries goes back over 2,200 years. The growth of wild strawberries in Italy can be traced back to 234 BC.
  • 媒体：建议添加一张野生草莓的插图（可选）

事件2：1200年-1300年 - 中世纪

  • 开始日期：1200
  • 结束日期：1300
  • 标题：Middle ages
  • 内文文字：
    In the thirteenth century, a famous Greek doctor 'Nicholas Myrepsus' had mentioned Strawberries in his paintings.

其他事件 按照相同的方式，依次添加剩余的时间节点（如 1700 年的品种引入、1858 年的现代栽培等）。确保每个事件都有明确的日期和简洁的描述。

创建时间轴事件
时间轴事件编辑界面
  • 媒体：
    • 来源地址：https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Half_a_strawberry.jpg/320px-Half_a_strawberry.jpg
    • 致谢：Author: Jeff Kubina. License: Creative Commons Attribution-Share Alike 2.0 Generic.
添加媒体
添加媒体到时间轴事件
媒体嵌入的局限性与替代方案

此版本的 Timeline 组件在媒体嵌入方面存在以下显著限制：

  • 不支持本地上传：您只能通过 URL 引用在线媒体，无法直接上传图片或视频文件。
  • 国内访问受限：其原生支持的媒体源（如 Twitter, YouTube, Flickr, Vimeo, SoundCloud 等）大多在中国大陆无法正常访问，这可能导致内容在某些网络环境下无法显示。

专家推荐： 如果您需要 上传本地媒体文件 或希望 确保国内用户的访问体验，建议使用 NDLA Timeline 组件（如果您的平台已安装）。NDLA Timeline 优化了媒体处理方式，允许直接上传本地资源，更适合对数据自主性和访问速度有要求的教学场景。

步骤 4：配置外观与行为​

参考编辑器截屏，配置以下选项：

  1. 预设缩放等级 (Default Zoom Level)：

    • 设置为 0。此数值决定了时间轴加载时的初始缩放比例（负数代表缩小）。

  2. 背景图片 (Background Image)：

    • 点击 『添加』 按钮，上传一张与主题相关的背景图（如草莓田或植物纹理），这能显著提升时间轴的视觉吸引力。

  3. 高度 (Height)：

    • 设置为 600。这定义了时间轴组件的显示高度（单位：像素）。
配置时间轴外观
配置时间轴的外观与行为

步骤 5：添加时代与保存​

如果您希望将时间轴划分为明确的历史阶段（如"古代"、"近代"、"现代"），可以使用 『时代 (Eras)』 功能。这不仅能为散落的事件点提供宏观的历史背景，还能通过视觉区块帮助学习者更好地理解时间跨度。

  1. 展开 『时代』 分组
  2. 点击 『添加item』
  3. 设置时代的 开始日期 和 结束日期（例如：-234 到 1500 标记为"早期历史"）
  4. 输入时代的 标题

最后，确保 语言 设置为 英语 (English)（或您偏好的语言），然后点击 『保存并关闭』 生成内容。

添加时代
添加时代到时间轴

交互说明​

  • 浏览导航：
    • 点击箭头：点击内容区域左右两侧的箭头（> 或 <）可按顺序切换上一个/下一个事件。
    • 拖动时间轴：在底部时间轴区域左右拖动鼠标，可快速平移浏览不同历史时期。
    • 点击节点：直接点击底部时间轴上的事件节点（文字块或圆点），可立即跳转到该事件详情。
  • 视图控制（左下角工具栏）：
    • 缩放：点击放大镜图标 + 或 - 可调整时间轴的时间跨度密度。
    • 重置：点击“返回”图标（弯曲箭头）可一键回到时间轴的初始视图。
  • 全屏模式：点击右上角的扩展图标可进入全屏模式，获得最佳沉浸体验。

优化与可访问性​

  • 媒体描述：为所有插入的图片添加替代文本（Alt Text），确保使用屏幕阅读器的用户能理解图片内容。
  • 色彩对比：如果自定义背景图，请确保其与前景文字有足够的对比度，以免影响阅读。
  • 加载速度：尽量使用压缩后的图片，避免因素材过大导致时间轴加载缓慢。

专家提示：用例灵感​

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

  • 历史教学：展示朝代更替、战争进程或文明演进
  • 企业培训：展示公司发展历程或品牌故事
  • 项目管理：梳理产品迭代版本或关键里程碑
  • 传记回顾：记录科学家、艺术家或公众人物的生平大事
  • 流程说明：按步骤演示复杂的工艺流程或演变过程

相关内容类型推荐​

如果你希望实现其他形式的互动呈现，也可以考虑以下 H5P 内容类型：

提示

在选择内容类型时，以目标用户的任务与场景为先；『时间轴』适合"需要按时间顺序展示事件发展"的场景。

最后由 Sam Xu 于 更新