1、動畫圖檔製作與運用,網頁圖檔簡介 動畫製作 動態HTML效果 製作相片投影片秀,網頁圖檔簡介,3 / 44,網頁圖檔簡介,檔案格式BMPGIF JPGEPNG,4 / 44,網頁圖檔簡介,BMP (Bit-Mapped)壓縮無REL (Run-Length Encoding)REL4REL8優點檔讀檔速度是最快圖形品質最好缺點檔案十分龐大沒有透明格式應用正方型圖片按鈕較小的背景圖,5 / 44,網頁圖檔簡介,GIF (圖形交換格式) 壓縮256色調色盤REL (Run-Length Encoding),256 188KB,32 94KB,4 34KB,全彩 769KB,6 / 44,網頁圖檔簡
2、介,GIF (圖形交換格式) 壓縮256色調色盤REL (Run-Length Encoding)優點有透明及動畫的格式較同規格(256色)的BMP還小缺點顏色流失不適合作會移動的圖形 應用不規則的圖形按鈕色彩簡單的背景圖,bmp,gif,7 / 44,網頁圖檔簡介,JPEG (靜態影像壓縮標準) 壓縮DCT (Discrete Cosine Transform),Q90 58KB,Q50 24KB,Q30 17KB,全彩 769KB,8 / 44,網頁圖檔簡介,JPEG (靜態影像壓縮標準) 壓縮DCT (Discrete Cosine Transform)優點全彩壓縮可自定壓縮比漸進式呈現
3、,9 / 44,網頁圖檔簡介,JPEG (靜態影像壓縮標準) 壓縮DCT (Discrete Cosine Transform)優點全彩壓縮可自定壓縮比漸進式呈現缺點圖形品質可能因壓縮而變差沒有透明格式應用大型背景圖照片,10 / 44,網頁圖檔簡介,PNG壓縮全彩調色盤優點有透明格式較同規格(256色)的BMP還小無失真缺點圖形品質可能因壓縮而變差無動畫格式應用不規則的圖形按鈕色彩簡單的背景圖,11 / 44,網頁圖檔簡介,綜合比較,GIF動畫製作,13 / 44,動畫製作,可以做透空設定 背景可設透明,可以在一個GIF檔內部，包含多個圖形 動態影像,14 / 44,動畫製作,怎麼讓圖片動起
4、來?,GIF動畫製作,16 / 44,LAB 1,特點影像大小一樣.GIF副檔名小變化,製作兩張圖,17 / 44,LAB 1,下載檔案 http:/adm.nuk.edu.tw/chtung/training20070705/lab.zip下載lab.zip打開下載好的檔案 存成背景為透明的.gif檔，命名為將太陽眼睛SIZE調整為高度將太陽的墨鏡位置往上移為做完5&6步驟後，另存新檔，命名為,18 / 44,LAB 1,把兩張圖合起來,變成一張動畫圖,19 / 44,LAB 1,開啟選取動畫精靈 ，設定影像大小為300*300,20 / 44,LAB 1,新增影像，選擇剛剛存好的兩個檔案
5、,21 / 44,LAB 1,按下一步，做畫格期間的設定，將每秒畫格數設定為,22 / 44,LAB 1,按下一步，完成,23 / 44,LAB 1-1,存成.gif檔案,24 / 44,LAB 1,將製做好的GIF動畫檔加入網頁中,動態HTML效果,26 / 44,動態HTML效果,27 / 44,LAB 2,開啟FrontPage2003檔案開新檔案插入圖片從檔案，選擇 ,28 / 44,LAB 2,4. 選取 5. 格式表現方式，出現表示方式視窗,29 / 44,LAB 2,6. 插入交換圖像7. 瀏覽選擇選擇 8. 在滑鼠移出時還原事件打勾確定,實作,利用與做出動態HTML效果,30
6、/ 44,Test-LAB2-2.jpg,Test-LAB2-1.jpg,製作相片投影片秀,32 / 44,LAB 3,開啟PhotoImpact Album10建立新相簿：檔案開新檔案相簿範本一般用途標題確定,33 / 44,LAB 3,6. 跳出插入檔案視窗選擇確定7. 選擇範例檔中的photo資料夾裡的40張圖插入,34 / 44,LAB 3,8. 完成jiaming-lake相簿建立,35 / 44,LAB 3,9. 編輯全選10.選擇右邊選項 ,匯出Web投影片秀,36 / 44,LAB 3,相關設定-輸出,在此選擇投影片產生後的存放路徑選擇儲存位置E:20070705test,按此可開始製作,37 / 44,LAB 3,自動產生的網頁檔及小圖示GIF檔,將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案,原先的圖檔會放在Image資料夾中,38 / 44,LAB 3,自動產生的網頁檔及小圖示GIF檔,將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案,原先的圖檔會放在Image資料夾中,39 / 44,LAB 3,1.自動產生的網頁檔及小圖示GIF檔,將圖檔製作成投影片秀後，可在輸出資料夾內看到所產生的檔案,2.原先的圖檔會放在Image資料夾中,3.執行main.htm可看見成果,40 / 44,LAB 3,可再做細項設定,41 / 44,
