3.2　圖像效果實例——插入圖像占位符

在進行網頁設計時，通常會遇到需要插入圖像，但并不需要立即將圖像插入到文檔中的情況。這個時候可以先在需要插入圖像的位置插入一個圖像占位符，等完成布局后再將圖像占位符用圖像進行替換。

在本實例中添加圖像占位符，主要通過設置“添加圖像占位符”對話框來完成。通過本實例，可以學習和掌握在Dreamweaver中設置圖像占位符和替換圖像占位符的基本方法。本實例的編輯過程，主要包括以下操作環節。

（1）執行“插入”→“圖像對象”→“圖像占位符”命令，在文檔中插入圖像占位符。

（2）雙擊文檔中的圖像占位符，在打開的對話框中選擇圖像文件替換占位符。

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

插入圖像占位符的操作步驟如下。

（1）在Dreamweaver CS6中，打開DW 3/3.2.1中Dw 3\images\Lesson 7小節目錄下的“start.html”文件（圖3-11）。

（2）將光標插入到文檔中要插入圖像的位置，執行“插入記錄”→“圖像對象”→“圖像占位符”命令，打開“圖像占位符”對話框（圖3-12）。

“圖像占位符”對話框中各項參數的功能介紹如下。

名稱：設置圖像占位符的名稱，并在占位符中顯示出來。

寬度：設置圖像占位符的寬度，單位為像素。

高度：設置圖像占位符的高度，單位為像素。

顏色：為圖像占位符設置顏色。

替換文本：設置圖像占位符的替換文本。

（3）在彈出的“圖像占位符”對話框中，在“名稱”文本框中輸入“PIC”，在“寬度”文本框中輸入“283”，“高度”文本框中輸入“203”（圖3-13）。

　　

圖　3-13

（4）在“顏色”文本框中輸入圖像占位符的顏色值“＃EFEFF3”，在“替換”文本框中輸入替換文本“圖像內容”，然后單擊“確定”按鈕（圖3-14）。

（5）在開始插入光標的位置，可以看到已經創建了一個圖像占位符（圖3-15）。