在网页中加入图片.ppt

第 4 章 在網頁中加入圖片 本章提要 4-1 設定網頁背景 4-2 加入 圖檔－img src 4-3 設定圖片與文字的配置 前言 WWW 全球資訊網之所以會令人如痴如醉, 恐怕就在於其所展現出圖文並茂的畫面, 給人驚豔的感覺吧。然而對於一個製作 HTML 網頁的設計師而言, 更好的消息應該是可以輕鬆愉快地作出多彩多姿、圖文並茂的網頁吧！ 4-1 設定網頁背景 在前幾章的內容中, 我們介紹了各種文字的排版、效果。此時若是配上合適的網頁背景, 相信網頁會更加有吸引力。 4-1-1 設定網頁的背景色－body bgcolor 設定網頁背景色是利用 body 標籤的 bgcolor 屬性, 其使用方法如下： 這裏指定顏色的方式和 3-1-3 節介紹的相同, 請您自行參考該節內容。以下我們直接來看一個例子： 4-1-1 設定網頁的背景色－body bgcolor 4-1-1 設定網頁的背景色－body bgcolor 4-1-2 設定網頁背景圖－body background body 標籤的 background 屬性可以設定網頁的背景圖案, 其用法如下： 首先看看下面的例子： 4-1-2 設定網頁背景圖－body background 4-1-2 設定網頁背景圖－body background 如上例所示, 我們所指定的圖 (bg05.jpg) 會變成文件的背景圖案, 而且由於圖片比視窗小, 所以瀏覽器會自動以貼磁磚的方式, 將圖片貼滿整個視窗。 body 標籤的 background 屬性和 bgcolor 屬性只要擇一使用即可。若同時設定了這 2種屬性, 則只會看到背景圖片。實際上背景顏色仍然有作用, 只不過被背景圖片蓋住罷了。 圖片的相對路徑與絕對路徑 background 屬性必須指定 背景圖片的位置, 但您是否注意到範例 ex04-02.html 中只指定了 bg05.jpg 這個圖檔名稱, 為什麼找得到圖片？究竟背景圖片放在哪裏呢？ 上例的 『background=bg05.jpg』 已經指定了圖檔位置, 不過它所指定的是圖檔的相對路徑。 圖片的相對路徑與絕對路徑 所謂的相對路徑, 是以網頁本身的所在為參考位置, 再敘述要指定的檔案如何對應參考位置。而不同於相對路徑, 另一種指定檔案位置的方式稱為絕對路徑。 我們用一個簡單的例子來說明相對路徑與絕對路徑的概念。請看下列示意圖： 圖片的相對路徑與絕對路徑 圖片的相對路徑與絕對路徑 圖片的相對路徑與絕對路徑 藉由上圖, 是否讓您理解了何謂相對路徑與絕對路徑？底下我們以剛才的範例ex04-01.html 為例, 進行更具體的說明。請看以下的示意圖： 圖片的相對路徑與絕對路徑 圖片的相對路徑與絕對路徑 如上圖所示, 若 ex04-01.html 要指定 bg05.jpg, 那麼順著綠色的箭頭 (相對路徑), 就會發現 bg05.jpg 其實就在同一個位置。因此只要指定『background=“bg05.jpg”』, ex04-01.html 就明白該圖檔和自己在同一個位置。 圖片的相對路徑與絕對路徑 如果要指定 bg06.jpg 呢？若順著藍色箭頭 (相對路徑) 尋找, 就知道必須先進入 image 資料夾中, 才能找到 bg06.jpg。因此, 其相對路徑的敘述就會變成 『background=“image/bg06.jpg”』。 圖片的相對路徑與絕對路徑 若改成絕對路徑的表示法呢？上圖中, 我的網頁資料夾是放在電腦的 C 磁碟機中, 因此, 指定 bg05.jpg 的路徑變成 “C:\我的網頁\bg05.jpg”, 而指定 bg06.jpg 的路徑變成“C:\我的網頁\image\bg06.jpg”。而實際引用到 background 屬性中, 在本機則要加上 file:///, 瀏覽器才知道要到電腦中尋找該路徑。 圖片的相對路徑與絕對路徑 所以完整的寫法是 file:///C:\我的網頁\bg05.jpg 及 file:///C：\我的網頁\image\bg06.jpg 。 圖片的相對路徑與絕對路徑 上述的絕對路徑有個很大的問題, 當網頁放在我們的電腦中, 因為圖片同樣在電腦內, 所以可以正常顯示圖片。而在網頁公佈到網際網路之後, 當其他人瀏覽該網頁時, 同樣會到瀏覽者的電腦中尋找 C:\我的網頁\bg05.jpg 這張圖, 結果當然是找不到這張圖, 網頁也就不會顯示這張圖片了。在使用 所見即所得 網頁編輯器編寫網頁時, 特別容易發生這個問題 (編輯器會自行指定圖片路徑), 請您務必留心。 圖片的相對路徑與絕對路徑 在網路上使用絕對路徑, 應該以網址名稱/ 圖片位置 這樣的方式指定。例如『background=http: //www. i