加入圖片.

Presentation on theme: "加入圖片."— Presentation transcript:

1 加入圖片

2 網頁上所使用的圖片格式 根據最新的 HTML 規範, 標準的網頁圖檔只有 GIF、JPG 和 PNG 3 種。這 3 種圖檔格式有個共同的特色, 就是都經過壓縮, 所以檔案比較小, 適用於網路傳輸。 GIF 圖檔格式 JPG 圖檔格式 PNG 圖檔格式

3 GIF 圖檔格式 如果圖片具有許多線條、大塊大塊的色彩或含有文字, 建議存成 GIF 圖檔格式。GIF 具有以下幾種特性：
最多只能儲存 256 色 可設定透明背景 支援交錯式的顯示方式 GIF 動畫格式

4 最多只能儲存 256 色 GIF 格式只能容納 256 種色彩, 所以顏色較多、較複雜的照片, 在存成 GIF 格式後, 顏色將被濃縮至 256 色, 畫面可能會變得有點難看。 將色彩濃縮至 256 色時, GIF 有一項遞色的能力, 可以利用像素排列的緊密度, 造成眼睛觀看時的錯覺, 以模擬出原本不存在的顏色。

5 最多只能儲存 256 色

6 可設定透明背景 GIF 最大的特色就是可設定一種透明色彩, 這個色彩在瀏覽器上將不會顯示出來：

7 支援交錯式的顯示方式 GIF 可用交錯圖的形式顯現, 也就是瀏覽器會先顯示整張圖片的約略內容, 而隨著下載時間越來越久, 圖片也會慢慢變清晰, 直到顯示出完整的圖片內容為止。

8 GIF 動畫格式 GIF 還可以製作動畫哦！它的基本原理就是在同一個 GIF 檔案中放入許多張圖片, 當你用瀏覽器來觀看時, 圖片會一張張連續播放, 形成我們所看到的動畫效果。

9 JPG 圖檔格式 JPG (或稱 JPEG) 格式可儲存所有的色彩, 因此像是全彩的風景照、人物照...等, 都很適合使用 JPG 格式。JPG 有以下兩種較特別的性質： 強大的壓縮率 支援漸進式的顯示方式

10 強大的壓縮率 JPG 格式可以將圖片檔案壓得非常小, 一張原本 1 MB 大小的圖片, 在存成 JPG 格式之後, 可能只剩不到 50 KB 而已, 可見壓縮率有多驚人。 由於 JPG 是採用破壞性的壓縮法, 在壓縮時會捨棄一些像素資料, 所以有時圖片看起來會有「失真」的現象, 但若壓縮比例不高, 通常肉眼是不容易分辨出來的。

11 強大的壓縮率 由於壓縮演算法的關係, 若是圖片上有大塊的單一純色、明顯的線條、文字, 儘量不要存成 JPG 格式：

12 支援漸進式的顯示方式 JPG 的漸進式顯示, 其實和 GIF 的交錯圖頗為類似, 都可以讓圖片由模糊到清晰慢慢顯現, 而目前大部份的瀏覽器也都已支援漸進式的 JPG 格式了。

13 PNG 圖檔格式 PNG 格式的特色, 融合了 GIF 與 JPG 格式的優點, 例如可交錯顯示、可設定透明背景、支援全彩、採取不失真的壓縮方式...等, 只差無法做成動畫而已！ 由於 PNG 太晚被納入網頁圖形標準, 造成只有較新的瀏覽器才有支援 (Netscape 4.05 及 IE 4.0 之後才支援), 因此 PNG 雖然有潛力, 但仍尚未被普遍採用。

14 加入圖片 請準備好要放在網頁上的圖片, 且已存成是 GIF、JPG 或 PNG 的格式。特別注意, 千萬不可侵犯到別人的智慧財產權喔！
利用「檔案」面板加入圖片 絕對路徑與相對路徑的問題

15 加入圖片 在網頁中插入圖片或任何元件之前, 該網頁最好是已經存過檔了, 並且已定義了一個網站資料夾, 才不會發生連結問題。
請開啟練習檔 ex05-01.htm, 將插入點移到要插入圖片的位置, 然後按下常用面板上的影像：影像鈕：

16 加入圖片

17 加入圖片

18 利用「檔案」面板加入圖片

19 利用「檔案」面板加入圖片

20 絕對路徑與相對路徑的問題 在選擇圖片來源時, 最好選擇目前網站資料夾中的圖檔, 才不會發生連結錯誤的狀況, 建議你事先用檔案總管, 把要用的圖檔都搬移到網站所在的資料夾中 有時要加入的圖片可能放在硬碟中的其它位置、光碟或磁碟片中, 這時 Dreamweaver 會問你是否要複製一份到網站裡：

21 絕對路徑與相對路徑的問題

22 絕對路徑與相對路徑的問題

23 絕對路徑與相對路徑的問題

24 絕對路徑與相對路徑的問題 絕對路徑的形式是 "file:///C:\Pic\abc.jpg", 明確指出硬碟代號、資料夾名稱, 一旦將網站上傳至 Internet, 當別人瀏覽這個圖片時, 也會從他的 C: 槽 \Pic 資料夾去找, 這樣怎麼可能找得到這張圖片呢？ 為了保持圖片連結的一致性, 所有連結路徑一定都要採取相對位址, 才不會出現圖片無法顯示的窘況。

25 修改圖片屬性 1. 調整圖片大小 2. 修改圖片來源 3. 為圖片加上超連結 4. 文繞圖的排列方式 5. 替代文字及低解析圖片

26 修改圖片屬性 6. 製作影像地圖 7. 設定圖片周圍間距 8. 設定圖片外框 9. 編輯圖片

27 修改圖片屬性

28 1. 調整圖片大小 所插入的圖片大小不一定剛好符合我們的需要, 此時我們可以先選定圖片, 然後直接拉曳控點來調整圖片的尺寸。
按住 [Shift] 鍵拉曳可維持原始比例。 也可以在屬性面板的寬、高欄位中輸入圖片大小：

29 1. 調整圖片大小 若想縮小圖片並減少檔案大小, 請先用影像編輯軟體來縮小圖片。

30 2. 修改圖片來源

31 將別人網站上的圖片納入自己的網頁中 若網頁上必須要放置別人網站裡的圖片, 例如許多免費網頁空間的提供者, 要求在首頁放一個該公司的商標；或者要放贊助廠商的 Logo…。 這些圖檔不一定都要放在你的網站中, 有時可以用 網站位址/圖片檔名的方式, 將圖片來源指向別人的網站。

32 將別人網站上的圖片納入自己的網頁中 只要在按下影像鈕插入圖片時, 於選取影像原始檔交談窗的 URL 欄位中輸入別人網站裡的圖檔路徑, 就可以將他人的圖片連結到自己的網頁上了：

33 將別人網站上的圖片納入自己的網頁中

34 將別人網站上的圖片納入自己的網頁中 這種做法的好處是可節省自己網站的空間, 但壞處是圖片下載速度可能會比較慢, 且當別人的網站搬家或關閉時, 圖片就無法顯示出來了。 請注意侵權的問題！在網路上的文字或圖形都受有著作權法的保護, 所以在未取得授權之前不可擅自取用。

35 3. 為圖片加上超連結 在圖片加上超連結的方法, 是選取圖片後, 在屬性面板上的連結欄位做設定即可：

36 4. 文繞圖的排列方式 插入的圖片會被視為文字行內的元件, 因此在文字裡插入圖片時, 圖片會夾在文字之間, 而且會與上面的文字空出相當大的距離。請開啟練習檔 ex05-02.htm ：

37 4. 文繞圖的排列方式 只要選取圖片後, 再拉下對齊列示窗, 即可選擇文繞圖的樣式：

38 5. 替代文字及低解析圖片 替代文字的作用：即使圖片還沒顯示出來, 只要滑鼠移到圖片區域上, 就會出現你所設定的說明文字。
低解析圖片的作用：我們可以先做一張低解析度的圖檔, 然後在低解析來源欄位中指定這張圖片, 使瀏覽器先顯示低解析圖片, 待高品質的圖檔下載完畢後再置換。

39 5. 替代文字及低解析圖片 請開啟練習檔 ex05-03.htm：

40 5. 替代文字及低解析圖片

41 容易被搞混的圖片說明 在圖片專屬的屬性面板中, 還有一個地方可輸入圖片的名字, 此只有在使用 Java Script 控制網頁中的物件時, 才需要用。

42 6. 製作影像地圖 Dreamweaver 提供了一組製作影像地圖 (Image Map) 的工具, 使用方式將在 5-5 節說明。

43 7. 設定圖片周圍間距 在版面的安排上, 若圖片和文字貼得太近, 容易使人產生壓迫感, 因此適當的留白可以讓瀏覽者在閱讀網頁時更加舒適。
要調整圖片與文字的間距, 只要在垂直距離與水平距離欄位中輸入適當的數值 (單位是像素) 即可。

44 7. 設定圖片周圍間距 請開啟練習檔 ex05-04.htm, 如下設定：

45 8. 設定圖片外框 若想在圖片周圍加上框線, 請在邊框欄位中輸入外框的粗細數值。

46 9. 編輯圖片 Dreamweaver MX 2004 整合了簡易的影像處理編輯器, 提供剪裁圖片、幫圖片去背、調整圖片的亮度與對比…等功能。

47 裁切 請開啟練習檔 ex05-05.htm, 選取所要裁切的圖片, 按下裁切鈕 ：

48 關於調整圖片的提示訊息 若在使用編輯圖片的任一工具鈕出現交談窗提示訊息, 表示這個動作會讓這張影像永久變更, 其他網頁若有使用到相同的圖片, 也會一併變更。

49 重新取樣 當我們調整過影像大小後, 若想要確定這個大小, 請按下重新取樣鈕；如果想要恢復原來的影像大小, 可按下重設大小鈕 ：

50 亮度和對比 請先選取要調整的影像, 按下亮度和對比鈕, 在交談窗中調整：

51 銳利化 銳利化會在影像中找出與周圍像素點不同的部份來增加對比, 也就是在邊緣的兩邊產生較亮和較暗的對比。

52 編輯 此例示範幫圖片去背, 請選取圖片, 再按下編輯鈕 (預設會自動開啟 Microsoft Photo Editor )：

53 編輯

54 編輯 最後請記得將檔案存檔, 就可以看到去背後的效果：

55 指定預設的圖片編輯器 若要指定其它軟體為圖片編輯器, 請執行 『編輯/使用外部編輯器編輯』命令：

56 Fireworks 最佳化 利用 Fireworks 最佳化功能可以讓影像擁有最佳的品質又能找到最適合的檔案大小。

57 Fireworks 最佳化

58 Fireworks 最佳化

59 Fireworks 最佳化

60 Fireworks 最佳化

61 Fireworks 最佳化

62 加入影像預留位置 若是網頁中的圖片尚未製作完成, 可使用影像預留位置功能先空出一塊範圍, 待日後圖片做好後, 再置入到這個先前保留的範圍中。
我們可以在常用面板按下影像：影像預留位置鈕, 開啟如下的交談窗, 先預留一塊放置圖片的位置。

63 加入影像預留位置 請開啟練習檔 ex05-06.htm, 試作看看 ：

64 加入影像預留位置 以此例而言, 按下確定鈕完成設定後, 網頁會自動空出一塊寬 700、高 300 的位置, 你可以繼續編輯網頁的其他部分, 待圖片製作完成後, 在保留的區域上雙按, 或是利用屬性面板上的瀏覽檔案鈕, 即可將圖片置入到這塊保留的區域。

65 加入影像預留位置

66 加入影像預留位置

67 製作影像地圖 影像地圖 (Image Map) 是網頁上常見的超連結技巧, 瀏覽者在圖片上的不同位置按下滑鼠左鈕, 就會分別連到不同的地方。
例如本書範例網站的入選作品網頁 (display.htm), 就有一個標準的影像地圖應用：

68 製作影像地圖

69 製作影像地圖 建立影像地圖的連結區域 修改與刪除影像地圖的連結區域

70 建立影像地圖的連結區域 製作影像地圖的步驟, 就是先在圖片上畫出想要的區域, 然後再賦予該區域一個超連結位址即可。請開啟練習檔 ex05-07.htm： 選取圖片, 在屬性面板上選擇一種形狀工具, 然後在圖片上拉曳出要做為連結的範圍：

71 建立影像地圖的連結區域

72 建立影像地圖的連結區域 只要在屬性面板的連結欄位指定超連結位址即可：

73 建立影像地圖的連結區域 重複上述兩個步驟, 便可在圖片上的不同區域加入超連結了。
在圖片上劃分連結區域時, 若不小心發生了連結區重疊的情況, 則重疊區域的連結位址將以先前設定的為準。

74 影像地圖的代號問題 當你將圖片做成影像地圖後, 必須為影像地圖取一個代號, 做為 HTML 碼的辨識之用。

75 修改與刪除影像地圖的 連結區域 要刪除或修改已畫出的連結區域前, 請先讓指標變回箭頭樣式, 才能選取連結區域。
當連結區域的劃分有誤時, 可先選取該區域, 再按下鍵盤上的 [Delete] 鍵, 即可刪除。若要移動位置, 請將指標移到半透明區域裡面, 再按住滑鼠左鈕不放進行移動。

76 設定網頁背景圖片 背景圖片的注意事項 設定不會捲動的背景圖片 創意背景圖片

77 背景圖片的注意事項 圖片顏色不要太過強烈或鮮艷：背景圖片的作用是用來襯托網頁內容, 所以不適合顏色太鮮艷或構圖太複雜的圖片, 若要使用, 建議先用影像處理軟體將圖片打淡。 圖片與文字的搭配：深色背景圖要搭配淺亮色的文字；反之, 淺色背景圖就要搭配深暗色的文字。

78 背景圖片的注意事項 用小圖片拼接時要注意接縫問題：網頁背景圖是重複排列而成, 只要準備一張小圖片, 就會自動填滿整個網頁。這樣的好處是圖片的檔案小, 下載時間也相對縮短, 因此不建議使用太大的圖片做為背景。 大部份的圖片拼接時會有明顯的接縫, 要解決這個問題就, 必須蒐集無接縫的背景底圖, 或用影像處理軟體自行製作。

79 背景圖片的注意事項

80 背景圖片的注意事項 用大圖片填滿背景時要注意視窗捲動問題：不管多大或多小的圖片, 瀏覽器都會將它重複填滿視窗。
使用大圖片有兩個壞處, 第一是檔案可能會太大, 第二是萬一網頁內容超過背景圖片大小, 那麼瀏覽者向下捲動時, 背景圖片就會出現重複拼接的穿幫情況。

81 背景圖片的注意事項

82 背景圖片的注意事項

83 設定不會捲動的背景圖片 請開啟練習檔 ex05-08.htm, 在 CSS 屬性面板中找到 background-attachment：

84 設定不會捲動的背景圖片

85 創意背景圖片 將圖片製作成長條狀, 並利用背景圖片重複拼貼的特色, 可創造出有趣的背景圖片。

86 創意背景圖片

87 注意螢幕解析度 在製作長條式背景底圖時, 圖片的水平長度至少要有 1024 pixels：

88 注意螢幕解析度

89 加入隨滑鼠指標變換 (Rollover) 的圖片
Rollover Image 的範例 加入隨指標變換的圖片 (Rollover Image) 更改 Rollover Image 的屬性

90 Rollover Image 的範例 本書範例網站的主頁 (mainframe.htm) 中, 網頁左方有 7 個會變換圖片的按鈕。

91 加入隨指標變換的圖片 (Rollover Image)
準備好兩張大小相同的圖片, 一張是滑鼠還沒移上去時的狀態, 另一張則是滑鼠移上去後的圖片。 請開啟練習檔 ex05-09.htm, 將插入點置於要出現按鈕處。按下常用面板影像：滑鼠變換影像鈕：

92 加入隨指標變換的圖片 (Rollover Image)

93 更改 Rollover Image 的屬性 利用屬性面板可調整 Rollover Image 的屬性, 包括縮放尺寸、修改超連結位址、輸入圖片說明文字...等。 在原始檔欄位中只能修改第 1 張圖片 (也就是滑鼠還沒移上去時的圖片) 的來源路徑, 第 2 張圖片是利用 Script 語法指定的, 請利用行為面板來修改來源路徑。

94 更改 Rollover Image 的屬性

95 加入導覽列 (Navigation Bar)
導覽列的範例 加入導覽列

96 加入導覽列 (Navigation Bar)
Dreamweaver 可以將網站中的連結文字或圖片,連結整合成一組圖片式的導覽列 (Navigation Bar), 讓版面清爽美觀, 圖片又具有 Rollover Image 的效果, 而且網頁設計者在管理上也更為方便。

97 導覽列的範例 範例網站的人物類網頁 (people.htm), 在最下方就有一排導覽列鈕：

98 加入導覽列 準備好要做為導覽列的圖片, 一個導覽圖片最好要含有 4 種變化, 也就是 4 張圖片為一組。如果沒有這麼多圖片, 至少要準備 2 種變化, 導覽列看起來才不會太單調：

99 加入導覽列 開啟練習檔 ex05-10.htm, 將插入點移到適當位置, 再按下常用面板上的影像：導覽列鈕：

100 加入導覽列

101 各種圖片狀態的對照 各位可將下圖狀態與上例的導覽列圖片做一比對, 就能明白各種狀態的意義：

102 加入導覽列 請按下交談窗中的新增項目鈕來新增第 2、3、4 組圖片。

103 加入導覽列 按下確定鈕後, 請用瀏覽器來預覽, 才能測試各種狀態下的導覽圖片：
修改導覽列裡的圖片來源時, 請執行『修改/導覽列』命令, 由開啟的交談窗修改。一個網頁裡只能有一條導覽列。

104 導覽列最好放在分割頁框中 當我們點選導覽列的某個圖片, 並連結到其它網頁後, 原本的導覽列就會不見, 所以通常我們都會將網頁分割成兩個頁框 (frame), 把導覽列放在其中一個頁框中保持不動, 而另一個頁框則顯示連結網頁的內容, 這樣一來導覽列就會一直顯示在網頁上了 。