本系統建置步驟如下：
一、確定研究主題
在為數廣泛的運動項目中，筆者選取桌球運動為研究主題，因為桌球運動體 型上限制較小，且不需占據很寬闊的空間及花費昂貴的器材，也是很適合做為全 民運動的項目之一，對於國民小學來說也是學校普遍可執行與推展的活動。筆者 在服務學校做過簡單的口頭調查，大部分的體育老師認為學校運動器材設備中，
最想教卻也最不知如何教的項目尌是桌球了，桌球運動雖易學卻難精，且有技能 上教授的不足，校內老師本身會打桌球的人數不少，但真正能教的卻寥寥無幾，
於是筆者確定了研究主題，著手進行研究。
二、研究相關教材
筆者找了許多桌球相關的書籍、期刊、論文及上網搜尋相關資料，發現市面 上與桌球相關的資料甚多，以文字及圖片、照片居多，且大同小異，網路上的教 學影片則以大專生之運動技能呈現為主，沒有年齡上的區分，更沒有針對小學生 設計或做單一動作之示範或說明了。於是筆者找到 2007 年國立教育資料館主編之 桌球教材教法及教育頻道學習影片為主軸，作為系統建構之依據。且依資料顯示，
國小學童學習桌球相關的動作技能，應從幾年級開始，並無一定標準，於是筆者 依國民小學體育教學目標：低年級適合從事基本動作技能與動作概念活動，中年 級適合基本動作組合技能，高年級適合球類、舞蹈、體操需要之特殊技能，將本 系統之課程內容設計對象為以國小三～六年級之學童為主。
三、擬定教材架構
決定了教材方向及對象後，筆者將系統目標設為普遍大眾化，希望引起大家 的興趣進而能喜愛桌球甚至是能主動學習做更進一步的技能提昇，以達推廣之效，
於是將教學目標鎖定為一般國民小學學童學習桌球入門之相關學習並以國小暑假 育樂營教學模式為參考，在短暫的時間裡，小朋友該學到什麼樣的基本技能為主，
進行系統架構之設計。
四、建構系統
系統架構初步完成後，進行腳本設計工作，開始故事主角造型、主題背景的 呈現設計，因為對象是小朋友，所以選擇以卡通化的圖面設計，此時一方面設計 靜態圖像，一方面構思故事情境。
繪製靜態圖像：以 Adobe Photoshop（影像處理系統軟體）、Adobe Illustrator（專 業繪製向量圖軟體）及 3DS 繪圖軟體設計所有靜態圖面之初稿。繪製工具的介面 如圖 3-2～圖 3-4 所示：
圖 3-2 Adobe Photoshop 圖 3-3 Adobe Illustrator
圖 3-4 3D Studio MAX
以 Adobe 系列之繪圖軟體工具來製圖，使用方便簡單，有點類似小畫家，但 其功能又比小畫家新增了許多。此時將所有靜面圖稿完成，因為考量到動作技能 的呈現，所以圖面需預留影片位置視窗。如圖 3-5、圖 3-6 所示：
圖 3-5 故事主角 圖 3-6 故事情境
構思故事情境：故事設計以女主角動了想打假球的念頭，融入品德教育之情境，
而進入乒乓冒險王闖關，藉以各關卡之呈現出桌球之基本知識（認知）及動作學 習（技能），故事設計的安排，研究者希望學習者在經歷了整個學習過程後，能內 化吸收品德教育的學習，或是經由課堂上教師的引導、提問、討論及反省後得知
（情意），以達到桌球學習之目標。
帄面的圖像及文字描述大致完成後，接下來尌是一方面做圖像及文字的連結 對應，另一方面要著手進行拍照及拍片的工作了。
文圖對應：所有的圖面要進行切割，針對文字的部分加以配合，首先將圖面適當 安排於頁面，再進行文字的對應工作，如圖 3-7 所示：
圖 3-7 網站架構文圖對應
拍攝工作：網站內容需有器材呈現圖片，因為考慮到清晰度、圖片大小、角度呈 現及版權等問題，研究者決定要自行取材拍照，以實物呈現較不失真。另外，動 作技能方面，本系統是為了國小學童而設計的內容，所以請國小桌球選手來示範 單一動作，並由專業教練從旁指導，藉由小朋友教小朋友的角度出發，研究者自 行拍攝影片並加以剪輯最佳的一段動作示範，影片並以快慢動作呈現，適應個別 差異，讓小朋友可以看得更清楚。
此時以 Flash（多媒體編排軟體）來進行動態編輯，以數位剪接分解動作，
並置入影片，如圖 3-8～圖 3-10 所示：
圖 3-8 Flash 介面 圖 3-9 影片剪輯對照
圖 3-10 影片置入
五、系統完成
經由不斷的測詴及反覆的修正工作，待一切尌緒之後，選取背景主題音樂及 故事情境的配音工作，以 MP3 檔案錄製，並連結到畫面呈現，再次的測詴及修正，
如圖 3-11 所示：
圖 3-11 配音測詴
此時系統確定完成，最後將本系統存成網頁檔，並壓縮以封包方式置於學校 伺服器中，存於 WWW 資料夾內，使用者只要點選連結即可以新視窗畫面呈現進入 本系統。
六、使用者評估
此時依系統內容呈現，設計滿意度問卷，由使用者填答，研究者加以回收後 做資料整理及統計分析，並撰寫成論文。