第 3 章 圖文並茂— 在文件中加入圖片 著作權所有 © 旗標出版股份有限公司
本章提要 加上圖片—IMG 的基本用法 設定圖片大小與圖片邊界 <IMG> 標籤使用上的小技巧 網頁影像處理的考量
加上圖片—IMG 的基本用法 不論文字多麼優美, 形容的多麼貼切, 感覺上總是少了那麼一點東西, 如果能有圖片的輔助, 使文章多彩多姿、圖文並茂, 不但能增加文章的可看性, 更能讓人一目了然。
加上圖片—IMG 的基本用法
加上圖片—IMG 的基本用法
加上圖片—IMG 的基本用法
加上圖片—IMG 的基本用法
<IMG SRC="圖片檔的 URL">
<IMG SRC="圖片檔的 URL">
可顯示在網頁中的圖片 目前瀏覽器支援的圖形檔種類主要有 JPEG (副檔名為 jpg 或 jpeg) 和 GIF (副檔名為 gif) 兩種, 亦即網頁中的圖片, 只要是這兩種檔案格式, 就能正常顯示。 若圖片是其它的格式, 例如 BMP 檔, 則必須先用圖或影像處理軟將它轉成 JPEG 或 GIF 格式。
PNG 圖檔格式 PNG (Portable Network Graphics) 檔, 結合了 GIF 和 JPEG 兩種格式的長處。但由於 GIF 的應用實在太過廣泛, 且 PNG 不支援以多張圖組成動畫的方式, 要用來完全取代 GIF 並不容易。
BORDER 屬性— 為您的圖片影像裱框
BORDER 屬性— 為您的圖片影像裱框
使用圖片串起您的超連結 加邊框的超連結圖片 不加框的超連結圖片
加邊框的超連結圖片
加邊框的超連結圖片
加邊框的超連結圖片
加邊框的超連結圖片
加邊框的超連結圖片
不加框的超連結圖片
不加框的超連結圖片
設定圖片大小與圖片邊界 預先設定圖片的大小—HEIGHT 與 WIDTH 屬性 自行調整圖片的大小 設定圖片邊界寬—VSPACE 與 HSPACE 屬性
瀏覽器處理圖片的方式 停滯不前型：在圖片未傳輸完畢前, 不會顯示圖片以後的頁面。因為在傳輸過程中, 畫面上通常是少許文字或大量空白。 機動調整型：對於尚未傳入之圖片或其他非文字物件, 暫時以內定的小圖示和一般文字共同顯示在瀏覽器中, 等到資料傳輸完畢後再更新畫面。
預先設定圖片的大小 預先設定圖片大小的好處在於, 在圖片檔尚未傳輸前, 瀏覽器即可預留版面, 顯示接下來的文字內容。 <IMG SRC="圖檔的 URL" WIDTH="圖寬點數" HEIGHT="圖高點數">：
預先設定圖片的大小
預先設定圖片的大小
預先設定圖片的大小
自行調整圖片的大小
自行調整圖片的大小
設定圖片邊界寬
設定圖片邊界寬
設定圖片邊界寬 VSPACE 屬性—設定圖片與文字間的上下間隔：
設定圖片邊界寬
設定圖片邊界寬 HSPACE 屬性—設定圖片與文字間的左右間隔：
設定圖片邊界寬
<IMG> 標籤使用上的小技巧 ALT 屬性—為您的圖片影像加註 LOWSRC 屬性—預載圖片功能
ALT 屬性—為圖片影像加註 ALT 屬性的妙用是：如果圖片加上 <A> 標籤成為一個超連結, 此時用 ALT 為它設個替代顯示的說明文字, 說明這個圖片所指的是什麼樣的連結, 就能讓沒有載入圖片的人知道按圖片可連到何處。
ALT 屬性—為圖片影像加註
LOWSRC 屬性—預載圖片功能 通常我們希望使用者儘量不要關閉瀏覽器的自動載入圖片功能, 好讓精緻版面呈現出來, 但又擔心使用者不耐煩等待傳輸龐大的圖片檔。此時可採取一個折衷方案：為每個精緻漂亮但體積龐大的圖片檔, 另外再製造一個色彩較少, 且體積小很多的預覽圖檔。
LOWSRC 屬性—預載圖片功能
LOWSRC 屬性—預載圖片功能 較清晰, 檔案大小約佔 13 KB 較不清晰, 但檔案大小只約 7 KB
<IMG> 標籤的進階使用
<IMG> 標籤的進階使用
<IMG> 標籤的進階使用
<IMG> 標籤的進階使用
<IMG> 標籤的進階使用 ALIGN 屬性—調整圖片影像的位置 ALIGN 屬性—微調圖形影像的位置
ALIGN 屬性—調整圖片影像的位置 ALIGN=LEFT—靠左
ALIGN 屬性—調整圖片影像的位置 ALIGN=LEFT—靠左
ALIGN 屬性—調整圖片影像的位置 ALIGN=RIGHT—靠右
ALIGN 屬性—調整圖片影像的位置 ALIGN=RIGHT—靠右
ALIGN 屬性—微調圖形影像的位置 ALIGN=BASELINE 或 ALIGN=BOTTOM—對齊文字底線排列
ALIGN 屬性—微調圖形影像的位置 ALIGN=BASELINE 或 ALIGN=BOTTOM—對齊文字底線排列
ALIGN 屬性—微調圖形影像的位置 ALIGN=ABSBOTTOM—對齊整行 (區塊) 最底端排列
ALIGN 屬性—微調圖形影像的位置 ALIGN=TOP—對齊整行最頂端排列
ALIGN 屬性—微調圖形影像的位置 ALIGN=TEXTTOP—對齊文字部份最頂端排列
ALIGN 屬性—微調圖形影像的位置 ALIGN=MIDDLE
ALIGN 屬性—微調圖形影像的位置 ALIGN=ABSMIDDLE—圖片中間線對準整列中間線
網頁影像處理的考量 GIF 圖片格式簡介 JPEG 圖檔格式簡介 GIF/JPG 的取捨原則
GIF 圖片格式簡介 GIF (Graphics Interchange Format) 這個圖檔格式是由 CompuServe 在 1987 年所提出, 其目的是希望網路及 BBS 上的使用者能夠透過此圖檔格式輕易的交換及儲存影像資料。 1989 年 7 月公佈的 GIF 89a, 最受大家喜愛的改進是可以製作動畫檔與透明圖。
GIF 圖片格式簡介 GIF 的可攜性非常高, 無論是在 DOS、Windows 、MacOS 或是 X-Window 上, 都可以看到支援 GIF 的各種圖形應用軟體。 此外, GIF 所使用的壓縮演算法：LZW 演算法是一種很有效率的無失真壓縮演算法。高壓縮比加上高可攜性, 難怪 GIF 會成了網頁設計的寵兒。
JPEG 圖檔格式簡介 JPG/JPEG (Joint Photographic Experts Group) 是由全球各地 (主要來自 ISO 與 CCITT 兩組織) 的影像處理專業人員組合成立的機構, 致力於靜態影像 (still image) 壓縮標準的建立。
JPEG 圖檔格式簡介 JPEG 的壓縮法則, 就是保留圖形中人眼感受敏銳的成份, 如明亮度, 而捨棄視網膜感受不到的小色點, 即一般所謂的失真式壓縮。 而 JPEG 採取亮度與色彩分離的記錄模式, 可捨棄較多的色彩資料, 所以會有部份資料流失。
GIF/JPG 的取捨原則