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

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

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

1 網絡課程開發(fā)工具

本文采用Macromedia Dreamweaver8.0，Adobe Photoshop8.0，Macromedia Flash8.0三種軟件建設機械工程控制基礎網絡課程。

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

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

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

2 網絡課程框架

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

3 網絡課程建設技巧

3.1 圖片的制作

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

3.2 動畫的制作

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

3.3 文本的編輯

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

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

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

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

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

3.4 表格凸起特效的制作

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

3.5 浮動框架的建立

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

3.6 時間日期的實時更新

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

3.7 文字和圖片的滾動制作

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

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

3.8 把表格做成細的水平線

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

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

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

通過以上設置可以使頁面內容更有層次感。

4 結束語

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

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

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

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

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

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