3.1　圖像效果實例——添加圖像

在Dreamweaver CS6中，用戶可以在網頁中便捷地插入圖像，并對插入的圖像進行修改或其他編輯操作。通過在網頁中添加圖像，不但可以使網頁的界面更加豐富，而且能夠清晰、生動地表達主題信息，因此，掌握在網頁中應用圖像的方法很有必要。

3.1.1　插入圖像

在網頁中插入圖像，不但能美化整個頁而，還能比文本更加生動直觀地展示效果，使網站設計者的意圖能夠一目了然。

本實例中插入圖像和設置圖像屬性的操作，主要由“屬性”面板來完成。通過本實例可以學習和掌握在Dreamweaver中應用圖像的基本方法。本實例的編輯過程，主要包括以下操作環節。

（1）執行“插入”→“圖像”命令，在文檔中插入一個圖像。

（2）選中插入的圖像，然后打開“屬性”面板，在面板中設置圖像的尺寸和對齊方式等基本屬性。

（3）執行“文件”→“保存”命令文件，然后按“F12”鍵，可以在瀏覽器中預覽效果。

3.1.2　導入圖像

（1）打開DW 3/images/3.1.3目錄下的“start.html”文件，如圖3-1所示。

（2）將光標插入文檔中間的空白單元格中，執行“插入記錄”→“圖像”命令，打開“選擇圖像源文件”對話框（圖3-2）。

（3）在“選擇圖像源文件”對話框中選擇要添加的圖像文件（圖3-3），單擊“確定”按鈕。

（4）在文檔中插入光標的位置，可以看到剛插入的圖像（圖3-4）。

（5）選中剛插入的圖像，執行“窗口”→“屬性”命令打開“屬性”面板（圖3-5）。

圖像的“屬性”面板中的各項參數功能介紹如下。

寬、高：設置圖像的寬度與高度，以像素為單位。

源文件：顯示圖像的目錄路徑，可以在其中修改圖像的路徑來更換圖像。

鏈接：設置圖像的超鏈接。

替換：設置當鼠標移放到圖像上時顯示的提示文字。

編輯：單擊該按鈕，可以啟動Adobe ImageReady軟件，并對圖像進行編輯（要先安裝Adobe ImageReady軟件）

使用Adobe imageReady最優化：單擊該按鈕，可以開啟Adobe imageReady的優化輸出程序，對選取的圖像進行優化處理并保存。

裁剪過：單擊該按鈕，所選圖形邊緣將出現裁切框。拖動裁切框的邊緣，可以直接對圖像進行顯示范圍的裁剪，調整確認后，按下“Enter”鍵即可應用裁剪結果，如圖3-6所示。

亮度和對比度：單擊該按鈕，在打開的“亮度／對比度”窗口中，可以對圖像的亮度和對比度進行調整（圖3-7）。

銳化：單擊該按鈕，在打開的“銳化”窗口中，對圖像的銳化度進行調整（圖3-8）。

類：在該下拉列表中，可以為所選圖形選擇CSS樣式表進行應用。

垂直邊距：沿著圖像上下邊緣添加邊距，單位為像素。

水平邊距：沿著圖像左右邊緣添加邊距，單位為像素。

低分辨率源：指定在加載目的圖像前加載的圖像，使網頁中先加載顯示出原本圖像的大致內容，讓觀眾先對圖像內容有個大致了解。這種圖像大多使用黑白版本，通常在帶寬不足或網速較慢的情況下使用這個功能。

邊框：輸入數值，給圖像加上一個邊框，單位為像素。在默認情況下沒有邊框。

對齊：對齊圖像和文字。

重設圖像大小：單擊該按鈕，將圖像大小還原為原始大小。只有在對圖像進行了大小調整后，這個按鈕才會出現在“寬”和“高”的文本框右側。

（6）在“屬性”面板的“寬”文本框中輸入“283”，“高”文本框中輸入“203”，調整圖像的尺寸，如圖3-9所示。

（7）在“替換”文本框中輸入替換文本內容“點擊查看更多內容”，在“鏈接”文本框中輸入圖像的鏈接地址，在“目標”下拉列表中選擇“_blank”選項，如圖3-10所示。