化工仪表及自动化课程资源建设与网站开发

孟 帅，钱 宇

（抚顺职业技术学院，辽宁 抚顺 113122）

随着信息技术的不断发展，人们通过互联网可以快速检索及查阅到自己需要的数据和资料。与此同时，互联网的普及也为高校教学带来了新的发展契机。教学改革的深化和发展使得线上教学成为高校课改的一个重要研究领域。板书与PPT相结合的传统课堂教学手段单一、上课时间有限，面对信息量较大的课程，部分学生无法对知识充分理解，而一个包含文本资料、微课视频、教学课件等资源的课程网站可以有效地解决学生在传统课堂中遇到的问题。

化工仪表及自动化课程在石油化工技术、应用化工技术、工业过程自动化等专业课程中占有重要地位，同时该技术也是一般化工技术人员进行工业生产、设计研发、维修维护所必须的技术之一[1]。化工仪表及自动化课程知识点繁杂，内容难度较大，在学习过程中需要学生能将理论与实践相结合。部分高职学生理论基础薄弱，缺少实践经验，面对此课程容易出现学习困难、积极性不高等问题[2]。本文针对原有教学模式中存在的不足，对化工仪表及自动化课程进行教学资源的完善及教学手段的补充，开发一个教学网站以加强学生对本门课程的掌握和理解，从而提高学习效率。

一、课程网站制作软件

Adobe Dreamweaver软件最初为美国MACROMEDIA公司开发，后被Adobe公司收购，其是一款经典的网站开发软件。Dreamweaver现有CS6、CS5、CS4、Dreamweaver CC、Dreamweaver 8等多种版本。其中Dreamweaver CS 6是一款能进行HTML代码编辑的网页编辑器，同时具有可视化编程的特点。传统HTML语言编程需要逐行输入代码，对于非计算机专业的开发者显得不够友好，而Dreamweaver CS6能够通过调用基本命令来实现对网页的可视化编辑，极大地提高了设计人员的工作效率[3]。本课程网站的教学资源也将通过Dreamweaver CS6来进行编辑与整合。Dreamweaver CS6具有如下特点。

（一）不会大量生成重复代码

一般可视化的网页开发软件需要将设计者的指令转换为程序语言，这个过程会生成大量重复数据，导致网页文件变得臃肿，同时也给后续的开发工作带来了不便。而Dreamweaver在使用过程中几乎不产生重复数据，从而为开发者减少了许多麻烦。

（二）提供代码视图和可视化视图两种模式

可视化开发和代码开发互有其优缺点：可视化开发操作直观，排版相对容易；而直接用代码开发更加精准，能够准确定位页面中的各个元素。Dreamweaver既提供了代码视图工作区，也提供了可视化视图工作区，开发者能方便地在这两个模式间进行切换。

（三）操作简便

通过模版、样式等功能，Dreamweaver使设计者在开发多个子网页时不用重复编辑同样的格式和内容。Dreamweaver还允许直接在页面中嵌入多种多媒体播放器，并经过简单设置后还可以直接调用相关的程序来对这些插件进行修改。

（四）网站管理功能强大

Dreamweaver会自动地修正网页中超链接的目标路径，每当定义的本地站点中的文件被重命名或移动位置时，新的路径也会被自动改写。并且通过ftp登录等功能可以使多个使用者对站点进行远程管理。

二、化工仪表及自动化课程的特点

化工仪表及自动化课程是化工类专业的必修课程，综合性较强。本课程的教学目标是使学生掌握工业常见物理量的检测方法及变送器的工作原理，掌握基本控制规律及工业参数调节方法，并且可以根据生产工艺的要求，向过程控制设计人员提出合理的控制方案，提出合理化建议[4-5]。其课程主要内容主要包括工业测量仪表、基本控制理论、自动控制系统、计算机控制、典型化工单元控制等[1]。传统教学方法由于授课时间、环境等因素的制约，学生在课堂上学习的知识点不够全面。若要达到预期的教学目标，学生还需利用课后时间阅读参考资料，通过自学的方式补充剩余的内容。在互联网上，关于化工仪表及自动化课程的资源分布较为杂乱。学生要从浩瀚的网络中搜集合适的学习内容需要花费大量精力，且很多时候搜集的学习资料与课程的契合度不高，给理解知识带来了障碍。部分职业院校学生的自学能力相对较弱，学习积极性不高，不能利用课后时间自学完善，导致所学知识不能形成完整的体系。

利用多媒体及信息化网络技术，构建网站可以向访问者提供多种形式的课程资料，为学生打造一个“一站式”学习平台。教师也可根据行业发展及岗位需求不断完善、更新网站内容，以解决书本知识陈旧等问题[6]。

三、化工仪表及自动化课程资源

依据教学大纲的各个章节内容和知识点，整理出便于学生理解和掌握的课程资源。资源素材主要有文本资料、图片动画、微课视频等，可分别通过书籍文献、网络下载、软件制作等方式获得。

（一）文本内容的搜索与制作

网站的文本资料主要包括教学标准、校本教材、复习题库、实训项目指导书、PPT课件等，具体内容可由任课教师编写或从教材和参考书中摘录，也可从各大知名高校网站下载。全部素材经过整理后，可导入到课程网站相应的页面。

（二）教学图片制作

图片素材的来源可以在互联网进行下载，再通过Photoshop等软件进行抠图和去水印处理。此外，也可以使用AdobeIllustrator、Visio、AutoCAD等软件来绘制部分图片。所有图片可以直接导入到网页中，也可以插入到PPT课件和电子教案中。图1为AutoCAD软件绘制的教学图。

（三）微课视频的制作

微课程是以多媒体作为载体，依照教学标准和课程要求反映课堂教学过程中对于某个课程内容而进行的各类教学资源的系统结合[7]。它结构紧凑，可以形象地描述一些复杂的工业过程，有效地提高了课堂效率，在高职专业教学中具有非常良好的教学效果[8]。

微课可以通过访问“中国微课”等网站进行下载，但教师本人录制的微课将更加契合自己的教学内容，也有助于学生注意力的保持[9]。很多录屏软件及视频剪辑软件都可以用于微课的制作，这里使用的软件是Canmtasia Sudio，简称CS。它是一款操作简单、使用方便的视频录制、编辑的软件，能通过录屏模式记录使用者在屏幕中所有的动作，包括声音、影像、讲解、和鼠标运动等信息。Canmtasia Sudio还自带丰富的视频编辑功能，可以输出多种常见的媒体格式，包括AVI、MPA4、WMV、MP3等。以微课“流体输送单元控制”为例，具体的制作步骤如下。

1．准备素材

视频素材可通过录制屏幕或现场拍摄的方式获得，需事先做好任务划分、时长分配、台词表达等准备工作。录制屏幕还需要准备好电子课件、图片、教学软件等，现场拍摄则需要布置好场地环境、准备录制设备、安排操作人员等。

2．视频编辑

准备好的视频及音频可以通过“导入媒体”的方式被选入Canmtasia Sudio的“剪辑箱”，成为此微课项目的素材。通过添加若干条“轨道”，将所有素材组合在一起，形成微课的基本框架。之后，通过加入字幕、标题对视频中的内容进行说明，加入动画来描述设备内部参数变化，通过加入转场、淡入淡出等特效给多个视频之间添加过渡，最后通过加入配音旁白对整个视频进行讲解。Canmtasia Sudio的视频编辑界面如图2所示。

图2 Canmtasia Sudio视频编辑界面

3．视频生成

点击“生成和分享”即可进入视频生成向导。这里可以选择视频文件格式类型及分辨率大小，设置完成后即可对视频进行渲染输出（如图3所示）。

图3 Canmtasia Sudio视频输出设置

四、课程网站的开发

（一）定义站点

在任意一个盘符下创建文件夹并输入名称，网站中所用到的文件名都必须为数字和英文字符。

打开Dreamweaver，点击“站点——新建站点”并打开相应窗口（如图4所示）。在站点名一栏中输入要建立的网站名称，在“本地文件夹”一栏内填入刚创建的文件夹位置路径，然后保存即可。以后再次打开Dreamweaver，会自动显示刚才设立的站点。如果有不止一个站点，可以在菜单“打开最近的项目”一栏中去选择。

图4 Dreamweaver新建站点窗口截图

（二）创建页面

在网站文件夹内，可以通过点击右键新建一个HTM文件。因为网站首页文件名通常为index.htm或index.html，所以我们需将新建文件重新命名。网站其它页面的名字没有固定要求，名称不包含中文字符即可。

双击打开index.html文件即可进入页面编辑模式。在上方“标题”一栏中可以输入当前网页名称。通过打开“页面属性”选项，可以对当前页面的文本、背景、边距、超链接等内容进行设置。

（三）网页布局

向空白页面添加内容之前，需要设计页面总体结构。可以先简单绘制草图，考虑页面分为哪几部分，怎样划分区域更加合理。

这里采用DIV+CSS的布局方法。DIV通过其标签将整个页面划分为若干“块”，CSS则用来控制每一“块”内容的显示样式。使用这种方法进行开发的页面体积小，加载速度快，修改设计时也更加方便。通过DIV把整个页面分为头部区域、导航区域、左边栏、右边栏和底部区域，整个页面居中（如图5所示）。

图5 页面布局

（四）添加图片

在网页文件夹根目录下面新建一个文件夹用来存放图片等素材，路径名称中不能含中文字符。

在Dreamweaver中点击顶部菜单“插入”选项，打开“插入图像”对话框，找到要导入的图片并点击确定，即可将图片插入网页中。

选中已经插入的图片，窗口下方会自动显示该图片的属性面板，这里可以为图片命名，并设置图片的长和宽。也可以通过拖动图片四周的控制点来对图片进行缩放。点击属性栏中的“切换尺寸约束”选项，可以使图片按照固定的比例改变大小。如要还原图片的原始大小，则单击下面“重置为原始大小”按钮[10]。

图片属性的“链接”一栏可直接输入指向文件的地址；“替换”一栏中的内容是对图片的描述，即当鼠标指向该图片时所显示的文字信息。

（五）添加超链接

1．为文字添加链接

首先在页面某处输入文本信息，然后将该文字选中，在下方属性界面的“链接”一栏内填写它所要指向的文件地址即可。在后面的“目标”一栏可以设定指向目标文件的具体打开形式，其中_blank设定目标在新建窗口中显示，这是最常用的方式；_self则是设定在当前窗口打开指向目标的文件。

2．为图片添加链接

选中页面中的一张图片，然后在图片的属性里“链接”一栏中输入目标路径即可。通过属性一栏里的“地图”选项，也可以使同一张图片分别指向不同的目标文件。点击“热点工具”，在图片的某个区域设置一片“热点”，然后就可以在其属性选项中给这个“热点”添加一个链接。再用相同的方式在图片的其它位置设置另外一个“热点”，就可以再为该图片设置其他链接地址。

（六）批量生成网页

对于包含多个子网页的网站，在建设网站时往往会多次新建格式相同的子页面，这里我们可以通过保存模板来减少重复的开发工作。

选择某一网页，点击文件中的另存为模板选项，可将选中的页面以模板的形式保存。之后在添加新页面时，可以在名为Templates的文件夹中找到我们保存过的所有模板，选择其中的模板，在可编辑区域添加网页内容，即可快速生成新的子页面。

当所有的页面编辑完成后，共有82个html文件，用户就可以通过页面中的超链接在这些网页间进行跳转。网页效果如图6所示。

图6 化工仪表及自动化课程网站截图

综上所述，针对“化工仪表及自动化”进行教学资源建设，并通过Dreamweaver软件完成资源的整合，课程网站涵盖了本门课程许多零散的教学素材和课程资源，有利于知识的传播和学习。学生可以通过该网站自行浏览或下载学习资料，随时随地进行课前预习及课后复习，多媒体资源也能让学生更加容易地理解和掌握课程中的知识点。