Dreamweaver中如何插入圖像、圖像占位符和互動圖像

1、首先插入圖像時，我們需要建立一個站點作為基本所需

2、建立的站點名稱為“今日心事”

3、隨后將插入面板設置為“常用”選項

4、點擊“圖像”按鈕，向網頁中插入圖像

5、選擇一個圖片作為插入圖像的所需圖片

6、點擊“確定”按鈕即可完成插入。

7、插入圖像之后，在我們的代碼部位，我們是可以看到新出來的一段代碼選項的

8、同樣這里我們是可以將其調整為“設計”界面，這里我們是可以看到我們所插入的圖像的

9、隨后我們進行再網頁中的一個瀏覽選項，這里直接按“F12”或者這里我們點擊工具中的瀏覽器小圖標“一個小的地球”，在網頁中我們也是可以看到我們插入的一個圖片的

10、隨后我們進行“占位符的插入”，點擊插入面板“常用”標簽下圖像按鈕菜單中的“圖像占位符”按鈕

11、彈出如下圖中的一個占位符的對話框

12、這里我們將其顏色設置為紅色，名稱設置成asd，隨后點擊確定即可

13、同樣，插入完畢之后呢，這里我們是可以看到我們的代碼部位是多出來了一部分的

14、這里我們直接進入到瀏覽器中進行瀏覽，我們是可以看到我們插入的占位符的

15、插入互動圖像“這里所謂的互動圖像就是鼠標移動到圖片之后，我們這里的圖片就會變成另外的一個圖片”首先這里我們是需要準備兩張圖像來作為插入圖像的所需，點擊“鼠標經過圖像”

16、這里的命令框中我們可以看到的是有兩個圖片選擇的

17、首先我們選擇第一個圖片“原始圖片”鼠標不在圖片上的時候我們這里顯示的是下圖中的一個樣式

18、隨后選擇的是另外的一張圖像，這里的是鼠標移動到原始圖標上時候，我們這里的一個變動所需

19、如下圖中的所示內容，這里我們的原始圖像和鼠標經過圖像都已將選擇完畢，點擊確定即可

20、跳入到我們的代碼部位，這里我們是可以看到的一個代碼生成部分，這里所生成的代碼很多的，這也是我們的功能所需吧

21、隨后我們保存，按F12 進入網頁中進行查看，起初鼠標不在圖像中的時候，我們這里是一個圖片樣式

22、當鼠標 移動到圖片中的時候，這里我們就是另外的一種圖標樣式了。

相關推薦：

Dreamweaver代碼提示功能怎么開啟？

Dreamweaver項目列表前面的項目符號去掉小圓點?

dw模板怎么制作?Dreamweaver制作網頁模板的詳細教程