我如何在 Canvas 课程内嵌入教学单元?

Canvas最近介绍了新页面的设计叫Canvas用户新界面(UI)。 取决于您的Canvas视图,您的页面设计在本教程所示的图像可能有变化。 但是,组件的功能与位置都会保留一样。

现有的社区(guides.canvaslms.com)不允许嵌入。要嵌入一个教学单元,您必须使用来自guides.instructure.com的内容。

我们的很多客户正在使用 Canvas 的指南,构建其各自在Canvas的培训课程。我们认为这是一个好主意,因为我们的产品正在如此快速地变化。通过 iFrames 可将教学单元嵌入您的课程,您可以确定:我们最新的文档可供您的学生使用。您还可以在单元中链接指南

注意:一些浏览器,如 Firefox 和 Chrome已建有安全限制,正如我们在一般浏览器指引中的说明。如果您到访Canvas 课程嵌有iFrame,并链接不安全内容的某页面,您可能会看到一个盾牌的图标出现在浏览器栏里。您可以选择越过安全限制并通过点击盾牌图标显示内容,然后,选择停止保护此页面(Disable Protection on This Page) 上传不安全文字(Load unsafe script)

打开页面

打开页面

在课程导航中,点击页面(Pages) 链接。

查看页面

查看页面

如果主页已选定,页面是为打开课程的主页而设计。点击查看所有页面(View All Pages) 的键钮,从页面索引选择一个页面。

创建新页面

创建新页面

点击添加页面(Add Page)的按钮。

输入页面标题

输入页面标题

输入新页面的名称。您可以决定复制并粘贴确切的 Canvas 指南教程单元标题。

切换视图

切换视图

点击HTML编辑器(HTML Editor)的链接以输入 HTML 代码。

安全内容

如果您希望阻止安全和非安全内容的混合,或创建弹出的警告, 您可以使用安全内容链接到Canvas指南。

在一般(不安全的)指南链接里,URL开始于http://guides.instructure.com。但是,安全内容的创建通过替换URL的部分而形成,开始于URL https://guides.instructure.com/

复制Canvas指南的URL

复制Canvas指南的URL

复制您想嵌入的Canvas指南的URL。

输入HTTP iFrame 的嵌入码 (安全)

输入HTTP iFrame 的嵌入码 (安全)

要粘贴Canvas指南作为一个安全iFrame,用https://guides.instructure.com [2] 替换URL的开头http://guides.instructure.com [1]。

<p><iframe src="https://guides.instructure.com/m/4151/l/56633-how-do-i-search-canvas-guides-?e=4" width="600" height="3000" style="overflow: hidden;"></iframe></p>

注意:https://guides.instructure.com替换http://guides.instructure.com,但所有的代码片段都没改变。

非安全内容

非安全内容可创建弹出的警告。您可以链接Canvas 指南来使用安全内容,查看安全内容步骤。

在一般的(不安全的)指南链接里,URL开始于http://guides.instructure.com。但是,安全内容的创建通过替换URL的部分而形成,开始于URL https://canvas.screenstepslive.com。

复制 Canvas 的指南URL

复制 Canvas 的指南URL

复制您想嵌入的Canvas指南URL。

输入HTTP iFrame 的嵌入码 (非安全)

输入HTTP iFrame 的嵌入码 (非安全)

要粘贴Canvas 指南作为一个 iFrame,复制下面的 iFrame 代码片段,用您希望嵌入的确切教学单元 URL 来替换粗体 CANVASURL

<p><iframe src="CANVASURL-?e=4" width="600" height="3200" style="overflow: hidden;"></iframe></p>

例如,如果您想嵌入课时的标题 “我如何搜索Canvas的指南?” 您就要替换URL如下:

<p><iframe src="http://guides.instructure.com/m/4151/l/56633-how-do-i-search-canvas-guides -?e=4" width="600" height="3200" style="overflow: hidden;"></iframe></p>

保存改变

保存改变

如果您准备好发布您的页面,点击保存并发布(Save & Publish)的按钮[1]。如果您想创建您页面的草稿,点击保存(Save)的按钮[2]。

注意:如果您没有保存页面而尝试导航离开,您将导致一个弹出警告产生。

当您的页面保存在草稿状态时,通过点击发布(Publish)的按钮[1],您可以随时返回和发布页面。该按钮将从灰色变成绿色[2]。

查看iFrame的边框和滚动条

查看iFrame的边框和滚动条

取决于您所用的浏览器,您可以在iFrame周围看到一些边框和滚动条,这都是正常的。

调整 iFrame 高度

调整 iFrame 高度

对于 Canvas 指南教学单元的长度而言,iFrame 可能太长或不足够长。查看您的页面后,点击编辑(Edit)的按钮,以调整高度或宽度。

切换视图

切换视图

点击HTML编辑器(HTML Editor) 的链接。

调整 iFrame 高度

调整 iFrame 高度

要改变嵌入代码的高度,调整高度(height)宽度(width)(以像素为单位)。然后,在页面底部,点击保存(Save)的键钮。

注意: 您也可以把 e = 4 改为 e = 3,以在浏览器视窗里延伸教程

查看 iFrames 在Canvas 指南里的教程

查看 iFrames 在Canvas 指南里的教程

当您在 Canvas 打开该页面时,加载内容可能会要花一些时间。 刹那间,您就可以看到来自 Canvas 指南原始网站的一些格式化。您可能会需要刷新该页面,一旦加载,看起来很棒!