本篇論文目錄導航：

【題目】抗阻組合訓練方法的多媒體網絡課件構建
【第一章 第二章】抗阻組合訓練技術多媒體網課設計探究前言
【3.1 3.2】抗阻組合訓練方法手段相關介紹
【3.3 3.4】抗阻訓練手段多媒體網絡課件的需求與系統設計
【3.5】抗阻組合訓練方法的多媒體網課的系統實現
【3.6 - 3.8】抗阻力訓練技法的多媒體網絡課件的系統測試及調試
【結論/參考文獻】抗阻組訓方法網絡多媒體課件制作研究結論與參考文獻

3.5 抗阻組合訓練方法手段的多媒體網絡課件的系統實現

課件實現其實就是將我們之前所做的設計付諸實踐的過程，實現的核心思想是依據課件要傳遞的主要內容、遵循課件制作的原則、將文字、圖片、視頻按照結構設計和詳細設計組合在一起的過程。俗話說：“巧婦難為無米之炊”,有了完美的設計，還要有必須的素材，才能夠制作出內容豐富、有血有肉的好作品。因此，在進行腳本代碼編寫之前，除了要進行以上介紹的需求分析、結構設計、詳細設計之外，還要收集素材、處理素材，最后才是進行課件的整合制作及后期的調試測試、運行發布等幾個環節。

3.5.1 課件的素材收集

3.5.1.1 課件的文字的收集

文字部分是出自本人的導師跟本人正在撰寫的一本書，即青少年功能性體能訓練指導叢書-《抗阻組合訓練》；其中與抗阻速度訓練器結合的器材中，欄架、軟梯、彈力帶相關的訓練叢書已經印刷出版了，這些叢書對抗阻組合訓練方法手段與欄架、軟梯、彈力帶結合部分的撰寫提供了相當成熟的技術動作方面的參考；當然大部分是通過查閱相關的文獻資料、網站信息、書籍等途徑所獲得的啟迪；前期撰寫文字素材是在 Microsoft Word 文檔中，文字要求是言簡意賅、通俗易懂。

3.5.1.2 課件圖片的收集

在選擇拍攝對象時是比較有目的性的，第一部分（抗組速度訓練器結合田徑基本步伐及起跑加速練習）找的是我院運動隊隊員，本科運動訓練專業，國家二級跳高運動員。在國內很多重大賽事取得過好成績；第二部分（抗組速度訓練器結合田徑專項的抗阻組合練習）因為是田徑專項訓練，所以拍攝對象都是我院在田徑各專項最優秀的本科運動系專業的學生；后面兩部分基本是適合應用于教學方面的方法手段，所以對拍攝對象的田徑競技運動不做要求，為方便團隊建設均由本人導師所帶的研究生完成，當然包括本人在內。

拍攝工具為 2000 萬像素的 NikonD7000 單反數碼照相機，我們在拍攝圖片之前專門向攝影專業人員學習了詳細的相機使用方法，2014 年 9 月至 10 月，先讓拍攝對象熟悉并練習拍攝動作，然后在我院的田徑場及中間的草坪上進行了多次拍攝，在拍攝中我們采用了運動過程中的連拍模式，以便保證技術動作的完整性。第一階段總共拍攝了 2254 張圖片；第二階段按照動作方法要求的關鍵環節篩選出 450 張圖片；第三階段把選出來的圖片與動作名稱相對應存放，因為圖片過大，還要通過一些圖片處理工具對圖片進行進一步修改。

3.5.1.3 課件視頻的收集

2014 年 8 月份，同譚老師一起研究學習了抗阻組合訓練方法手段，并反復指導拍攝對象（與圖片拍攝對象基本一致）的動作，視頻的拍攝是聘請了“北京五彩之星影視藝術有限公司”的專業工作人員來我院進行的，采用雙機同時拍攝的方式，用Administrator 攝像機從正向和側向同時攝像，根據動作需求會再加一遍動作特寫，拍攝過程中不僅要與拍攝對象強調動作要求，更要與攝像師很好的交流溝通，要讓他們了解每個動作拍攝的重點。

拍攝完之后去拍攝公司指導工作人員對視頻進行修改制作，在這過程中，我們以青少年功能性體能訓練指導叢書-《軟梯組合訓練》《欄架組合訓練》為參考模板。

其過程如下，一、把每個動作做得最標準的一遍篩選出來，多余的小動作刪掉；二、對動作進行分類并把需要加慢動作的，有特寫的，需要連放多次的整理出來；三、把每個動作的動作名稱以文字形式相應加上并放上不用類別的音樂，音樂要陽光、歡快與體育運動相吻合；四、輸出后反復查看有沒有修改不到位的，并再次修改。

3.5.2 課件的素材整理

文字是人類記錄語言的符號，是一種信息的載體，是人們獲取知識的一種主要途徑。課件中的文字要求簡潔明了、語句流暢。這些文字從表達意義上來看，主要包含對抗阻訓練器的介紹，抗阻組合訓練種類的描述，每種抗阻組合訓練的練習目的、練習方法、注意事項。在課件制作之前，將這些文字按照一定的順序，一一列出，把一個主題的內容整理到一起，在課件制作時，方便取材。

文字對學習者產生的影響是間接的。而以圖片的形式傳達信息，要更為直觀、具體和形象一些。圖片是本多媒體課件不可或缺的素材，主要包括兩個方面：一類是關于抗阻訓練組合動作的圖片；另一類是為加強多媒體課件效果而選取的背景圖片。由于拍攝出的圖片像素較高，占用空間較大，不適合直接應用在課件中，因此，我們利用格式工廠來將圖片轉換為存儲空間較小的格式，當然，也可以利用比較流行的Photoshop 來改變圖片的大小，對于圖片格式的轉換，我們選用的工具是格式工廠。對于點綴頁面的背景圖片，我們使用 photoshop 進行裁剪、合成。

視頻豐富的畫面，能夠有效的幫助學習者記憶、理解和思考。比單純的文字表達更有助于學習者記憶、掌握。尤其對于體育方面的動作方法，視頻顯得更加重要。多媒體課件中放置的視頻，同文字描述一樣，需要簡潔精練。在視頻錄制過程中，難免會錄制上多余的信息，因此，需要我們對視頻進行剪輯，一方面是去掉錄制時產生的無效信息，另一方面可以制作一些視頻特效，使視頻更具有吸引力和表達力，第三方面是將整段的長視頻剪切成各個分段，以便放置到課件中特定的位置。

多媒體視頻的格式有很多，例如 AVI、MPEG、MPEG2、MP4、WMV、FLV、RM、RMVB等格式。不同格式的視頻在占用內容和視頻質量上有一定的差別，我們在選擇格式時要在性能和質量上做一個權衡，選取最合適的視頻格式。3GP 格式占用內存小，但視頻不是很清晰，AVI 和 MP4 占用空間大但視頻比較清晰，3GP 格式占用空間最小，但在電腦上播放，清晰度也會大打折扣。綜合分析，占用空間小同時格式又清晰的有RMVB、RM 格式，其次是 WMV 格式。因此，我們利用格式工廠，一種視頻格式轉換的軟件工具將錄制的視頻轉換成 RMVB 格式。然后利用會聲會影進行視頻的剪輯及效果編輯。

素材處理的難點在于技術實現上。首先我們要明確圖片、視頻要處理成什么樣子，上面已經介紹過了，即既要關注資源所占空間大小，又要關注圖片、視頻的質量問題，這些答案是本人通過和相關專業人員咨詢以及查閱相關資料得知。其次，要了解哪些工具對我們有幫助，并且下載、安裝并學習這些軟件的使用方法?，F在，相似功能的軟件非常多，例如：視頻轉換工具就有格式工廠、貍窩全能視頻轉換器、艾奇全能視頻轉換器、暴風轉碼等多款軟件，圖片處理軟件也是如此，在這種情況下，本人選擇的是排行榜中點擊率最高的一款軟件。最后是運用這些工具將素材處理成本課件需要的素材，本課件制作過程中使用的處理方式是，通過 Photoshop 對圖片進行美化和大小的轉換，通過格式工廠軟件將視頻轉換成占用空間小且質量相對較高的視頻格式。

3.5.3 課件合成

經過整體結構設計、具體頁面詳細設計、素材收集以及素材處理，接下來我們需要編寫腳本，將準備好的素材按照原定設想進行課件合成。

3.5.3.1 開發工具的選取

選取一款適合的 IDE 工具。常用的網頁制作軟件有 Macromedia、Dreamweaver、webstorm、SharePoint Designer 等等。Dreamweaver 網頁制作軟件，已經成為專業級網頁制作程序，支持 HTML、css、php、jsp 以及 asp 等眾多腳本語言的語法著色顯示，同時提供了模板套用功能，支持一鍵式生成網頁框架功能。WebStorm 是 jetbrains公司旗下一款 JavaScript 開發工具，被廣大中國 js 開發者譽為“web 前段開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE”等，另外，還具有批量代碼分析、編碼語言混合或內混、拼寫檢查、重復代碼檢查、代碼智能提示功能。由于 WebStrorm 占用空間較小，并且功能強大，完全能夠支持我們多媒體課件制作，因此，經過權衡，本網絡課件選擇的開發工具是 WebStorm 9.

3.5.3.1 代碼結構設計

在代碼開始編寫之前，要設計代碼結構，分別建立不同的目錄，將同類素材組織到一起，目的在于建立清晰的代碼結構，提高可讀性和可維護性。

Css 目錄用來放置樣式信息，javascript 目錄用來放置 js 腳本，jquery 目錄放置引入的 jquery 庫，resource 用來放置課件制作過程中用到的圖片、視頻等資源，樣式、js、jquery、resource 元數據，這些都是必不可少的元素，關于每個抗阻訓練的動作，要求單獨建立一個文件夾，例如圖 7 中的 xlj,表示抗阻訓練器結合小欄架練習，xlj 目錄中存放所有關于小欄架組合動作的頁面。

3.5.3.3 主頁面制作

代碼編寫時，首先從主頁面開始。主頁面是學習者最先看到的頁面，因此，主頁面承擔著非常重要的角色，本課件要求頁面尊重瀏覽者的瀏覽習慣，排版上使用盡可能簡單的列表，不使用兩列三列混排的方式，在視覺上要符合課件主題的定位，在情感上與瀏覽者拉近距離，在內容上要寫出強有力的語句，讓讀者有理由逗留?？傊?，主頁面要做到趣味盎然，引人入勝。

首頁分為三部分，頂部 logo,左側菜單欄，底部說明，右側內容介紹。其中，頂部 logo、左側菜單、底部說明不僅僅是首頁的一部分，也是整個課件的公共部分。

也就是說，無論學習者跳轉到任何一個鏈接，變化的只是內容區域，頂部、左側導航、底部說明都是始終不變的。因此，我們將這些公共板塊放到一個 html 頁面中，而內容區域通過 html 語言中的 iframe 技術實現動態嵌入不同子頁面，也就是說，被嵌入的頁面，只包含其特定的內容，不必再重新復制頭部、左側導航、底部的腳本代碼。

實現最大程度的解耦合，使代碼更加清晰、靈活。在實現技術上，本課件運用 iframe和 javascript 動態腳本共同實現。有了 javascript 腳本，便可以只寫一段 iframe相關代碼，通過 javascript 中的變量找到具體對應的子頁面。

3.5.3.4 頭部制作

頭部區域，以首都體育學院背景圖片為 logo,并且在圖片右側空白區域加入本課件主題內容，抗阻組合練習。頁面頭部在一個 div 內，并設置其高度為固定高度100px,寬為相對寬度 100%,在這個 div 內通過 img 屬性加入背景圖片，設置圖片的寬和高分別為 100%,這樣，整個圖片就會改變之前原有大小，而完全的符合 div 的大小，不會出現整體布局的錯亂。這樣，在一個背景圖片上面添加文字，在查閱資料后，也是比較容易實現的，完全由 css 樣式控制，不需要任何動態腳本來控制3.5.3.5 導航欄及詳細頁面制作

左側導航欄，是瀏覽者學習所有內容的一個快速入口，需要涵蓋所有內容，并且還不能給人臃腫的感覺。顏色布局上，需要比頭部稍微醒目一點的顏色，并且，要通過 javascript 腳本設置鼠標滑過效果、當前點擊效果。

由于抗阻組合訓練內容比較多，每一個大的分類里又有不同的小分類，因此，左側導航欄顯示全部大分類，在點擊每個導航欄鏈接的內容頁是，把其對應的各小類依次展示，給每個小分類添加鏈接，進入該分類的詳情介紹。下面以抗阻訓練器結合走步練習為例展示具體的實現過程。

圖 9、圖 10、圖 11 這三張圖片是一個連貫的操作，點擊左側菜單欄的走步練習，出現抗阻訓練器結合走步練習的多種動作，高抬腿走、墊步高抬腿走、側向滑步走、側向前交叉步走……點擊任何一個動作類型，就會進入第三張圖片展示的效果，例如點擊高抬腿走，進入第三張圖片展示的效果，出現高抬腿走的練習方法、注意事項、訓練目的、視頻等。而點擊第二張圖片中的任何一個動作之后，同樣也是進入這個詳情頁面。圖 9 和圖 10 的切換由右上角的橫屏、豎屏切換按鈕來實現，這個是通過jquery 來動態控制 css 樣式及頁面跳轉，在代碼中需要引入 jquery 庫。其實，這兩個頁面的主要內容是一樣的，但是，之所以做成兩種效果，是為了給頁面增加活潑性，去除一種重復頁面的單調乏味感。

其余動作組合和上面的設計相似，下面的一組圖片（如圖 12、圖 13）演示的是抗阻訓練器結合田徑基本步伐的動作練習。首先，點擊左側導航欄的結合田徑基本步伐，出現橫屏顯示的各種田徑動作的組合（如圖 12）。

在頁面的右上角，有一個全屏顯示和豎屏顯示的切換按鈕，點擊豎屏后，每個田徑動作類型按豎屏顯示（如圖 13）。

由于有些模塊的動作高達幾十種，因此，這里采用了分頁的方式，每個頁面只顯示部分分類，在頁面底部增加分頁的 button 按鈕。這樣，避免了頁面過長且單一的現象，對于課件制作者本人來說，僅僅是增加幾個頁面，增加幾個頁數的鏈接而已，.

而且這樣做確實能夠帶來更好的用戶體驗性，符合現在軟件的常用設計方法，也滿足了用戶的瀏覽習慣。

無論是橫屏顯示還是豎屏顯示，每個動作類型上都加了超鏈接，點擊進入即可看到對應組合的詳細介紹（如圖 14）。

3.5.3.6 橫向導航制作

左側導航欄是用來幫助讀者快速瀏覽并定位課件主要內容的，橫向導航欄（如圖15）是提示讀者當前瀏覽內容屬于哪個分類。要注意和縱向導航欄相結合使用，從整體到細節上都給讀者全方位的提示。例如：當瀏覽者打開田徑基本步伐中的小步跑時，橫向導航條的位置提示由之前的“您的位置：首頁>結合田徑基本步伐及起跑加速練習”改變為“您的位置：首頁>結合田徑基本步伐及起跑加速練習>小步跑”.這樣設計的好處在于，一方面使頁面排版看起來更加協調，一方面使瀏覽者能夠明確定位自己當前所瀏覽信息的主題。（如圖 15、16）

3.5.3.7 實現技巧

由于該課件動作類型很多，每一個動作類型都要有一個頁面，而這些頁面的頭部、底部、左側區域是固定不變的，區別只是內容的不同，但是，從腳本代碼的可維護性考慮，我們將每個動作類型所在的頁面作為子頁面嵌入到主頁面中，只在主頁面中編寫一次頭部、尾部、左側的代碼即可。使用的 iframe 實現技術如圖 17、圖 18 所示：

代碼中有超鏈接的地方，都通過一個 javascript 函數進行跳轉，其中的參數控制具體跳轉到哪個頁面。然后，鏈接到的那個頁面顯示在 iframe 所控制的區域內。（圖略）