第七講 圖片的調整和處理

一、運用特殊效果
　　在FrontPage 2000中，利用專門的“圖片”工具列上的命令按鈕可以對網頁中的圖片進行簡單處理。例如設定透明色、設定凹凸效果、調整對比、亮度、剪裁、以及在gif格式的圖片上添加文字等。
　　1、圖片工具列
　　通常，當選中某一圖片後，“圖片”工具列即會出現在螢幕上。用滑鼠右擊工具列，選擇“圖片”也會出現圖片工具列。
　　圖片工具列一般會在選中圖片時出現在FrontPage視窗的下端，但也可以移動到視窗的其它位置。圖片工具列上各按鈕的名稱如所示,將滑鼠移到每個按鈕上也會顯示其名稱。

圖片工具列各按鈕的名稱

　　2、將圖片背景色設為透明色
　　將圖片背景色設為透明色，可以使一幅圖片與頁面真正融為一體。選中圖片，單擊圖片工具列的“設定透明的顏色”按鈕，再去單擊圖片中的空白處，則單擊處的那種顏色就成為透明的顏色。就是透明色設定前後的情況。

　　【注意】只有GIF格式映像才能設定背景透明色。而且要求原始圖片的背景必須是單一的顏色，不能有其它顏色幹擾。中有些地方不”透明“，就是原圖片“不乾淨”的緣故。
　　3、將圖片設成“凹凸效果”
　　選中圖片，單擊圖片工具列的“凹凸效果”按鈕，圖片邊界就呈凹凸化，使圖片看起來有立體效果。

　　4、“剪裁”圖片
　　有的時候，圖片過大，而我們只需要圖片中的一小部分，用滑鼠按鍵拖動圖片的控點只能按比例使圖片縮小。用圖片工具列的“剪裁”按鈕可以對圖片進行裁剪而不必開啟影像處理軟體。操作步驟如下”
　　1）選中（單擊）要剪裁的圖片，單擊該按鈕，出現一個比圖片略小的的虛線框，四邊及四角有8個控點：

　　2）拖動其中一個控點，使虛框內只包含部分圖片：

　　3）再次單擊“剪裁”按鈕，圖片將只剩下虛框內的內容。

　　其它各按鈕的作用如下：
　　●“插入檔案中的圖片”按鈕。相當於“插入”菜單中的“圖片”＞“來自檔案”命令。單擊此按鈕會開啟“插入圖片”對話方塊。
　　●“文本”按鈕。用於在圖片中加入文本。但該圖片必須是GIF格式的，如果不是，FrontPage會自動將它轉換成GIF格式圖片檔案。
　　●“自動影像目錄標籤”按鈕。用於將選中的圖片產生一個縮圖，並在縮圖中建立一個連結到該圖片的超連結。
　　●“絕對位置”按鈕。在定義層時，設定映像在當前層的絕對位置。
　　●“上移一層”按鈕。在定義層時，將圖片上移一層。
　　●“下移一層”按鈕。在定義層時，將圖片下移一層。
　　●“向左旋轉”按鈕。將圖片逆時針旋轉90°。
　　●“向右旋轉”按鈕。將圖片順時針旋轉90°。
　　●“水平翻轉”按鈕。將圖片沿垂直線對稱翻轉。
　　●“垂直翻轉”按鈕。將圖片沿水平線對稱翻轉。
　　●“增加對比”按鈕。增加圖片前景色彩和背景色的對比。
　　●“減少對比”按鈕。降低圖片前景色彩和背景色的對比。
　　●“增加亮度”按鈕。增加圖片顏色的明亮度。
　　●“減少亮度”按鈕。減少圖片顏色的明亮度。
　　●“黑白模式”按鈕。如果當前圖片是彩色的，單擊此按鈕可以將彩色的圖片變成黑白的。
　　●“沖蝕”按鈕。可以淡化圖片的顏色，形成”浮水印“效果。
　　●“重新取樣”按鈕。調整圖片大小以後，單擊該按鈕可以獲得調整之後的圖片。
　　●“選定”按鈕。 用於選擇網頁中的圖片。
　　●“長方形熱點”按鈕。可以在圖片中划出長方形作用區用於超連結。
　　●“圓形熱點”按鈕。可以在圖片中划出圓形作用區用於超連結。
　　●“多邊形熱點”按鈕。可以在圖片中划出多邊形作用區用於超連結。
　　●“反白熱點”按鈕。 在圖片中可以反白作用區。
　　●“還原”按鈕。 單擊該按鈕可以還原圖片被編輯前的狀態。
　　【注意】特殊效果設定後，在儲存網頁時，一般會出現“儲存嵌入式檔案”對話方塊，你必須重新儲存圖片檔案才能把該效果保留下來。
二、如何使圖片檔案變小和減少圖片的下載時間
　　1、通過重新取樣使圖片檔案變小
　　當圖片檔案較大時，不但首頁空間的佔用會迅速增加，而且網頁的下載時間也會變得很長。有可能使客戶失去耐心，從而大大網站的減少瀏覽人數。因此，網頁製作者一定要學會使圖片檔案變得較小的方法：
　　單擊圖片，然後拖動圖片上的控點可調整其大小。拖動角部的控點可在改變大小時保持它的縱橫比不變。
　　調整圖片大小隻是在網站訪問者的 網頁瀏覽器中改變圖片的顯示方式。因此，若您只將大圖片的大小調整為較小尺寸，圖片檔案大小仍然和原來一樣大。要減少圖片的檔案大小和下載時間，您必須在調整大小後對圖片重新取樣。重新取樣圖片會使檔案大小減少以匹配較小的尺寸。
　　重新取樣很簡單，在網頁視圖模式下，選中（單擊）已經調整好了大小的圖片，然後單擊在“圖片”工具列上的“重新取樣”按鈕就行了。
　　通過重新取樣後的圖片，必須在儲存網頁時同時通過“儲存嵌入式檔案”對話方塊重新儲存圖片檔案，才能使圖片檔案真正減小。
　　【例】在網頁“圖片練習”中插入一個較大的圖片檔案“新年快樂”，然後用減少圖片尺寸加重新取樣的方法使圖片檔案變小。
　　1）開啟“圖片練習”網頁
　　2）將游標移至需插入圖片處，單擊“插入”＞“圖片”＞“來自檔案”（下左圖）。
　　3）在“圖片”對話方塊上，選定圖片檔案“newyear.jpg”，單擊“確定”（下右圖）。

　　4）單擊“查看”＞“檔案夾”，使視窗變成“檔案夾”視圖。找到“images”檔案夾中的“newyear.jpg”檔案，可以看到其檔案大小為58KB。

　　5）按一下滑鼠圖片，然後將滑鼠移到一角的控制點往裡拖動，使圖片變小：

這時再在“檔案夾”視圖中看“newyear.jpg”檔案的大小仍為58KB。
　　6）單擊在“圖片”工具列上的“重新取樣”按鈕，“newyear.jpg”檔案的大小仍沒有變。
　　7）單擊“儲存”按鈕，儲存“圖片練習”網頁，同時通過“儲存嵌入式檔案”對話方塊重新儲存圖片檔案“newyear.jpg”。這時再在“檔案夾”視圖中看“newyear.jpg”檔案的大小變為12KB。

　　2、降低圖片品質使圖片檔案變小
　　通過降低品質使圖片檔案的壓縮率增加，從而檔案大小也會大大減少。只有 JPEG 格式的圖片才能這麼做，非 JPEG 格式的圖片首先要轉換為 JPEG 格式。
　　在網頁視圖模式下，在 JPEG 格式圖片上單擊滑鼠右鍵，然後單擊捷徑功能表上的“圖片屬性”。可得到所示的“圖片屬性”對話方塊，一般就顯示其中的“常規”選項卡

“圖片屬性”對話方塊的“常規”選項卡

　　在圖中可以看出，對於JPG檔案，在“類型”欄中就自動選中“JPEG”。而其後面的“品質”框中顯示圖片的品質參數，預設值是75。取值範圍為 1～100 ，該數值越大，品質越好，但圖片檔案也越大。你可以將此值改成一個較小的值有降低圖片的品質。點擊“確定”完成設定，然後再儲存網頁，同時通過“儲存嵌入式檔案”對話方塊重新儲存圖片檔案，就可減少圖片檔案的大小。本講前例中的幾幅圖片就通過這種方法來減少圖片檔案的大小。通過將“品質”值從75減少到30，大約可將檔案大小減少到原來的一半。從前面的幾幅圖片可以看出，這種方法對連續映像品質的影響比較小，而對輪廓分顯的文字圖片影響比較明顯。
【練一練】
　　在以磁碟為基礎的網站“網頁練習”中建立一個網頁，插入兩幅較大的圖片。先在“檔案夾”視圖中看一下它們的檔案大小。然後將第一個圖片的尺寸變小，再執行“重新取樣”命令；對第二個圖片（必須是JPG檔案）的屬性進行重新設定，降低它的“品質”值。再看一下它們的檔案大小。最後通過儲存網頁重新儲存圖片檔案，看圖片檔案的減少情況。
　　3、使用縮圖
　　圖片的下載時間往往很長，特別是對於使用低速 網際網路連線的網站訪問者。所以人們一般不在網頁中插入大的精美的圖片。可是在一些特殊情況下，往往需要一些特別清晰的圖片。為瞭解決這個問題，FrontPage提供了圖片縮圖功能。
　　在網頁中用一張原圖的縮圖來替代原圖，其面積、檔案位元組數比原圖要小得多。同時自動建立縮圖與原圖之間的超級連結。普通的瀏覽者只需瀏覽縮圖，而不會影響到整個網頁的顯示速度。需要看到清晰大圖片的瀏覽者，只需在縮圖上單擊，瀏覽器就會立即開啟原圖。
　　將該圖片設定成縮圖的操作方法很簡單。只要選中該圖片。單擊圖片工具列上的“自動影像目錄標籤”按鈕。這時選中的圖片便縮小為一個小的圖片，且四周有一個藍色的方框。這時FrontPage已經建立了指向縮圖原來大圖片的超連結，在瀏覽器中開啟網頁單擊縮圖就能將大圖片開啟。
　　儲存網頁檔案時，將會出現提示儲存縮圖（及原圖）。預設情況下，縮圖的檔案名稱是在原圖檔案名稱後面加上“_small”，副檔名相同。
　　值得注意的是：並不是所有的圖片都能設定成縮圖，如果要處理的圖片比縮圖的預設尺寸還要小，或者映像上有超連結，再或者該圖片是GIF動畫圖片，那麼FrontPage不能產生縮圖。
　　【例】將網頁“圖片練習”中的圖片“三江口”設定成縮圖
　　1）開啟網頁“圖片練習”，單擊“三江口”圖片。

網頁中的“三江口”圖片被選中

　　2）單擊圖片工具列上的“自動影像目錄標籤”按鈕。這時選中的圖片便縮小為一個小的圖片。

圖3.26 圖片被設定成縮圖

　　3）單擊常用工具列上的“儲存”按鈕，儲存“圖片練習”網頁，同時出現“儲存嵌入式檔案”對話方塊：

　　注意：縮圖的檔案名稱是在原圖檔案名稱“sjk”後面加上“_small”，單擊“確定”完成儲存。
　　4）在[檔案] 功能表中選用“在瀏覽器中預覽”命令，看到的“三江口”圖片只是一個縮圖。但用按一下滑鼠它，就能看到精美的原圖。
　　【有關縮圖的設定】
　　對於縮圖可以使用預設值。但若你對預設設定值不滿意，例如希望縮圖再大一點。則可以更改設定值。操作方法如下：
　　1）單擊“工具”菜單，選擇其中的“網頁選項”命令，開啟“網頁選項”對話方塊，選取“自動影像目錄標籤”選項卡，如所示。

　　2）在“網頁選項”對話方塊的“自動影像目錄標籤”選項卡上設定三項選項。
　　“設定”框和“像素”框可設定縮圖的大小。“設定”框確定用那一個參數決定大小（預設為“寬度”），“像素”框確定這個參數的值（預設值為“100”）。若將“像素”框的設定值改為200，縮圖就會放大一倍（縮圖的高度隨寬度的增加自動按比例增加）。但縮圖的檔案大小和下載時間也相應增加。
　　“邊框粗細”複選框，選中後可在其右側的“像素框中”選定縮圖的邊框粗細；
　　在網頁視圖模式下，在圖片上單擊滑鼠右鍵，單擊捷徑功能表上的“圖片屬性”，然後單擊“常規”選項卡。
　　在“低解析度”框中，鍵入另一低解析度圖片的檔案名稱或單擊“瀏覽”來找到它。若圖片在網站中，瀏覽到包含圖片的網站和檔案夾，然後選擇您想要的圖片。若圖片在您的區域網路上，則單擊“從電腦上選擇一個檔案” ，然後從區域網路上瀏覽到您想要的圖片。若圖片在全球廣域網路上，則單擊“使用網頁瀏覽器來選擇網頁或檔案”。在您的 網頁瀏覽器中，瀏覽到您想要的圖片，然後切換回到FrontPage 2000，您已訪問過的網頁位置將會顯示在 “URL” 框中。
　　對於大型圖片或高解析度圖片該功能很有用。如果圖片是影像地圖，則使用低速 網際網路連線的網站訪問者能單擊基於低解析度圖片的熱點，而不用去等待整個高解析度圖片完成下載。

【練一練】
　　建立一個網頁，插入幾幅你喜歡的照片，把它們做成縮圖，並把網頁以“zpj.htm”（“照片集”）檔案名稱儲存。
三、設定圖片屬性
　　FrontPage提供了許多方法對插入網頁的圖片進行控制和最佳化，其中圖片屬性設定是重要手段。
　　單擊 “格式”菜單，在彈出的菜單中選擇“屬性”，得到如所示的“圖片屬性”對話方塊，在該對話方塊中共有3個選項卡（圖中顯示的是“常規”選項卡）。

“圖片屬性”對話方塊“常規”選項卡

　　1、“常規”選項卡
　　在“常規”選項卡上可以改變圖片及圖片的格式等。
　　“常規”選項卡共分4個地區，其中“預設超連結”部分用於設定超連結，我們將在下一講專門學習，這裡就不介紹了。
　　1）圖片來源區域：這部分主要顯示圖片檔案的檔案名稱。右端有兩個按鈕，“瀏覽”按鈕用於尋找圖片，可以將當前圖片更改成另一副圖片；“編輯”按鈕可以啟動FrontPage預設的圖片編輯器，直接對圖片進行編輯和修改。
　　2）類型地區：這部分用於設定圖片檔案的類型，FrontPage會自動檢測圖片檔案的類型，並顯示出來。如果在這裡改變圖片檔案的類型，例如原來是GIF格式，你將它改為JPEG格式。則在在儲存網頁時，會出現“儲存嵌入式檔案”對話方塊，要求你儲存JPEG格式的圖片檔案。
　　如果圖片是GIF檔案，會有兩個選項。“透明”方式可以使瀏覽者透過圖片看到背景；“交錯”方式是當圖片較大時，瀏覽器會逐漸顯示圖片，一次比一次清晰，而不是等圖片下載完畢後再顯示。由於現在網速普遍變快，而GIF檔案又比較小，交錯方式的作用已經不明顯了。
　　對於JPEG檔案也有兩個選項：“品質”選項前面已經介紹過了； “漸進式變化”與GIF檔案的“交錯”方式相類似，能使圖片檔案分段下載。
　　3）“替代表示”地區：單擊“低解析度”後面的“瀏覽”按鈕，選擇一幅低解析度、體積較小的圖片，這樣瀏覽網頁時，先下載低解析度的圖片，然後再下載整幅圖片，將其覆蓋。使得瀏覽者在網速較慢的情況下，在瀏覽器下載完整個大型高解析度圖片前就可以完整地看到整個網頁；在“文本”後面的框中輸入圖片的解說文字，當無法下載圖片時，瀏覽者雖然無法看到圖片，但可以看到圖片的解說文字。
　　2、“視頻”選項卡
　　“視頻”選項卡主要用於影像檔案(AVI檔案)的設定，前面我們已經學習過。
　　3、“外觀”選項卡
　　 開啟“外觀”選項卡，如所示。

“外觀”選項卡

　　“外觀”選項卡分“布局”和“大小”二個選項區
　　1）“布局”地區中共有4項可供選擇：
　　“對齊”提供了10種對齊，最常用的是左、右；
　　“邊框粗細”是指在圖片的四周加上框線的粗細，預設狀態為0，即沒有框線；
　　“水平間距”指水平方向上文字與圖片的距離；
　　“垂直間距”指垂直方向上文字與圖片的距離。
　　2）“大小”選項區
　　通過選中“指定大小”複選框，可以設定圖片的寬度和高度。若在其下面選中“像素”，則圖片的大小以絕對像素值度量；而在其下面選中“百分比”，則與瀏覽器寬度的百分比作為度量單位。
　　選中“保持縱橫比”複選框，則可保持圖片的原有縱橫比，設定高度和寬度時，只需設定其中之一。這樣做的效果和用滑鼠拖動圖片四角控點的方法是一樣的。
四、圖片的定位方式
　　當將圖片插入到含有文欄位落的網頁中時，圖片與文字流向在一起，只能在不同行中移動，並不能任意移動位置，而且由於圖片較高，將文字的行間距也拉高了，如所示。

在文字中沒有定位的圖片

　　對圖片採用絕對位置或相對定位可以任意移動圖片在網頁中的位置。
　　1、圖片的絕對位置
　　將網頁左上方定為(0，0)，根據給定的座標(X，Y)，來確定圖片在網頁中的位置，即為絕對位置。
　　選中圖片後，單擊“圖片”工具列“絕對位置”按鈕就可以完成絕對位置。選擇絕對位置之後，我們就可以任意移動圖片在網頁中的位置。
　　說明一點，這時圖片實際上是浮在網頁上的，它可能會擋住網頁上的文字，如所示（單擊“圖片”工具列“下移一層”按鈕，可使圖片置於文字下面）。而且當網頁中的文字進行格式變化時，絕對位置的圖片並不會跟著移動變化，這給網頁修改帶來一些麻煩。要想使圖片隨著網頁格式的變化一起變化，可以採用圖片的相對定位。

圖片浮在文字上的絕對位置

　　2、圖片的相對定位
　　相對定位就是根據與文本段落中其他元素的位置來制定圖片的位置，在這種情況下可以設定圖片與文本的環繞方式。
　　選中圖片，單擊“格式”菜單，選擇“定位”命令，開啟“定位”對話方塊。

“定位”對話方塊

　　單擊“定位樣式”地區中的“相對”框，在“環繞樣式”地區中“無”、 “左”、 “右”三種環繞方式中選擇選擇一種環繞方式，可以得到如所示的網頁。

圖片相對定位後的網頁（左環繞）