化工儀表及自動化課程資源建設與網站開發

孟 帥，錢 宇

（撫順職業技術學院，遼寧 撫順 113122）

隨著信息技術的不斷發展，人們通過互聯網可以快速檢索及查閱到自己需要的數據和資料。與此同時，互聯網的普及也為高校教學帶來了新的發展契機。教學改革的深化和發展使得線上教學成為高校課改的一個重要研究領域。板書與PPT相結合的傳統課堂教學手段單一、上課時間有限，面對信息量較大的課程，部分學生無法對知識充分理解，而一個包含文本資料、微課視頻、教學課件等資源的課程網站可以有效地解決學生在傳統課堂中遇到的問題。

化工儀表及自動化課程在石油化工技術、應用化工技術、工業過程自動化等專業課程中占有重要地位，同時該技術也是一般化工技術人員進行工業生產、設計研發、維修維護所必須的技術之一[1]?；x表及自動化課程知識點繁雜，內容難度較大，在學習過程中需要學生能將理論與實踐相結合。部分高職學生理論基礎薄弱，缺少實踐經驗，面對此課程容易出現學習困難、積極性不高等問題[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文件即可進入頁面編輯模式。在上方“標題”一欄中可以輸入當前網頁名稱。通過打開“頁面屬性”選項，可以對當前頁面的文本、背景、邊距、超鏈接等內容進行設置。

（三）網頁布局

向空白頁面添加內容之前，需要設計頁面總體結構?？梢韵群唵卫L制草圖，考慮頁面分為哪幾部分，怎樣劃分區域更加合理。

這里采用DIV+CSS的布局方法。DIV通過其標簽將整個頁面劃分為若干“塊”，CSS則用來控制每一“塊”內容的顯示樣式。使用這種方法進行開發的頁面體積小，加載速度快，修改設計時也更加方便。通過DIV把整個頁面分為頭部區域、導航區域、左邊欄、右邊欄和底部區域，整個頁面居中（如圖5所示）。

圖5 頁面布局

（四）添加圖片

在網頁文件夾根目錄下面新建一個文件夾用來存放圖片等素材，路徑名稱中不能含中文字符。

在Dreamweaver中點擊頂部菜單“插入”選項，打開“插入圖像”對話框，找到要導入的圖片并點擊確定，即可將圖片插入網頁中。

選中已經插入的圖片，窗口下方會自動顯示該圖片的屬性面板，這里可以為圖片命名，并設置圖片的長和寬。也可以通過拖動圖片四周的控制點來對圖片進行縮放。點擊屬性欄中的“切換尺寸約束”選項，可以使圖片按照固定的比例改變大小。如要還原圖片的原始大小，則單擊下面“重置為原始大小”按鈕[10]。

圖片屬性的“鏈接”一欄可直接輸入指向文件的地址；“替換”一欄中的內容是對圖片的描述，即當鼠標指向該圖片時所顯示的文字信息。

（五）添加超鏈接

1．為文字添加鏈接

首先在頁面某處輸入文本信息，然后將該文字選中，在下方屬性界面的“鏈接”一欄內填寫它所要指向的文件地址即可。在后面的“目標”一欄可以設定指向目標文件的具體打開形式，其中_blank設定目標在新建窗口中顯示，這是最常用的方式；_self則是設定在當前窗口打開指向目標的文件。

2．為圖片添加鏈接

選中頁面中的一張圖片，然后在圖片的屬性里“鏈接”一欄中輸入目標路徑即可。通過屬性一欄里的“地圖”選項，也可以使同一張圖片分別指向不同的目標文件。點擊“熱點工具”，在圖片的某個區域設置一片“熱點”，然后就可以在其屬性選項中給這個“熱點”添加一個鏈接。再用相同的方式在圖片的其它位置設置另外一個“熱點”，就可以再為該圖片設置其他鏈接地址。

（六）批量生成網頁

對于包含多個子網頁的網站，在建設網站時往往會多次新建格式相同的子頁面，這里我們可以通過保存模板來減少重復的開發工作。

選擇某一網頁，點擊文件中的另存為模板選項，可將選中的頁面以模板的形式保存。之后在添加新頁面時，可以在名為Templates的文件夾中找到我們保存過的所有模板，選擇其中的模板，在可編輯區域添加網頁內容，即可快速生成新的子頁面。

當所有的頁面編輯完成后，共有82個html文件，用戶就可以通過頁面中的超鏈接在這些網頁間進行跳轉。網頁效果如圖6所示。

圖6 化工儀表及自動化課程網站截圖

綜上所述，針對“化工儀表及自動化”進行教學資源建設，并通過Dreamweaver軟件完成資源的整合，課程網站涵蓋了本門課程許多零散的教學素材和課程資源，有利于知識的傳播和學習。學生可以通過該網站自行瀏覽或下載學習資料，隨時隨地進行課前預習及課后復習，多媒體資源也能讓學生更加容易地理解和掌握課程中的知識點。