表格、圖檔的處理.pptVIP

表格、圖檔的處理 主講：林憲民 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 表格的開始旗標。 CAPTION 和 /CAPTION 表格標題旗標，它的預設方式是將標題文字置中。 TR 和 /TR 表格的列旗標(Table Row)。 TH 和 /TH 表格資料項目的標頭旗標，它的預設方式是將標題文字置中加粗體。 TD 和 /TD 表格的資料旗標(Table Data)，它宣告每一小格的內容。 /TABLE 表格的回復旗標。 要記得維持旗標「成雙成對」！ 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)、儲存格間距(cellspacing)、指定寬度 框線：大小、色彩、亮框線、暗框線 背景：色彩、使用背景圖 1-3 設定儲存格屬性 版面配置：水平對齊方式、垂直對齊方式、上下合併(rowspan)、左右合併(colspan) 、指定寬度、儲存格標題、不分行 框線：色彩、亮框線、暗框線 背景：色彩、使用背景圖 1-4 欄列的調整與增減 增加單欄、單列 刪除單欄、單列 增加多欄、多列 刪除多欄、多列 1-5 排版用表格 利用框線table border=“0” 儘量改用CSS進行排版，少用此方式進行排版 2-1 圖片格式 不同的圖像格式有不同的延伸檔名，網際網路(WWW)最常使用的四種圖像格式為： GIF：按鈕、美工圖案、卡通圖案、透明背景及　　　動畫使用，僅256色 JPEG：相片影像使用，可達1670萬色。 BMP：不建議直接在網頁上使用。 PNG：新格式，支援度尚不足。 2-1-1 GIF 副檔名為.gif，它是 Graphics Interchange Format 的縮寫。GIF由 Compuserve 公司所制定，幾乎是網際網路上最流行的圖像格式。它可以支援動畫格式(Animated GIF)；也可以支援透明格式，(將圖像的部份區域設定為透明，使文字和圖像有更好的融和效果，不致有突兀的白邊)。 GIF的壓縮原理，是把圖檔中連續出現的相同色點，以較短的資料格式（索引色）來取代。因此圖案的顏色變化越少，重複性越高，其壓縮效果就越好。因此一般美工插畫、線條稿，標誌符號這種有大塊相同顏色的圖案，比較適合採用GIF格式。目前通用的GIF格式只支援到8bit色盤，也就是最多256種顏色。 2-1-2 JPEG 副檔名為.jpg 或 .jpeg，它們是 Joint Photographic Equipment Group 的縮寫，原文的中文翻譯為 “聯合圖像設備集團”，這個組織制定 .jpg 格式。 JPEG簡單來說，是使用數學公式來描述圖案的顏色變化，由於公式的精確度是可調整的，因此JPEG具有視需要調整壓縮比的特性，檔案大小與畫質成反比。一張很大的圖檔，如果不計較畫質，可以壓到非常小的體積，相反的，若選擇最好的品質，則可得到與原圖非常接近的畫質。經壓縮後可節省硬碟的空間，也節省圖像檔案上傳或下載的時間，所以它也是網際網路上極受歡迎的圖像格式。 2-1-3 BMP 副檔名為.bmp，它是 bitmap 的縮寫。它將圖像的每一個點的顏色都記錄下來，因此它佔用的檔案空間最大。雖然瀏覽程式支援 .bmp 格式，但是不建議使用。 BMP也是未經壓縮的圖像格式，支援全彩顏色。 2-1-4 PNG 副檔名為.png，它是Portable Network Graphics的縮寫。過去網頁上想要得到無失真的畫質，或是透明背景效果就只能靠GIF，但有256色的限制，加上有專利上的問題(GIF格式當初是一家私人公司所開發的)，所以便有PNG格式的誕生。 PNG為無失真壓縮，沒有256色的限制，並支援256階的透明效果，靠這三點就可完全取代GIF，唯一美中不足的是不支援動畫效果。這個新的格式不是所有的瀏覽器及繪圖軟體都支援，尚待時間推廣。 2-1-5 GIF、J