網頁圖檔簡介 動畫製作 動態HTML效果 網頁上傳

Presentation on theme: "網頁圖檔簡介 動畫製作 動態HTML效果 網頁上傳"— Presentation transcript:

1 網頁圖檔簡介 動畫製作 動態HTML效果 網頁上傳
動畫圖檔製作、網頁上傳 網頁圖檔簡介 動畫製作 動態HTML效果 網頁上傳 講師： 陳鍶琦 董建弘 日期： 95年6月26日

2 網頁圖檔簡介

3 網頁圖檔簡介 檔案格式 BMP GIF JPGE PNG

4 網頁圖檔簡介 BMP (Bit-Mapped) 壓縮 優點 缺點 應用 無 REL (Run-Length Encoding)
檔讀檔速度是最快 圖形品質最好 缺點 檔案十分龐大 沒有透明格式 應用 正方型圖片 按鈕 較小的背景圖

5 網頁圖檔簡介 GIF (圖形交換格式) 壓縮 256色調色盤 REL (Run-Length Encoding) 全彩 769KB

6 網頁圖檔簡介 GIF (圖形交換格式) 壓縮 優點 缺點 應用 256色調色盤 REL (Run-Length Encoding)
有透明及動畫的格式 較同規格(256色)的BMP還小 缺點 顏色流失 不適合作「會移動的圖形」 應用 不規則的圖形 按鈕 色彩簡單的背景圖 bmp gif

7 網頁圖檔簡介 JPEG (靜態影像壓縮標準) 壓縮 DCT (Discrete Cosine Transform) 全彩 769KB
Q90 58KB Q50 24KB Q30 17KB

8 網頁圖檔簡介 JPEG (靜態影像壓縮標準) 壓縮 優點 DCT (Discrete Cosine Transform) 全彩壓縮
可自定壓縮比 漸進式呈現

9 網頁圖檔簡介 JPEG (靜態影像壓縮標準) 壓縮 優點 缺點 應用 DCT (Discrete Cosine Transform)
全彩壓縮 可自定壓縮比 漸進式呈現 缺點 圖形品質可能因壓縮而變差 沒有透明格式 應用 大型背景圖 照片

10 網頁圖檔簡介 PNG 壓縮 優點 缺點 應用 全彩調色盤 有透明格式 較同規格(256色)的BMP還小 無失真 圖形品質可能因壓縮而變差
無動畫格式 應用 不規則的圖形 按鈕 色彩簡單的背景圖

11 網頁圖檔簡介 綜合比較 GIF JPEG BMP GIF JPG PNG 不失真 透明 256色圖形 全彩圖形 動畫 大型圖檔 瀏覽器

12 GIF動畫製作

13 動畫製作 可以做透空設定 ─背景可設透明 可以在一個GIF檔內部，包含多個圖形 ─動態影像

14 動畫製作 怎麼讓圖片動起來?

15 GIF動畫製作 LAB 1-1: 製作動畫 LAB 1-2: 修改動畫

16 LAB 1-1 製作兩張圖 特點 影像大小一樣 .GIF副檔名 小變化

17 LAB 1-1 下載<SUN.ufo>檔案 http://myweb.nuk.edu.tw/~guest/ 下載lab.zip
進入『教育訓練』資料夾 進入『動畫圖檔製作&網頁上傳』資料夾 下載lab.zip 打開下載好的<SUN.ufo>檔案 存成背景為透明的.gif檔，命名為<SUN1.gif> 將太陽眼睛SIZE調整為高度<10> 將太陽的墨鏡位置往上移為<110> 做完5&6步驟後，另存新檔，命名為<SUN2.gif>

18 LAB 1-1 把兩張圖合起來 變成一張動畫圖

19 LAB 1-1 開啟 選取動畫精靈 ，設定影像大小為300*300

20 LAB 1-1 新增影像，選擇剛剛存好的兩個檔案 <SUN1.gif> <SUN2.gif>

21 LAB 1-1 按下一步，做畫格期間的設定，將每秒畫格數設定為<2>

22 LAB 1-1 按下一步，完成

23 LAB 1-1 存成.gif檔案

24 LAB 1-1 將製做好的GIF動畫檔加入網頁中

25 LAB 1-2 修改GIF動畫

26 LAB 1-2 開啟舊檔檔案

27 LAB 1-2 選擇LAB1-2-1.gif檔案

28 LAB 1-2 在『畫格1』加入文字『Ya~』 3 2 1

29 LAB 1-2 在『畫格7』加入文字『Ya~』

30 LAB 1-2 存成.gif檔案

31 LAB 1-2 將製做好的GIF動畫檔加入網頁中

32 動態HTML效果

33 動態HTML效果

34 動態HTML效果 img OnMouseOver OnMouseOut src: lowsrc: imgRolln: src:
name="SwapImg“ src="images/lab01-1.gif“ lowsrc="images/lab01-2.gif" OnMouseOver document['SwapImg'].imgRolln=document['SwapImg'].src document['SwapImg'].src=document['SwapImg'].lowsrc;" OnMouseOut document['SwapImg'].src=document['SwapImg'].imgRolln" img OnMouseOver OnMouseOut src: lowsrc: imgRolln: src: lowsrc: imgRolln: src: lowsrc: imgRolln:

35 LAB 2 用Mircosoft FrontPage開啟lab.htm

36 LAB 2 動態HTML效果 2 1

37 LAB 2 設定動態HTML效果 選擇事件 套用交換圖片 選擇圖片

38 網頁上傳

39 網頁上傳 利用filezilla上傳 下載<filezilla_2_2_14b_setup.exe>

40 網頁上傳 設定上傳站台 3 2 為新站台命名 4 5 1 6

41 網頁上傳 成功連線畫面

42 網頁上傳 2 1 注意事項 請以英文為檔案命名 若為中文檔案，請做Force設定 站台管理員 進階設定
Use UTF8 on server if available Force 確定 2 1

43 參考資料 JPEG Images & their applications on watermarking 影像數位化及處理
吳大鈞 影像數位化及處理 林景瑞 PhotoImpact 8 使用手冊 友立資訊 洋蔥酷樂部

44