基于Web的《機械原理》網(wǎng)頁課件的開發(fā)游

明琳 張影 鄭繼明 羅國宇

摘要：針對傳統(tǒng)單機課件交互性、共享性不足，以及機械原理課程教學中機械設計部分抽象、難學的缺點，提出基于Web的《機械原理》網(wǎng)頁課件的探索與開發(fā)，利用網(wǎng)頁課件能夠融合多種元素的特點，來幫助教師提高教學效率。根據(jù)網(wǎng)頁課件的特點，探討了針對機械原理課程網(wǎng)頁型課件的搭建思路，以常用的機械原理教材為例，講述了該課程網(wǎng)頁型課件的開發(fā)過程，同時著重介紹了網(wǎng)頁參數(shù)化機械設計的開發(fā)過程，可為機械原理課程教學方法和教學手段的擴展提供一種全新的思路。

關鍵詞：網(wǎng)頁型課件;機械原理課程;參數(shù)化設計;移動學習;H5

中圖分類號：G642 ? ? ? ?文獻標識碼：A

文章編號：1009-3044（2022）13-0102-03

1引言

機械原理課程是機械設計制造及其自動化等專業(yè)的一門學科基礎課，具有很強的工程性、實踐性和應用性[1]。在教學過程中，機械原理課程主要以機械運動分析和機械運動設計為主，重視采用動態(tài)直觀的教學手段，如Flash動畫、三維模型、圖片等方式。隨著科技的發(fā)展，計算機輔助教學（Computer Aided Instruction）也逐漸融入日常教學中，多媒體課件是實現(xiàn)CAI的主要手段，其可分為單機課件和網(wǎng)絡課件兩種。單機課件是在本地計算機上運行，然后作用于單個教學環(huán)境;網(wǎng)絡課件是通過互聯(lián)網(wǎng)作為工具，使教學內容能即時共享給所有人。傳統(tǒng)的單機課件需要教師將PPT等相關多媒體素材拷貝至電腦中，缺乏一定的靈活性，教學過程是由教師所掌控，教師主要負責知識的傳授，忽略了師生之間的交互。隨著網(wǎng)絡技術的發(fā)展給人們生活提供便利的同時，也為教學提供了新的思路，基于Web的網(wǎng)頁型課件是將傳統(tǒng)的多媒體課件和網(wǎng)絡技術進行結合，能夠充分利用教學資源，提高教學的靈活性，增強師生互動，幫助教師提高教學效率，達到更好的教學效果[2]。

2基于Web的機械原理課程網(wǎng)頁型課件的特點

在互聯(lián)網(wǎng)技術高速發(fā)展的背景下，技術的革新對傳統(tǒng)教學模式的改變較大，教學課件的形式也在不斷發(fā)展，相較于傳統(tǒng)課件，針對機械原理課程的網(wǎng)頁型課件呈現(xiàn)出一些新的特點：

2.1 資源共享

基于Web的機械原理課程網(wǎng)頁型課件是將教學內容存儲到服務器中，通過訪問網(wǎng)站，能夠隨時隨地獲取教學資源，輕松實現(xiàn)資源共享[3]。同時在教學過程中，學生可直接通過手機訪問網(wǎng)站，隨時對教師講授的內容進行回顧，查缺補漏，培養(yǎng)學生了自主學習能力。教師也能直接通過網(wǎng)站來訪問課件，無須拷貝課件等工作，簡化了教學流程;此外，教師也能夠通過更新網(wǎng)站服務器的內容資源，幫助所有學生能夠獲取最新的學習資源，完成教學內容的實時更新。

2.2表現(xiàn)力豐富

多媒體課件和傳統(tǒng)課件相比，其包含的信息元素更多，能包含圖片、文字以及視頻等，增強了課件的生動性。就機械原理課程來說，它涉及較多的機械運動過程，傳統(tǒng)課件無法立體直觀地展現(xiàn)其特點，容易導致學生無法深入理解知識，僅停留在理論認識階段，而常用的多媒體課件，無法將多種信息元素整合到同一界面中，達不到更好的表現(xiàn)力，從而影響學習效果。基于Web的網(wǎng)頁型課件不僅能夠整合動畫、圖片、3D模型等素材，還能將復雜的機械結構簡單化，將傳統(tǒng)的靜態(tài)機構動態(tài)化，幫助學生更好地理解機械的設計過程和運動過程[4]。

2.3交互性強

通過提高課件的交互性能夠幫助增加課件的教學效果，加強站內信息的互相傳遞。交互性主要分為兩種，一種是內容的交互，另一種是人際的交互。內容的交互主要是學習者和教學內容資源之間的交互，人際交互強調的是學習者和學習者或者教師之間的交互。

在實際網(wǎng)絡課件案例中，學生通過網(wǎng)站的互動交流板塊進行留言，反饋學習中出現(xiàn)的難點，幫助教師了解學生的學習情況，及時調整教學計劃以及教學方法，完善教學內容，提高教學效率和針對性。同時，也能夠幫助學生根據(jù)教師的反饋意見及時調整學習情況，充分重視學生的主體性[5]，同時也能夠幫助學生提高學習的注意力，以及保持學習興趣。

2.4 參數(shù)化設計教學

參數(shù)化設計是通過計算機將機械設計過程中的相關公式和參數(shù)編制為代碼，學生通過設定不同的參數(shù)，從而實現(xiàn)設計過程的自動化。參數(shù)化設計在工程設計領域能很好地提高工作效率，故應用較為廣泛。

將參數(shù)化設計引入到教學領域，主要是由于機械原理課程中的重點難點是幫助學生理解機械的設計過程，傳統(tǒng)的課件只是灌輸型地傳授知識，不注重學生的自主性，導致學生無法理解機械設計過程，影響教學效果。且目前較多將參數(shù)化引入教學大多是通過第三方平臺，如PRO/E等，在教學過程中不具有很好的連貫性。通過網(wǎng)頁型課件來對機械進行參數(shù)化設計，能夠幫助學生自主地理解機構的設計過程，培養(yǎng)學生的設計能力，同時還能培養(yǎng)學生的信息素養(yǎng)，激發(fā)學生的學習興趣。

3機械原理課程網(wǎng)頁型課件設計思路

針對傳統(tǒng)課件的交互性、靈活性不足的缺點，網(wǎng)頁型課件在設計時要注重交互性和共享性的原則，同時課件的設計要遵循一定的教學規(guī)律。針對機械原理課程網(wǎng)頁型課件設計主要分成四個階段：

第一階段：對學習者進行分析，了解學生群體的學習需求，知曉他們在學習過程中可能會面臨的問題，以及分析大學生的喜好和認知特點，明確課件設計的目的，了解在課件在使用中需要收集哪些互動數(shù)據(jù)。

第二階段：對課件內容進行選擇，高質量的內容能有效提高學生的學習效果，故在課件內容選擇上要盡量選擇高質量的教學內容，要能夠清晰明了地解釋課程知識點，在制作課件時還要對教學資源進行規(guī)劃，確定好要使用的信息元素，如flash、圖片、視頻等，增加它們與教學內容的相關程度。

第三階段：進行課件頁面的設計，第一步先設置站點架設好服務器，確定好網(wǎng)頁課件的組成模塊;第二步上傳教學資源，將第一階段和第二階段的來幫助學生課上課下更好地根據(jù)自己的情況進行鞏固知識;第三步搭建參數(shù)化機械設計平臺，構建機械設計知識體系;第四步建立師生交流板塊，幫助師生相互學習、相互交流，具體思路如圖1所示。

第四階段：收集網(wǎng)頁課件的交互數(shù)據(jù)，收集的交互數(shù)據(jù)主要分為兩個部分，第一部分是學生的訪問數(shù)據(jù)，如學習時長、瀏覽數(shù)等，這能夠較好地幫助教師了解每個同學的學習情況，這也是傳統(tǒng)課件無法做到的;第二部分是學生在網(wǎng)頁型課件上學習結果的數(shù)據(jù)，如學生在網(wǎng)頁課件上的測驗成績、互動數(shù)據(jù)等，這些數(shù)據(jù)能夠幫助教師改善教學方法，根據(jù)他們的學習情況對比學習結果，了解他們的學習效率，更好地因材施教[6]。

明確網(wǎng)頁型課件的設計思路，確定好網(wǎng)頁型課件各模塊的組成，能夠有效減少網(wǎng)頁型課件在后期使用過程出現(xiàn)的各種問題，給予教師和學生一個更好的使用體驗。同時，將Web技術引入到機械原理課程中，其主要目的是幫助學生進行自主地構建知識，通過參數(shù)化設計幫助學生參與到機構的設計過程中，以達到教學的個性化。還能促進教師和學生的溝通與交流，增強師生互動，幫助學生養(yǎng)成創(chuàng)新性思維，提高學生舉一反三、學以致用的能力。

4網(wǎng)頁型課件的開發(fā)

4.1 對象分析

機械原理課程主要面對的是高校的學生，高校的學生的教學不僅僅局限于對理論知識上，還更加注重對于理論知識的實踐應用研究，在設計機械原理網(wǎng)頁型課件的過程中，不僅要包含教學大綱的內容，還要能充分滿足面向不同專業(yè)和水平層次的要求。

4.2 課件內容的選擇

網(wǎng)絡課件的主體內容主要為課程的教學內容，同時還要包括一定的機械擴展知識，提高學生對于知識的感性認識，幫助其擴展專業(yè)知識，了解機械行業(yè)的前沿方向。同時教學內容不僅僅局限于文字和圖片，還有充分利用網(wǎng)頁課件的能融合各種信息元素的優(yōu)勢，利用好音頻、視頻、動畫等來輔助教學。

4.3 網(wǎng)頁型課件頁面的設計

4.3.1網(wǎng)站搭建

首先通過Html語言來進行搭建網(wǎng)站，以清華大學出版社《機械原理教程》（第3版）為例，該書主要應用于高校的機械原理課程教學，根據(jù)書中目錄進行劃分，在網(wǎng)頁中設計導航欄，再根據(jù)章節(jié)內容安排設計二級單元，一開始導航欄顯示各章的章節(jié)標題，然后當鼠標點擊某一章節(jié)時，即會展開其二級單元，方便學生根據(jù)自己的實際情況選擇學習，課件導航欄如圖2所示。

4.3.2上傳教學內容

教師根據(jù)教學需要收集合適的多媒體資源進行上傳，根據(jù)課程的邏輯順序進行內容的編排，同時根據(jù)教學安排插入恰當?shù)腇lash動畫、圖片等，主要通過html標記語言進行實現(xiàn)，具體如圖3所示。

4.3.3搭建網(wǎng)頁型課件參數(shù)化機械設計

參數(shù)化設計是整個網(wǎng)頁型課件中較為核心的一部分，它最能體現(xiàn)將網(wǎng)頁型課件與機械原理課程結合的優(yōu)勢，學生通過輸入?yún)?shù)，后臺自動對輸入?yún)?shù)進行運算，然后得出機械核心的設計參數(shù)，從而繪制圖形[7]。該模塊主要是通過JavaScript代碼進行編程，利用canvas畫布標簽進行實現(xiàn)。以曲柄搖桿機構為例，通過表單捕捉學生輸入的搖桿長度、機架長度、擺動角、行程速度變化系數(shù)，通過對這些參數(shù)加以運算得出其極位夾角、曲柄長度以及連桿長度，從而利用這些機構參數(shù)在canvas畫布中繪制相應的圖形，具體如圖4所示。

4.3.4網(wǎng)頁課件的交互設計

通過在網(wǎng)頁下方設置留言互動板塊，實現(xiàn)教師和學生的交互，如圖5所示，幫助師生在課外也能實時進行互動交流答疑，同時教師還可通過網(wǎng)頁型課件上的交互模塊，以電子郵件、微信等方式進行溝通和學習。同時由于評論可以點贊以及學生之間相互回復，教師可通過點贊數(shù)量以及學生評論了解到哪些問題存在普遍性，其他學生也能夠根據(jù)老師的回復，找到相關問題的答案，避免了重復提問。

4.3.5收集交互數(shù)據(jù)

由于網(wǎng)頁型課件在使用過程中用戶的各項數(shù)據(jù)均會被服務器記錄下來，然后對后臺服務器的數(shù)據(jù)進行下載，對這些數(shù)據(jù)加以整理和分析，了解在教學過程中，有哪些共性的問題，以及不同學生的個性問題，針對這些數(shù)據(jù)所隱含的信息來改善教學內容以及教學方法。

5網(wǎng)頁型課件的優(yōu)化

網(wǎng)頁型課件在教學使用中，可能會面臨一系列問題，故在課件開發(fā)的過程中要盡可能地考慮到，提前加以解決和優(yōu)化，能夠有效減少后期的整改難度，同時給學習者帶來更好的使用體驗。

5.1.1網(wǎng)頁加載速度的優(yōu)化

網(wǎng)頁的加載主要與頁面元素的內存大小有關，例如gif圖片一般比普通jpg格式的圖片內存要大，當通過去除不必要的圖片和減少網(wǎng)頁表格的嵌套和采用外部調用代碼的方式進行網(wǎng)頁格式的排版，都能夠有效減少加載的時間。

5.1.2不同瀏覽器兼容的優(yōu)化

由于不同瀏覽器使用的內核以及支持的html網(wǎng)頁語言標準的不同，如Chrome瀏覽器的內核是Blink，F(xiàn)irefox的內核是Gecko，常常導致相同的網(wǎng)站頁面在瀏覽器上的顯示效果并不相同，這需要網(wǎng)頁課件在開發(fā)的過程中，考慮到常用瀏覽器的編程格式，使其能夠根據(jù)瀏覽器的不同而改變其顯示效果[8]。

5.1.3手機端使用的優(yōu)化

網(wǎng)頁型課件的頁面版式更多直接適配電腦，在手機端顯示容易出現(xiàn)無法適應手機屏幕瀏覽器的寬度，無法正常顯示等情況。但由于學生課堂上較少使用電腦，大多數(shù)是通過手機進行網(wǎng)上操作，故對網(wǎng)頁型課件的頁面調試使其更加適配手機端也變得相當重要，通過CSS代碼對課件頁面進行布局，使其網(wǎng)頁也能根據(jù)手機屏幕大小自動調整格式，幫助網(wǎng)頁課件擴大兼容性以及美觀性，從而提高學生在課堂上的參與度，增加他們對課程學習的熱情，案例章節(jié)的課件手機端顯示界面如圖6所示。

6結語

基于Web的機械原理課程網(wǎng)頁型課件的開發(fā)是一種新的教學手段，它能夠承載更多種類的數(shù)字元素，不僅僅局限于傳統(tǒng)的單機課件，使得教學內容的表現(xiàn)形式更加多元，幫助學生提高學習興趣。其次，基于機械原理課程的特點設計的參數(shù)化設計模塊也是對于機械設計教學新的探索，能夠幫助學生更好地理解機械的設計過程，提高他們的感性認識。最后網(wǎng)頁型課?件由于其不受時間和空間的限制，能夠幫助學生隨時隨地都能獲得學習資源，使得課程教學不局限于課堂，這也是教學課件新的發(fā)展方向。

參考文獻：

[1] 武照云，李麗，朱紅瑜，等.機械原理與設計虛擬仿真實驗教學平臺的設計[J].實驗技術與管理，2017，34（8）：121-124.

[2] 吳琳.基于Web的《運動解剖學》網(wǎng)頁型課件的初探[J].文體用品與科技，2015（6）：121，152.

[3] 劉軍旭.基于Web的機械制圖多媒體課件的實踐與探究[J].電子測試，2014（16）：138-140.

[4] 李戈.新形態(tài)教材中H5產(chǎn)品特點與設計趨勢分析[J].中國編輯，2018（5）：68-72.

[5] 林國枝.H5技術在教學中的應用[J].佳木斯職業(yè)學院學報，2019（12）：203，205.

[6] 金蓉，羅聞泉.面向移動終端的H5課件設計與應用[J].科技經(jīng)濟導刊，2019，27（30）：25-26.

[7] 曹瑞武，王凱，黃文新.基于ANSYS的特種電機參數(shù)化建模教學實踐[J].電氣電子教學學報，2020，42（6）：21-24.

[8] 張紅鷹.網(wǎng)絡課件的設計與優(yōu)化研究[J].中國成人教育，2009（14）：155-156.

【通聯(lián)編輯：王力】