《中文版Dreamweaver CS5網(wǎng)頁設(shè)計(jì)實(shí)用教程》第9章 圖像

中文版DreamweaverCS5網(wǎng)頁設(shè)計(jì)實(shí)用教程插入圖像9.1第9章

圖像9.3

優(yōu)化圖像9.2設(shè)置圖像屬性9.1插入圖像一、插入圖像的基本操作二、插入圖像占位符三、插入鼠標(biāo)經(jīng)過圖像一、插入圖像的基本操作第一種方法，使用插入圖像功能，按照提示逐步向網(wǎng)頁中插入圖像。（1）“插入”面板切換到“常用”選項(xiàng)卡。（2）如圖9-1所示，單擊“圖像”下拉按鈕，在彈出的菜單中選擇“圖像”；或執(zhí)行“插入/圖像”命令，打開“選擇圖像源文件”對(duì)話框。圖9-1單擊“圖像”下拉按鈕一、插入圖像的基本操作（3）在圖9-2所示的“選擇圖像源文件”對(duì)話框中選擇目標(biāo)圖像，單擊“確定”按鈕即可插入圖像。圖9-2選擇目標(biāo)圖像一、插入圖像的基本操作第二種方法，使用資源面板或文件面板，直接拖動(dòng)目標(biāo)圖像到網(wǎng)頁中。（1）執(zhí)行“窗口/資源”命令，打開資源面板，單擊“圖像”按鈕，如圖9-3所示，資源面板中顯示了當(dāng)前站點(diǎn)中的所有圖像。圖9-3當(dāng)前站點(diǎn)中的所有圖像一、插入圖像的基本操作第二種方法，使用資源面板或文件面板，直接拖動(dòng)目標(biāo)圖像到網(wǎng)頁中。（1）執(zhí)行“窗口/資源”命令，打開資源面板，單擊“圖像”按鈕，如圖9-3所示，資源面板中顯示了當(dāng)前站點(diǎn)中的所有圖像。（2）從圖像列表中選擇目標(biāo)圖片，拖動(dòng)該圖像到設(shè)計(jì)視圖中的目標(biāo)位置。圖9-3當(dāng)前站點(diǎn)中的所有圖像二、插入圖像占位符

（1）“插入”面板切換到“常用”選項(xiàng)卡。單擊“圖像”下拉按鈕，在彈出的圖9-4所示的菜單中選擇“圖像占位符”，打開“圖像占位符”對(duì)話框。

（2）在圖9-5所示的“圖像占位符”對(duì)話框中，設(shè)置圖像占位符的寬度為350，高度為120，單擊“確定”按鈕。圖9-4“圖像占位符”對(duì)話框

圖9-5設(shè)置圖像占位符二、插入圖像占位符圖9-6“選擇圖像源文件”對(duì)話框三、插入鼠標(biāo)經(jīng)過圖像（1）首先準(zhǔn)備兩個(gè)圖像，將其保存到同一個(gè)文件夾下，本例圖像保存在image文件夾下。（2）新建一個(gè)HTML文件。（3）單擊“圖像”下拉按鈕，在彈出的圖9-7所示的菜單中選擇“鼠標(biāo)經(jīng)過圖像”。（4）打開“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框，如圖9-8所示。圖9-7“鼠標(biāo)經(jīng)過圖像”對(duì)話框

圖9-8“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框三、插入鼠標(biāo)經(jīng)過圖像

單擊“原始圖像”的“瀏覽”按鈕，在打開的原始圖像對(duì)話框中選擇“image”文件夾下的目標(biāo)文件，單擊“確定”按鈕。

單擊“鼠標(biāo)經(jīng)過圖像”的“瀏覽”按鈕，選擇鼠標(biāo)指針經(jīng)過時(shí)顯示的目標(biāo)圖像文件，單擊“確定”按鈕。（5）根據(jù)需要還可以進(jìn)行以下設(shè)置：在圖9-8所示對(duì)話框的“替換文本”欄中，輸入提示文本信息；在“前往的URL”欄中輸入鏈接的網(wǎng)頁，如“”。（6）設(shè)置完畢后，單擊“確定”按鈕。（7）保存文件，按【F12】鍵可預(yù)覽網(wǎng)頁。移動(dòng)鼠標(biāo)指針到圖片內(nèi)和圖片外，測(cè)試其效果。9.2設(shè)置圖像屬性一、認(rèn)識(shí)圖像屬性面板二、設(shè)置圖像大小三、設(shè)置圖像對(duì)齊方式四、設(shè)置圖像邊距五、設(shè)置低分辨率圖像六、設(shè)置熱區(qū)七、使用編輯工具一、認(rèn)識(shí)圖像屬性面板

單擊選取設(shè)計(jì)視圖中的目標(biāo)圖像，屬性面板中顯示了當(dāng)前圖像的各項(xiàng)屬性，如圖9-9所示。圖9-9圖像屬性面板二、設(shè)置圖像大小

要改變圖像的大小，可用下列方法：

方法一：選中圖像后，將鼠標(biāo)指針移到圖像的邊框變形點(diǎn)，當(dāng)鼠標(biāo)指針變?yōu)殡p向箭頭時(shí)，按住鼠標(biāo)左鍵拖動(dòng)，可以改變圖像的大小，如圖9-10所示。按住【Shift】鍵再拖動(dòng)控制點(diǎn)可按比例調(diào)整圖像的大小。

方法二：選擇目標(biāo)圖像，然后在圖9-10所示的屬性面板中輸入圖像寬度與高度的數(shù)值。要恢復(fù)圖像原來的大小，可單擊屬性面板中的“恢復(fù)原始大小”按鈕。二、設(shè)置圖像大小圖9-10設(shè)置圖像大小三、設(shè)置圖像對(duì)齊方式

要設(shè)置圖像的垂直對(duì)齊方式，需要先選擇目標(biāo)圖像，然后單擊屬性面板的對(duì)齊欄右側(cè)的下拉按鈕，從彈出的菜單中選擇對(duì)齊方式，如圖9-11所示。圖9-11圖像的對(duì)齊方式四、設(shè)置圖像邊距

可以通過設(shè)置圖像邊距的方法，控制圖像與其他文本或?qū)ο蟮木嚯x，方法是：

選擇目標(biāo)圖像，在屬性面板中輸入垂直邊距和水平邊距的具體數(shù)值。在默認(rèn)狀態(tài)下圖像的邊距為0。此框內(nèi)只能輸入大于或等于0的數(shù)值。五、設(shè)置低分辨率圖像（1）首先要準(zhǔn)備兩張圖片，其中一張為正常的清晰圖像，另一張是用Photoshop或其他圖像處理軟件加工過的低分辨率圖像，如圖9-12所示。圖9-12清晰圖像與低分辨率圖像五、設(shè)置低分辨率圖像（2）單擊插入面板中的“插入圖像”按鈕，插入一張正常的圖像。（3）在文檔窗口選取插入的圖像，單擊屬性面板中的“原始”欄右側(cè)的瀏覽文件按鈕，在打開的選擇圖像源文件對(duì)話框中選擇目標(biāo)低分辨率圖像，屬性面板中顯示出低解析度文件的位置，結(jié)果如圖9-13所示。（4）完成低分辨率圖像的設(shè)置。圖9-13設(shè)置低分辨率圖像六、設(shè)置熱區(qū)使用熱區(qū)制作鏈接的方法如下：（1）新建一個(gè)HTML文件。（2）插入一幅圖像。（3）單擊屬性面板的“矩形熱點(diǎn)工具”，在圖像上畫出一個(gè)熱區(qū)，此時(shí)屬性面板顯示為當(dāng)前新建熱區(qū)的相關(guān)參數(shù)，如圖9-14所示。（4）在鏈接框中，設(shè)置鏈接網(wǎng)頁或其他網(wǎng)絡(luò)資源。在目標(biāo)欄中設(shè)置打開網(wǎng)頁的方式，如：在當(dāng)前頁中打開。（5）使用同樣的方法建立其他熱區(qū)，并設(shè)置相關(guān)鏈接。當(dāng)需要修改熱區(qū)時(shí)，可以使用指針熱點(diǎn)工具，選擇目標(biāo)熱區(qū)，然后在屬性面板中修改相關(guān)鏈接設(shè)置。六、設(shè)置熱區(qū)圖9-14設(shè)置熱區(qū)七、使用編輯工具

在DreamweaverCS5中，還提供了一些基本的編輯圖像的工具，圖9-15所示為屬性面板的編輯工具。圖9-15屬性面板的編輯工具9.3優(yōu)化圖像（1）安裝Fireworks后，啟動(dòng)Fireworks，如圖9-16所示。圖9-16Fireworks工作界面9.3優(yōu)化圖像（2）單擊“打開最近的項(xiàng)目”中的“打開”鏈接，彈出圖9-17所示的“打開”對(duì)話框。在該對(duì)話框中選擇目標(biāo)圖像文件，單擊“打開”按鈕。（3）在Fireworks的編輯界面中，單擊“窗口/優(yōu)化”，打開優(yōu)化面板。圖9-17“打開”對(duì)話框9.3優(yōu)化圖像（4）如