台科大教育部計畫案「技職校院建立策略聯盟計畫」網頁設計專題製作與學術競賽，第四年舉辦的課程花絮

這是台科大針對策略聯盟的高中職學校學生開立的專班，是由教育部計畫案「技職校院建立策略聯盟計畫」而來的推動課程之一，之前已經舉辦過三屆，站長很榮幸第四年仍是擔任此課程講師，本次課程共36小時，分成6次課，上課時間為週六每次上6小時。

下表是本次課程大綱，主要以微軟的Expression Web、Blend、Design的軟體操作為主，搭配Encoder、Deep Zoom Composer、Microsoft GIF Animator、Paint.NET為輔。

	日期	課程進度/內容
1.	11/26	微軟網頁設計軟體的架構說明 什麼是Silverlight動畫 Expression Web基本介面與操作 網路上的多媒體資源與服務 插入網頁背景音樂與插入影音檔 Expression Design的基本介面與操作 使用Deep Zoom Composer製作擴大縮小的Silverlight動畫 Expression Web插入Deep Zoom
2.	12/3	背景線條光芒閃爍GIF動畫 Paint.NET簡易影像處理 Expression Encoder Screen Capture錄製教學影片 Expression Encoder的基本介面與操作 Expression Web插入Silverlight視訊檔
3.	12/10	個人作業實作(一段放大縮小的Silverlight動畫網頁與自我介紹影片) 上台報告(每人三分鐘)成果驗收 作品缺失檢討與複習 繳交分組名單
4.	12/17	Expression Blend的基本介面與操作 簡易Silverlight動畫設計 使用Expression Web將圖檔與動畫置入
5.	12/24	使用Expression Design設計圖案並結合Expression Blend製作Silverlight翻頁廣告動畫 使用Expression Web置入Silverlight動畫與設計表格式排版頁面 動態網站範本的使用
6.	12/31	複合路徑去背 電視旋轉木馬Silverlight動畫 分組(3～5人為一組)籌劃討論主題式網站，包含架構規劃、資料蒐集、鍵入與加入視覺美編調整設計 上台展示主題式動畫網站報告成果驗收與各組成品觀摩

以下為各小組繳交的作品(2～5人一組)，跟往年不同的是，今年很高興看到有幾組是由不同學校的學員所組成的，打破了往年每組一定都是同一間學校所組成的，這樣的改變我認為是好的，學員們可以借此認識到別校的朋友。


第一組的主題是「官將首」，是由士林高商、大安高工的同學所組成的，藉由本次專題，我也才認識何謂官將首。


在此不得不提一下士林高商的曾主任，曾主任去年也有全程參與本課程，而且很用心的下課後還帶學生到圖書館查資料，真的是把學生當做自己的孩子在照顧，實在是就感心耶！


下圖報告的這兩位同學跟曾主任，有一次下課後，還跟我邊聊天一路走到公館，品嚐一下我兒子最愛的小泡芙與蝦仁燒，也算蠻有意思的插曲啦！


下圖為本組作品，上方的視覺主題的部份，主要是用到我們課程裡講到的Silverlight立體翻頁動畫，左方的選單是使用Design搭配Web製作的。


第二組的主題是「婚紗」，由士林高商的兩位同學組成(其實一開始我設定是最低3人為一組，因為怕學員負擔太重，沒想到居然有學員願意少人數多做，真是努力的一組啊！)。


下圖裡的圖案，是用Paint.NET做去背。


下圖為本組作品，上方的視覺主題的部份，是Silverlight旋轉動畫，左方的選單是使用Design製作外框字搭配使用Web。
 

第四組的主題是「能仁家商介紹」，下圖為Silverlight Deep Zoom效果。

第四組的成員合照，都是由能仁家商的學員組成的。

下圖是本組作品，不過我發現部分有沿用去年的網頁作品。
 

第五組的主題是「客家文化」。


這組是由金甌女中的同學組成的。


下圖是本組的網站首頁，區分成四個選單，但由於時間關係，很可惜只有完成其中兩個單元。


第六組的主題是「復興商工之美」，小組成員想當然耳，都是復興商工的學生囉！


下圖是本組網站形象頁作品，用的是我最後來不及講但有給操作步驟講義的旋轉木馬Silverlight動畫，本組學員很有心照著講義實作出來。


下圖為學員之前的美術作品，使用Silverlight Deep Zoom效果動畫。
 

第七組的主題是「台灣人愛不離腳的夜市」。
 

這組是由智光商工的同學組成，首頁閃爍的背景光芒線條，是使用課程裡教到的Expression Design與Microsoft GIF Animator製作的。


下圖為夜市美食，使用Silverlight Deep Zoom效果做呈現。


第九組的主題是「港工之美」，這組因為是事後補交，所以沒有拍小組合照。


第十組的主題是「社團網頁」，是由稻江商職的兩位同學所組成，這組可惜最後一天因學校有是無法前來報告，但有事先繳交作業，形象頁有製作一個放大縮小的Silverlight動畫，選單是採用Design設計。


第十一組的主題是「飛輪少年」，是由松山工農加上內湖高工的三位同學組成的。


講到這裡得提一下，下圖中間的賴同學，去年也有參加我的課程，聽助教講賴同學每次都很早到且很認真，值得給他拍拍手掌聲鼓勵一下。
 

這組的陳同學也很有心，有開立了一個facebook社團，後來有不少同學有加入進去，台科大Expression Studio課程facebook社團。


這一組的網頁是唯一有採用CSS加上DIV架構組成的網頁，因為這個部分是去年的課程內容，上方則有做一點Silverlight文字動畫效果，很高興賴同學有學以致用。


第十二組的主題是「"假"伯斯」。


會叫做這個主題，是小組成員對於頻果電腦的賈伯斯有些諷刺，例如ipad似乎是等於用四台iphone所組成，因為小組成員覺得ipad與iphone的程式或者是外觀，賈伯斯只是在一旁監督，並沒投入產品設計，其實這樣的論點我是覺得似乎有些偏激些，即使賈伯斯只有負責行銷或出點子，也是很有價值的呦(一間公司裡業務行銷企劃等仍是很重要)！
 

下圖為本組作品，是用平板電腦的外框來做主體設計構思，有點像是我最後一個範例電視旋轉木馬Silverlight動畫裡的電視外框，應該用的是Design切圖與製作選單，搭配Web製作出來的網站，上方視覺圖則有使用一點Silverlight圖片移動的動畫效果。
 

最後一天課程結束，來個大合照囉(雖然沒全員到期)～！YA剪刀！
石頭，立志加油，我要學好Expression Studio！

布，訝異狀，糟糕！這個姿勢很像大家不太捧場… 
這是隨意動作版！

這班聽說是四屆以來，報名人數最多的一次(70多位報名，錄取電腦教室滿額的40位)，但仍有幾點不足未來可以再改進的：

• 使用Expression Encoder安裝耳麥時錄製聲音時，電腦環境相容性與設定有問題，導致多浪費了不少時間，有點不完美。
• 因為錄取滿額的40位學員(其實原本規劃是預計招收35位)，但電腦教室總有一些電腦會故障暫時無法使用，加上有些學校的老師也來聽課，導致實際可電腦操作的座位不足，影響到學員學習。
• 雖然大部分學員相當認真，但仍有少部分學員與組別上課心不在焉，似乎志不在此，浪費了一個寶貴的名額，真的是很可惜！
• 講師的電腦頻出狀況，導致後面課程我是自備筆電過去，但這樣會跟學員的電腦環境有差異。
• 因為電腦環境有出些狀況，加上學員分次上台報告拖得太長(大家一開始說不會講，一上台後幾乎大部分都超時，笑！)，導致後面時間有點不夠用不過這個部分是因為去年有學員反應說能有機會自我介紹以及多認識別校的同學，看來我需要檢討改進一下如何拿捏得當囉！
• 可能因為學員都是高中職的年輕，較少或恐懼上台報告，一方面課程並沒有很強制的約束力讓學員有動力與壓力，這個部分或許之後若我還有機會擔任類似課程講師時，也要納入規劃考量為宜。