第六講 網頁中的圖片

圖片在網頁中的作用是無可替代的，一幅好的合適的圖片，勝過十篇洋洋洒洒的介紹！圖文並茂的網頁，給訪問者帶來的感覺是素麵朝天的網頁無法比擬的。
　　圖片不只起到裝飾的作用，在很多網頁中，圖片是不可缺少的。如企業網站的產品廣告、技術文章的插圖、個人藝術作品的發布都不能沒有圖片。
　　雖然圖片能美化您的網頁，但當您添加圖片、動畫和視頻到自己的網站上時，首頁空間的佔用將會迅速增加，網頁的下載時間也會大大增加，在網速較慢的場合甚至會到不可容忍的地步。若 網際網路服務提供者提供的首頁空間大小有限，則圖片檔案大小就會是重要的考慮因素。因此，網頁製作者一定要特別注意圖片檔案的大小，盡量使用佔用空間較小的圖片，有時還要適當犧牲映像的品質。
一、圖片的基本知識
　　大多數瀏覽器只能顯示兩種格式的映像。即GIF和JPEG（JPG）。用FrontPage編製網頁時，可以插入其它格式的影像檔，並由它將格式轉換成上述兩種中的一種。
　　1）GIF檔案
　　GIF是一種壓縮的8位元影像像檔案，廣泛用於網路傳輸，最多隻有256色。
　　新的 GIF89a格式，能儲存成背景透明化的形式，並且可以將數張圖存成一個檔案，形成動畫效果，還支援位元影像模式、灰階或索引顏色模式映像。GIF檔案相對體積較小，多數用於表徵圖、按鈕、捲軸和背景等。
　　2、JPEG檔案
　　JPEG是一種高效率的壓縮格式，在存檔時能夠將人眼無法分辨的資料刪除，以節省儲存空間。JPEG格式通過選擇性地去掉資料來壓縮檔，是有損壓縮。它比GIF映像色彩比較更豐富逼真，適合儲存照片等映像，檔案也較小。
　　GIF檔案和JPEG檔案各有優點，如下表所示。採用哪種格式，可根據實際的圖片檔案來決定。

表　GIF與JPEG格式的比較

	GIF	JPG/JPEG
色彩	16/256色	真彩色
特殊功能	透明背景、動畫	無
壓縮是否有損失	無損壓縮	有損壓縮
適合情景	顏色有限，主要以漫畫圖案或線條為主，一般表現建築結構圖或手繪圖	顏色豐富，有連續的色調，一般表現真實的事物

 　　雖然GIF檔案和JPEG檔案是網際網路上最基本的圖片格式，但這並不是說在FrontPage中只能插入這兩種形式的圖片，其他諸如PNG、BMP、TIF、WMF、RAS、EPS、PCX、PCD、TARGA等檔案都可以在FrontPage中插入。FrontPage內嵌一個圖片轉換程式，會自動將BMP、TIF等沒有壓縮的圖片格式檔案轉換成JPEG或GIF格式檔案。  
 　　近幾年，PNG格式檔案又開始流行。它的特點是：只需下載映像的1/64，就可以在網頁上顯示一個低解析度的圖片，隨著圖片資訊的下載，圖片也越來越清晰。對於網路日益擁擠的今天，這種圖片格式顯然更適應當前的形式。
二、插入圖片
　　現在，我們學習如何將圖片放在網頁上。在網頁中，既可插入圖片檔案，也可插入剪貼畫或用板剪貼將圖片粘貼到網頁。
　　1、在網頁中插入圖片檔案
　　插入的圖片檔案最好是本網站中檔案，也可以是本地磁碟中甚至是網際網路網站中的圖片檔案。
　　【注意】和Word不同，插入的圖片並不包含在網頁（HTM）文檔中。在網站中還必須有對應的圖片檔案，而且在網際網路上發布時，圖片檔案和網頁檔案的相對位置必須和本地網站中一致。所以在插入非本網站中圖片檔案或用剪貼簿粘貼方法插入圖片後，儲存網頁時，會出現“儲存嵌入式檔案”對話方塊。提醒您將圖片檔案儲存到本網站中，以備將來上傳到網際網路伺服器。而最簡單的方法則是事先將各種所需的圖片檔案匯入（拷貝）到當前網站中。
　　將圖片或視頻匯入到網站中將使得您可以快速存取所需檔案。舉例說，您可以通過將圖片添加到網頁後儲存網頁的方式，來將圖片一張張地添加到您的網站中。然而，若您知道您將會用到某個圖片組，則可以將他們全部一次性匯入到在您的網站中所指定的檔案夾。然後，當您想要將圖片添加到網頁中，您能很快地訪問它，而不必到檔案系統中去尋找它。
　　如果您選擇的是網際網路網站中的圖片，若沒有儲存到您的網站中，則在您的網頁中此圖片只是一個路徑引用，如果此圖片被從它所在的Web網站上刪除，您將不能在您的網頁上看到它。
　　插入圖片檔案可通過“插入”菜單中的“圖片”/“來自檔案”命令，在“圖片”對話方塊上完成。
　　1）本網站中檔案直接在對話方塊的檔案清單中就可找到所需檔案（但要注意對話方塊的“搜尋”路徑是否本網站存放圖片檔案的檔案夾）；
　　2）網站外的本地磁碟中的影像檔則需單擊對話方塊上“從電腦上選擇一個檔案”按鈕，在“選擇圖片”對話方塊上選擇檔案夾及圖片檔案；
　　3）插入網際網路網站中的圖片則可在“圖片”對話方塊上的“URL”框中直接鍵入想要插入圖片的路徑和名稱（必須是英文URL）。或單擊對話方塊上“使用Web瀏覽器來選擇網頁或檔案”按鈕。在瀏覽器中尋找到合適的映像影像檔後，這時切換到FrontPage視窗，該影像檔的的地址就會自動在“圖片”對話方塊下的“URL”框中（注意：URL框中出現必須是圖片檔案路徑，不能是包含該圖片的網頁）。
　　【例1】在“迎春接福”網頁中插入一個事先引入到本地網站的“福顯高照”動畫圖片（fxgz.gif）。

　　1）在FrontPage中開啟“迎春接福”網頁（ycjf.htm）。
　　2）將游標移至需插入圖片處，單擊“插入”＞“圖片”＞“來自檔案”（下左圖）。
　　3）在“圖片”對話方塊上，選定圖片檔案“fxgz.gif”，單擊“確定”（下右圖）。

“插入圖片”菜單

“圖片”對話方塊

　　4）是在瀏覽狀態下插入了圖片的網頁：

瀏覽狀態下插入了圖片的網頁

　　【例2】在“圖片練習”網頁中插入老頑童網站中的“三江口新貌”圖片。

　　1）在FrontPage中開啟本地網站“網頁練習”，並單擊工具列中的“建立”按鈕，建立一個網頁。
　　2）在新網頁中輸入標題“圖片練習”。
　　3）單擊“插入”＞“圖片”＞“來自檔案”。在“圖片”對話方塊上，單擊“使用Web瀏覽器來選擇網頁或檔案”按鈕。這時會出現如所示的IE視窗。

　　4）在IE瀏覽器中找到老頑童網站，並在“老年樂園/美術園地”中找到“三江口新貌”圖片。並單擊瀏覽器的地址欄，使該圖片的URL被選中。
　　5）回到FrontPage視窗，在“圖片”對話方塊上，“URL”框中就會自動出現該影像檔的的地址“http://oldchild.nbc.net.cn/sjk.JPG”。

　　6）單擊“確定”按鈕，在新網頁中就會顯示“三江口新貌”圖片。

　　7）單擊常用工具列上的“儲存”按鈕，在“另存新檔”對話方塊中給新網頁檔案起名“tplx.htm”。單擊“確定”按鈕後即儲存好此網頁檔案，同時出現如所示的“儲存嵌入式檔案”對話方塊。

若選擇“確定”則會將圖片檔案儲存到本地網站中，我們選擇“取消”。這時本地網站中並沒有此圖片檔案，圖片檔案還在老頑童網站中。若某種原因老頑童網站打不開或此檔案被老頑童網站刪除，則此圖片就無法顯示。

　　2、給網頁添加剪貼畫（Office 2000內建的圖片）
　　FrontPage 2000 包含 Microsoft 剪輯庫。您可以預覽剪輯庫中的圖片，然後選用在您的網頁上。
　　在“插入”菜單上，指向“圖片”，然後單擊“剪貼畫”。在“剪貼畫庫”對話方塊中找到您想要用的剪貼畫，在圖形上單擊滑鼠右鍵，然後單擊捷徑功能表上的“插入”即可。
　　由於插入的剪貼畫不在本地網站中，所以在儲存網頁檔案時也會出現前面所示的“儲存嵌入式檔案”對話方塊。必須選擇“確定”則會將圖片檔案儲存到本地網站中。
　　【例】在“圖片練習”網頁中插入剪貼畫圖片。
　　1）在FrontPage中開啟“圖片練習”網頁。
　　2）將游標移至需插入圖片處，單擊“插入”＞“圖片”＞“剪貼畫”（下左圖）。
　　3）在“剪貼畫庫”對話方塊中選擇（單擊）“動物”類別（下右圖）。

插入剪貼畫菜單

“剪貼畫庫”對話方塊（類別）

　　4）在“剪貼畫庫”對話方塊中選擇找到剪貼畫“馬頭”，在其上右擊滑鼠，然後單擊捷徑功能表上的“插入”即插入此剪貼畫。

“剪貼畫庫”對話方塊（右擊剪貼畫的捷徑功能表）

　　5）單擊單擊常用工具列上的“儲存”按鈕，儲存“圖片練習”網頁。網頁檔案儲存好後，出現如上例所示的“儲存嵌入式檔案”對話方塊。
　　6）單擊“儲存嵌入式檔案”對話方塊上的“改變檔案夾”按鈕，出現“改變檔案夾”對話方塊。

　　7）單擊檔案夾“images”，再單擊“確定”，回到“儲存嵌入式檔案”對話方塊（如）。“檔案夾”下面的欄位已變成“images/”，即將該圖片檔案儲存到“images”檔案夾中。單擊“確定”即可完成圖片檔案的儲存。您也可以單擊“重新命名”來修改圖片檔案名稱，但是檔案名稱中不應有中文及中文符號。

　　【注意】在儲存圖片是時，FrontPage會根據圖片內容自動地轉換成 GIF格式或 JPEG 格式。若有圖片為 256色或更少顏色，會轉換成 GIF格式，而所有其它的圖片會轉換成 JPEG 格式。
　　3、通過給剪貼簿給網頁加片
　　和 Windows 的所有應用軟體一樣，可以通過剪貼簿將其它視窗的圖片粘貼到網頁上。這裡簡單介紹一下操作方法：在 Windows 的其它視窗選擇一幅中意的圖片，用滑鼠右擊，在彈出的捷徑功能表中選擇“複製”。然後用FrontPage開啟網頁檔案，將游標移至需插入圖片處，滑鼠右擊，在捷徑功能表中選擇“粘貼”，即可將圖片插入。
　　和插入剪貼畫一樣，在儲存網頁檔案時需將圖片檔案儲存到以磁碟為基礎的網站中。
三、改變圖片的大小和位置
　　在FrontPage中改變圖片的大小和位置的方法與Word一樣。
　　1、改變圖片大小
　　單擊（選中）圖片，將滑鼠移到圖片四邊及四角的控制點（小方塊）上，當滑鼠指標變成雙箭頭時，按下左鍵拖動即可改變圖片大小。
　　【注意】改變圖片大小隻改變了它在網頁中所佔的平面空間，並不能改變圖片檔案的大小。
　　2、改變圖片大小
　　滑鼠移到圖片上，按下左鍵拖動即可改變圖片的位置。
四、設定背景圖片
　　可以採用合適的圖片做網頁的背景，使網頁更漂亮。下面我們舉例說明給“網頁練習”以磁碟為基礎的網站中的首頁加一個背景圖片的具體步驟：
　　1）單擊“格式”菜單，在下拉式功能表中選擇“背景”（下左圖），出現如下右圖所示的“網頁屬性”對話方塊（“背景”選項卡）。
　　2）用按一下滑鼠對話方塊中“背景圖片”前的方框，使這個小方框中出現一個對勾 (稱為“選中”)。

“網頁屬性”/“背景”對話卡

　　3）單擊“瀏覽(B)”，開啟“選擇背景圖片”對話方塊（）。

“選擇背景圖片”對話方塊

　　4）在該對話方塊中開啟“images”檔案夾，選擇“0002.jpg”作為背景圖片，單擊“確定”按鈕，返回“網頁屬性”對話方塊，在“網頁屬性”對話方塊中單擊“確定”按鈕。就可得到如所示的有背景的網頁。

在瀏覽器中的有背景的首頁

五、插入視頻
　　在網頁上不僅僅可以設定動聽的音樂，而且還可以在網頁上設定一段小電影(視頻檔案)，如果你有網路攝影機，能夠攝製錄影，那麼參觀網頁的人不僅能聽到你的聲音，看到你的圖片，更可以看到你的表演！但是視頻檔案都比較大，一般都有幾 MB。大家在使用視頻檔案時要注意伺服器的空間。
　　現在，我們就在“網頁練習”以磁碟為基礎的網站中的首頁上插入一段視頻。注意，最好將小電影的內容轉化為副檔名為AVI的視頻檔案。
　　首先，將視頻檔案匯入到當前網站。在首頁中，確定好游標的位置。單擊“插入”菜單，在下拉式功能表中選擇“圖片”，當出現下級菜單時，單擊“視頻”（下左圖），開啟“視頻”對話方塊（下右圖）。

插入視頻

“視頻”對話方塊

　　 在“視頻”對話方塊中，開啟“images”檔案夾，選中“fox.avi”，單擊“確定”按鈕，視頻檔案即被插入。和圖片一樣，我們可以調整一下視頻檔案播放視窗的大小。
　　剛插入的視頻檔案看起來更像一幅圖片，通過設定可以為視頻檔案添加播放控制項。將滑鼠移動到視頻檔案上，單擊滑鼠右鍵，彈出捷徑功能表，在捷徑功能表中選擇“圖片屬性”，開啟“圖片屬性”對話方塊，如所示。

“圖片屬性”對話方塊

　　在“圖片屬性”對話方塊中，選中“在瀏覽器中顯示控制項”；在“重複”地區選中“不限次數”在“播放”地區選中“開啟檔案時”，單擊“確定”。就得到如所示的結果。
　　儲存網頁後，單擊[檔案] 功能表，在下拉式功能表中選擇“在瀏覽器中預覽”，在IE瀏覽器中將網頁開啟，就可以欣賞帶一個旋轉地球視頻的網頁了。

已經加上控制項的視頻檔案

　　【注意】和在第三講中所述的“播放網頁中的聲音”相同，假如在在IE瀏覽器無法播放視頻，可重新設定IE瀏覽器“Internet選項”的“進階”選項，在其中選中“多媒體”類的“播放網頁中的視頻”。

【練一練】
　　為自己的網頁插入一些圖片，並給首頁加一個背景圖片。