leewn 發表
認識網路圖檔
| 您知不知道網路圖檔的這些事情？ |
|
01.甚麼是網際網路上最美的地方？ A：圖片。 02.網際網路所用的圖檔有那些？ A：GIF、JPEG、PNG。 03.網際網路圖片種類有那些？ A：Banner(標題)、Icon(圖示)、Picture(圖片)、Buttom(按鈕)、BackPicture(背景圖檔)、LinPicture(線段圖檔)、AimPicture(動態圖檔)、.............。 04.網際網路圖片解析度要多少？ A：72像素就足夠用。 05.常用的網際網路圖片工具有那些？ A：影像處理軟體：PhotImpact、PhotoShop(*)、FireWork(*)、CorelDraw(*) 動畫及3D軟體：GIF Animator、Flash(*)、Director(*)、Cool 3D、3D Studio(*)、Poser 3D(*) 影像地圖編輯軟體：PhotImpact、Mapedit、FontPage 初學者比較適使用PhotImpact、GIF Animator；打(*)者，屬比較專業性軟體。 06.網際網路圖片要如何產生？ A：掃瞄、數位攝影、繪圖、光碟片、免費資源、線上合成、找人幫忙...。 07.網際網路圖檔還可以作何用途？ A：用表格來作圖框、圖片周邊空點、超鏈結、高檔圖片預視..............。 08.網際網路圖檔那裡找？ A：您只要到搜索引擎輸入：圖片、圖檔、icon、banner...等等，可以找到很多。 09.我是初學者，該如何開始學習？ A：強烈建議您：請立即加入本報特別針對，首次接觸網頁網友而設的教學會員專案。 10.網際網路實用圖檔您有嗎？ A：我的【教學CD片】裡面，已為網友蒐集了上百Mb專屬網頁用圖庫，您有興趣嗎？ |
| 認識影像類型 |
|
黑白：影像中的每一點，又稱為像素(pixel)，只佔1 bit(0或1)。 灰階：影像中包含深淺不同的灰色，每個像素佔8 bits，所以每點有 28=256 種變化。 16色：影像呈現，最多用到 16 種顏色，每個像素須佔4 bits，方能有 24=16 種變化。 256色：影像呈現，最多用到 256 種顏色，每個像素須佔8 bits，方能有 28=256 種變化。 全彩：影像呈現，最多用到 1677 萬種顏色，每個像素須佔24 bits，方能有 224 = 1677 萬種變化。 |
| 常見的影像檔案 |
|
BMP：未經壓縮的影像檔格式。 JPG：破壞性壓縮，用於網路傳輸。 GIF：非破壞性壓縮，用於網路傳輸。 TIF：標籤影像檔，用於排版、印刷。 PSD：PhotoShop檔案格式。 UFO：PhotoImpact檔案格式。 |
| 認識網路圖檔GIF |
|
01.GIF 是 Graphics Interchange Format 的縮寫，翻譯為圖形交換格式。 02.是由 CompuServe 機構所發展出來的位元映射式 (bitmapped) 影像檔案格式。 03.一個 GIF 檔案包含了六個位元組的檔案標記，目前常見的有『87a』與『89a』兩種。 04.優點：可作動畫、透明圖。 05.缺點：色彩數少、易失真。 06.副檔名：*.gif；注意：請用英文小寫。 |
| 認識網路圖檔JPG |
|
01.JPEG 是 Joint Photographic Experts Group 的縮寫，翻譯為聯合圖像專業團體。 02.是利用離散餘弦轉換壓縮技術來儲存靜態影像的檔案格式。 03.優點：色彩豐富、畫質優美。 04.缺點：不適何文字等圖形運用、檔案過大。 05.副檔名：*.jpg OR jpeg；注意：請用英文小寫。 |
| 認識網路圖檔PNG |
|
01.PNG是 Portable Network Graphics 的縮寫，翻譯為可攜式網路圖形。 02.PNG是個全真圖像格式(true image format)，擁有比GIF更佳的壓縮品質又不會失真。 03.PNG是在 1996由PNG向W3C (World Wide Web Consortium) 提出並得到推薦認可的多媒體圖形格式。 04.優點：集GIF與JPEG優點於一身。 05.缺點：目前不是所有瀏覽器都能支持此格式。 06.副檔名：*png；注意：請用英文小寫。 |
| GIF、JPEG、PNG三者差異比較 | |||||||
| 檔名 | 尺寸 | 色採 | 位元 | 壓縮方式 | 型態 | 傳輸方式 | 適用範圍 |
| GIF | 較大 | 256 | 8 bits | 非破壞性 | 點陣圖 | 交錯式 | 動畫、圖示、透明圖 |
| JPEG | 較小 | 16Mill | 24 bits | 破壞 | 向量圖 | 漸進式 | 照片 |
| PNG | 兩者均宜 | 兩者均宜 | 8-46 bits | 無損耗 | 可攜式網路圖形 | 交錯式 | 動畫、照片、透明圖 |
| 看了這個比較表後，您是否感覺到清楚了很多？ | |||||||
| 認識繪圖軟體 |
|
01.點陣軟體： 所謂【點陣軟體】，乃是將影像以一顆一顆的像素【Pixel】所繪製出來的，放大後的影像即以九宮格的方式所呈現。其檔案容量較向量軟體所繪製出來的影像大，例如：PhotoImpact、Photoshop等屬之。 補充說明：圖形儲存時，以點為紀錄單位。因此，在圖形放大或旋轉後容易失真。在圖形放大後，其邊緣會產生鋸齒狀。 02.向量軟體： 利用數學公式計算出來的影像。即使放大影像，亦不產生如鋸齒般的失真情形，而且檔案容量小，例如：CorelDRAW、Illustrator等屬之。 補充說明：以繪圖元素為紀錄單位的圖形。其中包括點、直線、連續直線、圓、矩形等圖形。放大或旋轉後，會重新計算新的位置、大小、方向等資料。因此，沒有失真的問題，也不會因圖形所佔的空間變大，而須較多的記憶體。 03.如放大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語法蒐整及網頁各式模組。 圖檔的運用與變化也很多，建議您可到網路圖片展現方式探討參考看看。 |
| 如何擷取網路上圖檔及應用說明 |
|
網路上的背景、圖片、音樂檔如何取得？如何存放？如何運用？這些您學會了嗎？ ※您有辦法將這個《網上多功能計算機》擷取回自己電腦中始用嗎？ 我特以Win9x 的 Internet Explorer 5.0中文版及Netscape 5.0 中文版為例： 初學習或不懂的網友，請進來看我吧！ |
|
結論 01.使用底圖不宜過深並應考量一致性，以利文件(字)安排及整體性。 02.純文字展示時，應特別注意背景BGCOLOR《背景圖BACKGROUND》及文字FONT之顏色搭配。 03.每一頁切勿放置過多圖檔，全部請控制於60k以下，每一圖檔亦請控制於15k左右。 04.善用ALT="文字說明"，以利那些耐候不住或關閉圖片功能之網友使用。 05.加了Height與Width這兩個屬性，將會縮短瀏覽器排版的時間。 06.善用路徑(目錄)觀念，妥為分類(如pic,image,gif...)，以利以後網頁維護。 07.檔案大小要控制好，icon/1kb、banner/15kb、picture/30kb，必要時分割。 08.學會如何用【ACDSee】看圖軟體查看圖片種類、尺寸等資訊。 09.圖片的運用很重要，網站內容除外，就是整體圖片與色彩的搭配組合。 10.我蒐集很多國內外圖庫網站，供您參用。 ※參加本站教學會員http://www.webpage.idv.tw/cd/memb.htm，一次徹底學會HTML語法。 |