第05章使圖像

1、中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)第第5章章 使使 用用 圖圖 像像 在精美的網(wǎng)頁(yè)中可以沒有文本，但不能沒有圖像等多媒體元素，這足見圖像在網(wǎng)頁(yè)中的作用。在網(wǎng)頁(yè)中適當(dāng)?shù)夭迦雸D像可以使網(wǎng)頁(yè)增色不少，更重要的是可以借此直觀地向?yàn)g覽者表達(dá)信息，但是，圖像的大小和數(shù)量會(huì)影響網(wǎng)頁(yè)的下載時(shí)間。因此，圖像要用得少而精，必要時(shí)應(yīng)使用圖像處理軟件，在不失真的情況下盡量壓縮圖像尺寸。本章主要介紹了插入與編輯圖像的基本方法，以及設(shè)置插入圖像的屬性。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)通過本章的理論學(xué)習(xí)和上機(jī)

2、實(shí)訓(xùn)，讀者應(yīng)了解和掌握以下內(nèi)容:v插入圖像 v編輯圖像 v設(shè)置圖像屬性 v創(chuàng)建鼠標(biāo)經(jīng)過圖像 v使用fireworks文件 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)本章章節(jié)內(nèi)容安排如下:v5.1 插入圖像 v5.2 編輯圖像 v5.3 創(chuàng)建鼠標(biāo)經(jīng)過圖像 v5.4 插入圖像占位符 v5.5 使用fireworks文件 v5.6 思考與練習(xí) 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.1 插 入 圖 像 在網(wǎng)頁(yè)中插入圖像通常是用于添加圖形界面(如導(dǎo)航按鈕)、創(chuàng)建具有視覺感染力的內(nèi)容(如照片)或交互式設(shè)

3、計(jì)元素(如鼠標(biāo)經(jīng)過圖像或圖像地圖)。 vweb頁(yè)中常用圖像格式 v插入圖像到文檔 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)web頁(yè)中常用圖像格式 圖像的文件格式有很多種，但web頁(yè)中通常使用的有g(shù)if、jpeg 和 png 3種，它們的一個(gè)共同特點(diǎn)是壓縮率較高。目前，gif 和 jpeg 文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。png 文件具有較大的靈活性并且文件尺寸較小，所以它幾乎對(duì)于任何類型的 web 圖形都是最適合的。但是，microsoft internet explorer(4.0和更高版本)和 netscape navi

4、gator(4.04 和更高版本)只能部分支持 png 圖像的顯示。因此，為保證所有瀏覽者都能查看到圖像，通常向網(wǎng)頁(yè)中插入圖像都是使用 gif 或 jpeg 文件格式。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)插入圖像到文檔 選擇“插入”工具欄中的“常用”選項(xiàng)卡，然后單擊第6個(gè)按鈕旁邊的下拉箭頭，選擇“圖像”命令(如圖所示)，或選擇“插入”|“圖像”命令，都可打開“選擇圖像源文件”對(duì)話框，在“選擇圖像源文件”對(duì)話框中選中合適的圖像文件，單擊“確定”按鈕即可將圖像插入到網(wǎng)頁(yè)中。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與

5、上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.2 編 輯 圖 像 在網(wǎng)頁(yè)中插入圖像后，選定某個(gè)圖像可在圖像檢查器中對(duì)其進(jìn)行設(shè)置。同時(shí)在dreamweaver 8中可以將其他外部圖像編輯應(yīng)用程序設(shè)置為外部圖像編輯器，并從dreamweaver 8中啟動(dòng)該編輯器修改圖像，當(dāng)保存了所做的修改后，在dreamweaver 8中可以查看更新后的圖像。v圖像的屬性檢查器 v對(duì)齊圖像 v調(diào)整圖像大小 v使用外部圖像編輯器編輯圖像中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)圖像的屬性檢查器 在網(wǎng)頁(yè)文檔中選擇一個(gè)圖像，然后選擇“窗口”|“屬性”命令，打開“圖像”屬性檢查器，可在該屬性檢

6、查器中設(shè)置圖像的所有參數(shù)，如圖所示。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)對(duì)齊圖像 使用“圖像”屬性檢查器可以設(shè)置圖像相對(duì)于同一段落或行中其他元素的對(duì)齊方式。例如，可以將圖像與同一行中的文本、另一個(gè)圖像、插件或其他元素對(duì)齊，同時(shí)還可以使用對(duì)齊按鈕(左對(duì)齊、右對(duì)齊、居中對(duì)齊)設(shè)置圖像的水平對(duì)齊方式，如圖所示。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)調(diào)整圖像大小 在dreamweaver 8文檔窗口中，用戶可以調(diào)整元素的尺寸，如圖像、插件、shockwave和flash電影、activex控件

7、等。使用屬性檢查器中的“寬”和“高”文本框可以完成這一操作，但文件大小并不會(huì)改變。 當(dāng)選擇文檔中的圖像時(shí)，在圖像的周圍將出現(xiàn)3個(gè)控制點(diǎn)，將光標(biāo)移到控制點(diǎn)，然后根據(jù)箭頭方向拖動(dòng)這些控制點(diǎn)，可以改變圖像的大小，如圖所示。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)使用外部圖像編輯器編輯圖像 在dreamweaver 8文檔窗口中的圖像可以使用外部的圖像編輯器來編輯，然后保存并返回dreamweaver 8時(shí)，網(wǎng)頁(yè)文檔窗口中的圖像也隨著被更新。 選擇“編輯”|“首選參數(shù)”命令，打開“首選參數(shù)”對(duì)話框，在“分類”列表框中選擇“文件類型/編輯器”選項(xiàng)，打開

8、“文件類型/編輯器”選項(xiàng)卡，可以為指定的圖像文件類型設(shè)置外部圖像編輯器，如圖所示。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.3 創(chuàng)建鼠標(biāo)經(jīng)過圖像 鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看，并使用鼠標(biāo)指針移過它時(shí)發(fā)生變化的圖像。它實(shí)際上由主圖像(當(dāng)首次載入頁(yè)面時(shí)顯示的圖像)和次圖像(當(dāng)鼠標(biāo)指針移過主圖像時(shí)顯示的圖像)兩部分組成，并且這兩個(gè)圖像應(yīng)大小相等，如果大小不同，dreamweaver 8 將自動(dòng)調(diào)整第二個(gè)圖像的大小以匹配第一個(gè)圖像的大小。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.4 插入圖像

9、占位符 圖像占位符是在準(zhǔn)備好將最終圖像添加到網(wǎng)頁(yè)文檔之前而使用的圖像，使用“圖像占位符”可以避免由于沒有圖像而導(dǎo)致無法繼續(xù)設(shè)計(jì)網(wǎng)頁(yè)的尷尬。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.5 使用fireworks文件 dreamweaver 8作為可視化網(wǎng)頁(yè)編輯工具，與fireworks一起使用，可以使網(wǎng)頁(yè)設(shè)計(jì)更加方便、快捷。用戶使用fireworks可以創(chuàng)建各種適用于dreamweaver 8的圖像和html文件。并且可以通過放置于文檔中的fireworks 圖像來啟動(dòng)fireworks應(yīng)用程序，并進(jìn)行優(yōu)化和編輯。在網(wǎng)頁(yè)文檔中，可以直接插入fi

10、reworks創(chuàng)建的gif、jepg或png圖像，與插入其他gif、jepg圖像一樣。 v在fireworks中更新dreamweaver圖像占位符 v使用fireworks來優(yōu)化或編輯圖像 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)在fireworks中更新dreamweaver圖像占位符 如果系統(tǒng)中裝有fireworks應(yīng)用程序，則可以根據(jù)dreamweaver 圖像占位符創(chuàng)建新的圖形。新圖像的大小設(shè)置與占位符圖像的大小相同。用戶可以在fireworks中編輯該圖像，然后在 dreamweaver中替換它。 中文版中文版dreamweaver

11、 dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)使用fireworks來優(yōu)化或編輯圖像 在dreamweaver內(nèi)部圖像編輯器不能滿足編輯圖像的要求時(shí)，可以使用fireworks優(yōu)化或編輯圖像。這時(shí)可先選取要編輯的圖像，單擊“圖像”屬性檢查器中的“編輯”按鈕，啟動(dòng)fireworks并進(jìn)行編輯。在使用fireworks來編輯圖像前，要先將該圖像類型的外部圖像編輯器設(shè)置為fireworks。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.6 思考與練習(xí) 填空題填空題 1.在網(wǎng)頁(yè)中插入圖像通常是用于 、 或 。 2.圖像的文件格式有很多種，在w

12、eb頁(yè)中通常使用的只有 、 和 3種，這3種格式的一個(gè)共同特點(diǎn)是 。 3.插入圖像時(shí)，在“選擇圖像源文件”對(duì)話框中，選中 單選按鈕可以選擇一個(gè)圖形文件；選中 單選按鈕可以選擇一個(gè)動(dòng)態(tài)圖像源文件。 4.用戶在 對(duì)話框中，可以對(duì)現(xiàn)有的文件類型設(shè)置外部圖像編輯器。 5.當(dāng)在外部圖像編輯器中編輯完圖像后，保存并返回dreamweaver 8時(shí)，網(wǎng)頁(yè)文檔窗口中的圖像會(huì) 。 6.鼠標(biāo)經(jīng)過圖像中的這兩個(gè)圖像應(yīng)大小相等，當(dāng)兩個(gè)圖像大小不同，dreamweaver 8 將自動(dòng)調(diào)整第 個(gè)圖像的大小以匹配第 個(gè)圖像的屬性。 中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5

13、.6 思考與練習(xí) 選擇題選擇題 7. 在dreamweaver 8中圖像的默認(rèn)對(duì)齊方式是( )。 a. 左對(duì)齊 b. 基線 c. 頂端d. 底部8. 在dreamweaver 8中要按比例調(diào)整圖像的大小，應(yīng)在按住( )鍵的同時(shí)，調(diào)整圖像的控制點(diǎn)。 a. ctrlb. alt c. shiftd. tab中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.6 思考與練習(xí) 選擇題選擇題 9. 在網(wǎng)頁(yè)中設(shè)置文本在圖像的右側(cè)自動(dòng)換行，應(yīng)選擇的對(duì)齊方式是( )。 a. 左對(duì)齊 b. 底部 c. 絕對(duì)中間 d. 右對(duì)齊10. 在網(wǎng)頁(yè)圖像上創(chuàng)建熱點(diǎn)，將鏈接后的網(wǎng)頁(yè)載入的父窗口中，在“目標(biāo)”下拉列表框應(yīng)設(shè)置的選項(xiàng)是( )。 a. _blankb. _parent c. _self d. _top中文版中文版dreamweaver dreamweaver 8基礎(chǔ)與上機(jī)實(shí)訓(xùn)基礎(chǔ)與上機(jī)實(shí)訓(xùn)5.6 思考