Dreamweaver中如何插入圖像、圖像占位符和互動(dòng)圖像

1、首先插入圖像時(shí)，我們需要建立一個(gè)站點(diǎn)作為基本所需

2、建立的站點(diǎn)名稱為“今日心事”

3、隨后將插入面板設(shè)置為“常用”選項(xiàng)

4、點(diǎn)擊“圖像”按鈕，向網(wǎng)頁中插入圖像

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

6、點(diǎn)擊“確定”按鈕即可完成插入。

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

8、同樣這里我們是可以將其調(diào)整為“設(shè)計(jì)”界面，這里我們是可以看到我們所插入的圖像的

9、隨后我們進(jìn)行再網(wǎng)頁中的一個(gè)瀏覽選項(xiàng)，這里直接按“F12”或者這里我們點(diǎn)擊工具中的瀏覽器小圖標(biāo)“一個(gè)小的地球”，在網(wǎng)頁中我們也是可以看到我們插入的一個(gè)圖片的

10、隨后我們進(jìn)行“占位符的插入”，點(diǎn)擊插入面板“常用”標(biāo)簽下圖像按鈕菜單中的“圖像占位符”按鈕

11、彈出如下圖中的一個(gè)占位符的對(duì)話框

12、這里我們將其顏色設(shè)置為紅色，名稱設(shè)置成asd，隨后點(diǎn)擊確定即可

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

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

15、插入互動(dòng)圖像“這里所謂的互動(dòng)圖像就是鼠標(biāo)移動(dòng)到圖片之后，我們這里的圖片就會(huì)變成另外的一個(gè)圖片”首先這里我們是需要準(zhǔn)備兩張圖像來作為插入圖像的所需，點(diǎn)擊“鼠標(biāo)經(jīng)過圖像”

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

17、首先我們選擇第一個(gè)圖片“原始圖片”鼠標(biāo)不在圖片上的時(shí)候我們這里顯示的是下圖中的一個(gè)樣式

18、隨后選擇的是另外的一張圖像，這里的是鼠標(biāo)移動(dòng)到原始圖標(biāo)上時(shí)候，我們這里的一個(gè)變動(dòng)所需

19、如下圖中的所示內(nèi)容，這里我們的原始圖像和鼠標(biāo)經(jīng)過圖像都已將選擇完畢，點(diǎn)擊確定即可

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

21、隨后我們保存，按F12 進(jìn)入網(wǎng)頁中進(jìn)行查看，起初鼠標(biāo)不在圖像中的時(shí)候，我們這里是一個(gè)圖片樣式

22、當(dāng)鼠標(biāo) 移動(dòng)到圖片中的時(shí)候，這里我們就是另外的一種圖標(biāo)樣式了。