《表格图档的处理》由会员分享，可在线阅读，更多相关《表格图档的处理（25页珍藏版）》请在金锄头文库上搜索。
1、表格、圖檔的處理,主講：林憲民 2007/06/20,課程綱要,一、表格 1-1 認識網頁表格 1-2 設定表格屬性 1-3 設定儲存格屬性 1-4 欄列的調整與增減 1-5 排版用表格,二、圖檔 2-1圖片格式 2-2在網頁中加入背景圖 2-3在網頁中加入圖片 2-4設定圖片屬性 2-5加速圖片顯示小技巧,1-1 認識網頁表格-1, 表格的開始旗標。 和 表格標題旗標，它的預設方式是將標題文字置中。 和 表格的列旗標(Table Row)。 和 表格資料項目的標頭旗標，它的預設方式是將標題文字置中加粗體。 和 表格的資料旗標(Table Data)，它宣告每一小格的內容。 表格的回復旗標。
2、要記得維持旗標成雙成對！,1-1 認識網頁表格-2,BORDER 宣告表格外框的寬度，以點數(pixels)計算。BORDER=3表示外框寬度為3個點的距離，BORDER=0則沒有框線。 CELLSPACING 宣告每一個格子的間距，以點數(pixels)計算。 CELLPADDING 宣告每一個格子的內容與格線的間距，以點數(pixels)計算。 ALIGN宣告水平對齊方式，ALIGN=“CENTER”為向中對齊，另有ALIGN=“LEFT“ 和 ALIGN=“RIGHT“,1-2 設定表格屬性,版面配置：對齊方式(align)、文繞圖、儲存格墊充(cellpadding)、儲存格間距(ce
3、llspacing)、指定寬度 框線：大小、色彩、亮框線、暗框線 背景：色彩、使用背景圖,1-3 設定儲存格屬性,版面配置：水平對齊方式、垂直對齊方式、上下合併(rowspan)、左右合併(colspan) 、指定寬度、儲存格標題、不分行 框線：色彩、亮框線、暗框線 背景：色彩、使用背景圖,1-4 欄列的調整與增減,增加單欄、單列 刪除單欄、單列 增加多欄、多列 刪除多欄、多列,1-5 排版用表格,利用框線 儘量改用CSS進行排版，少用此方式進行排版,2-1 圖片格式,不同的圖像格式有不同的延伸檔名，網際網路(WWW)最常使用的四種圖像格式為： GIF：按鈕、美工圖案、卡通圖案、透明背景及 動
4、畫使用，僅256色 JPEG：相片影像使用，可達1670萬色。 BMP：不建議直接在網頁上使用。 PNG：新格式，支援度尚不足。,2-1-1 GIF,副檔名為.gif，它是 Graphics Interchange Format 的縮寫。GIF由 Compuserve 公司所制定，幾乎是網際網路上最流行的圖像格式。它可以支援動畫格式(Animated GIF)；也可以支援透明格式，(將圖像的部份區域設定為透明，使文字和圖像有更好的融和效果，不致有突兀的白邊)。 GIF的壓縮原理，是把圖檔中連續出現的相同色點，以較短的資料格式（索引色）來取代。因此圖案的顏色變化越少，重複性越高，其壓縮效果就越好
5、。因此一般美工插畫、線條稿，標誌符號這種有大塊相同顏色的圖案，比較適合採用GIF格式。目前通用的GIF格式只支援到8bit色盤，也就是最多256種顏色。,2-1-2 JPEG,副檔名為.jpg 或 .jpeg，它們是 Joint Photographic Equipment Group 的縮寫，原文的中文翻譯為 “聯合圖像設備集團”，這個組織制定 .jpg 格式。 JPEG簡單來說，是使用數學公式來描述圖案的顏色變化，由於公式的精確度是可調整的，因此JPEG具有視需要調整壓縮比的特性，檔案大小與畫質成反比。一張很大的圖檔，如果不計較畫質，可以壓到非常小的體積，相反的，若選擇最好的品質，則可得到
6、與原圖非常接近的畫質。經壓縮後可節省硬碟的空間，也節省圖像檔案上傳或下載的時間，所以它也是網際網路上極受歡迎的圖像格式。,2-1-3 BMP,副檔名為.bmp，它是 bitmap 的縮寫。它將圖像的每一個點的顏色都記錄下來，因此它佔用的檔案空間最大。雖然瀏覽程式支援 .bmp 格式，但是不建議使用。 BMP也是未經壓縮的圖像格式，支援全彩顏色。,2-1-4 PNG,副檔名為.png，它是Portable Network Graphics的縮寫。過去網頁上想要得到無失真的畫質，或是透明背景效果就只能靠GIF，但有256色的限制，加上有專利上的問題(GIF格式當初是一家私人公司所開發的)，所以便有
7、PNG格式的誕生。 PNG為無失真壓縮，沒有256色的限制，並支援256階的透明效果，靠這三點就可完全取代GIF，唯一美中不足的是不支援動畫效果。這個新的格式不是所有的瀏覽器及繪圖軟體都支援，尚待時間推廣。,2-1-5 GIF、JPEG比較,2-1-5 GIF、JPEG比較照片,註：原圖尺寸為170x170，未壓縮時檔案大小為88K，26328色。,2-1-5 GIF、JPEG比較3美工圖,註：原圖尺寸為170x170，未壓縮時檔案大小為88K，6097色。,2-1-5 GIF、JPEG比較4文字,註：原圖尺寸為170x170，未壓縮時檔案大小為88K，513色。,2-2在網頁中加入背景圖,2
8、-3在網頁中加入圖片-1,2-3在網頁中加入圖片-2,IMG 的意義為 IMaGe，中文翻譯為“圖像、圖形、圖畫“。它告訴瀏覽程式在此旗標處置入圖像。 SRC 的意義為 SouRCe，中文翻譯為 “來源“。SRC 是一個屬性控制，它告訴瀏覽程式至何處傳呼該圖像檔案。 Sample.jpg是圖像檔名。注意：此例的延伸檔名是 .jpg。 是單身旗標，不需要回復旗標。,2-4設定圖片屬性,替代顯示文字(alt) 設定寬(width)、高(height) 加入超連結：,2-5 加速圖片顯示小技巧-1,2-5-1 降低圖檔大小： 選擇適當的圖檔格式。 考慮裁切影像，在不影響圖檔主旨的前提下，裁掉一些無關
9、緊要的部分。 縮減圖像尺寸。 試著將圖檔壓縮至可接受的範圍。,2-5 加速圖片顯示小技巧-2,2-5-2 讓人感覺影像下載快速-1： 設定圖片的長寬值：瀏覽器在下載網頁時可事先預留該圖檔的位置，無須等到全部都下載之後才出現。如此一來，文字部分將可加快出現，網友即使還沒看到圖片，也可先讀取文字部分。 製作縮圖預覽：大圖顯示的選擇權交給網友。 ,2-5 加速圖片顯示小技巧-2,2-5-2 讓人感覺影像下載快速-2： 記得設定alt圖片說明文字：這雖然不會加快圖檔下載速度，但卻是個不錯的作法，可讓網友預期圖檔內容，同時若有網友是將圖檔關閉的話，也可知道該圖內容。 重複利用圖檔：盡量使用諸如背景圖與導覽按鈕等圖檔，而不要每一頁都放個不同的圖檔，這樣會有助於整個網站外觀的一致性，同時在第一次下載後，圖檔顯示速度會加快。,Q & A,
