《表格图档的处理》由会员分享,可在线阅读,更多相关《表格图档的处理(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,