1 / 41

加入與編輯圖片

加入與編輯圖片. 講師 : 陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw. 網頁上所使用的圖片格式. GIF 圖檔格式 JPEG 圖檔格式 PNG 圖檔格式. GIF 圖檔格式. GIF 格式最多只能儲存 256 種顏色 沒有複雜的顏色變化 單純的線條、文字或色塊 檔案的體積小. GIF 圖檔格式. GIF 圖檔格式. GIF 圖檔格式.

joshua-mercer
Download Presentation

加入與編輯圖片

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. 加入與編輯圖片 講師:陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw

  2. 網頁上所使用的圖片格式 • GIF 圖檔格式 • JPEG 圖檔格式 • PNG 圖檔格式

  3. GIF 圖檔格式 • GIF 格式最多只能儲存 256 種顏色 • 沒有複雜的顏色變化 • 單純的線條、文字或色塊 • 檔案的體積小

  4. GIF 圖檔格式

  5. GIF 圖檔格式

  6. GIF 圖檔格式 • 可設定透明背景：GIF 格式可支援透明色彩, 因此我們可以利用這種特性來製作背景為透明的圖片 (即俗稱的「去背」效果), 讓圖片與網頁看起來更融合：

  7. GIF 圖檔格式 • 可製作成動畫：GIF 格式最好用的功能就是可製作成動畫, 也就是在同一個 GIF 檔案中放入許多張圖片, 用瀏覽器觀看時, 圖片就會連續快速播放, 形成動畫效果。範例網站左側的「日本旅遊日誌」區塊內有個會輪番變換圖片的動畫, 就是製作成 GIF 格式：

  8. GIF 圖檔格式

  9. JPEG 圖檔格式 • JPEG (或稱 JPG) • 可顯示全彩的影像格式 • 失真壓縮 • 強大的壓縮率可能會影響畫質：JPEG 格式可將圖片壓縮得非常小, 例如 1 MB 大小的圖片, 可以壓縮成 50 KB 甚至更小。不過有得必有失, JPEG 的壓縮方式會破壞圖片的畫質,壓縮比率小時還不明顯, 壓縮比率過高時圖片便會失真。

  10. JPEG 圖檔格式 • 純色和線條不適用, 亦不支援透明背景 • 不支援透明背景 • 不適用於單純色塊或線條構成的圖片 • 會有模糊、斷裂的現象, 應轉存為 GIF 格式。

  11. PNG 圖檔格式 • PNG 格式結合了 JPEG 與 GIF 格式的優點, 主要的特色如下： • 支援全彩並保留比 JPEG 更多的資料： • 無失真的演算法 • 可儲存全彩的影像 • 保留更多的圖片資訊, 即使多次轉存檔案, 也不至於失真。

  12. PNG 圖檔格式 • 支援層次更多的透明背景： • 8 位元的 PNG 格式 • 支援透明背景 • 24 位元與 32 位元的 PNG 格式 • 支援透明背景 • 支援半透明背景

  13. PNG 圖檔格式 • 根據不同情況判斷要將圖片存為哪種格式 • 照片JPEG 格式 • 動畫GIF 格式 • 半透明的圖片PNG 格式 • 大多數的影像處理軟體 (例如 Photoshop 或 PhotoImpact 等) 都可以協助你轉換圖片的格式

  14. 加入圖片的方法 • 從「插入」面板加入圖片 • 從「檔案」面板加入圖片 • 插入其他網站的圖片

  15. 方法 1：從「插入」面板加入圖片 • 請將插入點移到想加入圖片的位置, 然後開啟插入面板, 按下常用頁次的 鈕旁的下拉箭頭, 選擇影像 (或直接執行『插入/影像』命令), 如下加入圖片。

  16. 方法 1：從「插入」面板加入圖片

  17. 方法 1：從「插入」面板加入圖片

  18. 方法 1：從「插入」面板加入圖片 • 你也可以按下即時檢視鈕, 直接在 Dreamweaver 中模擬在瀏覽器中的呈現效果。

  19. 認識「替代文字」 • 每當你在網頁中插入圖片、動畫、影片…等非文字的內容時, 預設都會顯示交談窗要求輸入替代文字。 • 避免瀏覽者長時間等待：若你在網頁中使用較大的圖片或動畫, 則瀏覽網頁時可能需要等待一段時間才能完整地下載及呈現內容。若先為這些內容加上替代文字, 那麼即使圖片、動畫還沒顯示完全, 只要瀏覽者將滑鼠移到該區域上, 就能透過替代文字先了解即將下載的內容。

  20. 認識「替代文字」

  21. 認識「替代文字」 • 製作無障礙網頁：視障人士在瀏覽網頁時, 必須透過輔助程式將網頁內容先解譯為語音或點字, 才能讀取內容。如果網頁中有圖片、動畫等視覺化元素, 則會解譯其替代文字, 因此替代文字還可用來幫助視障人士更完整地瞭解網頁內容。 • 若需製做無障礙網站, 建議你參考無障礙網路空間服務網：http://enable.nat.gov.tw/, 以了解製做規範。

  22. 方法 2：從「檔案」面板加入圖片 • 既然圖片已儲存在網站根目錄, 便可以從檔案面板加入圖片。只要在檔案面板內選取圖片檔, 按住左鈕不放, 將圖片拉曳到要插入的位置即可：

  23. 方法 2：從「檔案」面板加入圖片

  24. 方法 2：從「檔案」面板加入圖片

  25. 插入其他網站的圖片 • 除了插入自己的圖片, 有時網頁上還可能會放置別人網站裡的圖片, 例如網站贊助者的商標或產品圖片等等。這些圖檔原本就不在你的電腦中, 那麼應該如何插入網頁中呢？

  26. 插入其他網站的圖片 • 若要插入網路上的圖片, 首先可在網頁圖片上按右鈕, 執行『內容』命令來複製圖檔的路徑, 然後回到 Dreamweaver 中, 同樣按下插入面板的影像鈕 , 在選取影像原始檔交談窗的 URL欄位貼上圖檔路徑, 就可以直接將網路上的圖片以連結的方式置入自己的網頁中了。

  27. 插入其他網站的圖片

  28. 插入其他網站的圖片

  29. 插入其他網站的圖片

  30. 插入其他網站的圖片

  31. 插入其他網站的圖片 • 網站的內容都受著作權法的保護, 使用前請先向來源網站取得授權, 請勿擅自取用未授權的內容, 以免吃上侵權官司哦！

  32. 影像的HTML標籤 • <IMG SRC="影像的路徑" ALT="影像無法呈現時所產生的文字" WIDTH="百分比或像素值" HEIGHT="百分比或像素值" BORDER="像素值" ALIGN="對齊的基準">

  33. 範例來源: 清華大學資工系張智星 教授教學網頁 http://neural.cs.nthu.edu.tw/jang/books/html/example/image01.htm <HTML> <HEAD><TITLE> 如何顯示影像 </TITLE> </HEAD> <BODY> <p>基本影像顯示：<br> <img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！"> <p>影像不存在時的顯示：<br> <img src="multimedia/sbtree0.gif" alt="這是一個不存在的影像檔案！"> <p>以像素值設定影像高度：<br> <img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！" height=150> <p>以像素值設定影像高度與寬度：<br> <img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！" height=50 width=200> <p>以百分比設定影像高度（影像會隨著視窗大小而調整）：<br> <img src="multimedia/sbtree.gif" alt="這是一棵漂亮的樹！" height=20%> </BODY> </HTML>

  34. 如果不設定影像的長度及寬度，影像呈現的大小即是影像本身的大小。 • 如果只設定影像的長度或寬度，那麼整個影像就會成等比例放大或縮小，所以影像看起來不會變形。 • 如果同時設定影像的長度及寬度，那麼影像即根據所給的數值來呈現。（所以可能產生變形。） • 如果所給的長度或寬度是百分比，那麼影像呈現的大小會隨著視窗的大小而改變。

  35. 加入圖片的正確觀念 • 加入網頁的圖片一定要儲存到網站資料夾中, 然後用相對路徑的方式來指定圖片位置。 • 相對路徑 • 表示把目前網頁當作參考點, 所有的檔案路徑都是相對於目前網頁所在資料夾的路徑, 因此只要將這些檔案一起上傳到網路上, 其他電腦讀取時便可以從相對位址找到檔案。 • 如果你插入的圖片不是存在網站資料夾中, 就會以絕對路徑的方式來指定位置, 例如"file:///E:/images/01.jpg"。

  36. 加入圖片的正確觀念 • 當你把網站上傳到網路上, 其他電腦讀取網頁時便會依該路徑去尋找 E 磁碟的 images 資料夾中的 "01.jpg", 結果當然是找不到的, 於是在網路上就看不到這張圖片了。 • 那相對路徑該怎麼設定呢？我們用下圖的網站架構來說明：

  37. 加入圖片的正確觀念 • 看了上面的說明還是有點迷糊也不用擔心, 其實只要將圖檔存放在網站資料夾中, 在加入圖片時, Dreamweaver 就會自動擷取相對路徑, 不用你自行設定。萬一圖片不在網站資料夾中, Dreamweaver 也會在加入圖片時詢問是否要複製一份到網站資料夾裡, 你只要跟著操作, 便可以將檔案複製到網站資料夾中：

  38. 加入圖片的正確觀念

  39. 加入圖片的正確觀念

  40. 加入圖片的正確觀念 • 總而言之, 只要你先將網頁中會用到的檔案都儲存到網站資料夾中, Dreamweaver 就能自動在加入該元素時幫你設定好相對路徑, 無論你要插入的是圖片、動畫或是音樂檔,都要謹記這個原則哦！

More Related