课灵-时间轴 (Timeline)教程

时间轴(Timeline)教程时间轴(Timeline)允许您创建带有媒体支持的交互式时间轴。不仅可以按时间顺序展示事件，还能为每个节点添加图片、详细描述和来源链接。这种可视化的叙事方式非常适合展现历史变迁、人物生平或事物的发展脉络，帮助学习者建立清晰的时空观念。本教程目标掌握时间轴的基本结构与时代(Eras)分组设置学习创建包含多媒体元素的时间节点了解如何配置外观样式与初始缩放等级何时使用时间轴历史沿革：直观展示历史事件、朝代更替或文明演进人物生平：记录科学家、艺术家或历史人物的重要生平节点事物演变：展示技术、物种（如本教程的草莓历史）或艺术流派的发展历程项目里程碑：清晰呈现项目规划、阶段成果与关键截止日期教程示例下面是我们将在本教程中创建的时间轴示例，主题为「草莓的历史(Historyofstrawberries)」。HYPERLINK/content/01k992kmwmk3ke898s5tzwkssbnormalLink\tdfe-10\tdlttext\tdlfFromDialog\tdtf0\tdsubnormalLink\tdkeyd9kgev点击这里浏览示例示例时间轴界面，展示草莓从野生植物到现代水果的演变快速复制示例点击HYPERLINK/content/01k992kmwmk3ke898s5tzwkssbnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeys9hgsn\tdkeys9hgsn这里➜将示例复制到你的课灵工作区在打开的页面点击"复制"(注意：请确保已登录课灵账号，否则无法复制)随后在生成的副本中点击"编辑"即可查看并操作本教程所示的设置。创建时间轴：分步指南步骤1：创建新内容在课灵工作区点击"创建"，进入H5P编辑器在内容类型列表中选择『时间轴』或搜索Timeline进入编辑界面开始配置从H5P内容类型列表中选择『时间轴』步骤2：设置标题和说明在『标题』字段中输入：Historyofstrawberries在『说明文本』字段中输入：ThestrawberryplantisamemberoftheRosaceaefamilyandthegenusFragaria.Againstthecommonbeliefthatstrawberryisafruit,thefleshyredoutgrowthisactuallythereceptacleofthestrawberryflower.Source:/articles/history-of-strawberries.html设置时间轴的标题和说明信息步骤3：创建时间轴事件添加以下时间轴事件（参考截屏中的数据）：事件1：公元前234年-起源开始日期：-234标题：Origins内文文字：ThehistoryofStrawberriesgoesbackover2,200years.ThegrowthofwildstrawberriesinItalycanbetracedbackto234BC.媒体：建议添加一张野生草莓的插图（可选）事件2：1200年-1300年-中世纪开始日期：1200结束日期：1300标题：Middleages内文文字：Inthethirteenthcentury,afamousGreekdoctor'NicholasMyrepsus'hadmentionedStrawberriesinhispaintings.其他事件按照相同的方式，依次添加剩余的时间节点（如1700年的品种引入、1858年的现代栽培等）。确保每个事件都有明确的日期和简洁的描述。时间轴事件编辑界面媒体：来源地址：/wikipedia/commons/thumb/5/5e/Half_a_strawberry.jpg/320px-Half_a_strawberry.jpg致谢：Author:JeffKubina.License:CreativeCommonsAttribution-ShareAlike2.0Generic.添加媒体到时间轴事件媒体嵌入的局限性与替代方案此版本的Timeline组件在媒体嵌入方面存在以下显著限制：不支持本地上传：您只能通过URL引用在线媒体，无法直接上传图片或视频文件。国内访问受限：其原生支持的媒体源（如Twitter,YouTube,Flickr,Vimeo,SoundCloud等）大多在中国大陆无法正常访问，这可能导致内容在某些网络环境下无法显示。专家推荐：如果您需要上传本地媒体文件或希望确保国内用户的访问体验，建议使用HYPERLINK/docs/tutorials/composite/NDLA-timelinenormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkey30mmaq\tdkey30mmaqNDLATimeline组件（如果您的平台已安装）。NDLATimeline优化了媒体处理方式，允许直接上传本地资源，更适合对数据自主性和访问速度有要求的教学场景。步骤4：配置外观与行为参考编辑器截屏，配置以下选项：预设缩放等级(DefaultZoomLevel)：设置为0。此数值决定了时间轴加载时的初始缩放比例（负数代表缩小）。背景图片(BackgroundImage)：点击『添加』按钮，上传一张与主题相关的背景图（如草莓田或植物纹理），这能显著提升时间轴的视觉吸引力。高度(Height)：设置为600。这定义了时间轴组件的显示高度（单位：像素）。配置时间轴的外观与行为步骤5：添加时代与保存如果您希望将时间轴划分为明确的历史阶段（如"古代"、"近代"、"现代"），可以使用『时代(Eras)』功能。这不仅能为散落的事件点提供宏观的历史背景，还能通过视觉区块帮助学习者更好地理解时间跨度。展开『时代』分组点击『添加item』设置时代的开始日期和结束日期（例如：-234到1500标记为"早期历史"）输入时代的标题最后，确保语言设置为英语(English)（或您偏好的语言），然后点击『保存并关闭』生成内容。添加时代到时间轴交互说明浏览导航：点击箭头：点击内容区域左右两侧的箭头（>或<）可按顺序切换上一个/下一个事件。拖动时间轴：在底部时间轴区域左右拖动鼠标，可快速平移浏览不同历史时期。点击节点：直接点击底部时间轴上的事件节点（文字块或圆点），可立即跳转到该事件详情。视图控制（左下角工具栏）：缩放：点击放大镜图标+或-可调整时间轴的时间跨度密度。重置：点击“返回”图标（弯曲箭头）可一键回到时间轴的初始视图。全屏模式：点击右上角的扩展图标可进入全屏模式，获得最佳沉浸体验。优化与可访问性媒体描述：为所有插入的图片添加替代文本（AltText），确保使用屏幕阅读器的用户能理解图片内容。色彩对比：如果自定义背景图，请确保其与前景文字有足够的对比度，以免影响阅读。加载速度：尽量使用压缩后的图片，避免因素材过大导致时间轴加载缓慢。专家提示：用例灵感想拓展『时间轴』的使用场景？以下是一些常见用例，帮助你打开创作思路：历史教学：展示朝代更替、战争进程或文明演进企业培训：展示公司发展历程或品牌故事项目管理：梳理产品迭代版本或关键里程碑传记回顾：记录科学家、艺术家或公众人物的生平大事流程说明：按步骤演示复杂的工艺流程或演变过程相关内容类型推荐如果你希望实现其他形式的互动呈现，也可以考虑以下H5P内容类型：HYPERLINK/docs/tutorials/composite/tabsnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeywsnp1j\tdkeywsnp1j标签页(Tabs)：适合分类展示内容，而非按时间轴性排列。HYPERLINK/docs/tutorials/composite/branching-scenarionormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkey2yoebd\tdkey2yoebd分支场景(BranchingScenario)：用于创建基于决策的非线性路径，而非单一时间轴。HYPERLINK/docs/tutorials/composite/interactive-videonormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyv70odh\tdkeyv70odh互动视频(InteractiveVideo)：如果您的内容以视频为主，这是比时间轴更好的选择。HYPERLINK/docs/tutorials/composite/NDLA-timelinenor