跳到主要内容

信息墙 (Information Wall)

『信息墙』以可筛选的面板列表呈现结构化信息。每个面板可包含图片、文本与多个属性字段，并支持搜索/筛选，适合制作“资源目录”“工具清单”“内容类型索引”等需要快速检索与浏览的页面。

本教程目标​

  1. 了解信息墙的面板与属性结构，以及适用场景
  2. 掌握添加面板、配置属性字段与媒体的流程
  3. 学会启用筛选字段与外观行为设置，并完成可访问性优化

第一次使用课灵？

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

注册/登录

何时使用信息墙​

  1. 资源目录：按主题或标签整理常用资源，便于检索与复用
  2. 工具清单：以图文面板展示工具/内容类型，并提供简要说明与示例链接
  3. 课程组件索引：汇总课程中用到的活动、练习与材料入口
  4. 项目资料墙：集中展示项目文档、模板、说明与更新入口

教程示例​

下面是一个“内容类型索引”信息墙示例：每个面板代表一个 H5P 内容类型，包含图片、简介、发布状态与标签，并支持筛选。

示例：用信息墙制作可筛选的内容类型目录
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制"（注意：请确保已登录课灵账号，否则无法复制）
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建信息墙：分步指南​

步骤 1：创建新内容​

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

步骤 2：设置标题与页眉​

  1. 在顶部填写信息墙的元数据：
    • 标题：用于搜索、报告和版权信息（示例：H5P Content Types）
    • 页眉：显示在信息墙上方的标题（示例：H5P content types）
信息墙标题与页眉设置
设置标题（元数据）与页眉（页面显示标题）

步骤 3：配置属性​

属性决定“每个面板要展示哪些字段”。建议先把属性配置好，再批量添加面板。

  1. 打开 属性，点击"添加属性"。
  2. 依次添加常用字段（示例结构）：
    • Name：名称（勾选"显示属性标签 (Display label)"，并启用"启用属性搜索 (Enable attribute search)"）
    • Info：简介（可在内容中放"Show example"等链接）
    • Published：发布状态（示例：no (Aug 29, 2021)）
    • Tags：标签（示例：augmented reality, text, image ...）
  3. 如需强调重点字段，可在"样式覆盖 (Style override)"中开启加粗/斜体等显示效果。
信息墙属性设置
添加属性字段，并为可检索字段启用搜索

步骤 4：添加面板​

面板是信息墙的“条目”。每个面板通常对应一个内容类型/资源。

  1. 打开 面板，点击"添加面板"。
  2. 为面板上传图片并填写文本：
    • 图片：上传图标/封面图
    • 替代文字：用于图片无法加载时显示，也利于读屏；若图片仅作装饰，可勾选"仅作为装饰用"
    • 悬停时文字：可选，用于鼠标悬停提示
信息墙面板与图片设置
为面板上传图片
  1. 在下方的属性区域，为该面板填写 Name / Info / Published / Tags 等字段值。
信息墙面板
为面板填写属性字段内容

步骤 5：行为设置与筛选字段​

  1. 打开 行为设置。
  2. 根据截屏示例进行设置：
    • 图像宽度：160
    • 图像高度：120
    • 勾选"交替面板背景"，增强条目区分度
    • 勾选"提供筛选字段"，让学习者可按关键词筛选条目
    • 筛选字段模式：选择"扩大"
信息墙行为设置
设置图片尺寸、交替背景与筛选字段

步骤 6：保存与预览​

点击 『保存并关闭』 生成完整内容。您现在应该有一个与本教程顶部示例类似的结果。

交互说明​

  • 使用右上角的搜索框输入关键词，列表会实时筛选匹配的条目（可匹配标题与已启用搜索的属性字段）
  • 向下滚动浏览条目，每条目以"标题 + 简介 + 属性字段"呈现，右侧显示对应图片
  • 点击条目中的链接（如"Show example"）可跳转到该内容类型的示例或相关资源页面
  • 如页面底部提供"使用权"与"嵌入"入口，可用于查看许可信息或获取嵌入代码

优化与可访问性​

  • 替代文本：图片用于表达信息时必须填写"替代文字"；仅装饰图片可标记为装饰
  • 键盘可用性：确保搜索框与列表中的链接可用键盘聚焦与触发
  • 图片尺寸：优先使用统一比例的图片，并与行为设置的宽高匹配，避免布局跳动
  • 信息密度：每个面板只保留关键信息，详细内容用链接外跳，降低阅读负担

专家建议​

  • 先规划属性，后添加内容：在开始大量添加面板前，务必先确定好所有需要的“属性”字段。后期修改属性结构可能需要手动更新所有已添加的面板，工作量巨大。
  • 保持图片尺寸统一：为了获得整洁的视觉效果，请在上传前将所有面板的封面图裁剪为相同的宽高比（如 4:3 或 16:9），这能避免列表布局参差不齐。
  • 优化筛选体验：务必勾选“提供筛选字段”并将常用属性（如名称、标签）设为“启用属性搜索”，这对于包含大量条目的信息墙至关重要。
  • 精简面板文字：面板仅用于展示摘要和关键元数据。详细内容建议通过“链接”跳转至专门的页面或文档，避免信息墙过于拥挤。
内容类型选择指南
  • 信息墙 (Information Wall)：适合展示大量、结构化、需检索/筛选的资源列表（如课程目录、工具库）。
  • 标签页 (Tabs)：适合并行展示少量（3-5个）、同层级的内容块，无需筛选功能。
  • 互动书 (Interactive Book)：适合需要章节导航、整合多种互动组件的长篇学习材料。
  • 课程演示 (Course Presentation)：适合线性的幻灯片式讲解，结合多媒体与测验。
最后由 Sam Xu 于 更新