《在网页中加入图片》由会员分享，可在线阅读，更多相关《在网页中加入图片（86页珍藏版）》请在金锄头文库上搜索。
1、第 4 章,在網頁中加入圖片,本章提要,4-1 設定網頁背景 4-2 加入 圖檔 4-3 設定圖片與文字的配置,前言,WWW 全球資訊網之所以會令人如痴如醉, 恐怕就在於其所展現出圖文並茂的畫面, 給人驚豔的感覺吧。然而對於一個製作 HTML 網頁的設計師而言, 更好的消息應該是可以輕鬆愉快地作出多彩多姿、圖文並茂的網頁吧！,4-1 設定網頁背景,在前幾章的內容中, 我們介紹了各種文字的排版、效果。此時若是配上合適的網頁背景, 相信網頁會更加有吸引力。,設定網頁背景色是利用 標籤的 bgcolor 屬性, 其使用方法如下：這裏指定顏色的方式和 3-1-3 節介紹的相同, 請您自行參考該節內容。
2、以下我們直接來看一個例子：,4-1-1 設定網頁的背景色 ,4-1-1 設定網頁的背景色 ,4-1-1 設定網頁的背景色 , 標籤的 background 屬性可以設定網頁的背景圖案, 其用法如下：首先看看下面的例子：,4-1-2 設定網頁背景圖 ,4-1-2 設定網頁背景圖 ,4-1-2 設定網頁背景圖 ,如上例所示, 我們所指定的圖 (bg05.jpg) 會變成文件的背景圖案, 而且由於圖片比視窗小, 所以瀏覽器會自動以貼磁磚的方式, 將圖片貼滿整個視窗。標籤的 background 屬性和 bgcolor 屬性只要擇一使用即可。若同時設定了這 2種屬性, 則只會看到背景圖片。實際上背景顏
3、色仍然有作用, 只不過被背景圖片蓋住罷了。,圖片的相對路徑與絕對路徑,background 屬性必須指定 “背景圖片的位置“, 但您是否注意到範例 ex04-02.html 中只指定了 “bg05.jpg“ 這個圖檔名稱, 為什麼找得到圖片？究竟背景圖片放在哪裏呢？ 上例的 background=“bg05.jpg“ 已經指定了圖檔位置, 不過它所指定的是圖檔的相對路徑。,圖片的相對路徑與絕對路徑,所謂的相對路徑, 是以網頁本身的所在為參考位置, 再敘述要指定的檔案如何對應參考位置。而不同於相對路徑, 另一種指定檔案位置的方式稱為絕對路徑。 我們用一個簡單的例子來說明相對路徑與絕對路徑的概念。
4、請看下列示意圖：,圖片的相對路徑與絕對路徑,圖片的相對路徑與絕對路徑,圖片的相對路徑與絕對路徑,藉由上圖, 是否讓您理解了何謂相對路徑與絕對路徑？底下我們以剛才的範例ex04-01.html 為例, 進行更具體的說明。請看以下的示意圖：,圖片的相對路徑與絕對路徑,圖片的相對路徑與絕對路徑,如上圖所示, 若 ex04-01.html 要指定 bg05.jpg, 那麼順著綠色的箭頭 (相對路徑), 就會發現 bg05.jpg 其實就在同一個位置。因此只要指定background=“bg05.jpg”, ex04-01.html 就明白該圖檔和自己在同一個位置。,圖片的相對路徑與絕對路徑,如果要指定
5、 bg06.jpg 呢？若順著藍色箭頭 (相對路徑) 尋找, 就知道必須先進入 image 資料夾中, 才能找到 bg06.jpg。因此, 其相對路徑的敘述就會變成 background=“image/bg06.jpg”。,圖片的相對路徑與絕對路徑,若改成絕對路徑的表示法呢？上圖中, 我的網頁資料夾是放在電腦的 C 磁碟機中, 因此, 指定 bg05.jpg 的路徑變成 “C:我的網頁bg05.jpg”, 而指定 bg06.jpg 的路徑變成“C:我的網頁imagebg06.jpg”。而實際引用到 background 屬性中, 在本機則要加上 “file:/“, 瀏覽器才知道要到電腦中尋找該
6、路徑。,圖片的相對路徑與絕對路徑,所以完整的寫法是 “file:/C:我的網頁bg05.jpg“ 及 “file:/C：我的網頁imagebg06.jpg“ 。,圖片的相對路徑與絕對路徑,上述的絕對路徑有個很大的問題, 當網頁放在我們的電腦中, 因為圖片同樣在電腦內, 所以可以正常顯示圖片。而在網頁公佈到網際網路之後, 當其他人瀏覽該網頁時, 同樣會到瀏覽者的電腦中尋找 “C:我的網頁bg05.jpg“ 這張圖, 結果當然是找不到這張圖, 網頁也就不會顯示這張圖片了。在使用 “所見即所得“ 網頁編輯器編寫網頁時, 特別容易發生這個問題 (編輯器會自行指定圖片路徑), 請您務必留心。,圖片的相對
7、路徑與絕對路徑,在網路上使用絕對路徑, 應該以“網址名稱/ 圖片位置“ 這樣的方式指定。例如background=“http: /www. i f .tw/ image/bg06.jpg“ (注意 “/“ 和 “ 不同)。不過建議您還是使用相對路徑比較有彈性, 否則一旦您的網址名稱變更, 就必須修改所有路徑, 恐怕要花費不少功夫。若改成相對路徑, 則應該是 “image/bg06.jpg“。,圖片的相對路徑與絕對路徑,由於製作好的網頁終究要放到網路上, 請您以網路上使用的路徑表示法 (也是 W3C 制定的標準表示法) 來編寫 HTML 中的路徑, 也就是 image/bg06.jpg, 而非
8、imagebg06.jpg (再次強調, 注意斜線 “ / “ 和反斜線 “ “ 的不同)。,注意圖檔名稱的大小寫,假設欲使用的圖檔名稱是 Pic01.jpg, 而在編輯 HTML 文件時將指定的檔名寫成 pic01.jpg。由於 Windows 將英文字母的大小寫視為相同, 因此在自己的電腦上瀏覽網頁時一切正常。將網頁上傳到網頁伺服器 (如學校的主機) 後, 其採用的系統可能是 Unix 或 Linux, 這些系統將英文字母的大小寫視為不同, 會造成該圖片在網際網路上無法觀看。因此請務必注意圖檔名稱的大小寫, 必須和 HTML文件內一致才行。,4-1-3用 bgproperties 屬性固定
9、 背景圖片,設定了背景圖片後, 當我們捲動網頁時, 通常背景圖片和網頁內容會一起移動。若希望背景圖片固定不動, 則可以利用 bgproperties 屬性來達成。但此屬性只有 IE 瀏覽器支援, 其它的瀏覽器並不支援。bgproperties 屬性的用法如下：,4-1-3用 bgproperties 屬性固定 背景圖片,bgproperties 屬性無法單獨使用, 必須配合 background 屬性設定背景圖片才有作用。此外, 網頁的內容也必須超過一個頁面, 也就是網頁要可以捲動才看得到效果。,4-2 加入圖檔,在 HTML 檔中加入圖片很簡單, 只要在文章中要置入圖片的地方使用 標籤, 瀏
10、覽器就會自動在對應的位置加入圖片。 標籤的使用方法如下：指定圖片位置的方式和 4-1-2 節介紹的方式一樣, 請您參考該節內容。以下我們直接來看一個置入圖片的例子：,4-2 加入圖檔,4-2 加入圖檔,4-2 加入圖檔,在 IE 載入這個檔案, 便可看到一份圖文並茂的作品。 請注意！並不是任何一種圖檔都可以放入網頁中, 接下來, 我們介紹 HTML 文件能接受的圖片格式。,可用於網頁的圖檔格式,目前瀏覽器支援的圖形檔種類主要有 JPEG (副檔名為 jpg 或 jpeg) 和 GIF (副檔名為 gif)兩種, 亦即網頁中的圖片, 只要是這兩種檔案格式, 就能正常顯示。若圖片是其它的格式, 例
11、如 BMP 檔, 則必須先用繪圖或影像處理軟體將它轉成 JPEG 或 GIF 的格式。大部分的繪圖或影像處理軟體都可以用來轉換不同的圖檔格式。,可用於網頁的圖檔格式,除了上述兩種 “主流“ 格式外, 近年來出現第三種選擇, 那就是PNG (Portable Network Graphics) 檔, 從其名稱來看, 可知道它有企圖成為網路圖片的標準 (事實上早在1996 年十月就成為 W3C 的推薦標準)。這個較新的圖檔格式結合了 GIF 及 JPEG 兩種格式的長處, 例如它和 GIF 一樣是採不會破壞畫質的壓縮方式, 另一方面則是像 JPEG 一樣可支援全彩的影像, 但 PNG 並不像GIF
12、一樣支援動畫。,可用於網頁的圖檔格式,PNG 的主要特點如下： 採用比GIF更高效率的非破壞式壓縮。 存檔格式方面, 灰階圖形可達 16位元, 全彩圖形可達 48位元(R、G、B三色各做16 位元的取樣)。 含gamma 校正值, 讓圖形在不同的平台上仍能有一致的顯示效果。 支援alpha channel, 也就是可在圖形中做不同程度的透明效果, PNG可支援65536層的不同透明效果。,可用於網頁的圖檔格式,PNG的發展本來就是要取代 GIF做為新一代的網路圖形標準, 原因可不只是因為 GIF 只支援 256 色這麼單純, 其實還牽涉到 LZW 演算法的專利授權金問題, 所以有志之士們就發展
13、出這項開放性的圖檔標準, 以期擺脫專利授權的限制。,可用於網頁的圖檔格式,只可惜 GIF 的應用實在是太過廣泛, 目前一時也無法取代, 而且權利金也因為隱藏在可讀寫 GIF 的繪圖軟體售價中, 最下游的電腦使用者是不太察覺得到的, 所以目前在 Internet 上的應用, GIF 仍是一大主流。更何況 PNG 也不支援以多張圖組成動畫的方式, 所以要用它完全取代GIF 也是有點困難。,可用於網頁的圖檔格式,好了, 知道該用什麼樣的圖檔格式, 大家就可將您想要的圖形一個個的用 標籤將它們統統都加到網頁中。若您真的這樣做, 一定會發現一堆圖形排在一起似乎是沒什麼美感, 所以接下來我們就來看如何控制
14、圖形的顯示。,4-2-1 為圖片裱框,我們可以利用 border 屬性, 將 HTML 檔內的圖片加框, 請看下面的範例：,4-2-1 為圖片裱框,4-2-1 為圖片裱框,這時從瀏覽器上欣賞您的成果時, 便會在圖片上裱上一個厚達 3 個圖點 (pixels) 的外框了。,什麼是圖點,電腦螢幕上的圖片、影像、文字,都是由一個個的圖點 (pixel) 所構成的。每個圖點的顏色可能有些不同,當排列在一起的時候, 即構成我們所看到的影像。既然電腦上的影像是由一個個圖點所組成的, 在設計網頁時自然也就以 “圖點“ 作為度量單位, 常用來表示長度、文字大小和線條粗細。,4-2-2 設定圖片大小,電腦螢幕上
15、的圖片、影像、文字,都是由一個在早期每當文章中插入一些影像圖片, 會大大地降低整個文件顯示的效率。其原因除了影像增加了資料流量以外, 另一個則是瀏覽器要額外處理版面配置的問題。 由於電腦事先並不知道文章中插入的影像圖片所佔的位置有多大, 必須等到整個圖片檔案傳輸完畢, 知道這個圖片所佔的大小後, 才能繼續調整後面的版面。因此依據伺服端的種類與瀏覽器的設定,會有兩種結果：,4-2-2 設定圖片大小,停滯不前型：這種情形在遇到圖片未傳輸完畢前, 不會顯示圖片以後的頁面。因此在傳輸過程中, 畫面上通常是少許文字或大量空白。 機動調整型：這是目前比較普遍的情況, 依照目前已經讀入的 HTML資料顯示頁
16、面,對於尚未傳入之圖片或其他非文字物件, 暫時以內定的小圖示和一般文字共同顯示在瀏覽器中。等到資料傳輸完畢後再更新畫面。,4-2-2 設定圖片大小,第二種情形應該比第一種好很多, 至少我們可以先看到文字的部分, 但缺點是版面會隨著資料陸續輸送完畢而不斷地更新版面, 各文字與圖片的位置也會不斷地變動, 究其原因就是瀏覽器無法預知圖片的大小。 為避免上述狀況, 只要在 標籤內利用 height (高度) 與 width (寬度) 這兩個屬性, 把圖片的大小先告訴瀏覽器 (預設以 圖點為單位), 瀏覽器就可以預留版面, 解決這個煩人的問題。,4-2-2 設定圖片大小,設定格式如下： 我們來看下列的例子：,4-2-2 設定圖片大小,4-2-2 設定圖片大小,4-2-2 設定圖片大小,這樣一來在圖片檔尚未傳輸過來前, 瀏覽器就已經能為其預留版面, 顯示出接下來的文字內容。而就算使用者關閉顯示圖片的功能, 瀏覽器也仍會空出我們指定的大小空間, 而不會影響版面的配置。,
