Claroline使用指南之三：编辑器_文本和图片

作者：山东临沭第二中学 胡晓明
提醒：转载、使用请注明作者和出处

 

3.0 编辑器简介

在网中写文章都是通过“编辑器”来完成的，是在线写文章的最基本的工具，claroline在输入的地方都使用了“编辑器”，并且多媒体部分的功能都是通过编辑器来实现的，所以一定要把它学好。Claroline的编辑器有两个优势：简单、统一。说它简单是因为界面跟word差不多，各种项目修改起来也很容易；说它统一是因为在Claroline中，所有的向平台提供数据的地方，都用同一个编辑器。

下面看一下编辑的实例：

  整个编辑器分了四个大部分：

  最上面的是工具栏，跟word的工具栏有些相似，包括了常用的工具。例如：字体、字号、加粗、复制、粘贴、居中、列表、超链接、表格等，多媒体的实现重点是第二行的右边，包括图片、视频、动画、公式和其它资源。

  中间最大面积的是编辑栏，所有的输入都在这儿进行。

  底部带有“path：”字样的是“html状态栏”，指示当然正在进行的标签，这个内容要涉及到hmtl语言，对于专业的人员和编辑复杂的文档很有作用。

  最下面还有一行小字：“附加上一个已有的教学资源”，别因为它小就忽略了它，它可是Claroline的一大特色，在输入的地方可以附带着作业、教案、练习题等资源，使你的文档更具有灵活性，你将在以后的章节里逐步也解到它的作用。

  由于是操作相对复杂的地方，我们先来了解一下他们的作用，最下面一行是“表格”和“帮助”：

 

 

 

 

 

 

 

3.1 文字的使用

   文字是在线教学的一个最基本元素，用的最多，技术上也最成熟，在Claroline中，除了行距、竖向字等少数操作外，基本上同word、wps差不多，具体操作不再赘述，仅说几个要点：

（1）Claroline的汉化工作还有些地方需要改进，在默认的配置中，字体偏小，仅9磅。英文在9磅下有完美的表现，但是对于汉字来说，就小了一点，看起来有点累。这需要修改一下配置才能设置大一些，我们正常看的汉字一般是12磅。修改方法///见后

（2）字号仅仅有7种，这不是Claroline的限制，而是沿袭了传统的html的字号的限制，传统的html在font标签里只规定了7种字号，其实在FrontPage中也可以看到这个问题。虽然现在可以通过其它的途径实现其它的字号，但是由于这7种对大多数人来说应该足够了。

（3）由于照顾大多数的语言，默认配置的字体列表中没有“宋体”、“黑体”、“隶书”之类的中文字体，需要自己动手修改源码才能加上，详见///后所述。

（4）如果Claroline提供的这几个工具不能满足你的要求，那么你可以点击第二排最后面的“html”图标，进入html源码里进行修改，但是前提是你必须对html有所了解。其实只要可以修改html代码，可以制作出非常复杂的网页。同时提醒一下，并不是所有的html元素都可以使用，并且修改源代码的时候要注意标签的闭合，不正确的标签配对对网页来说将会是一个灾难。

   （5）在网页编辑中，换行代表的意义是分段，两段之间会有很大的间隔，这是正常的现象，如果要达到word中的换行效果，在“回车”时要按住“SHIFT”键。其实在FrontPage中也是这样操作。

3.2 在文章中使用图片

Claroline支持多种常见的图片，包括日益流行的无损压缩图片格式png；网上最常见的图片格式jpg；动画图片格式gif；以及兼容性最好、但是体积有点大的bmp。

Claroline在图片上的一个特点就是采用电子相册式的图片浏览方式，可以采用缩略图的方式查看图片，也可以用“画廊”的方式查看图片。

（1）利用编辑器上传图片

　　Claroline提供了两种上传图片的方式：用编辑器里上传和基于zip压缩文件的批量上传，先看最常用的编辑器上传：

    首先找到找图片的插入点：   

然后点击工具栏第二排的图片图标：，将弹出一个新的浏览器窗口：

这个界面分了三个部分：

上半部分是“可用的图片”，显示的是在这个当前目录下的图片列表，上图中显示的是课程根目录/，注意这是一个相对于课程所在目录来说的目录，而不是系统的真正目录。在实际应用的时候，把图片放在一个文件夹下是一个好的习惯，在///后章你可以学习到如何在课程目录下建立新的目录。

下部分是预览界面，点击上面的某一张图，将在这儿出现它，使用图片预览可以防止选错图片。

当中部分就是上传文件的地方，点击“浏览”，出现“选择文件”对话框：

选择一个文件，并双击或单击“打开”，文件路径将出现在“添加一张图片”的文本框里，实际上，如果你水平足够，在这儿直接输入图片的路径也可以：点击“上传”按钮，稍等，“10037.jpg”就已经在“可用的图片”列表里：

为了防止错选文件，可以点击一下图片，预览一下，请注意图片列表中的虚线，它指示了当前选择的图片：如果仅仅是简单地插入图片，那么到这儿就可以直接点击“确认”了。图片就会出现在编辑器中，但是如果你还要进一步设置图片，可以点击顶端的“高级”标签。

（2）编辑器中图片的高级设置

先来看一下界面：

项目很多，我们逐个看：

图片地址就是这个图片的地址（废话），但是注意它并没有出现“10037.jpg”字样，而是用一大串符号代替，这是Claroline为了防止恶意的攻击而设置的，可以防止暴露出真实的路径。

尺寸就是图片的长和宽，单位是“像素”（px，pixel），可以输入相应的数字，对图片进行缩放。缩放时的图片很可能会变形，下面的“按长宽比例缩放”就是解决图片缩放时的变形问题。

“图片说明”是在图片不显示的时候，用文字代替的部分。图片不显示有好多情况，常见的有两种：浏览器不支持图片显示，或者是找不到图片。可以留空不填。

“图片标题”是当鼠标指在图片上不动时，所显示的文字说明。我们都知道在windows中，如果把鼠标放到“最小化”按钮上面不动，过一会儿就会出现“最小化”三个字，“图片标题”的效果就跟它类似。可以留空不填。

 

接下来的几个选项可能不是很熟悉。请注意右边有一个小树的图片还有一串文字，那是一个图文混排时的效果预览，文字是法文，相当于word中的图片环绕方式，设置选项后，那个地方就会显示相应的效果。

对齐方式，一共有八种：，可以逐项试一下，同时看一看右侧预览的效果。现在我选“左对齐”，图片右边被文字环绕：

再设置一下间距看看，可以看到其它网页元素到图片距离增大了：

还有一个边框参数，这个参数在实际中用的很多：

都设置完成了，可以点击“确认”了，再看编辑器中的效果，再确认，就可以在网页中看到图片了：

　　（3）图片格式的修改

　　　　如果对图片的格式不满意，或者想换一张图片，也许你想到的是删除掉再重新添加一张图片，但是这不是一个好的方法，Claorline提供了一种简单的修改方法：先选中要修改的图片，然后再点击工具栏上的“图片”图标，就进入了同添加图片一样的界面，直接可以修改。

3.3 批量上传图片及图片的浏览

任务：在课程讲义里建一个“图片”目录，然后上传几十幅图片。

 

　　如果有大量图片需要上传，用编辑器一个一个上传显然有点慢，Claroline提供了一种批量上传图片的方法，可以大大减少上传大量图片的工作量。

　　批量上传图片需要进入“课程讲义”工具里，进入课程后点击：

进入“课程讲义”里，为了便于查找，我们先建立了一个“图片”的目录：

///说明一下，“课程讲义”这个词不是很贴切，很容易引起误解，会认为它只能放“讲义”，其实在英文原文是“Documents”，就是“文档”的意思，范围要远比“讲义”广，包括教案、网页、相关资料、图片、甚至是多媒体都可以放到里面，除了php的文档外，所有的和本课程相关的东西都可以放到这里面，其实翻译为“资源”更为合适一些。

　　

点击“创建目录”：

界面很简洁，目录名是必填的，简介可以不填：

新建的目录已经显示出来，并且简介在它下面的一行中也显示出来。下面我们开始准备上传照片，选进入“图片”目录，方法很简单，点击它一下就行：

从当中的“根目录>图片”可以知道现在已经处于“图片”目录中，由于是新的目录，所以下面显示“没有内容可显示”，我们来准备上传一组照片，有30多张，放在tipian文件夹中。上传之前，选来看一下Claroline批量上传图片的原理：

由于html的限制，上传时不能上传一个文件夹，比如你不可能把一个“文件夹”通过web方式的邮箱发送给好友，所以Claroline中也不可能上传整个文件夹。但是Claroline采取了另外一种方式：利用zip压缩文件来实现整个文件夹的上传。由于在zip中可以包含多个文件，甚至还可以包含子目录，把这个zip文件上传到服务器上，然后再在服务器上解开zip文件，这样就实现了多文件的上传。

为了上传这30张图片，我们应该先为这些图片准备zip文件，这个工作可以用winrar做，具体做zip的环节可以参考其它资料，不再赘述，提示一下，千万别做成rar文件。做完之后，就可以点击上图中的“上传本地文件”，出现的图中（见下一个图），点击“浏览”，然后定位到做好的zip文件：

点击完成后，有“文件”文本框里多了文件的路径，其实这个地方也可以手动输入：

下面紧接着的两行字，提示上传时还需要注意两个问题：

第一．要注意上传文件的大小不要超出限制，在上图中是8M字节。这个最大文件上限是受服务器本身配置的限制，跟Claroline没关系，主要是受php配置和web服务器，比如apache配置的限制。对于因特网上的机器来说，由于受网速的影响，文件大小限制不建议设置得太大，否则会频繁出现“超时”的错误。

第二．每个课程在默认配置下，都只分配给90M字节的空间，所有的课程资源加起来，包括学生上传的作业，不允许超过这个限制，平台管理员可以根据服务器的配置水平来修改这个上限。

下面的一个选项是最重要的，“在服务器上解压缩zip文件”，只有选中这个选项，Claroline才会在服务器上解压zip文件。

“确认”后，等上一会儿，就可以看到成果，如果zip文件中包含文件夹的话，那么Claroline也会自动创建相应的文件夹：

整个界面也比较简洁，其实这是“课程讲义”的标准视图，在使用的过程中我们会慢慢熟悉它。

在最左侧的“名称”栏里随便点击一个图片，就可以一睹它们的“芳容”：

在图片的左上角和右下角，是图片的导航，分别显示“上一张”图片和“下一张”图片，并且都附带着缩略图，可以方便地进行图片浏览，点击一下右侧的带小狗狗的下一张：

你会看到紫花的图片已经到了左上角，成为“上一张”了。

图片的下方，有一个“直接链接到图片”的字样，点击一下，就可以只显示图片，而地址栏中显示的就是图片的网址（ＵＲＬ）。

在图片的下方是一个简短的图片信息，包括文件名、长宽尺寸、大小、图片位数、图片类型。

对于大量的图片，这种浏览方式会很麻烦，Claroline提供了另外一种方式：缩略图显示，操作方式和windows XP的“缩略图”模式差不多，在右上角“下一张”导航的上面，显示了另两种模式“文件列表”和“缩略图”。点击一个“缩略图”：

这种显示模式还熟悉吧！和windows的不同点在于每页限制了缩略图的数量，这是其实是一种保护措施，因为这些缩略图是Claroline根据原图生成的，需要耗费很多服务器资源，如果显示过多的话，会把服务器拖垮。

至于使用批量上传的图片，在编辑器的添加图片时可以看到，包括目录在内，直接使用就可以了：