機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程建設(shè)技巧

董明曉 李瑞川 陳繼文 楊紅娟 逄 波 張瑞軍 王紅振

1.山東建筑大學(xué)機電工程學(xué)院 山東濟南 250101 2.山東五征集團 山東日照 262300

隨著多媒體技術(shù)的迅速發(fā)展和計算機網(wǎng)絡(luò)的普及，計算機輔助教學(xué)技術(shù)被廣泛用于各類教學(xué)中，將傳統(tǒng)教學(xué)與網(wǎng)絡(luò)化學(xué)習(xí)有機結(jié)合起來，有利于促進網(wǎng)絡(luò)課程的發(fā)展。本文基于機械工程控制基礎(chǔ)課程的培養(yǎng)目標(biāo)和教學(xué)要求，充分利用Dreamweaver軟件的技術(shù)特點[1-3]，建設(shè)機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程，向?qū)W生提供更全面、廣泛的網(wǎng)絡(luò)教學(xué)內(nèi)容，幫助學(xué)生更好地理解和吸收新知識，獲得最佳教學(xué)效果。

1 網(wǎng)絡(luò)課程開發(fā)工具

本文采用Macromedia Dreamweaver8.0，Adobe Photoshop8.0，Macromedia Flash8.0三種軟件建設(shè)機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程。

Dreamweaver軟件是Macromedia公司開發(fā)的一款專業(yè)網(wǎng)頁制作軟件，它具有很強的可視化特性，用戶無需編寫任何代碼，即可創(chuàng)建出比較簡單基礎(chǔ)的網(wǎng)頁，制作效果可以方便地通過IE瀏覽器瀏覽。同時，Dreamweaver軟件還提供純粹的代碼編輯環(huán)境，包括html，CCS，JavaScript，Asp等語言代碼編輯工具箱參考資源，用戶可以創(chuàng)建完全屬于自己的對象和命令，并編寫代碼擴充功能等[4]。

Photoshop軟件是Adobe公司開發(fā)的圖形圖像處理軟件，具有多種文字效果和各種濾鏡。

Flash軟件是Macromedia公司開發(fā)的平面動畫制作軟件，可以產(chǎn)生多幅連續(xù)運動的動畫，非常適合演練一些原理性的教學(xué)內(nèi)容。用Flash制作的動畫體積小，在網(wǎng)絡(luò)上可邊下載邊播放，還可以加入聲音，增加表現(xiàn)力。Flash動畫能夠被多種瀏覽器所接受，非常適合演示各種教學(xué)平面動畫。

2 網(wǎng)絡(luò)課程框架

利用Dreamweaver表格功能把機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程界面分成3個板塊(如圖1所示)[5]。第一個板塊是不隨連接變動的LOGO。LOGO主要包括山東建筑大學(xué)?；諛?biāo)志、動態(tài)的精品課程和機械工程控制基礎(chǔ)字幕、時間和日期、歡迎語、菜單欄，其中菜單欄包括首頁、申報表、課程介紹、教學(xué)隊伍、課程建設(shè)、理論教學(xué)、實踐教學(xué)。第二個板塊是隨著用戶點擊不同菜單內(nèi)容時變動的動態(tài)版面，版面上顯示不同菜單內(nèi)容的具體介紹。第三個板塊是在每個動態(tài)版面都會有的固定下載板塊，包括教學(xué)錄像、CAI課件、電子教案、實驗指導(dǎo)書和網(wǎng)絡(luò)答疑。

3 網(wǎng)絡(luò)課程建設(shè)技巧

3.1 圖片的制作

圖片能使頁面內(nèi)容更加豐富美觀，而且還能表達出文字不能表達的效果，所以圖片是機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程制作的必備素材之一。圖片主要應(yīng)用于展示菜單、圖標(biāo)、背景以及課件的內(nèi)容，包括GIF，JPG，PNG格式。其中GIF格式能支持256色，適合顯示色調(diào)不連續(xù)或有大面積單一顏色的圖像；JPG格式支持24位真彩色，適宜表達網(wǎng)頁中色彩的濃淡，并且在壓縮時能達到圖像品質(zhì)和文件大小的平衡；PNG格式在使用時能進行無損壓縮，使圖片不失真。網(wǎng)絡(luò)課程中涉及的圖片是用Photoshop制作的，通過用Photoshop工具中的一些命令如剪切、圖片效果、文字編輯和濾鏡等完成。很多圖片可以利用現(xiàn)在發(fā)達的網(wǎng)絡(luò)進行收集，然后經(jīng)過Photoshop工具進行美化處理，以達到自己想要的效果。

3.2 動畫的制作

網(wǎng)頁上的LOGO為動畫，它以動態(tài)的方式顯示，使整個網(wǎng)站充滿著生機和活力。動畫的格式為SWF。SWF是一種支持矢量和點陣圖形的動畫文件格式，具有縮放不失真、文件體積小等特點。它采用流媒體技術(shù)，可以一邊下載一邊播放，目前被廣泛應(yīng)用于網(wǎng)頁設(shè)計，最大的特點是因其為矢量圖，放大后不會失真。這個動畫主要用網(wǎng)頁三劍客之一的Flash軟件制作。

3.3 文本的編輯

文本是網(wǎng)頁是上不可或缺的元素。在Dreamweaver的文本編輯環(huán)境中，一般的文本編輯非常簡單，大部分操作和平常的文本編輯工具相同，可直接在文本編輯框中編輯。很多文本內(nèi)容也可以在Word中編輯后，轉(zhuǎn)換成網(wǎng)頁文本。筆者介紹幾個文本編輯技巧：

(1)文字既可以通過可視化窗口輸入，也可以在代碼窗口的相應(yīng)代碼中輸入。

(2)在Dreamweaver中輸入多個空格。平時輸入的空格是半角字符，在Dreamweaver中只能輸入一個半角空格，要想輸入多個空格只要輸入全角空格就可以了。輸入全角空格的方法是：打開中文輸入法，按Shift+Space切換到全角狀態(tài)，這時輸入的就是全角空格。

(3)Dreamweaver不支持首行縮進的直接設(shè)置，需要輸入空格來實現(xiàn)這個效果。而輸入多個空格時系統(tǒng)會忽略成一個空格，要想達到需要的效果，可通過“插入/字符”面板中“不換行空格”實現(xiàn)，也可以直接在代碼視圖中輸入“ ”實現(xiàn)。

(4)上下標(biāo)設(shè)置。在網(wǎng)頁中，如果要輸入m2和x1等帶上下標(biāo)的文字，可以通過HTML中表示上下標(biāo)的標(biāo)簽來實現(xiàn)。表示上標(biāo)，是下標(biāo)的標(biāo)簽，這些標(biāo)簽既可以手工加進代碼中，也可以用輸入框加入。例如：m2的代碼為m；x1的代碼為x 。

3.4 表格凸起特效的制作

網(wǎng)絡(luò)課程需要有凸起特效的表格，在制作時要有間距邊框，要有明暗的邊框顏色，在實現(xiàn)邊框明暗時，要使暗邊框改成亮色bordercolordark="#CCCCCC"，亮邊框改成暗色bordercolorlight="#666666"。

3.5 浮動框架的建立

浮動框架是一種特殊的框架技術(shù)。在網(wǎng)絡(luò)課程中利用浮動框架，可以比普通框架更加簡易地控制網(wǎng)頁內(nèi)容，在LOGO和菜單都不變的情況下，可以使頁面內(nèi)容發(fā)生變化，單擊菜單可以在浮動框架中顯示相應(yīng)的內(nèi)容，這樣其他不變的頁面內(nèi)容就不用重復(fù)加載，使整個網(wǎng)站頁面流暢。在Dreamweaver8.0可視化編輯界面中沒有建立浮動框架的命令按鈕，所以要在視圖代碼框中進行代碼的編輯。浮動框架建立代碼如下：

3.6 時間日期的實時更新

網(wǎng)絡(luò)課程的時間日期主要有年月日、時分秒及星期，這些時間隨本地計算機系統(tǒng)實時更新，這一動態(tài)時間的實現(xiàn)是通過在Dreamweaver的視圖代碼中編寫Javascript語言代碼實現(xiàn)的，具體的語言代碼如下：

3.7 文字和圖片的滾動制作

(1)文字的滾動。機械工程控制基礎(chǔ)課程網(wǎng)站的歡迎問候語“歡迎光臨機械工程控制基礎(chǔ)”是滾動的，具體實現(xiàn)技巧是在Dreamweaver的視圖代碼中編寫代碼，其中scrollamount="3"是表示文字滾動的速度，在沒有標(biāo)明方向的情況下，默認的方向是向左滾動，具體代碼如下：

(2)圖片的滾動。網(wǎng)站首頁是與機械工程控制基礎(chǔ)課程有關(guān)的一些學(xué)術(shù)活動和獎勵圖片，需要滾動展示。要求圖片向上滾動，當(dāng)鼠標(biāo)滑過時滾動圖像停止，當(dāng)鼠標(biāo)移走后繼續(xù)滾動。這些圖片經(jīng)過表格的排版美化，然后在Dreamweaver的視圖代碼中編寫Javascript語言代碼實現(xiàn)滾動效果。

3.8 把表格做成細的水平線

在論文課程網(wǎng)頁上，水平線的使用可以使頁面內(nèi)容更有層次感。在Dreamweaver可視化的窗口中使用命令“插入/HTML/水平線”可以直接添加水平線，但是這樣直接插入的水平線有時不能達到想要的效果，如直接插的水平線與上面的內(nèi)容間距太大，本文用表格水平線來實現(xiàn)理想的展示效果。

在要加入水平線的地方插入一行一列的表格，表格的邊框等都設(shè)為零，具體代碼如下：

默認情況下，表格的寬度不能調(diào)整，且間距很小，這是因為默認源代碼中有空格代碼 ，所以要把 去掉，再加上單元格高度height="1"，即可達到理想的效果。其他的默認代碼如下：

通過以上設(shè)置可以使頁面內(nèi)容更有層次感。

4 結(jié)束語

本文基于機械工程控制基礎(chǔ)課程的內(nèi)容，利用Macromedia Dreamweaver8.0，Adobe Photoshop8.0，Macromedia Flash8.0三種軟件的制作特點和技巧，建設(shè)機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程，獲得充實美觀的課程網(wǎng)絡(luò)頁面，但也存在不少煩瑣之處，將在今后網(wǎng)絡(luò)課程建設(shè)中不斷完善。

[1]周改云,高敬禮.《Dreamweaver網(wǎng)頁設(shè)計與制作》教學(xué)模式研究[J].電腦知識與技術(shù),2011,7(8):1850-1852.

[2]戚爽.“Dreamweaver網(wǎng)頁制作”課程的教學(xué)研究[J].長春理工大學(xué)學(xué)報,2010,5(12):169-170.

[3]彭頁.用Dreamweaver進行網(wǎng)絡(luò)課程設(shè)計的幾點技巧[J].中國醫(yī)學(xué)教育技術(shù),2006,20(1):73-74.

[4]唐武生,劉曉杰,李險峰.《食品加工機械與設(shè)備》網(wǎng)絡(luò)課程的建設(shè)與研究[J].長春大學(xué)學(xué)報,2007,17(5):77-79.

[5]羅忠,郝麗娜,劉士卿.以Blackboard為平臺的機械工程控制基礎(chǔ)網(wǎng)絡(luò)課程建設(shè)與實踐[J].教學(xué)研究,2010,33(3):51-54.