認識網路圖檔

初學者的園地【06】

第六篇
認識網路圖檔

您知不知道網路圖檔的這些事情？

Q：甚麼是網際網路上最美的地方？
A：圖片。
Q：網際網路所用的圖檔有那些？
A：GIF、JPEG、PNG。
Q：網際網路圖片種類有那些？
A：Banner (標題)、Icon (圖示)、Picture (圖片)、Buttom (按鈕)、BackPicture (背景圖檔)、LinPicture (線段圖檔)、AimPicture (動態圖檔)、.............。
Q：網際網路圖片解析度要多少？
A：72 像素就足夠用。
Q：常用的網際網路圖片工具有那些？
A：影像處理軟體：PhotImpact、PhotoShop(*)、FireWork(*)、CorelDraw(*)
動畫及 3D 軟體：GIF Animator、Flash(*)、Director(*)、Cool 3D、3D Studio(*)、Poser 3D(*)
影像地圖編輯軟體：PhotImpact、Mapedit、FontPage
初學者比較適合使用 PhotImpact、GIF Animator；打(*)者，屬比較專業性軟體。
Q：網際網路圖片要如何產生？
A：掃瞄、數位攝影、繪圖、光碟片、免費資源、線上合成、找人幫忙...。
Q：網際網路圖檔還可以作何用途？
A：用表格來作圖框、圖片周邊空點、超鏈結、高檔圖片預視..............。
Q：網際網路圖檔那裡找？
A：您只要到搜索引擎輸入：圖片、圖檔、icon、banner...等等，可以找到很多。
Q：我是初學者，該如何開始學習？
A：強烈建議您：請立即加入本報特別針對，首次接觸網頁網友而設的教學會員專案。
Q：網際網路實用圖檔您有嗎？
A：我的【教學 CD 片】裡面，已為網友蒐集了上百 Mb 專屬網頁用圖庫，您有興趣嗎？

認識影像類型

黑白：影像中的每一點，又稱為像素 (pixel)，只佔 1 bit ( 0 或 1)。
灰階：影像中包含深淺不同的灰色，每個像素佔 8 bits，所以每點有 2⁸=256 種變化。
16色：影像呈現，最多用到 16 種顏色，每個像素須佔 4 bits，方能有 2⁴=16 種變化。
256色：影像呈現，最多用到 256 種顏色，每個像素須佔 8 bits，方能有 2⁸=256 種變化。
全彩：影像呈現，最多用到 1677 萬種顏色，每個像素須佔 24 bits，方能有 2²⁴ = 1677 萬種變化。

常見的影像檔案

BMP：未經壓縮的影像檔格式。
JPG：破壞性壓縮，用於網路傳輸。
GIF：非破壞性壓縮，用於網路傳輸。
TIF：標籤影像檔，用於排版、印刷。
PSD：PhotoShop 檔案格式。
UFO：PhotoImpact 檔案格式。

認識網路圖檔 GIF

GIF 是 Graphics Interchange Format 的縮寫，翻譯為圖形交換格式。
是由 CompuServe 機構所發展出來的位元映射式 (bitmapped) 影像檔案格式。
一個 GIF 檔案包含了六個位元組的檔案標記，目前常見的有『87a』與『89a』兩種。
優點：可作動畫、透明圖。
缺點：色彩數少、易失真。
副檔名：*.gif；注意：請用英文小寫。

認識網路圖檔 JPG

JPEG 是 Joint Photographic Experts Group 的縮寫，翻譯為聯合圖像專業團體。
是利用離散餘弦轉換壓縮技術來儲存靜態影像的檔案格式。
優點：色彩豐富、畫質優美。
缺點：不適何文字等圖形運用、檔案過大。
副檔名：*.jpg OR jpeg；注意：請用英文小寫。

認識網路圖檔 PNG

PNG 是 Portable Network Graphics 的縮寫，翻譯為可攜式網路圖形。
PNG 是個全真圖像格式(true image format)，擁有比 GIF 更佳的壓縮品質又不會失真。
PNG 是在 1996 由 PNG 向 W3C (World Wide Web Consortium) 提出並得到推薦認可的多媒體圖形格式。
優點：集 GIF 與 JPEG 優點於一身。
缺點：目前不是所有瀏覽器都能支持此格式。
副檔名：*png；注意：請用英文小寫。

GIF、JPEG、PNG 三者差異比較
檔名	尺寸	色採	位元	壓縮方式	型態	傳輸方式	適用範圍
GIF	較大	256	8 bits	非破壞性	點陣圖	交錯式	動畫、圖示、透明圖
JPEG	較小	16Mill	24 bits	破壞	向量圖	漸進式	照片
PNG	兩者均宜	兩者均宜	8-46 bits	無損耗	可攜式網路圖形	交錯式	動畫、照片、透明圖
看了這個比較表後，您是否感覺到清楚了很多？

認識繪圖軟體

一、點陣軟體：
所謂【點陣軟體】，乃是將影像以一顆一顆的像素【Pixel】所繪製出來的，放大後的影像即以九宮格的方式所呈現。其檔案容量較向量軟體所繪製出來的影像大，例如：PhotoImpact、Photoshop 等屬之。
補充說明：圖形儲存時，以點為紀錄單位。因此，在圖形放大或旋轉後容易失真。在圖形放大後，其邊緣會產生鋸齒狀。
二、向量軟體：
利用數學公式計算出來的影像。即使放大影像，亦不產生如鋸齒般的失真情形，而且檔案容量小，例如：CorelDRAW、Illustrator 等屬之。
補充說明：以繪圖元素為紀錄單位的圖形。其中包括點、直線、連續直線、圓、矩形等圖形。放大或旋轉後，會重新計算新的位置、大小、方向等資料。因此，沒有失真的問題，也不會因圖形所佔的空間變大，而須較多的記憶體。
如放大 1600％影像圖示之比較：點陣軟體 V.S 向量軟體 (您只要來回移動滑鼠便可)。

常用 HTML 圖檔語法

背景圖：<body background="圖案名稱.附檔名">。
圖檔：<img src="路徑\圖案名稱.附檔名">。
圖檔相關屬性：
alt="給圖片的註解文字"、Border="N"、Height="pixel"、Width="pixel"、
align="(top/middle/bottom/left/right)"、Hspace="pixel"、Vspace="pixel"。
影像地圖：詳見本報編輯工具解說： MapEdit 索引地圖編輯器。
如果您對【圖檔相關屬性】不熟悉者，請參考本報初學者園地：
實用 HTML 語法蒐整及網頁各式模組。
圖檔的運用與變化也很多，建議您可到網路圖片展現方式探討參考看看。

注意事項：
使用底圖不宜過深並應考量一致性，以利文件(字)安排及整體性。
純文字展示時，應特別注意背景 BGCOLOR《背景圖 BACKGROUND》及文字 FONT 之顏色搭配。
每一頁切勿放置過多圖檔，全部請控制於 60 kb 以下，每一圖檔亦請控制於 15 kb 左右。
善用 ALT="文字說明"，以利那些耐候不住或關閉圖片功能之網友使用。
加了 Height 與 Width 這兩個屬性，將會縮短瀏覽器排版的時間。
善用路徑(目錄)觀念，妥為分類(如 pic,image,gif...)，以利以後網頁維護。
檔案大小要控制好，icon/1kb、banner/15kb、picture/30kb，必要時分割。
學會如何用【ACDSee】看圖軟體查看圖片種類、尺寸等資訊。
圖片的運用很重要，網站內容除外，就是整體圖片與色彩的搭配組合。

如何完整取得所有資料：
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您學會 HTML 語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。