表格圖檔的處理講課稿

1、表格圖檔的處理1-1 認(rèn)識(shí)網(wǎng)頁(yè)表格-1 表格的開始旗標(biāo)。 和 表格標(biāo)題旗標(biāo)，它的預(yù)設(shè)方式是將標(biāo)題文字置中。 和 表格的列旗標(biāo)(T Table R Row)。 和 表格資料項(xiàng)目的標(biāo)頭旗標(biāo)，它的預(yù)設(shè)方式是將標(biāo)題文字置中加粗體。 和 表格的資料旗標(biāo)(T Table D Data)，它宣告每一小格的內(nèi)容。 表格的回復(fù)旗標(biāo)。 要記得維持旗標(biāo)成雙成對(duì)成雙成對(duì)！ 1-1 認(rèn)識(shí)網(wǎng)頁(yè)表格-2BORDERBORDER 宣告表格外框的寬度，以點(diǎn)數(shù)(pixels)計(jì)算。BORDER=3表示外框?qū)挾葹?個(gè)點(diǎn)的距離，BORDER=0則沒有框線。 CELLSPACINGCELLSPACING 宣告每一個(gè)格子的間距，以點(diǎn)數(shù)(

2、pixels)計(jì)算。CELLPADDINGCELLPADDING 宣告每一個(gè)格子的內(nèi)容與格線的間距，以點(diǎn)數(shù)(pixels)計(jì)算。ALIGNALIGN宣告水平對(duì)齊方式，ALIGN=“CENTER”為向中對(duì)齊，另有ALIGN=LEFT 和 ALIGN=RIGHT1-2 設(shè)定表格屬性版面配置：對(duì)齊方式(align)、文繞圖、儲(chǔ)存格墊充(cellpadding)、儲(chǔ)存格間距(cellspacing)、指定寬度框線：大小、色彩、亮框線、暗框線背景：色彩、使用背景圖1-3 設(shè)定儲(chǔ)存格屬性版面配置：水平對(duì)齊方式、垂直對(duì)齊方式、上下合併(rowspan)、左右合併(colspan) 、指定寬度、儲(chǔ)存格標(biāo)題、不

3、分行框線：色彩、亮框線、暗框線背景：色彩、使用背景圖1-4 欄列的調(diào)整與增減增加單欄、單列刪除單欄、單列增加多欄、多列刪除多欄、多列1-5 排版用表格利用框線儘量改用CSS進(jìn)行排版，少用此方式進(jìn)行排版2-1 圖片格式不同的圖像格式有不同的延伸檔名，網(wǎng)際網(wǎng)路(WWW)最常使用的四種圖像格式為：GIFGIF：按鈕、美工圖案、卡通圖案、透明背景及動(dòng)畫使用，僅256色JPEGJPEG：相片影像使用，可達(dá)1670萬色。BMPBMP：不建議直接在網(wǎng)頁(yè)上使用。PNGPNG：新格式，支援度尚不足。2-1-1 GIF副檔名為.gif.gif，它是 G Graphics I Interchange F Forma

4、t 的縮寫。GIF由 Compuserve 公司所制定，幾乎是網(wǎng)際網(wǎng)路上最流行的圖像格式。它可以支援動(dòng)畫格式(Animated GIF)；也可以支援透明格式，(將圖像的部份區(qū)域設(shè)定為透明，使文字和圖像有更好的融和效果，不致有突兀的白邊)。GIF的壓縮原理，是把圖檔中連續(xù)出現(xiàn)的相同色點(diǎn)，以較短的資料格式（索引色）來取代。因此圖案的顏色變化越少，重複性越高，其壓縮效果就越好。因此一般美工插畫、線條稿，標(biāo)誌符號(hào)這種有大塊相同顏色的圖案，比較適合採(cǎi)用GIF格式。目前通用的GIF格式只支援到8bit色盤，也就是最多256種顏色。2-1-2 JPEG副檔名為.jpg.jpg 或 .jpeg.jpeg，它們

5、是 J Joint P Photographic E Equipment G Group 的縮寫，原文的中文翻譯為 “聯(lián)合圖像設(shè)備集團(tuán)”，這個(gè)組織制定 .jpg 格式。JPEG簡(jiǎn)單來說，是使用數(shù)學(xué)公式來描述圖案的顏色變化，由於公式的精確度是可調(diào)整的，因此JPEG具有視需要調(diào)整壓縮比的特性，檔案大小與畫質(zhì)成反比。一張很大的圖檔，如果不計(jì)較畫質(zhì)，可以壓到非常小的體積，相反的，若選擇最好的品質(zhì)，則可得到與原圖非常接近的畫質(zhì)。經(jīng)壓縮後可節(jié)省硬碟的空間，也節(jié)省圖像檔案上傳或下載的時(shí)間，所以它也是網(wǎng)際網(wǎng)路上極受歡迎的圖像格式。 2-1-3 BMP副檔名為.bmp.bmp，它是 b bitm map p 的

6、縮寫。它將圖像的每一個(gè)點(diǎn)的顏色都記錄下來，因此它佔(zhàn)用的檔案空間最大。雖然瀏覽程式支援 .bmp 格式，但是不建議使用。BMP也是未經(jīng)壓縮的圖像格式，支援全彩顏色。2-1-4 PNG副檔名為.png.png，它是Portable Network Graphics的縮寫。過去網(wǎng)頁(yè)上想要得到無失真的畫質(zhì)，或是透明背景效果就只能靠GIF，但有256色的限制，加上有專利上的問題(GIF格式當(dāng)初是一家私人公司所開發(fā)的)，所以便有PNG格式的誕生。PNG為無失真壓縮，沒有256色的限制，並支援256階的透明效果，靠這三點(diǎn)就可完全取代GIF，唯一美中不足的是不支援動(dòng)畫效果。這個(gè)新的格式不是所有的瀏覽器及繪圖軟

7、體都支援，尚待時(shí)間推廣。2-1-5 GIF、JPEG比較GIFJPEG壓縮比例設(shè)定利用選擇色盤方式調(diào)整可自行設(shè)定不同壓縮比率最多支援的顏色256色全彩(16百萬色)漸漸顯現(xiàn)功能GIF89a有無背景透明功能GIF89a有無動(dòng)畫GIF89a有無2-1-5 GIF、JPEG比較照片GIF 34色10KGIF 9色5KJPEG 83% 10kJPEG 36% 5k註：原圖尺寸為170 x170，未壓縮時(shí)檔案大小為88K，26328色。2-1-5 GIF、JPEG比較3美工圖GIF 117色8KGIF 9色4KJPEG 88% 10kJPEG 37% 5k註：原圖尺寸為170 x170，未壓縮時(shí)檔案大小

8、為88K，6097色。2-1-5 GIF、JPEG比較4文字GIF 128色7KGIF 16色4KJPEG 70% 7kJPEG 12% 4k註：原圖尺寸為170 x170，未壓縮時(shí)檔案大小為88K，513色。2-2在網(wǎng)頁(yè)中加入背景圖2-3在網(wǎng)頁(yè)中加入圖片-12-3在網(wǎng)頁(yè)中加入圖片-2IMGIMG 的意義為 IMIMaG Ge，中文翻譯為圖像、圖形、圖畫。它告訴瀏覽程式在此旗標(biāo)處置入圖像。 SRCSRC 的意義為 S SouRCRCe，中文翻譯為 來源。SRCSRC 是一個(gè)屬性控制，它告訴瀏覽程式至何處傳呼該圖像檔案。 Sample.jpg是圖像檔名。注意：此例的延伸檔名是 .jpg.jpg。

9、 是單身旗標(biāo)，不需要回復(fù)旗標(biāo)。2-4設(shè)定圖片屬性替代顯示文字(alt)設(shè)定寬(width)、高(height)加入超連結(jié)：2-5 加速圖片顯示小技巧-12-5-1 降低圖檔大?。哼x擇適當(dāng)?shù)膱D檔格式?？紤]裁切影像，在不影響圖檔主旨的前提下，裁掉一些無關(guān)緊要的部分?？s減圖像尺寸。試著將圖檔壓縮至可接受的範(fàn)圍。2-5 加速圖片顯示小技巧-22-5-2 讓人感覺影像下載快速-1：設(shè)定圖片的長(zhǎng)寬值：瀏覽器在下載網(wǎng)頁(yè)時(shí)可事先預(yù)留該圖檔的位置，無須等到全部都下載之後才出現(xiàn)。如此一來，文字部分將可加快出現(xiàn)，網(wǎng)友即使還沒看到圖片，也可先讀取文字部分。製作縮圖預(yù)覽：大圖顯示的選擇權(quán)交給網(wǎng)友。 2-5 加速圖片顯示小技巧-22-5-2 讓人感覺影像下載快速-2：記得設(shè)定alt圖片說明文字：這雖然不會(huì)加快圖檔下載速度，但卻是個(gè)不錯(cuò)的作法，可讓網(wǎng)友預(yù)期圖檔內(nèi)容，同時(shí)若有網(wǎng)友是將圖檔關(guān)閉的話，也可知道該圖內(nèi)容。重複利用圖檔：盡量使用