【正文】 的方法來調(diào)整圖的尺寸時(shí)，圖最小允許縮小到 6*6 素的大小，若需要得到更小的圖，則應(yīng)在之間設(shè)置圖屬性面板中的“寬”和“高”的參數(shù)值。 注意：在網(wǎng)頁文檔中除非必要，否則不要大幅度地改變圖的尺寸，因?yàn)檫@樣做容易使圖失真。 要想恢復(fù)圖的原始面貌，單擊圖屬性面板上的“重設(shè)大小”按鈕即可。 4 調(diào)整圖在網(wǎng)頁中的相應(yīng)位置 經(jīng)常會遇到這樣的情況，所插入的一幅或多幅圖在網(wǎng)頁中的排列位置不太合理，就需要調(diào)整圖在網(wǎng)頁中的相應(yīng)位置 。利用 Dreamweaver 來調(diào)整圖位置的方法比較簡單，具體操作方法如下。 （ 1）選中網(wǎng)頁中需要調(diào)整位置的圖。 （ 2）單擊圖屬性面板上“源文件”右側(cè)的下位列表框（如圖 5— 5 所示） （ 3）根據(jù)圖在網(wǎng)頁中的位置情況，選擇其中一種合理的對齊方式。 Dreamweaver 8 在圖屬性面板上提供了 10 種對齊方式，其含義如下。 默認(rèn)值：這種方法取決于用戶瀏覽其所設(shè)置的排列方式。 基線：將文本或其他元素的基線與所選中圖的底邊對齊。 頂端：將文本或其他元素排列在選中的圖所在行的最頂端。 中間：將文本或其他元素的基線排列在所 選中圖的中間。 文本上方：將所選中圖的頂端與文本的最頂端對齊。 絕對中間：將元素排列在當(dāng)前行的絕對中間。 絕對底邊：將元素排列在當(dāng)前行的絕對底邊。 左對齊：將所選中圖靠左邊界排列，文本在右邊向左圍繞它排列。 右對齊：將所選中圖靠右邊界排列，文本在左邊享有圍繞它排列。 5 編輯圖 在頁面中合理的使用圖形圖已經(jīng)成為網(wǎng)頁制作的一個基本要求。但是并非所有圖形圖都可以直接用在網(wǎng)頁中，大多數(shù)情況下，需要對原始圖素材進(jìn)行一些處理，例如圖優(yōu)化添加特效等，然后再在網(wǎng)頁中使用。要方便得完成相關(guān)的尺里工作，則需要圖形處理軟件的協(xié) 助。另外，對于具備創(chuàng)作才能的網(wǎng)頁的圖形圖像處理軟件包括 Photoshop Fir work Flash 等。多由這些都屬于對網(wǎng)頁的美化工作，這一部分的相關(guān)內(nèi)容將在本書第 13 章詳細(xì)介紹。 6 更換圖 由于當(dāng)初在設(shè)計(jì)網(wǎng)頁是沒有找到合適的圖，或有些圖過于“陳舊”已不適合當(dāng)前的網(wǎng)頁主題等原因，往往需要更換原有的圖，具體操作方法如下。 （ 1）選中網(wǎng)頁中需要更換的圖。 （ 2）單擊圖屬性面板上“源文件”右側(cè)的“瀏覽文件”按鈕 （如圖 5—— 5 所示）。 （ 3）從打開的“選擇圖源”對話框搜索選擇合適的圖。 （ 4）單擊“確定”按鈕。 7 實(shí)現(xiàn)“魔法圖” 上網(wǎng)瀏覽的訪問者經(jīng)常會遇到這樣的現(xiàn)象，當(dāng)鼠標(biāo)移動到某個圖上時(shí)，它會變?yōu)榱硪环鶊D，當(dāng)鼠標(biāo)移走后又恢復(fù)原始圖，這種效果的圖稱為反轉(zhuǎn)圖或“魔法圖”。具體操作方法如下。 （ 1）在已經(jīng)創(chuàng)建的 img 文件夾中準(zhǔn)備兩幅圖，一個用于正常顯示的圖（如 gielgif），一個用于鼠標(biāo)移到圖上時(shí)所變換的圖（如 tsgif） . （ 2）新建一個網(wǎng)頁，將光標(biāo)定位到需要插入反轉(zhuǎn)圖的位置。 （ 3）單擊“插入”面板的“常用”選項(xiàng)卡中的“鼠標(biāo)經(jīng)過圖”按鈕 。 （ 4）打開“插入鼠標(biāo)經(jīng)過圖”對話框，這里主要做以下工作。 ①單擊“原 始圖”右側(cè)的“瀏覽”按鈕，再從打開的“原始圖：”對話框中搜索找到所需的圖文件，單擊“確定”按鈕。 ②單擊“鼠標(biāo)經(jīng)過圖”右側(cè)的“瀏覽”按鈕，再從打開的“鼠標(biāo)經(jīng)過圖：”對話框中搜索找到所需的圖文件，單擊“確定”按鈕。 ③將“預(yù)載鼠標(biāo)經(jīng)過圖”復(fù)選框選中。還可以在“替換文本”文本框中輸入說明文字，如“天使”，如圖 3— 17 所示。 圖 317“插入鼠標(biāo)經(jīng)過圖”對話框 （ 4）單擊“確定”按鈕，保存網(wǎng)頁后，按 F12 鍵，瀏覽改網(wǎng)頁，并將鼠標(biāo)移到圖上時(shí)就可看到“魔法圖”效果。 設(shè)置網(wǎng)頁背景 既美觀又合理的背 景（顏色和圖）對于修飾整體網(wǎng)頁，襯托網(wǎng)頁主題、體現(xiàn)網(wǎng)頁風(fēng)格也是比較重要的。 設(shè)置及改變網(wǎng)頁背景的狀態(tài)可以通過兩種方法來實(shí)現(xiàn)：一種是設(shè)置背景顏色，通常是在網(wǎng)頁安全顏色范疇之內(nèi)選擇；另一種是設(shè)置背景圖，然而，不是所有的圖都可以用作背景的。 網(wǎng)頁背景顏色可以在頁面屬性對框中進(jìn)行設(shè)置，具體操作方法如下。 （ 1）執(zhí)行主菜單的“修改” “頁面屬性” 命令（或組合鍵 Ctrl+1），打開如圖 318所示的“頁面屬性”對話框。 318 “頁面屬性”對話框 （ 2）單擊“背景”右側(cè)的顏色圖標(biāo)按鈕 ，打開如 圖 519 所示調(diào)色板，鼠標(biāo)指針變?yōu)椤拔堋睜睢? 圖 319 調(diào)色板 320 設(shè)置網(wǎng)頁安全色選項(xiàng) （ 3）單擊調(diào)色板右上角的箭頭按鈕 ，從彈出的菜單中選中“調(diào)整到網(wǎng)頁安全色”選項(xiàng)（前提是未被選中時(shí)），如圖 320 所示。 （ 4）在網(wǎng)頁安全顏色內(nèi)選取一種顏色后，單擊“確定”按按鈕，關(guān)閉“頁面屬性”對話框，網(wǎng)頁文檔的背景顏色立刻就發(fā)生了變化。 設(shè)置網(wǎng)頁的背景顏色只能得到一種單一的背景色，如果要使網(wǎng)頁背景更加豐富多彩，就需要使用 圖來裝飾。設(shè)置背景圖的具體操作方法如下。 （ 1）執(zhí)行主菜單中的“修改” “頁面屬性”命令（或組合鍵 Ctrl+J），打開“頁面屬性”對話框。 （ 2）單擊“背景圖”右側(cè)的“瀏覽”按鈕，打開“選擇圖源”對話框（如圖 316 所示）。 （ 3）選擇一幅圖后，單擊“確認(rèn)”按鈕，所選擇的圖將作為網(wǎng)頁背景圖。 不論圖的尺寸有多大，一旦將其設(shè)置為背景圖， Dreamweaver 會自動將其重復(fù)拼接，鋪滿整個背景區(qū)（有效的網(wǎng)頁文檔窗口） 注意：選擇背景圖的原則，一定不要選擇顏色深重的圖，否則網(wǎng)頁文檔的內(nèi)容不易被襯托出來。 3． 4． 6 在 Dreamweaver 8 中巧妙地處理圖 Dreamweaver 8 對圖像操作及處理還有一些功能，作為圖形處理的互補(bǔ)功能，下面介紹幾種常用功能。、 當(dāng)瀏覽網(wǎng)頁時(shí)，有時(shí)會遇到這樣的情況，圖不能在瀏覽器中正常顯示，本該顯示圖的區(qū)域卻顯示一片空白，并在左上角出現(xiàn)一個紅色的圖標(biāo)，如圖 321 所示。 圖 321 瀏覽網(wǎng)頁時(shí)不能正常顯示的圖 出現(xiàn)這種現(xiàn)象主要有兩方面的原因：一是瀏覽器的設(shè)置對一些類型的圖進(jìn)行了屏蔽，另一個是圖文件沒有存放在站點(diǎn)管理的文件夾中，或是路徑不正確。 利用 Dreamweaver 可以為圖添加一些文字說明，使得當(dāng)圖不能被正常顯示時(shí)，用說明文字來代替，以幫助訪問者了解圖的基本信息，例如，圖添加注釋的具體操作方法是：在網(wǎng)頁文檔中選中該圖，然后在圖屬性面板中的“替代”右側(cè)框內(nèi)輸入說明文字，如圖 322 所示。 圖 322 為圖添加文字說明 添加了文字說明以后，當(dāng)圖在瀏覽器中不能正常顯示時(shí)，圖位置區(qū)域的上方將給出相應(yīng)的文字說明，如圖 323 所示。 圖 323 文字說明替代圖 低分辨率圖是相對于高分辨率圖而言的。高分辨率圖一般指的是圖的色彩豐富逼真、壓縮比較小的圖，這種圖文件容量比較大，瀏覽器要花很長時(shí)間來下載。而低分辨率圖包含的色彩少，壓縮比較大，所以這種圖文件容量較小，能夠較快的被瀏覽器下載。因此，經(jīng)常要為高質(zhì)量、大尺寸的圖制作一個副本，這個副本圖采用的是較低的分辨率，從而減小了文件的容量，縮短了圖的下載時(shí)間。當(dāng)用戶瀏覽網(wǎng)頁時(shí)，先將低分辨率的圖下載，此時(shí)瀏覽者可以選擇繼續(xù)等待下載還是停止下載跳轉(zhuǎn)到其他網(wǎng)頁。這種方法雖然使網(wǎng)頁的美觀度受到了一些影響，但會縮短瀏覽時(shí)間，是一種高效率的方法。 Dreamweaver 8 中打開要編輯的網(wǎng)頁，在網(wǎng)頁中選擇高質(zhì)量 的圖，在屬性面板中將制作的低質(zhì)量圖所在的路徑添加到“低品質(zhì)源”右側(cè)文本框中，如圖 324 所示。 圖 324 添加低分辨率圖路徑 當(dāng)該圖被瀏覽時(shí)，瀏覽者首先將低分辨率的圖下載，并且很快顯示出來，然后再進(jìn)行一步下載高質(zhì)量的圖。 使用圖映射即為圖添加熱點(diǎn)，熱點(diǎn)即圖上不可見的區(qū)域，該區(qū)域分配了一個超鏈接。為圖添加熱點(diǎn)就是在圖上區(qū)域，從而設(shè)定圖上制作超鏈接的范圍， 在 Dreamweaver 中為圖添加熱點(diǎn)的具體方法如下。 （ 1）選中圖，打開屬性在板，選擇一種熱點(diǎn)工具按鈕，如單擊矩形熱點(diǎn)工具按鈕 ，然后在圖上拖動鼠標(biāo)， 劃出一個長方形區(qū)域，如圖 517 所示，此時(shí)的圖屬性面板變成如圖325 所示的樣式。 圖 325 為圖添加矩形熱點(diǎn) 圖 325 圖熱點(diǎn)屬性面板 （ 2）在圖熱點(diǎn)屬性面板“鏈接”右側(cè)的文本框中輸入超鏈接的文件地址，或單擊其右側(cè)的“瀏覽文件”按鈕 ，瀏覽查找超鏈接的文件。再在“目標(biāo)”下拉列表框中選擇一種條開方式。如 blank（把鏈接目標(biāo)載入到新的瀏覽器窗口中）。最后在“替代”右側(cè)的文本框中輸入替換文字，如“天使的呼喚”。 （ 3）按 F12 鍵預(yù)覽網(wǎng)頁，將光標(biāo)放在所添加的熱點(diǎn)處，出現(xiàn)手形指 針，并在其右下方出現(xiàn)提示信息“天使的呼喚”，單擊熱點(diǎn)就會打開所鏈接的文件。 同樣的，還可以為圖添加其他形狀的熱點(diǎn)，其操作方法與添加矩形熱點(diǎn)的方法相似。單擊橢圓形熱點(diǎn)工具按鈕 可以創(chuàng)建圖的圓形熱點(diǎn)。單擊多邊形熱點(diǎn)工具按鈕 可以創(chuàng)建圖的多邊形熱點(diǎn)。 如果要在圖的不同位置放置不同的對象或沿一幅圖進(jìn)行描摹，可以使用跟蹤圖。它作為制作網(wǎng)頁的輔助工具。只顯示在設(shè)計(jì)的網(wǎng)頁文檔窗口中，不會顯示在瀏覽器窗口中。 在網(wǎng)頁文檔窗口中插入跟蹤圖，有以下兩種操作方法。 （ 1）執(zhí)行主菜單中的“修改” “頁面屬性”命令， 打開“頁面屬性”對話框，單擊“跟蹤圖”右側(cè)的“瀏覽”按鈕，再從打開的“選擇圖源”對話框中查找合適的圖文件，單擊“確定”按鈕，返回到“頁面屬性”對話框，則該圖文件的路徑將顯示在“跟蹤圖”右側(cè)的文本框中。 （ 2）執(zhí)行主菜單中的“查看” “跟蹤圖” “載入” 命令，打開“選擇圖源”對話框，從中搜索合適的圖文件，單擊“確定 ”按鈕，又打開“頁面屬性”對話框，則該圖文件的路徑將顯示在“跟蹤圖”右側(cè)的文本框中。 通過以上兩種操作方法都可以選擇一幅跟蹤圖，還可以在“而面屬性”對話框中用鼠標(biāo)拖動“圖透明度”的滑塊，用來對圖 的透明度進(jìn)行調(diào)整，如圖 326 所示，單擊“應(yīng)用”按鈕，可以檢驗(yàn)圖插入到網(wǎng)頁文檔中的效果，然后作進(jìn)一步調(diào)整，最終設(shè)置完畢，單擊“確定”按鈕，則圖將會插入到網(wǎng)頁文檔中。 圖 326 跟蹤圖設(shè)置面板 如果覺得跟蹤圖的位置不合適，可以通過執(zhí)行主菜單中的“查看” “跟蹤圖” “調(diào)整位置” 命令，打開如圖 327 所示的“調(diào)整臨摹圖位置”對話框，從中輸入“ x”坐標(biāo)值及“ y” 坐標(biāo)值來重新調(diào)整跟蹤圖的位置。如果不滿意，還可以再執(zhí)行主菜單中的“查看” “跟蹤圖” “重設(shè)位置”命令，恢復(fù)原始位置重新設(shè)置。 圖 327 “調(diào)整跟蹤圖位置”對話框 習(xí)題 1． 在 Dreamweaver 8 中有哪幾種換行方式？ 2． 如何在 Dreamweaver 8 文檔窗口中加入空格？ 3． 在 Dreamweaver 8 中，如何添加和刪除中文字體？ 4． 在 Dreamweaver 8 中，如何修改日期對象的文本格式？ 5． 什么是 HTML？ HTML 文件的基本結(jié)構(gòu)是怎樣的？ 6． 在 HTML 文檔中如何設(shè)置標(biāo)題和段落？ 在 HTML 文檔中如何設(shè)置文字的大小、字體和顏色？