DW插入圖像/圖像占位符和互動(dòng)圖像的實(shí)例教程
我要評(píng)論Dreamweaver中如何插入圖像、圖像占位符和互動(dòng)圖像
1、首先插入圖像時(shí)，我們需要建立一個(gè)站點(diǎn)作為基本所需
2、建立的站點(diǎn)名稱為“今日心事”
3、隨后將插入面板設(shè)置為“常用”選項(xiàng)
4、點(diǎn)擊“圖像”按鈕，向網(wǎng)頁(yè)中插入圖像
5、選擇一個(gè)圖片作為插入圖像的所需圖片
6、點(diǎn)擊“確定”按鈕即可完成插入。
7、插入圖像之后，在我們的代碼部位，我們是可以看到新出來(lái)的一段代碼選項(xiàng)的
8、同樣這里我們是可以將其調(diào)整為“設(shè)計(jì)”界面，這里我們是可以看到我們所插入的圖像的
9、隨后我們進(jìn)行再網(wǎng)頁(yè)中的一個(gè)瀏覽選項(xiàng)，這里直接按“F12”或者這里我們點(diǎn)擊工具中的瀏覽器小圖標(biāo)“一個(gè)小的地球”，在網(wǎng)頁(yè)中我們也是可以看到我們插入的一個(gè)圖片的
10、隨后我們進(jìn)行“占位符的插入”，點(diǎn)擊插入面板“常用”標(biāo)簽下圖像按鈕菜單中的“圖像占位符”按鈕
11、彈出如下圖中的一個(gè)占位符的對(duì)話框
12、這里我們將其顏色設(shè)置為紅色，名稱設(shè)置成asd，隨后點(diǎn)擊確定即可
13、同樣，插入完畢之后呢，這里我們是可以看到我們的代碼部位是多出來(lái)了一部分的
14、這里我們直接進(jìn)入到瀏覽器中進(jìn)行瀏覽，我們是可以看到我們插入的占位符的
15、插入互動(dòng)圖像“這里所謂的互動(dòng)圖像就是鼠標(biāo)移動(dòng)到圖片之后，我們這里的圖片就會(huì)變成另外的一個(gè)圖片”首先這里我們是需要準(zhǔn)備兩張圖像來(lái)作為插入圖像的所需，點(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)頁(yè)中進(jìn)行查看，起初鼠標(biāo)不在圖像中的時(shí)候，我們這里是一個(gè)圖片樣式
22、當(dāng)鼠標(biāo) 移動(dòng)到圖片中的時(shí)候，這里我們就是另外的一種圖標(biāo)樣式了。
相關(guān)推薦：
Dreamweaver項(xiàng)目列表前面的項(xiàng)目符號(hào)去掉小圓點(diǎn)?
dw模板怎么制作?Dreamweaver制作網(wǎng)頁(yè)模板的詳細(xì)教程
相關(guān)文章
Dreamweaver怎么新建站點(diǎn)地圖?dw編輯站點(diǎn)地圖的方法
Dreamweaver怎么新建站點(diǎn)地圖？想要給新建一個(gè)站點(diǎn)，建立建立、修改、刪除和保存呢？這些問題都很簡(jiǎn)單，下面分享dw編輯站點(diǎn)地圖的方法，需要的朋友可以參考下2016-02-18- Dreamweaver無(wú)法生成站點(diǎn)地圖該怎辦？每次生成都失敗，出現(xiàn)這種問題可能是因?yàn)槲粗付ㄖ黜?yè)，指定的主頁(yè)不存在，主頁(yè)在文件夾的外面，下面我們來(lái)看看這個(gè)問題的解決辦法，需2016-02-18
Dreamweaver站點(diǎn)中新建文件夾和修改/刪除/移動(dòng)文件的操作方法
DW站點(diǎn)中怎么新建文件夾和修改、刪除、移動(dòng)文件？很多剛學(xué)習(xí)dw軟件的朋友都不太熟悉，新建的站點(diǎn)該怎么添加刪除文件夾和頁(yè)面，今天我們就來(lái)給大家詳細(xì)介紹一下基礎(chǔ)知識(shí)，需2016-02-17Dreamweaver8怎么制作個(gè)人風(fēng)格的界面和欄?
Dreamweaver8怎么制作個(gè)人風(fēng)格的界面和欄？自己的電腦可以給dw界面設(shè)置成個(gè)人風(fēng)格的，這樣能快速調(diào)用自己的一些習(xí)慣，提高資源利用，該怎么設(shè)置呢？下面分析哪個(gè)詳細(xì)的教程2016-01-31Dreamweaver怎么設(shè)置代碼視圖的字體大小?
Dreamweaver怎么設(shè)置代碼視圖的字體大小？很多的時(shí)候，我們看代碼時(shí)間長(zhǎng)了就會(huì)覺得代碼很小，看起來(lái)很累，想將代碼字體設(shè)置大一點(diǎn)，該怎么設(shè)置呢？下面分享Dreamweaver代碼2016-01-21Dreamweaver怎么創(chuàng)建簡(jiǎn)單的html頁(yè)面并保存?
Dreamweaver怎么創(chuàng)建簡(jiǎn)單的html頁(yè)面并保存？Dreamweaver中怎么簡(jiǎn)單建立一個(gè)html格式的網(wǎng)頁(yè)文件，其實(shí)很簡(jiǎn)單，在建立頁(yè)面的時(shí)候選擇html就可以了，詳細(xì)的操作請(qǐng)看下文介紹2016-01-11Dreamweaver8制作網(wǎng)頁(yè)滾動(dòng)文字效果的實(shí)例教程
很多網(wǎng)友都會(huì)存在動(dòng)態(tài)文字，這樣吸引眼球，其實(shí)這個(gè)看上去高大上的功能卻很好實(shí)現(xiàn)，今天我們就使用Dreamweaver8來(lái)制作網(wǎng)頁(yè)滾動(dòng)文字效果的教程，需要的朋友可以參考下2016-01-07dw模板怎么制作?Dreamweaver制作網(wǎng)頁(yè)模板的詳細(xì)教程
dw模板怎么制作？制作一個(gè)好的網(wǎng)頁(yè)模版，以后建站就會(huì)很輕松快速的建立了，但是怎么才能制作一個(gè)模板呢？今天我們來(lái)看看Dreamweaver制作網(wǎng)頁(yè)模板的詳細(xì)教程，需要的朋友可2015-12-30- Dreamweaver中的表格怎么排版？在Dreamweaver中插入了表格，但是感覺有點(diǎn)影響美觀，想給表格美化一下排排版，該怎么辦呢？下面分享Dreamweaver表格排版的方法，需要的朋友2015-12-15
- dreamweaver里不用的站點(diǎn)怎么刪除?dreamweaver建立了很多站點(diǎn)，有些僅僅是為了測(cè)試用的，測(cè)試完了就沒用了，該怎么刪除呢？下面分享dreamweaver刪除站點(diǎn)的教程，需要的朋友2015-11-19