|
|
介紹各種多媒體表現方式:
【文字媒體、影像媒體、音訊媒體、視訊媒體、媒體專案設計、動畫媒體、互動多媒體】 |
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.祝福大家:<?php
echo "新年快樂,恭喜發財。";
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); //負負得正,變成true
var_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() |
<?php
echo "//第一種陣列 $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.結果範例 |
|
|