第 3 章 圖文並茂— 在文件中加入圖片 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 3 章 圖文並茂— 在文件中加入圖片 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 3 章 圖文並茂— 在文件中加入圖片 著作權所有 © 旗標出版股份有限公司

2 本章提要 加上圖片—IMG 的基本用法 設定圖片大小與圖片邊界 <IMG> 標籤使用上的小技巧
網頁影像處理的考量

3 加上圖片—IMG 的基本用法 不論文字多麼優美, 形容的多麼貼切, 感覺上總是少了那麼一點東西, 如果能有圖片的輔助, 使文章多彩多姿、圖文並茂, 不但能增加文章的可看性, 更能讓人一目了然。

4 加上圖片—IMG 的基本用法

5 加上圖片—IMG 的基本用法

6 加上圖片—IMG 的基本用法

7 加上圖片—IMG 的基本用法

8 <IMG SRC="圖片檔的 URL">

9 <IMG SRC="圖片檔的 URL">

10 可顯示在網頁中的圖片 目前瀏覽器支援的圖形檔種類主要有 JPEG (副檔名為 jpg 或 jpeg) 和 GIF (副檔名為 gif) 兩種, 亦即網頁中的圖片, 只要是這兩種檔案格式, 就能正常顯示。 若圖片是其它的格式, 例如 BMP 檔, 則必須先用圖或影像處理軟將它轉成 JPEG 或 GIF 格式。

11 PNG 圖檔格式 PNG (Portable Network Graphics) 檔, 結合了 GIF 和 JPEG 兩種格式的長處。但由於 GIF 的應用實在太過廣泛, 且 PNG 不支援以多張圖組成動畫的方式, 要用來完全取代 GIF 並不容易。

12 BORDER 屬性— 為您的圖片影像裱框

13 BORDER 屬性— 為您的圖片影像裱框

14 使用圖片串起您的超連結 加邊框的超連結圖片 不加框的超連結圖片

15 加邊框的超連結圖片

16 加邊框的超連結圖片

17 加邊框的超連結圖片

18 加邊框的超連結圖片

19 加邊框的超連結圖片

20 不加框的超連結圖片

21 不加框的超連結圖片

22 設定圖片大小與圖片邊界 預先設定圖片的大小—HEIGHT 與 WIDTH 屬性 自行調整圖片的大小
設定圖片邊界寬—VSPACE 與 HSPACE 屬性

23 瀏覽器處理圖片的方式 停滯不前型：在圖片未傳輸完畢前, 不會顯示圖片以後的頁面。因為在傳輸過程中, 畫面上通常是少許文字或大量空白。
機動調整型：對於尚未傳入之圖片或其他非文字物件, 暫時以內定的小圖示和一般文字共同顯示在瀏覽器中, 等到資料傳輸完畢後再更新畫面。

24 預先設定圖片的大小 預先設定圖片大小的好處在於, 在圖片檔尚未傳輸前, 瀏覽器即可預留版面, 顯示接下來的文字內容。
<IMG SRC="圖檔的 URL" WIDTH="圖寬點數" HEIGHT="圖高點數">：

25 預先設定圖片的大小

26 預先設定圖片的大小

27 預先設定圖片的大小

28 自行調整圖片的大小

29 自行調整圖片的大小

30 設定圖片邊界寬

31 設定圖片邊界寬

32 設定圖片邊界寬 VSPACE 屬性—設定圖片與文字間的上下間隔：

33 設定圖片邊界寬

34 設定圖片邊界寬 HSPACE 屬性—設定圖片與文字間的左右間隔：

35 設定圖片邊界寬

36 <IMG> 標籤使用上的小技巧
ALT 屬性—為您的圖片影像加註 LOWSRC 屬性—預載圖片功能

37 ALT 屬性—為圖片影像加註 ALT 屬性的妙用是：如果圖片加上 <A> 標籤成為一個超連結, 此時用 ALT 為它設個替代顯示的說明文字, 說明這個圖片所指的是什麼樣的連結, 就能讓沒有載入圖片的人知道按圖片可連到何處。

38 ALT 屬性—為圖片影像加註

39 LOWSRC 屬性—預載圖片功能 通常我們希望使用者儘量不要關閉瀏覽器的自動載入圖片功能, 好讓精緻版面呈現出來, 但又擔心使用者不耐煩等待傳輸龐大的圖片檔。此時可採取一個折衷方案：為每個精緻漂亮但體積龐大的圖片檔, 另外再製造一個色彩較少, 且體積小很多的預覽圖檔。

40 LOWSRC 屬性—預載圖片功能

41 LOWSRC 屬性—預載圖片功能 較清晰, 檔案大小約佔 13 KB 較不清晰, 但檔案大小只約 7 KB

42 <IMG> 標籤的進階使用

43 <IMG> 標籤的進階使用

44 <IMG> 標籤的進階使用

45 <IMG> 標籤的進階使用

46 <IMG> 標籤的進階使用 ALIGN 屬性—調整圖片影像的位置 ALIGN 屬性—微調圖形影像的位置

47 ALIGN 屬性—調整圖片影像的位置 ALIGN=LEFT—靠左

48 ALIGN 屬性—調整圖片影像的位置 ALIGN=LEFT—靠左

49 ALIGN 屬性—調整圖片影像的位置 ALIGN=RIGHT—靠右

50 ALIGN 屬性—調整圖片影像的位置 ALIGN=RIGHT—靠右

51 ALIGN 屬性—微調圖形影像的位置 ALIGN=BASELINE 或 ALIGN=BOTTOM—對齊文字底線排列

52 ALIGN 屬性—微調圖形影像的位置 ALIGN=BASELINE 或 ALIGN=BOTTOM—對齊文字底線排列

53 ALIGN 屬性—微調圖形影像的位置 ALIGN=ABSBOTTOM—對齊整行 (區塊) 最底端排列

54 ALIGN 屬性—微調圖形影像的位置 ALIGN=TOP—對齊整行最頂端排列

55 ALIGN 屬性—微調圖形影像的位置 ALIGN=TEXTTOP—對齊文字部份最頂端排列

56 ALIGN 屬性—微調圖形影像的位置 ALIGN=MIDDLE

57 ALIGN 屬性—微調圖形影像的位置 ALIGN=ABSMIDDLE—圖片中間線對準整列中間線

58 網頁影像處理的考量 GIF 圖片格式簡介 JPEG 圖檔格式簡介 GIF/JPG 的取捨原則

59 GIF 圖片格式簡介 GIF (Graphics Interchange Format) 這個圖檔格式是由 CompuServe 在 1987 年所提出, 其目的是希望網路及 BBS 上的使用者能夠透過此圖檔格式輕易的交換及儲存影像資料。 1989 年 7 月公佈的 GIF 89a, 最受大家喜愛的改進是可以製作動畫檔與透明圖。

60 GIF 圖片格式簡介 GIF 的可攜性非常高, 無論是在 DOS、Windows 、MacOS 或是 X-Window 上, 都可以看到支援 GIF 的各種圖形應用軟體。 此外, GIF 所使用的壓縮演算法：LZW 演算法是一種很有效率的無失真壓縮演算法。高壓縮比加上高可攜性, 難怪 GIF 會成了網頁設計的寵兒。

61 JPEG 圖檔格式簡介 JPG/JPEG (Joint Photographic Experts Group) 是由全球各地 (主要來自 ISO 與 CCITT 兩組織) 的影像處理專業人員組合成立的機構, 致力於靜態影像 (still image) 壓縮標準的建立。

62 JPEG 圖檔格式簡介 JPEG 的壓縮法則, 就是保留圖形中人眼感受敏銳的成份, 如明亮度, 而捨棄視網膜感受不到的小色點, 即一般所謂的失真式壓縮。 而 JPEG 採取亮度與色彩分離的記錄模式, 可捨棄較多的色彩資料, 所以會有部份資料流失。

63 GIF/JPG 的取捨原則