1 / 25

表格、圖檔的處理

表格、圖檔的處理. 主講：林憲民 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> 表格標題旗標，它的預設方式是將標題文字置中。

brand
Télécharger la présentation

表格、圖檔的處理

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 表格、圖檔的處理 主講：林憲民 2007/06/20

  2. 一、表格 1-1 認識網頁表格 1-2 設定表格屬性 1-3 設定儲存格屬性 1-4 欄列的調整與增減 1-5 排版用表格 二、圖檔 2-1圖片格式 2-2在網頁中加入背景圖 2-3在網頁中加入圖片 2-4設定圖片屬性 2-5加速圖片顯示小技巧 課程綱要

  3. 1-1 認識網頁表格-1 • <TABLE>表格的開始旗標。 • <CAPTION>和 </CAPTION>表格標題旗標，它的預設方式是將標題文字置中。 • <TR>和 </TR>表格的列旗標(Table Row)。 • <TH>和 </TH>表格資料項目的標頭旗標，它的預設方式是將標題文字置中加粗體。 • <TD>和 </TD>表格的資料旗標(Table Data)，它宣告每一小格的內容。 • </TABLE>表格的回復旗標。 • 要記得維持旗標「成雙成對」！

  4. 1-1 認識網頁表格-2 • BORDER宣告表格外框的寬度，以點數(pixels)計算。BORDER=3表示外框寬度為3個點的距離，BORDER=0則沒有框線。 • CELLSPACING宣告每一個格子的間距，以點數(pixels)計算。 • CELLPADDING宣告每一個格子的內容與格線的間距，以點數(pixels)計算。 • ALIGN宣告水平對齊方式，ALIGN=“CENTER”為向中對齊，另有ALIGN="LEFT" 和 ALIGN="RIGHT"

  5. 1-2 設定表格屬性 • 版面配置：對齊方式(align)、文繞圖、儲存格墊充(cellpadding)、儲存格間距(cellspacing)、指定寬度 • 框線：大小、色彩、亮框線、暗框線 • 背景：色彩、使用背景圖

  6. 1-3 設定儲存格屬性 • 版面配置：水平對齊方式、垂直對齊方式、上下合併(rowspan)、左右合併(colspan) 、指定寬度、儲存格標題、不分行 • 框線：色彩、亮框線、暗框線 • 背景：色彩、使用背景圖

  7. 1-4 欄列的調整與增減 • 增加單欄、單列 • 刪除單欄、單列 • 增加多欄、多列 • 刪除多欄、多列

  8. 1-5 排版用表格 • 利用框線<table border=“0”> • 儘量改用CSS進行排版，少用此方式進行排版

  9. 2-1 圖片格式 • 不同的圖像格式有不同的延伸檔名，網際網路(WWW)最常使用的四種圖像格式為： • GIF：按鈕、美工圖案、卡通圖案、透明背景及　　　動畫使用，僅256色 • JPEG：相片影像使用，可達1670萬色。 • BMP：不建議直接在網頁上使用。 • PNG：新格式，支援度尚不足。

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

  11. 2-1-2 JPEG • 副檔名為.jpg或 .jpeg，它們是 Joint Photographic Equipment Group 的縮寫，原文的中文翻譯為 “聯合圖像設備集團”，這個組織制定 .jpg 格式。 • JPEG簡單來說，是使用數學公式來描述圖案的顏色變化，由於公式的精確度是可調整的，因此JPEG具有視需要調整壓縮比的特性，檔案大小與畫質成反比。一張很大的圖檔，如果不計較畫質，可以壓到非常小的體積，相反的，若選擇最好的品質，則可得到與原圖非常接近的畫質。經壓縮後可節省硬碟的空間，也節省圖像檔案上傳或下載的時間，所以它也是網際網路上極受歡迎的圖像格式。

  12. 2-1-3 BMP • 副檔名為.bmp，它是 bitmap的縮寫。它將圖像的每一個點的顏色都記錄下來，因此它佔用的檔案空間最大。雖然瀏覽程式支援 .bmp 格式，但是不建議使用。 • BMP也是未經壓縮的圖像格式，支援全彩顏色。

  13. 2-1-4 PNG • 副檔名為.png，它是Portable Network Graphics的縮寫。過去網頁上想要得到無失真的畫質，或是透明背景效果就只能靠GIF，但有256色的限制，加上有專利上的問題(GIF格式當初是一家私人公司所開發的)，所以便有PNG格式的誕生。 • PNG為無失真壓縮，沒有256色的限制，並支援256階的透明效果，靠這三點就可完全取代GIF，唯一美中不足的是不支援動畫效果。這個新的格式不是所有的瀏覽器及繪圖軟體都支援，尚待時間推廣。

  14. 2-1-5 GIF、JPEG比較－１

  15. 2-1-5 GIF、JPEG比較－２照片 註：原圖尺寸為170x170，未壓縮時檔案大小為88K，26328色。

  16. 2-1-5 GIF、JPEG比較－3美工圖 註：原圖尺寸為170x170，未壓縮時檔案大小為88K，6097色。

  17. 2-1-5 GIF、JPEG比較－4文字 註：原圖尺寸為170x170，未壓縮時檔案大小為88K，513色。

  18. 2-2在網頁中加入背景圖 • <body background=“圖檔.???">

  19. 2-3在網頁中加入圖片-1 • <img border="0" src="Sample.jpg" width="283" height="212"> • <img border="0" src="http://www.nuk.edu.tw/nuk/images/main/top-p01.gif">

  20. 2-3在網頁中加入圖片-2 • IMG的意義為 IMaGe，中文翻譯為"圖像、圖形、圖畫"。它告訴瀏覽程式在此旗標處置入圖像。 • SRC的意義為 SouRCe，中文翻譯為 "來源"。SRC是一個屬性控制，它告訴瀏覽程式至何處傳呼該圖像檔案。 • Sample.jpg是圖像檔名。注意：此例的延伸檔名是 .jpg。 • <IMG> 是單身旗標，不需要回復旗標。

  21. 2-4設定圖片屬性 • 替代顯示文字(alt) • 設定寬(width)、高(height) • 加入超連結：<a href="2-1.htm"><img border="0" src="Sample.jpg" width="283" height="212" alt="這是一張測試圖"></a>

  22. 2-5 加速圖片顯示小技巧-1 • 2-5-1 降低圖檔大小： • 選擇適當的圖檔格式。 • 考慮裁切影像，在不影響圖檔主旨的前提下，裁掉一些無關緊要的部分。 • 縮減圖像尺寸。 • 試著將圖檔壓縮至可接受的範圍。

  23. 2-5 加速圖片顯示小技巧-2 • 2-5-2 讓人感覺影像下載快速-1： • 設定圖片的長寬值：瀏覽器在下載網頁時可事先預留該圖檔的位置，無須等到全部都下載之後才出現。如此一來，文字部分將可加快出現，網友即使還沒看到圖片，也可先讀取文字部分。 • 製作縮圖預覽：大圖顯示的選擇權交給網友。<a href="big-picture.jpg"> <img src="thumbnail.jpg" height="100" width="150" alt="縮小圖，欲看大圖請按此。"></a>

  24. 2-5 加速圖片顯示小技巧-2 • 2-5-2 讓人感覺影像下載快速-2： • 記得設定alt圖片說明文字：這雖然不會加快圖檔下載速度，但卻是個不錯的作法，可讓網友預期圖檔內容，同時若有網友是將圖檔關閉的話，也可知道該圖內容。 • 重複利用圖檔：盡量使用諸如背景圖與導覽按鈕等圖檔，而不要每一頁都放個不同的圖檔，這樣會有助於整個網站外觀的一致性，同時在第一次下載後，圖檔顯示速度會加快。

  25. Q & A

More Related