|  | 
            
              |  | 
            
              | 
               介紹各種多媒體表現方式:
                【文字媒體、影像媒體、音訊媒體、視訊媒體、媒體專案設計、動畫媒體、互動多媒體】                 | 
            
              | 
 
	01.多媒體概論	### 文字媒體設計概論 ###
 	03.文字媒體設計實務:Word,
 	04.平面出版設計實務:InDesign
 	05.跨平台文件應用實務:Acrobat PDF
 	### 影像媒體設計概論 ###
 	07.數位相片編修實務:Photoshop
 	08.向量圖影像設計:illustrator,Firework
 	### 音訊媒體設計概論 ###
 	10.音訊編輯實務:Audition,After Effects,mixcraft
 	### 視訊媒體設計概論 ###
 	12.多媒體影片剪輯:Premiere,Movie Maker
 	13.多媒體腳本實務:會聲會影
 	### 媒體專案設計 ###
 	15.多媒體網頁設計:Dreamweaver(html)
 	16.數位學習內容設計:Captivate(製作電子書,e-learning教材)
 	17.多媒體光碟製作與燒錄
 	### 動畫媒體 ###
 	18.2D動畫設計實務:Flash,Namo FreeMotion,GIF Animator,GIFMaker
 	19.3D動畫設計:3ds Max,Maya,ProE
 	### 互動多媒體 ###
 	20.互動多媒體設計:程式設計,手機APP設計,遊戲設計(Unity),互動網頁設計(PHP,Asp.net)
 
 | 
            
              |  | 
            
              |  | 
            
            
              |  | 上課程式碼即時貼網站 | 線上黑板(
                Online blackboard) | 上課即時貼(guestBook) |  |  | 
            
              |  | 課外參考書籍電子書下載 | 考試題目(Exam) | 畢業門檻(Graduation threshold) | 2018通識課規定 |  | 
            
            
              |  | Goole 輸入法(Input software) | Goole輸入法(Input:exe) | Goole 輸入法(Input:zip) | online goole input(中文) | online goole input(英文) | 
            
              |  | 漢語拼音 | 查詢某中文字的拼音 | 注音-漢語拼音 對照表(1) | 注音-漢語拼音 對照表(2) | Indonesia Pronunciation vs Chinese | 
          
              |  | 免費的網頁編輯軟體 | 微軟的Visual Studio Code(英文版) | VS Code 的中文(繁體)語言套件 |  |  | 
  
            
              |  | 上課加分系統 | 1A加分系統 | 1B加分系統 |  |  | 
            
              |  | 上課求助系統 | 1A求助系統 |  |  |  | 
            
              |  | 學生網頁練習範例展示 | 1A成果網站 | 1B成果網站 |  |  | 
            
              |  | 課外參考書籍電子書下載 | 考試題目 | 期中考考題 |  |  | 
            
              |  | 作業與考試上傳方法 | 上傳注意事項 | Ftp軟體 |  | DWCS3 | 
            
              |  | Namo FreeMotion中文試用版下載 | Namo FreeMotion 2006試用版下載 |  |  | Namo FreeMotion 2006版下載 | 
            
              |  | 下載軟體 | 下載Movie Maker(免費版) |  |  |  | 
            
              |  | 素材檔案下載 | GIF動畫素材檔 |  |  |  | 
            
                |  | 免費的網頁編輯軟體 | 微軟的Expression web 4(英文版) | 微軟的Expression web 4(中文版) |  |  | 
             
                |  | HTML 5 教學網站 | w3c學校-HTML 5 (中文版) | w3c學校-HTML 5 (英文版) |  |  | 
            
                |  | CSS教學網站 | w3c學校-CSS 3(中文版) | w3c學校-CSS(英文版) |  |  | 
            
                |  | html,CSS教學網站 | w3c學校-html,xhtml,htm5,CSS,cSS3(中文版) |  |  |  | 
          
            
              |  | PHP 教學網站 | php w3c School(中文) |  |  |  | 
            
              |  | 
            
              | 01.多媒體概論 | 
            
              |  | 下載講義 | 本學期課程綱要 |  |  |  | 
            
              |  | 下載講義 | Chp1講義 |  |  |  | 
            
            
              |  | 
            
              | 02.文字媒體設計 概論 | 
            
              |  | 下載講義 | Chp2講義 |  |  |  | 
            
              |  | 
            
            
            
            
              | 03.文字媒體設計實務:Word | 
            
              |  | 下載講義 | Chp3講義 |  |  |  | 
            
            
              |  | 
            
              | 04.平面出版設計實務:InDesign | 
            
              |  | 下載講義 | Chp4講義 |  |  |  | 
            
            
              |  | 
            
              | 05.跨平台文件應用實務:Acrobat PDF | 
            
              |  | 編修PDF檔案的各種方法 | 閱讀pdf的方式(1)使用adobe Acrobat reader
 (2)網路瀏覽器都可以(chrome,IE..)
 建立pdf的方式(1)使用adobe Acrobat professional專業版
 (2)使用word,另存檔新檔,格式為pdf
 (2)使用word,列印,印表機選為pdf
 (3)在adobe的photoshop, Illustrator,列印,印表機選為pdf
 (4)使用PDF-XChange Editor
 編輯修改pdf的方式(1)使用adobe Acrobat professional專業版
 (2)使用word 2016版讀入PDF,格式只有5%會失真
 (3)使用Illustrator,可以刪除文字,修改文字,可以存檔pdf,只有一頁第二頁會不見,可以插入圖片
 (4)使用PDF-XChange Editor,可以刪除文字,修改文字,功能僅限於少adobe Acrobat professional專業版一些些,但免費版存檔後有浮水印
 
 ■PDF-XChange Editor Plus:比PDF-XChange Editor增加了PDF可填寫式表格設計及編輯功能。
 ■Plus:多了可填式表單編輯功能,例如:有些信用卡申請單使用PDF讓客戶填寫後儲存送出申請。
 ■Pro:多了批次轉檔工具(PDF Tools),可以處理許多大量轉檔的工作(例如:一次要在多個檔案上加上浮水印)。
 ■Pro版等同全功能版,如果只有一般編輯PDF檔的需求,那買Editor就夠了!
 ■Standard版只是一個較多功能的虛擬印表機,不含Editor!所以無法編輯PDF檔。
 | 
            
              |  | 下載pdf編輯免費軟體 | PDF-XChange Editor(可下載免安裝版) |  |  |  | 
            
              |  | 下載破解pdf軟體 | Chp5講義 |  |  |  | 
            
              |  | 下載講義 | Chp5講義 |  |  |  | 
            
              |  | 下載素材 | pdf檔案 | 圖片01 | 圖片02 | word檔案 | 
            
              |  | 練習各種pdf檔案的編修 | 修改pdf文字,插入一頁,刪除一頁,建立全新pdf檔案,建立pdf目錄,pdf鎖功能(複製,影印),pdf解鎖 | 
            
            
              |  | 
            
              | 06.影像媒體設計概論 | 
            
              |  | 下載講義 | Chp6講義 |  |  |  | 
                                    
            
            
              |  | 
            
              | 07.數位相片編修實務:PhotoImpact,Photoshop | 
            
              |  | 下載講義 | Chp7講義 |  |  |  | 
            
              |  | 下載簡易圖片編輯免費軟體HyperSnap | HyperSnap5永久免安裝 | HyperSnap8免安裝30日版64位元 | HyperSnap8免安裝30日版32位元 |  | 
            
              | 7-02:編修數位相片基本功(A) | 
            
              |  | 下載講義 | Chp7-02講義 |  |  |  | 
            
              |  | 下載本章全部素材檔案 | Chp7-02素材圖片 |  |  |  | 
            
              |  | 1裁切部分構圖 | 下載素材照片 | 結果照片 | tool裁切工具 | 
            
              |  | 2照片轉90度 | 下載素材照片 | 結果照片 | menu影像→影像旋轉→逆時針90度 | 
            
              |  | 5建築物矯正桶狀變形 | 下載素材照片 | 結果照片 | menu濾鏡→鏡頭矯正→自訂→(幾何扭曲:+8)(變形:垂直透視:-20)(水平透視:+10) | 
            
              |  | 6建築物矯正向上拍變形 | 下載素材照片 | 結果照片 | menu濾鏡→鏡頭矯正→自訂→(變形:垂直透視:-20) | 
            
              |  | 7建築物矯正超廣角變形 | 下載素材照片 | 結果照片 | menu濾鏡→鏡頭矯正→自訂→(變形:垂直透視:-30) | 
            
              |  | 8轉成6x4的240ppi的送印相片 | 下載素材照片 | 結果照片 | 1.相片沖洗的解析度:240~360ppi 2.印刷廠的解析度:300~350ppi
 3.公式:文件尺寸 =像素尺寸/文件尺寸
 4.menu影像→影像尺寸→文件尺寸→寬度:6 inches
 解析度:240  pixels/Inch
 環迴增值法-更銳利
 5結果:影像縮小1400x960
 
 | 
            
              |  | 9查看曝光的色階分佈圖 | 下載素材照片 |  | menu視窗→色階分佈圖 最右邊最亮:噴泉
 最左邊最暗:大理石黑暗
 | 
            
              |  | 10調整整張的亮度對比 | 下載素材照片 | 結果照片 | menu影像→調整→亮度70/對比36 (整個色階向右分佈)
 | 
            
              |  | 11調整局部的亮度對比A (調整亮處,中間值,暗處)
 | 下載素材照片 | 結果照片 |  | 
            
              |  | 12調整局部的亮度對比B (曲線調整多處)
 | 下載素材照片 | 結果照片 |  | 
            
              |  | 13調整高反差亮度照片C 
 | 下載素材照片 | 結果照片 |  | 
            
              |  | 14修改色偏(色彩平衡法) | 下載素材照片 | 結果照片 |  | 
            
              |  | 15修改色偏(灰色滴管法) | 下載素材照片 | 結果照片 |  | 
            
              |  | 16修改自然飽和度 | 下載素材照片 | 結果照片 |  | 
            
              |  | 17調整特定色飽和度 
 | 下載素材照片 | 結果照片 |  | 
            
              |  | 18強化清晰度(遮色片銳利化) 
 | 下載素材照片 | 結果照片 |  | 
            
            
              |  | 
            
              | 7-03數位相片的修補(參考旗標出版社,photoshop的16堂課CS6) | 
            
              |  | 下載講義 | Chp7-03講義 |  |  |  | 
            
              |  | 下載本章全部素材檔案 | Chp7-03素材圖片 |  |  |  | 
            
              |  | 1.消除雜物:沙灘閒人,飛機  (內容感知填滿) | 下載素材照片 | 結果照片 | 套索工具,從左向右選 *消除雜物:Del
 *同時選取多個:上方工具*列按增加選取範圍選項
 *結束套索:Ctrl+D
 *還原:Ctrl+Alt+Z
 *可做之前先複製該相片圖層,以作比較:將照片圖層拖移到下方複製
 | 
            
              |  | 2.填補影像空白區域(圖片旋轉後的空白)
 (用內容感知填補) | 下載素材照片 | 結果照片 | 1.先旋轉:全選(Ctrl+A),然後在外圍旋轉(編輯/變形/旋轉),然後按確定 2.改選反白空間:選取/反轉
 3.將選取範圍擴大:選取/修改/擴張:輸入5
 4.用內容感知填補:Del或是編輯/填滿
 | 
            
              |  | 3.刪除拍照日期  (用仿製印章工具) | 下載素材照片 | 結果照片 | 1.先點按:仿製印章工具 2.設定參數:尺寸:20
 不透明度:100
 流量:100
 對齊
 樣本:全部圖層
 3.取樣:在日期下方按Alt
 然後蓋印章(不是拖移滑鼠)
 *結束取樣:Ctrl+D
 *還原:Ctrl+Alt+Z
 | 
            
              |  | 4.消除天空海面的污點  (用污點修復筆刷工具) | 下載素材照片 | 結果照片 | 1.先點按:污點修復筆刷工具 2.設定參數:筆刷大小:15
 硬度:70
 模式:正常
 類型:近似符合
 3.在污點處點按,消除
 *結束取樣:Ctrl+D
 *還原:Ctrl+Alt+Z
 | 
            
              |  | 5.消除臉上的黑眼圈,及嘴角黑影  (用修復筆刷工具) | 下載素材照片 | 結果照片 | 1.先新增一個空白圖層 2.點按:修復筆刷工具
 2.設定參數:筆刷大小:40
 模式:正常
 來源:取樣
 對齊
 樣本:目前及底下的圖層
 3.取樣:在黑眼圈附近的正常顏色區按: Alt
 然後塗抹黑眼圈
 4.增加自然度:將空白圖層的不透明度設定為66
 *結束取樣:Ctrl+D
 *還原:Ctrl+Alt+Z
 | 
            
              |  | 6.消除牆壁左右兩邊的斑駁黑影  (用修補工具) | 下載素材照片 | 結果照片 | 1.複製正常區域:點按修補工具 2.設定參數:
 修補:正常
 來源
 3.取樣:圈選左側牆壁斑駁區域
 然後拖移到右側正常牆壁區
 4.設定選項列:修補類型:內容感知
 適應:中度
 *結束取樣:Ctrl+D
 *還原:Ctrl+Alt+Z
 | 
            
              |  | 7.移動右邊兩顆氣球  (用修補工具+套索工具) | 下載素材照片 | 結果照片 | 1.先複製:點按修補工具 2.設定參數:
 修補:正常
 來源
 3.取樣:圈選小氣球旁邊的正常天空區域
 然後拖移到小氣球區,完成複製
 4.設定選項列:修補類型:內容感知
 適應:中度
 5.刪除原本小氣球:套索工具,*消除雜物:Del
 *結束取樣:Ctrl+D
 *還原:Ctrl+Alt+Z
 | 
            
              |  | 8.延伸填補右邊花台  (用修補工具) | 下載素材照片 | 結果照片 | 1.先複製:點按修補工具 2.設定參數:
 修補:正常
 來源
 3.取樣:圈選右側的花台區域
 然後拖移到右方空白處區,完成複製
 4.設定選項列:修補類型:內容感知
 適應:中度
 *結束取樣:Ctrl+D
 *還原:Ctrl+Alt+Z
 | 
            
              |  | 10.拉寬影像向左不變形  (用版面尺寸+內容感知比率) | 下載素材照片 | 結果照片 | 1.一般縮放會變形:編輯/變形/縮放 2.先複製該相片圖層:將照片圖層拖移到下方新增圖層,可以複製
 3.將影像版面加寬:影像/版面尺寸
 寬度:40%
 相對
 錨點:向左
 4.到背景拷貝圖層
 5.編輯/內容感知比率
 6.將照片拖移向左,完成後按enter
 | 
            
              |  | 11.拉寬影像向右不變形  (用版面尺寸+內容感知比率) | 下載素材照片 | 結果照片 | 1.一般縮放會變形:編輯/變形/縮放 2.先複製該相片圖層:將照片圖層拖移到下方新增圖層,可以複製
 3.將影像版面加寬:影像/版面尺寸
 寬度:40%
 相對
 錨點:向右
 4.到背景拷貝圖層
 5.編輯/內容感知比率
 6.將照片拖移向右,完成後按enter
 | 
            
              |  | 12.把蘋果變亮,增加飽和度,清晰度,立體感 *海綿工具:增加飽和度*加深工具:增加立體感,加暗陰影
 *加亮工具:增加反光感
 *銳利化工具:增加立體感 ,清晰感
 | 下載素材照片 | 結果照片 | 1.海綿工具:增加飽和度(蘋果會紅亮,黃亮)設定參數:筆刷大小:125
 模式:飽和
 流量:30%
 自然飽和度
 塗抹蘋果光亮面
 2.加深工具:增加立體感,加暗陰影設定參數:筆刷大小:150
 範圍:陰影
 曝光度:20%
 保護色調
 塗抹蘋果間的黑暗陰影處
 3.加亮工具:增加反光感設定參數:筆刷大小:125
 範圍:亮部
 曝光度:20%
 塗抹蘋果光亮面
 4.銳利化工具:增加立體感 ,清晰感               設定參數:筆刷大小:150
 模式:正常
 強度:50%
 保護細節
 塗抹蘋果之間邊緣處,增加對比感
 | 
            
              |  | 13讓照片有景深模糊效果 (濾鏡/模糊) | 下載素材照片 | 結果照片 | 1.濾鏡/模糊 | 
            
              |  | 14.綜合修補人臉的各種瑕疵 *海綿工具:增加嘴唇飽和度*加深工具:增加眉毛陰影加寸
 *加亮工具:增加眼珠反光感,讓眼睛更明亮
 *加亮工具:增加光感,把鼻樑陰影調淡化
 *修復筆刷工具:消除黑眼袋
 *污點修復筆刷工具:消除青春痘,黑痣,雀斑,紅疹
 | 下載素材照片 | 結果照片 | *海綿工具:增加嘴唇飽和度
 *加深工具:增加眉毛陰影加寸
 
 *加亮工具:增加眼珠反光感,讓眼睛更明亮
 *加亮工具:增加光感,把鼻樑陰影調淡化
 
 *修復筆刷工具:消除黑眼袋
 
 *污點修復筆刷工具:消除青春痘,黑痣,雀斑,紅疹
 | 
            
              |  | 
            
              | 7-04.各種範圍的選取,與影像的變形 | 
            
              |  | 下載本章全部素材檔案 | Chp7-04素材圖片 |  |  |  | 
            
              |  | 1.裁切中央的局部圖形  (用矩形選取畫面工具) | 下載素材照片 | 結果照片 | 1.用矩形選取畫面工具 2.改變選取大小:選取/變形選取範圍
 3.改變選取位置:用上下左右鍵盤
 4.影像/裁切
 *取消選取:Ctrl+D,或是在圖形外點一下
 | 
            
              |  | 2.選取圖2顏色相同區域到圖形1  (用魔術棒工具)**
                魔術棒適合:單一顏色的選取
 | 下載素材照片 | 結果照片 | 1.用魔術棒工具 2.點選摩天輪土黃色區域,任意點一下,複製:Ctrl+C
 3.打開圖形1,新增圖層,貼上Ctrl+V
 4.旋轉貼上的摩天輪:編輯/變形/旋轉:26度
 5.改變摩天輪尺寸
 6.移動摩天輪到左下方
 | 
            
              |  | 3.選取圖3水鳥,複製到圖形1  (用快速選取工具)
 **
                快速選取適合:萬用型,什麼形狀都可以選
 | 下載素材照片 | 結果照片 | 0.用放大鏡,放大水鳥局部 1.用快速選取工具
 參數設定:筆刷尺寸:10
 自動增強
 塗抹水鳥全身各部位
 2.修改腳部選取
 參數設定:筆刷尺寸:2
 新增:從選取範圍新增
 減去:從選取範圍減去
 2.複製:Ctrl+C
 3.打開圖形1,新增圖層,貼上Ctrl+V
 4.複製此圖層:共複製3個,改變大小,做出4隻水鳥
 5.最後確定:enter或是選項列打勾
 | 
            
            
            
              |  | 4.選取城堡,複製到圖形1  (用多邊形套索工具)**多邊形套索適合:非曲形,多邊形的選取
 
 | 下載素材照片 | 結果照片 | 0.用放大鏡,放大城堡 1.用多邊形套索工具,點選轉折的邊
 **當下的點若要取消:del
 2.複製:Ctrl+C
 3.打開圖形1,新增圖層,貼上Ctrl+V,放到左下
 4.編輯/變形/扭曲
 | 
            
              |  | 5.選取花瓣,複製到圖形1  (用磁性套索工具,自動偵測範圍,**
                磁性套索適合:                適用於顏色對比強烈的明顯邊界差異的選取)
 | 下載素材照片 | 結果照片 | 0.用放大鏡,放大 **可以多種選取工具複合選取(按住shift)
 
 1.用磁性套索工具,點選花瓣的一個邊,其它不須要再點按,只要經過邊緣,就會自動選取
 2.若它自動選的點不滿意,就回去重繞,
 或是按:del
 3.回到起始處,點按,會自動接合
 4.複製:Ctrl+C
 5.開圖形1,新增圖層,貼上Ctrl+V
 | 
            
              |  | 6.反選取花瓣,複製到圖形1  (用魔術棒工具,但反選)**
                魔術棒適合:單一顏色的選取
 | 下載素材照片 | 結果照片 | 0.用放大鏡,放大 1.用魔術棒工具,選背景黑色區域
 2.選取/反轉
 3.複製:Ctrl+C
 4.打開圖形1,新增圖層,貼上Ctrl+V
 | 
            
              |  | 7.取時鐘,複製到圖形1  (用橢圓形工具選)**
                  橢圓形適合:單一顏色的選取
 | 下載素材照片 | 結果照片 | 0.用放大鏡,放大 1.用橢圓形工具,選時鐘
 2.起始點:從時鐘切角左上點,開始點按,然後拉大
 3.動態改變圓的大小:滑鼠還沒放開時,同時按Space鍵,移動滑鼠即可改變圓的大小
 4.事後然後修改圓的大小:選取/變形選取範圍
 5.事後然後修改圓的位置:直接用滑鼠拖移
 6.複製:Ctrl+C
 7.打開圖形1,新增圖層,貼上Ctrl+V
 | 
            
              |  | 
            
              | 7-06.圖層遮色片 | 
            
              |  | 下載本章全部素材檔案 | Chp7-06素材圖片 |  |  |  | 
            
              |  | 1.局部木板要疊加在花圃地上  (用土法煉鋼,裁切法) | 下載素材照片1,素材照片2 | 結果照片 | 1.開啟照片1,再置入照片2 (會到第2層) 2.按右鍵:點陣化智慧型物件
 3.點第2層,用多邊形套索工具,選取整個木板外框→滑鼠右鍵→反轉選取→按Del
 | 
            
              |  | 2.局部木板要疊加在花圃地上  (用圖層遮色片,優點:不會破壞原本圖形)
 | 下載素材照片1,素材照片2 | 結果照片 | 1.開啟照片1,再置入照片2 (會到第2層) 2.點第2層,用多邊形套索工具,選取整個木板外框
 3.然後按右下圖層底部的「增加向量圖遮色片」
 | 
            
              |  | 3.上一章的海面水鳥城堡菊花範例,改用圖層遮色片來做  (用圖層遮色片,優點:不會破壞原本圖形)
 | 下載海面,菊花,城堡2,水鳥 | 結果照片 | 1.開啟照片1,再置入照片2 (會到第2層) 2.點第2層,用各種選取工具
 3.然後按右下圖層底部的「增加向量圖遮色片」
 | 
            
              |  | 圖層遮色片的進階應用:漸層融合兩張圖
 4.兩張圖片,使用漸層方式分開兩張(用圖層遮色片,漸層工具)
 | 下載素材波斯菊,荷葉 | 結果照片 結果照片 | 1.開啟荷葉照片,再置入波斯菊照片 (會到第2層) 2.按右下圖層底部的「增加向量圖遮色片」
 3.點按遮色片
 4.點選左邊漸層工具列→選線性漸層
 5.在波斯菊畫面上拖移滑鼠,拉一條線,越長,漸層越柔和
 6.將荷葉的水珠變得更清晰
 使用筆刷工具列
 把前景顏色改成黑色
 塗抹整顆水珠及其外緣
 7.新增一個圖層
 輸入文字:優活之森林藝術休閒中心
 8.新增一個圖層
 輸入文字:The forest of good life
 9.新增圖層,新增一條白色水平線
 10.新增圖層,新增文字http://www.happy.com.tw
 | 
            
              |  | 圖層遮色片的進階應用:漸層融合兩張圖
 5.兩張圖片,使用漸層方式分開兩張(用圖層遮色片,漸層工具)
 | 下載少女圖,茶點 | 結果照片 | 1.開啟少女照片,再置入茶點照片 (會到第2層) 2.按右下圖層底部的「增加向量圖遮色片」
 3.點按遮色片
 4.點選左邊漸層工具列→選線性漸層
 5.在畫面上拖移滑鼠,拉一條線,越長,漸層越柔和
 | 
            
              |  | 6.變換踢球的姿勢  (用內容感知填滿+智慧型濾鏡+操控彎曲) | 下載素材照片 | 結果照片 | 0.用放大鏡,放大 1.用快速選取工具
 參數設定:筆刷尺寸:10
 自動增強
 塗抹男孩全身
 2.選取/儲存選取範圍:boy
 3.圖層/新增/拷貝的圖層
 4.切換圖層到:背景圖層
 5.選取/載入選取範圍:boy
 6.選取/修改/擴張:10
 7.del(執行內容感知填滿):刪除人像
 8.隱藏圖層1:即可發現人像不見了
 9.切換圖層到:圖層1
 Ctrl+D:取消選取
 10.圖層/智慧型物件/轉換成智慧型物件
 11.編輯/操控彎曲
 在網格設定圖釘控制點:左邊:手腕,手肘,肩膀,左腳尖,腳跟,膝蓋,大腿根部
 下巴,頭頂
 右邊:肩膀,膝蓋,大腿根部
 12.移動抬高姿勢:左邊:手腕,手肘,肩膀+左腳尖,腳跟,膝蓋
 13.最後,打勾確定完成變形
 | 
            
              |  | 
            
              |  | 
            
              | 08.向量圖影像設計:illustrator,Firework | 
            
              |  | 下載講義 | Chp8講義 |  |  |  | 
            
            
              |  | 
            
              | 09.音訊媒體設計概論 | 
            
              |  | 下載講義 | Chp9講義 |  |  |  | 
            
            
              |  | 
            
              | 10.音訊編輯實務:Audition,After.Effects,mixcraft | 
            
              |  | 下載講義 | Chp10講義 |  |  |  | 
            
            
              |  | 
            
              | 11.視訊媒體設計概論 | 
            
              |  | 下載講義 | Chp11講義 |  |  |  | 
            
            
              |  | 
            
              | 12.多媒體影片剪輯:Premiere,Windows Movie Maker 12-01.配合音樂節奏的剪片
 12-02.麥克風錄音,並加上字幕
 12-03.片頭動畫
 
 12-01.配合音樂節奏的剪片
 | 
            
              |  | 1.配合音樂節奏的剪片下載素材 成果圖片
 成果影片
 成果專案檔案
 1.拖曵所有檔案到左邊視窗
 拖曵01.mp4到右邊時間軸視窗
 快速鍵
 jkl:倒帶,停止,播放
 空白鍵:停止
 
 2.拖曵
 02.mp4
 03.mp4
 04.mp4
 
 3.使影片填滿視窗寬度
 填滿視窗:\
 變寬:+(不可用右邊的+,必須用上面的+(=))
 變窄:-(不可用右邊的-,必須用上面的-(-))
 
 3.刪除02.mp4的音樂
 點選0.2mp4,del,會整個刪除(影片,音樂)
 alt+點選音樂
 
 4.基本剪接
 把02.mp4後面刪除
 (1)方法1:把01.mp4尾端往前拉
 保留01.mp4剩下2:20
 再選取空白區域+del
 
 (2)方法2:使用左邊工具(第三個:Ripple edit tool)
 拖曵02.mp4 只剩下2秒
 拖曵03.mp4 只剩下2.15秒
 
 5.把04.mp3插入到01.mp3後面
 (錯誤做法)拖曵04mp3到01.mp3後面,則會覆蓋02,03.mp4
 (正確做法)ctl+拖曵到01.mp4後面(ctrl是插入模式)
 
 6.先看影片播放,同時剪片1秒,再拖曵到時間軸內
 把05.mp4拖曵到左上角預覽視窗播放
 把播放頭移動到某處+鍵盤:i
 把播放頭移動到某處+鍵盤:0
 把影片拖曵到右下視窗的尾部
 
 把06.mp4拖曵到左上角預覽視窗播放
 輸入秒數:200(2秒)+鍵盤:i
 輸入秒數:400(4秒)++鍵盤:0
 把影片拖曵到右下視窗的尾部
 
 把07.mp4拖曵到左上角預覽視窗播放
 輸入秒數:100(1秒)+鍵盤:i
 輸入秒數:1300(13秒)++鍵盤:0
 把影片拖曵到右下視窗的尾部
 
 7.拖曵音樂.mp3到右下時間軸視窗的audio軌道
 調整音量方法1:在音軌左邊double click,會放大音軌畫面,調整中間軸的振幅,即可調整音量
 調整音量方法1:在音軌上按滑鼠右鍵→audio gain→adjust gain by→輸入數字(增加或減少的音量):-5(減少音量)
 
 8.配合音樂節奏來剪輯影片:
 方法:使用jump cut跳剪法
 效果:影片會如潮水般,第一段跳第三段,影片有跳接的效果,有快節奏快轉的感覺
 (1)在時間軸選擇04.mp3→滑鼠右鍵→label→玫瑰紅→
 (2)如何讓影片配合音樂節奏播放:使用marker法
 在時間軸空白處→點滑鼠(可取消其它影片的選取)
 把cursor移動到04.mp3前面
 播放影片,當聽到鼓聲,就按:m
 (3)如果裁切:使用razor tool剃刀工具
 對齊marker位置,裁切
 在後半部的1/2在裁切一次
 總共把04.mp3裁切成8等分
 切換會選取工具,
 shift+選第2,4,6,8段(造成影片跳躍,跳接的效果)
 shift+del全部刪除,全部對齊,不留空白
 
 9.如何製作影片的快轉,或慢動作效果:speed/duration:
 (1)在時間軸選擇07.mp3→滑鼠右鍵→label→黃色→
 (2)把cursor移動到07.mp3前面
 播放影片,當聽到鼓聲,就按:m
 結果:前面設定三個marker
 第四個marker,設定在24秒處(準備把中間這一段快轉)
 (3)設定快轉(方法1):
 滑鼠右鍵:speed/duration
 設定spped:250(%)
 (4)設定快轉(方法2):
 左邊工具列:找Rate stretch tool→把中間壓縮到第3個鼓聲的位置)
 (5)清除所有的marker標記:滑鼠右鍵→clear all markers
 
 10.設定轉場特效:
 (1)拖曵08.mp4到時間軸最後
 
 (2)如何把cursor游標移動到影片的最後的那點?
 方法:使用shift的吸附功能
 shift+cursor移動到08.mp4的最後(會吸附在尾端)
 (3)使用rasor剃刀工具(或按C),在音樂audio的尾端裁切,刪除多餘的音樂檔
 (4)轉場效果
 位置:左邊Effects面板→Vedio transition→打開資料夾,有各種特效類別→
 方法:把某個特效(例如curtain)→拖曵到02,03.mp4之間→
 刪除轉場特效:點選某個特效(例如curtain)→del
 (5)最常用的轉場特效:淡入淡出(dissolve→cross dissolve)→有個黃色框,是預設的轉場效果
 方法1:拖曵到01~02.mp4之間
 方法2:在最開頭01.mp4前面→滑鼠右鍵→apply default transition
 在影片最結尾08.mp4後面→滑鼠右鍵→apply default transition
 在音樂最結尾後面→滑鼠右鍵→apply default transition
 (6)轉場特效
 Vedio transition→immersive Video→VR Chroma Leaks色素漏光效果
 拖曵到06~07.mp4之間
 拖曵到07~08.mp4之間
 
 11.自訂視覺特效:設定影片結束時,上下都有黑框
 (1)如何查詢自訂特效
 在左邊effects面板的輸入框:輸入crop裁切
 把crop特效→拖曵到08.mp4內
 (2)如何修改特效參數:
 設定特效參數:在左上角的Effect control面板
 找到crop項目→
 top:30%
 bottom:30%
 
 12.如何設定影片的明暗,色調,色溫,曝光度,對比
 (1)在effects面板→搜尋→fast→找到fast color corrector
 (2)把fast color corrector拖曵到時間軸的影片上
 (3)在effect control panel面板→可以控制:色調,色溫,曝光度,對比
 成果圖片
 
 13.如何在影片加上標題:
 (1)在左邊project面板→滑鼠右鍵→new item→text→Title 01
 成果圖片
 (2)輸入文字:樂活,快活
 選擇一種title Style
 設定文字大小:font size = 80
 設定文字顏色:藍色
 移動位置
 (3)回到premier主畫面的時間軸,在第19秒處→1900
 
 (4)從project面板→拖曵Title01→移動到Video2軌道→放在第19秒處
 (5)把文字影片→拉長使其多1秒
 (6)設定文字影片的開始,結束→都是淡入淡出轉場效果(滑鼠右鍵→apply default transition)
 成果圖片
 
 | 
            
            
              |  | 
            
              | 12-02.麥克風錄音,並加上字幕 | 
            
              |  | 1.麥克風錄音,並加上字幕下載素材 成果圖片
 成果影片
 成果專案檔案
 1.拖曵所有檔案到左邊視窗
 拖曵01.mp4到右邊時間軸視窗
 
 2.設定麥克風型號規格
 Edit→Preference偏好設定→AduioHardware硬體
 default input device→選擇你的麥克風型號
 
 3.避免麥克風聲音受到自己電腦喇叭的回音
 AudioAudio→輸入聲音靜音(mute input during recording)
 
 4.錄音前先測試音量的大小
 在時間軸→三個音軌,任選一個→滑鼠右鍵→錄音設定(voice-over recording setting)
 錄音音量測試:不可錯過0的刻度(紅燈,會產生破音)
 
 5.開始錄音
 確定已經把麥克風錄音線,接到電腦
 按下第一個音軌的錄音按鈕(麥克風符號),開始錄音
 停止錄音方法:空白鍵space
 
 6.聲音的修復:
 (1)拖曵練習已經準備好的錄音檔:英文旁白
 (2)刪除剛剛自己錄音的音軌片段
 拖曵英文旁白.m4a檔案,到音軌內
 播放:發現有低頻的噪音
 (3)如何改善低頻噪音
 打開效果effects面板:Window→Effects→Audio Effects
 點選錄音片段→(Audio Effects面板)
■Reduce Noise(降低環境噪音:馬路聲,空調聲)→比較前後的聲音差異:
 ■Reduce Rumble(降低低頻噪音:閘門法,把某個頻率以下的噪音,都消除)
 (4)如何改善電流干擾的嗡嗡音:
 拖曵De-Hum聲音片段到音軌→Effects面板→DeHummer
 若是效果不好→開啟Effects control面板→Volume→Level→-15→即可消除噪音
 (p.s.)新版功能位置:
 →到Essential Sound面板→設定為Dialog類型
 →Repair修復功能→
 →Reduce Noise(降低環境噪音:馬路聲,空調聲)
 →Reduce Rumble(降低低頻噪音:閘門法,把某個頻率以下的噪音,都消除)
 (5)如何改善講話錄音所造成的的嘶嘶聲音:
 拖曵DeEss.m4a聲音片段到音軌→Effects面板→DeEss
 進一步調整男生/女生的音頻:→開啟Effects control面板→DeEss→Custom Setup→男生Male/Female女生
(新版功能)若是效果不明顯,再開始Effects面板→動態效果Dynamic Processing
 (6)如何造成的回音效果:
 拖曵DeEss.m4a聲音片段到音軌→Effects面板→Reverb,拖曵此功能到音頻上
 
 6.加上旁白(把男聲變的清亮)
 把所有測試聲音檔案刪除
 (1)在01.mp4的第13:00秒處,拖曵02.mp4(會重疊一部分)
 中間用淡入淡出轉場效果
 拖曵中文旁白.mpa到4:00秒位置
 (2)播放:有些噪音
 降低噪音:打開效果effects面板:Window→Effects→Audio Effects
 點選錄音片段→(Audio Effects面板)
■Reduce Noise(降低環境噪音:馬路聲,空調聲)→比較前後的聲音差異:
 (3)如何把男聲變的清亮
 男聲特色:低音渾厚,高音少→→如何把男聲變的清亮
 方法:使用等化器(EQ)
 打開效果effects面板:Window→Effects→Audio Effects→EQ
 勾選low....high,全部的節點
 調整節點(把低頻點調低,高頻點調高)
 播放結果:男聲變的清亮
 
 7.如何把配音的音量調大(或調小)
 點選中文旁白.mpa
 →開啟Effects control面板→Volume→level→調大/調小
 測試播放
 
 8.配合音樂節奏來剪輯影片:
 把配樂.mpa拖曵到第二音軌
 到影片的結尾,使用razor tool剃刀工具,切除多出的配樂檔
 在影片,聲音的結尾,都加上淡入淡出轉場→
 
 9.如何播放旁白配音時,原本的背景音樂就會自動降低音量,旁白結束音樂又回到原本音量(音訊迴避效果)
 (1)點選➤Audio 2左邊的➤(就能夠打開聲音檔案的時間軸&音量曲線)
 (2)按住Ctrl+點按音量曲線,形成4個點
 (3)造成,有旁白出現時,聲音音量變低,旁白結束時音量又變大
 
 10.如何加上字幕:
 觀念:字幕有兩種
 (A)內嵌字幕(範例:https://www.youtube.com/watch?v=Xx57qFf1i-Q)
 (B)外掛型字幕:cc字幕(範例:https://www.youtube.com/watch?v=Qn2OrAOo34k)
 注意:外掛型cc字幕,使用要點
(A)要點按字幕選項,才會出現字幕(
 (B)cc字幕可以自動翻譯成各國語言(要點按設定,選擇語言)
 
 (1)新增字幕:
 方法:在專案project視窗的下方,點按new item(新增項目)→Captions
 注意:2018年以前版本,例如,Premiere Pro CS6,則沒有Captions這個選項,必須有讀入closed captions in .scc and .mcc format
 Scenarist Closed Caption File (.scc)
 MacCaption VANC File (.mcc)
 (2)舊版上字幕方法(2018年以前版本,例如,Premiere Pro CS6)
 :左邊Effects面板→Vedio transition→打開資料夾,有各種特效類別→
 方法1:讀入import.scc 或是 .mcc字幕檔案
 方法2:使用Title標題來當作字幕
 例如:
 先製作第一段字幕(用new item→Title01:輸入字幕,設定好字體,顏色)
 然後,複製title 01,產生teitle 02→再建立第二段字幕
 https://www.youtube.com/watch?v=B2I1fTx_24M
 
 | 
  
            
            
              |  | 
            
              | 12-03.片頭動畫 | 
            
              |  | 1.片頭動畫下載素材 成果圖片
 成果影片
 成果專案檔案
 1.拖曵所有檔案到左邊視窗
 拖曵01.mp4到右邊時間軸視窗
 
 2.製作文字動畫
 (1)建立Title標題
 建立title:用new item→Title 01→輸入:希臘半島(設定好字體,顏色)
 拖曵Title 01到video 2軌道
 (2)設定第一段時間影格動畫:
 點選Title 01片段→開啟Effects control面板→打開:motion
 →把影片時間軸移動到2.5秒處(2:30)
 →設定關鍵影格(按:position前面的toggle animation)
 →設定0秒,文字的位置(靠最左)
 →設定2.5秒,文字的位置(靠最右)
 播放測試
 (3)設定第二段時間影格動畫:
 →點選第一個關鍵影格符號→滑鼠右鍵→copy
 →把影片時間軸移動到5秒處(5:00)→o add Keyframe
 →設定5:00秒,文字的位置(靠最左)
 播放測試
 
 3.製作片頭動畫
 (1)範例:https://www.youtube.com/watch?v=qyTxFuLzxwk
 (2)開始建立片頭動畫
 刪除全部的影片與標題
 建立title:用new item→Title 02→輸入:國慶頻道(設定好字體,顏色)
 拖曵Title 02到video 1軌道
 
 (2)設定時間影格動畫:
 點選Title 01片段→開啟Effects control面板→打開:motion
 →把影片時間軸移動到1秒處(1:00)
 →設定關鍵影格(按:position前面的toggle animation)
 →設定0秒,文字的位置(靠最左)
 →設定1秒,文字的位置(靠最右)
 (3)如何讓文字動畫有急剎車的效果
 點選第一個關鍵影格符號→滑鼠右鍵→Temporal Interpolation→Ease In(緩慢悠閒進入,但急剎車)
 讓剎車效果更誇張:打開position→把曲線變得陡降(把曲線右下角的拉桿,向左拉長)
 播放測試
 (4)設定底線伸展動畫:
 目標:讓點變長,伸展變成線條動畫的效果
 動畫時間軸:從0.5秒→1秒
 建立title:用new item→Title 03→line tool(也可以用rectangle tool)
 拖曵Title 03到video 2軌道
 點選Title 03片段→開啟Effects control面板→打開:motion
 →設定scale縮放
 →在1秒處→add Keyframe→scale:100%
 →在0.5秒處→add Keyframe→scale:0%
 →取消0秒處的Keyframe(clear)
 →檢查:Goto Next Frame(最後的scale=100%)
 (5)設定向下浮現文字動畫:
 動畫時間軸:從1秒→1.2秒
 建立title:用new item→Title 04→輸入:Dog Channel(設定好字體,顏色)
 拖曵Title 04到video 3軌道
 →在1.2秒處→add Keyframe→position:在國慶頻道下方
 →在1秒處→add Keyframe→position:與國慶頻道重疊
 →檢查:Goto Next Frame
 →設定scale縮放
 (6)使用遮罩,只顯示在國慶頻道下方的框框內的內容
 方法:在Effects面板:輸入:Garbage Matte→選four point Garbage Matte
 回到Effects control面板→Garbage Matte
→點按:顯示四個端點的按鈕(顯示四個頂點)
→在1.2秒處→add Keyframe→position:調整四個頂點,只顯示下方文字
 →在1秒處→add Keyframe→position:調整四個頂點,只顯示下方文字
 →設定scale縮放
 (7)建立文字(國慶頻道)旋轉2圈,然後變小,消失
 原理:使用transform特效,除了可以變形,還能變模糊
 →開啟Effects面板→查詢關鍵字:transform
 →拖曵transform到title 01
 →影片到2:00
 開啟Effects control面板→
 →設定關鍵影格:scale width, scale height, rotation
 →影片到2:15
 scale width:1%
 scale height:1%
 rotation:逆時針旋轉2圈:-720
 (8)如何有動態模糊效果
 開啟Effects control面板→opacity
 →取消勾選快門:use composition's shuttle angel
 →輸入快門角度:shuttle angel = 360
 測試結果:文字旋轉,會以模糊狀旋轉
 (9)以同樣設定(逆時針轉720,變小消失),設定title 3, titl 4
 測試結果:旋轉,模糊狀旋轉
 
 4.新增影片軌道,加上背景圖
 (1)軌道→滑鼠右鍵→add track→before 1st track
 (2)把背景01.mp4拖曵到 track 1
 
 5.建立白色圓形變大轉場動畫
 建立title:用new item→Title 05→circle tool
 width=200, height=200
 置中在畫面正中央,把軸心移到中央(Ctrl左上移動端點)
 拖曵Title 05到video 2軌道
 開啟Effects control面板→
 →設定scale關鍵影格→從1%開始(設定Ease out加速效果)
 →0.5秒後→把scale拉大,填滿畫面(設定Ease in剎車效果)
 
 6.建立時間差黑色圓形變大轉場動畫
 複製title 05:點選Title 05→duplicate→Title 05Copy
 編輯Title 05Copy→顏色為黑色
 拖曵Title 05Copy到video 6軌道(add track)→與video5有0.3秒時間差
 開啟Effects control面板→複製title 05的兩個關鍵影格→貼到title 05copy
 測試播放
7.加入背景02.mp4
 add track-video 7r
 拖曵背景02.mp4與圓形變大動畫同時出現
 
 8.加入title:介紹金毛狗
 建立title:用new item→Title 07→輸入:介紹金毛狗
 拖曵Title 07到video 8軌道
 (時間差0.5秒出現,尾端長度與背景02一樣)
 此影片頭尾,都加上淡入淡出轉場
 
 9.加上高斯模糊的文字特效(由模糊文字→漸漸清晰)
 →Effects面板→blur→Baussian Blur→拖曵到title07(介紹金毛狗)
 影片開始後0.5秒→設定Blurness關鍵影格(Blurness=0,不模糊)
 影片開始後0.0秒→設定Blurness關鍵影格(Blurness=100,非常模糊)
 →Reduce Noise(降低環境噪音:馬路聲,空調聲)
 →Reduce Rumble(降低低頻噪音:閘門法,把某個頻率以下的噪音,都消除)
 
 10.加上配樂,音效:
 (1)拖曵音樂.mp3到音軌audio1
 切除多餘的音樂.mp3
 結尾設定淡入淡出轉場效果
 (2)設定文字旋轉-720度的音效
 拖曵音效1.m4a到audio2(當開始旋轉文字時)
 (3)設定圓形放大撞擊到四邊的音效
 拖曵音效2.m4a到audio3(當圓形放大撞擊到四邊時)
 
 11.製作文字隨音樂鼓聲而變小/變大效果:
 (1)先聽鼓聲,然後加上marker(在時間軸的上方面板)
 (2)設定第一個marker(5:18)
 鍵盤向右鍵→5:19→設定effects control→motion→scale→90
 鍵盤向左鍵→5:17→設定effects control→motion→scale→80
 移動到0:00起始處→設定effects control→motion→scale→90
 (3)複製5:17/5:19兩個關鍵影格,貼到其它marker
 先複製(Ctrl+C)
 點按marker2→然後點按effect control面板→貼上(ctrl+V)
 其它marker,一樣做法
 
 12.製作文字倒影特效:
 (1)先快速複製video 8的title7
 方法:alt+移動video 8軌道向上移動→就產生video 9軌道與影片
 (2)加上倒影特效
 effect面板→transform→flip倒影→垂直倒影vertical flip
 移動倒影位置(effect controls面板→motion→position)
 (3)讓倒影較不透明(另外一種模糊)
 設定透明度:effect controls面板→motion→opacity:42
 設定高斯模糊度:effect controls面板→Gaussian Blur→Blurness:20
 
 
 | 
 
            
              |  | 
            
              | 11.視訊媒體設計概論 | 
            
              |  | 下載講義 | Chp11講義 |  |  |  | 
            
              |  | 下載軟體 | 下載Movie Maker(免費版) |  |  |  | 
            
              |  | 下載講義 | Chp12講義 |  |  |  | 
            
              |  | 練習範例 | 範例1成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例2成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例3成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例4成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例5成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例6成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例7成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例8成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例9成果 | 下載素材 |  | 
            
              |  | 練習範例 | 範例10成果 | 下載素材 |  | 
            
            
            
              |  | 
            
              | 13.多媒體腳本實務:會聲會影 | 
            
              |  | 下載講義 | Chp13講義 |  |  |  | 
            
            
              |  | 
            
              | 14.2D動畫設計實務:Flash,Namo FreeMotion,GIF Animator,GIFMaker | 
            
              |  | 下載講義 | Chp14講義 |  |  |  | 
            
              | Namo FreeMotion 動畫設計(動畫速成,有120種以上的Flash動畫範本可以快速使用) | 
            
              | 14-A: 套用Namo  FreeMotion內訂的120種動畫效果 | 
            
              |  | 下載講義 | Chp14-A講義 |  |  |  | 
            
              |  | 素材檔案 | 練習圖片檔 |  |  |  | 
            
              |  |  | 照片檔1 | 照片檔2 | 照片檔3 |  | 
            
              |  | 下載網頁模板 | 網頁模板1 | 網頁模板2 | 網頁模板3 | 網頁模板4 | 
            
              |  |  | 網頁模板5 | 網頁模板6 |  |  | 
            
              |  | 成果範例檔案 | 成果範例1 | 成果範例2 | 成果範例3 | 成果範例4 | 
            
              |  |  | 成果範例5 |  |  |  | 
            
              | 14-B: Namo FreeMotion自行DIY設計動畫 | 
            
              |  | 下載講義 | Chp14-B講義 |  |  |  | 
            
              |  | 素材檔案 | 練習圖片檔 | gif動畫_d2 | 360度環場圖片 |  | 
            
              |  | 成果範例檔案 | 成果範例6 | 成果範例7 | 成果範例8 | 成果範例9 | 
            
              |  |  | 成果範例10 | 成果範例11 | 成果範例12 |  | 
            
            
              |  | 
            
              | 15.多媒體網頁設計:Dreamweaver(html) | 
            
              |  | 下載講義 | Chp15講義 |  |  |  | 
            
              | (A).網頁模版,網頁樣版(快速設計大師風格的高質感網頁,50000種以上的網頁模板可以使用) | 
            
              | 15-A: 使用網頁模版來快速設計有大師風格的高質感網頁 | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | web2網頁模板 | web3網頁模板 |  |  | 
            
              |  | 成果範例檔案 | web2範例 | web3範例 | web4範例 |  | 
            
              |  | 
            
              | (B).Dreamweaver網頁設計(最常用的網頁設計軟體) | 
            
              | 15-B1: 以各種圖片相關編輯與特效建立產品展示網 | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B2:行為特效(2):Dreamweaver各種行為動態特效(行為特效與程式碼-1) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 下載除bug元件 | SpryCollapsiblePanel.js | SpryCollapsiblePanel.css |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B3: 行為特效(1):AP Div圖層行為應用與SPRY(行為特效與程式碼-2) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B4:其它特效(4):使用JavaScript,JavaApplet做出各種特效(行為特效與程式碼-3) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 下載Java Applet元件 | 水中倒影元件 | 俄羅斯方塊元件 |  |  | 
            
              |  | 下載Java Applet元件 | 水中漣漪 | 雪景 | 投影圖片 |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B5:行為特效(3):Extension外掛擴充網頁行為特效(行為特效與程式碼-4) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 下載mxp外掛元件 | mxp外掛元件 |  |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B6: 製作各種音樂影音網頁(基礎圖文操作) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載影音 | 影音素材 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B7: 以表格規劃網頁版面結合CSS建立音樂排行網站(基礎表格排版) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板 |  |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B8: 製作頁框類網站(美容網站)(基礎CSS排版操作-1) | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載素材檔案 | 下載素材 |  |  |  | 
            
              |  | 下載網頁模板 | 網頁模板1 | 網頁模板2 |  |  | 
            
              |  | 成果範例網站 | 成果範例1 | 成果範例2 |  |  | 
            
              |  |  |  |  |  |  | 
            
              | 15-B10: 手機、平板電腦、桌上電腦的綜合網頁排版 兩種方式:媒體查詢,流變格線版面
 | 
            
              |  | 下載講義 | 下載講義 |  |  |  | 
            
              |  | 下載練習範例 | 下載練習範例 |  |  |  | 
            
              |  | 成果範例網站 | 成果範例 |  |  |  | 
            
              |  |  | Opera 手機模擬瀏覽器 | Opera 12.1Windows版下載 |  |  | 
            
              |  | 
            
            
              |  | 
            
              | 16.數位學習內容設計:Captivate (製作電子書,e-learning教材) | 
            
              |  | 下載講義 | Chp16講義 |  |  |  | 
            
            
              |  | 
            
              | 17.多媒體光碟製作與燒錄 | 
            
              |  | 下載講義 | Chp17講義 |  |  |  | 
            
            
              |  | 
            
              | 18.3D動畫設計:3ds Max,Maya,ProE | 
            
              |  | 下載講義 | Chp18講義 |  |  |  | 
            
            
              |  | 
            
              | 19.互動多媒體設計:程式設計,手機APP設計,遊戲設計(Unity),互動網頁設計(PHP,Asp.net) | 
            
              |  | 下載講義 | Chp19講義 |  |  |  | 
            
            
              |  | 
            
              | 20 : 
                
                
                架站練習,PHP互動網站 | 
            
              | 1 | 01.使用Apache架站 | 01.下載架站軟體:下載phpStudy 02.練習範例:源碼A.貓走路網頁(html)
 B.網頁模板(html)
  C.PHP討論區範例(php+mySQL資料庫) D.discuz論壇範例(php+mySQL資料庫)
 解壓縮,將upload複製到www
 帳號密碼root
 常用的論壇程式:Molyx,Discuz,PHPwind,BMB
 範例:
 常見的的論壇程式有:
 1. vBB (PCZone )
 2. IPB ( MSFN )
 3. phpBB ( 竹貓 )
 4. Discuz ( 大多數中文網站 ,載點二)
 5. PHPWind ( 數位男女 )
 
 | 
                                                                                                                                                                                                                                                                                                                        
            
            
              |  | 
            
              | Chp2.PHP基本,變數,算術運算子,比較運算子,邏輯運算子 | 
            
              | 1 | 輸出一段文字 | <?php echo "大家新年快樂" ;
 ?>
 
 | 
            
              | 2 | 註解 | <?php #  第一種註解
 // 第二種註解
 /* 第三種註解
 可以註解很多行
 */
 echo "大家新年快樂" ;
 ?>
 
 | 
            
              | 3 | 變數 $a | <?php $a = 5;
 $b = 6;
 echo $a+$b;
 ?>
 
 | 
            
              | 4 | 字串運算子 $a.$b.$c | <?php $a = "您總共購買";
 $b = "1000";
 $c = "元";
 $a = $a.$b.$c;
 echo $a;
 ?>
 
 | 1.祝福大家:<?phpecho "新年快樂,恭喜發財。";
 echo "<br/>2.";$a = 500;
 $b = 600;
 echo $a+$b."元";
 echo "<hr/>3.";$a = "你總共購買";
 $b = 1100;
 $c ="元";
 //$a =$a.$b.$c;
 echo $a.$b.$c;
 ?>
 | 
            
              | 5 | 算數運算子 +(加法)-(減法)
 *(乘法)
 /(除法)
 %(取餘數)
 | <?php $a = 10;
 echo $a+5;
 echo "<br/>";
 echo $a-5;
 echo "<br/>";
 echo $a*5;
 echo "<br/>";
 echo $a/5;
 echo "<br/>";
 echo $a%3;
 ?>
 
 | 
            
              | 6 | 比較運算子 等於(==)不等於(!=)
 大於(>)
 小於(<)
 大於等於(>=)
 小於等於(<=)
 var_dump($a)//輸出變數$a的資料型態(對true,或錯false)
 | <?php $a = 1>2;
 var_dump($a);  //輸出變數$a的資料型態(對true,或錯false)
 echo '<br>';  $b = 1<2;var_dump($b);
 ?>
 
                  
                    
                      | 比較運算子 |  
                      | 運算子 | 意義 | 範例 | 說明 |  
                      | == | 相等 | $a == $b | $a等於$b |  
                      | === | 全等 | $a === $b | $a等於$b, 且資料格式相同。
 |  
                      | != | 不相等 | $a != $b | $a不等於$b |  
                      | <> | 不相等 | $a <> $b | $a不等於$b |  
                      | !== | 不全等 | $a !== $b | $a不等於$b, 或資料格式不相同。
 |  
                      | < | 小於 | $a < $b | $a小於$b |  
                      | > | 大於 | $a > $b | $a大於$b |  
                      | <= | 小於或等於 | $a <= $b | $a小於或等於$b |  
                      | >= | 大於或等於 | $a >= $b | $a大於或等於 |  
 | 
            
              | 7 | 邏輯運算子 與(and、&&)或(or、||)
 僅一(xor)
 不是(!)
 var_dump($a)//輸出變數$a的資料型態(對true,或錯false)
 | <?php $a = (5>6 or 8<9);
 var_dump($a);
 echo '<br>';
 $b = (5>6 and 8<9);var_dump($b);
 echo '<br>';
 $c = !(5>6);  //負負得正,變成truevar_dump($c);
 ?>
 
                  
                    
                      | 邏輯運算子(Logical Operators) |  
                      | 運算子 | 同義 | 意義 | 範例 | 說明 |  
                      | and | && | 與 | $a and $b | $a與$b皆為真 |  
                      | or | || | 或 | $a or $b | $a與$b至少有一個為真 |  
                      | xor |  | 僅一 | $a xor $b | $a與$b僅有一個為真 |  
                      | ! |  | 不是 | !$a | $a不為真 |  
                      | && | and | 與 | $a && $b | $a與$b皆為真 |  
                      | || | or | 或 | $a || $b | $a與$b至少有一個為真 |    | 
            
              |  | 
            
              | Chp3. 選擇控制結構 | 
            
              | 1 | if控制結構 if(條件){子句;
 }
 | <?php $a = 7;
 $b = 6;
 if($a >= $b){
 echo $a."大於等於".$b;
 }
 ?>
 echo "$a大於等於$b"; | 
            
              | 2 | if…else…控制結構 if(條件){子句一;
 }else{
 子句二;
 }
 | <?php $a = 6;
 $b = 7;
 if($a >= $b){
 echo $a."大於等於".$b;
 }else{
 echo $a."小於".$b;
 }
 ?>
 echo "$a大於等於$b";echo "$a小於$b";
 | 
            
              | 3 |   if…elseif…else…控制結構 if(條件一){子句一;
 }elseif(條件二){
 子句二;
 }else{
 子句三;
 }
 | <?php $a = 6;
 $b = 6;
 if($a > $b){
 echo "$a大於等於$b";
 }elseif($a==$b){
 echo "$a等於$b";
 }else{
 echo "$a小於$b";
 }
 ?>
 | 
            
              | 4 |   switch 控制結構 switch($i){case 1:
 子句一;
 break;
 case 2:
 子句二;
 break;
 case 3:
 子句三;
 break;
 default:
 子句四;
 break;
 }
 | <?php $a=80;
 switch(true){
 case $a==100:
 echo $a."滿分";
 break;
 case $a>=85 && $a<100:
 echo $a."分,好成績";
 break;
 case $a>=65 && $a<85:
 echo $a."分,還不錯";
 break;
 case $a>=50 && $a<65:
 echo $a."分,要加油";
 break;
 case default:
 echo $a."分,認真點";
 break;
 }
 於$b";
 }
 ?>
 | 
            
              | 5 |   三元運算子(?:)控制結構 echo 條件?子句一:子句二; 變數==(條件)?子句一:子句二; | <?php $a=80;
 echo ($a>=0)?"及格":"不及格";
 ?>
 | 
            
              |  | 
            
              | Chp4. html→php→html,之間傳遞參數,與轉換網址 | 
            
              | 1 | 表單資料上傳(從html傳遞參數給php)
 表單  method="post"
 取得表單上的欄位值:$_POST["欄位變數"]
 | 1.下載表單的html語法,建立exp04-1.html 2.填入參數:method="post"
 action="exp04-1.php"
 填入三個欄位的命名:
 input type="text" name="t1"
 input type="text" name="t2"
 3.撰寫exp4-18.php<?php
 $a = $_POST["t1"];$b = $_POST["t2"];
 $c = $a+$b;
 echo "總和為:".$c;
 ?> 4.結果範例 | 網頁間傳遞資料的方法有二種:(都必須大寫)
 (1).GET:有上傳資料量的限制,一般傳送大量的資料或者上傳檔案都不會使用GET
 (2).POST:適合用來傳送大量的資料,直接的由伺服器接收。
 
                  
                    |  | 網址顯示資料否? | 可否在網址修改資料? |  
                    | POST | 不會 | 不行 |  
                    | GET | 有 | 可 |  (3).所以用POST傳遞資料比較安全 (4)在PHP接收所傳遞來資料的指令$_POST["欄位變數"]
 $_GET ["欄位變數"]
 | 
            
              | 5 | 註冊會員php讀取html5各種元件
 各種html5元件,只有radio,checkbox要先檢查是否有值,isset($_POST["Radiousa"]),若有值才進行計算,若沒判斷會有錯誤 (從html傳遞參數給php) | 1.下載表單的html語法 ,建立exp04-5.html 2.填入參數:method="post"
 action="exp04-5.php"
 填入三個欄位的命名:
 input type="text" name="a1"
 input type="text" name="a2"
 3.撰寫 exp04-5.php<?php
 $a1 = $_POST["a1"];
 ...
 if(isset($_POST["a10"])){$a10 = $_POST["a10"];
 }else{
 $a10 = false;
 ....
 }
 ?>
 4.結果範例
 | 
            
              | 6 | 單選題考試  php讀取radiobutton單選鈕的name名稱,把value值儲存到該變數 (從html傳遞參數給php) | 1.下載表單的html語法 ,建立exp04-6.html 2.填入參數:method="post"
 action="exp04-6.php"
 填入三個欄位的命名:
 <label><input  type="radio" name="Rusa" id="a1" value="1億人">1億人</label>
 <label><input  type="radio" name="Rusa" id="a2" value="2億人">2億人</label>
 3.撰寫 exp04-6.php<?php
 $Rusa = $_POST["Rusa"];
 $score=0;if($Rusa=="3億人"){
 $score=100;
 }
 ?>
 4.結果範例
 | 
            
              | 7 | 複選購物總金額 php讀取checkbox複選選鈕的多個name名稱,並把value值儲存到該變數
  但php讀取checkbox時要先判斷是否有值,isset($_POST["a1"]),若有值才進行計算,若沒判斷會有錯誤 (從html傳遞參數給php) | 1.下載表單的html語法 ,建立exp04-7.html 2.填入參數:method="post"
 action="exp04-7.php"
 填入三個欄位的命名:
 <input  type="checkbox" name="a1" value="iphoneX手機">iphoneX手機:NT$35,000元
 3.撰寫 exp04-7.php<?php
 $txt="";
 $money=0;
 if(isset($_POST["a1"])){
 $txt .= $_POST["a1"].",";
 $money +=35000;
 }
 if(isset($_POST["a2"])){
 $txt .= $_POST["a2"].",";
 $money +=27000;
 }
 if(isset($_POST["a3"])){
 $txt .= $_POST["a3"].",";
 $money +=30000;
 }
 if(isset($_POST["a4"])){
 $txt .= $_POST["a4"].",";
 $money +=16000;
 }
 ?>
 4.結果範例
 | 
            
              | 9 | 下拉選單衣服樣式  php讀取select的name名稱,數值為value (從html傳遞參數給php) | 1.下載表單的html語法 ,建立exp04-9.html 2.填入參數:method="post"
 action="exp04-9.php"
 填入三個欄位的命名:
 <label class="col-sm-2" for="list01name">選擇服裝款式: </label>
 <select class="col-sm-10" name="list01name" class="form-control">
 <option value="牛仔褲500元">牛仔褲</option>
 <option value="連身裙800元">連身裙</option>
 <option value="襯衫1500元">襯衫</option>
 <option value="西裝5000元">西裝</option>
 <option value="夾克2000元">夾克</option>
 </select>
 3.撰寫 exp04-9.php<?php
 echo "你所購買的衣服樣式為:".$_POST["list01name"]."<br/>size為:".$_POST["list02name"];
 ?>
 4.結果範例
 | 
            
              |  | 
            
              | Chp5. 陣列 | 
            
              | 1 | 三種一維陣列的使用 隨機取得陣列的編號:array_rand() | <?phpecho "//第一種陣列 $a[0] =...";
 $a[0] = "Did you lose weight intentionally?妳有故意在減肥嗎?";
 $a[1] = "I've got missed calls. 我有未接來電耶~";
 $a[2] = "I wonder which shoes to put on. 該穿那雙鞋呢?";
 $a[3] = "I don't have a good appetite these days. 最近都沒什麼胃口";
 $a[4] = "Don't even think about it~ 想都別想啦!!";
 echo "顯示第1句英文:<br/>";echo $a[0]."<br/>";
 echo "顯示所有英文:<br/>";for($i=0;$i<=4;$i++){
 echo $a[$i]."<br/>";
 }
 
 echo "<br/><br/>";
 /////////////////////////////////////////////////////////
 echo "//第二種陣列 $a = array(,,,)";
 $b = array("Did you lose weight intentionally?妳有故意在減肥嗎?",
 "I've got missed calls. 我有未接來電耶~",
 "I wonder which shoes to put on. 該穿那雙鞋呢?",
 "I don't have a good appetite these days. 最近都沒什麼胃口",
 "Don't even think about it~ 想都別想啦!!");
 echo "顯示第2句英文:<br/>";echo $b[1]."<br/>";
 echo "顯示所有英文:<br/>";foreach($b as $v){
 echo "$v<br/>";
 }
 echo "<br/><br/>";
 /////////////////////////////////////////////////////////
 echo "//第三種陣列 $a = array(索引=>值,,,)";
 $c = array(0=>"Did you lose weight intentionally?妳有故意在減肥嗎?",
 1=>"I've got missed calls. 我有未接來電耶~",
 2=>"I wonder which shoes to put on. 該穿那雙鞋呢?",
 3=>"I don't have a good appetite these days. 最近都沒什麼胃口",
 4=>"Don't even think about it~ 想都別想啦!!");
 
 echo "顯示第3句英文:<br/>";
 echo $c[2]."<br/>";
 echo "顯示所有英文:<br/>";print_r($c);
 echo "<br/><br/>";/////////////////////////////////////////////////////////
 echo "//隨機取得陣列的編號:array_rand()<br/>";
 $key = array_rand($c);
 echo($c[$key]);
 ?>
 4.結果範例
 | 
            
              | 2 | 陣列編號可以是中英文 $a['李大同'] =..."  foreach的二種格式foreach($tel as $v){
 ...
 }
 foreach($tel as $i=>$v){...
 }
 | <?php//////////////////////////////////////////////////
 echo "//陣列編號可以是中英文 $a['李大同'] =...";
 $tel["李大同"] = "0912123456";
 $tel["張花花"] = "0956789741";
 $tel["林美美"] = "0985274136";
 $tel["宋妮妮"] = "0945695174";
 $tel["吳盼盼"] = "0995715325";
 echo "顯示第張花花同學電話:<br/>";echo $tel["張花花"]."<br/>";
 echo "顯示所有同學電話:<br/>";foreach($tel as $v){
 echo $v."<br/>";
 }
 echo "<br/><br/>";//////////////////////////////////////////////////
 echo "// foreach第二種格式,foreach(陣列 as 索引編號 =>值){...}";
 $score["李大同"] = 90;
 $score["張花花"] = 85;
 $score["林美美"] = 60;
 $score["宋妮妮"] = 99;
 $score["吳盼盼"] = 75;
 echo "顯示所有資料:<br/>";foreach($tel as $i=>$v){
 echo $i."同學的分數".$v."<br/>";
 }
 ?>  4.結果範例 | 
            
              | 7 | 複選購物總金額 php讀取checkbox複選選鈕的多個name陣列名稱phone[],並把value值儲存到該變數$_POST["phone"]
  但php讀取checkbox時要先判斷是否有值,isset($_POST["a1"]),若有值才進行計算,若沒判斷會有錯誤 (從html傳遞參數給php) | 1.下載表單的html語法 ,建立exp06-7.html 2.填入參數:method="post"
 action="exp06-7.php"
 填入三個欄位的命名:
 <input  type="checkbox" name="phone[]" value="iphoneX手機">iphoneX手機:NT$35,000元
 3.撰寫 exp06-7.php<?php
 if(isset($_POST["phone"])){
 $txt="";
 foreach($_POST["phone"] as $v){
 $txt .= $v."<br/>";
 }
 echo "你所採購的物品為:<br/>$txt";
 ?>
 4.結果範例
 | 
            
              | 8 |  計算各科全班平均成績
 前端網頁用多個陣列stuname[],數學math[],英文english[]  label不是form元素,只能用<input type='hidden' name='stu[0][]' value='宋妮妮'> | 1.下載表單的html語法 ,建立exp06-8.html 2.填入參數:method="post"
 action="exp06-8.php"
 填入三個欄位的命名:
 <label class="col-sm-offset-1 col-sm-3 bg-info text-center">李大同</label>
 <input type="hidden"  name="stuname[]" value="李大同">
 <label class="col-sm-3 bg-danger text-center">
 <input type="text" value="85" size="6"  maxlength="3 class="form-control" name="math[]">
 </label>
 <label class="col-sm-3 bg-success text-center">
 <input type="text" value="65" size="6" maxlength="3 class="form-control" name="english[]">
 3.撰寫 exp06-8.php<?php
 echo "//label不是form元素,只能用<input type='hidden'  name='stuname[]' value='宋妮妮'><br/>";
 $txt="";
 $stuname = $_POST["stuname"];
 foreach($stuname as $v){
 $txt .= $v.",";
 }
 echo "學生姓名:$txt <br/>";
 /////////////////////////////////$txt="";
 $math = $_POST["math"];
 foreach($math as $v){
 $txt .= $v.",";
 }
 echo "數學成績:$txt <br/>";
 /////////////////////////////////$txt="";
 $english = $_POST["english"];
 foreach($english as $v){
 $txt .= $v.",";
 }
 echo "英文成績:$txt <br/>";
 /////////////////////////////////echo "數學平均成績:".array_sum($math)/count($math)."<br/>";
 /////////////////////////////////
 echo "英文平均成績:".array_sum($english)/count($english)."<br/>";
 
 ?>
 4.結果範例
 | 
            
              |  | 
            
              |  |