在Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)時(shí)，利用“改變屬性”行為可以動(dòng)態(tài)地改變指定對(duì)象的某些屬性，這些屬性包括背景顏色、尺寸和背景圖片等。制作網(wǎng)頁(yè)時(shí)，如果用這種行為設(shè)置一些特殊的區(qū)域，例如，當(dāng)鼠標(biāo)指針經(jīng)過(guò)某個(gè)區(qū)域時(shí)，該區(qū)域的背景顏色會(huì)立即發(fā)生變化；當(dāng)鼠標(biāo)指針離開(kāi)后又恢復(fù)為原來(lái)的背景色。下面通過(guò)一個(gè)實(shí)例介紹增加該行為的方法。

【操作步驟】

第1步，打開(kāi)本節(jié)示例中的orig.html文件，另存為effect.html。設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)縮略圖時(shí)，高亮顯示。

第2步，選中<div id="apDiv1">標(biāo)簽，單擊【行為】面板中的按鈕，從彈出的行為菜單中選擇【改變屬性】命令，打開(kāi)【改變屬性】對(duì)話(huà)框。

第3步，在【元素類(lèi)型】下拉列表框中設(shè)置要更改其屬性的對(duì)象的類(lèi)型。實(shí)例中要改變AP元素的屬性，因此選擇DIV。

第4步，在【元素ID】下拉列表框中顯示網(wǎng)頁(yè)中所有該類(lèi)對(duì)象的名稱(chēng)，如圖中會(huì)列出網(wǎng)頁(yè)中所有的AP元素的名稱(chēng)。在其中選擇要更改屬性的AP元素的名稱(chēng)，如DIV“apDiv1”。

第5步，在【屬性】選項(xiàng)組中選擇要更改的屬性，因?yàn)橐O(shè)置背景，所以選擇border。如果要更改的屬性沒(méi)有出現(xiàn)在下拉菜單中，可以在【輸入】文本框中手動(dòng)輸入屬性。

第6步，在【新的值】文本框中設(shè)置屬性新值。這里要定義AP元素的邊框線(xiàn)，設(shè)置為solid 2pxred。

第7步，設(shè)置完成后單擊【確定】按鈕。在【行為】面板中確認(rèn)觸發(fā)動(dòng)作的事件是否正確，這里設(shè)置為onMouseover，如果不正確，需要在事件菜單中選擇正確的事件。

第8步，再選中ap Div1元素，繼續(xù)添加一個(gè)“改變屬性”行為，設(shè)計(jì)鼠標(biāo)移出該元素后恢復(fù)默認(rèn)的邊框效果。

第9步，設(shè)置完成后單擊【確定】按鈕。在【行為】面板中確認(rèn)觸發(fā)動(dòng)作的事件是否正確，這里設(shè)置為onMouseout，即設(shè)計(jì)當(dāng)鼠標(biāo)離開(kāi)對(duì)話(huà)框時(shí)，恢復(fù)默認(rèn)的無(wú)邊框狀態(tài)。

第10步，保存并預(yù)覽網(wǎng)頁(yè)。當(dāng)鼠標(biāo)移到對(duì)話(huà)框上時(shí)會(huì)顯示紅色邊框線(xiàn)，以提示用戶(hù)注意，當(dāng)鼠標(biāo)移出對(duì)話(huà)框時(shí)則隱藏邊框線(xiàn)，恢復(fù)默認(rèn)的效果。

制作翻轉(zhuǎn)按鈕

在Dreamweaver中，利用“交換圖像”行為可通過(guò)改變圖片數(shù)據(jù)源的屬性將原圖片替換為另一幅圖片。如果要建立一個(gè)可翻轉(zhuǎn)的鏈接按鈕，用以鏈接到某個(gè)網(wǎng)站，可以選擇該行為。當(dāng)移動(dòng)鼠標(biāo)指針到交換圖像按鈕上時(shí)，即可變換按鈕圖片；單擊該按鈕又可以鏈接到指定的網(wǎng)頁(yè)上。

【操作步驟】

第1步，打開(kāi)本節(jié)示例中的orig.html文件，另存為effect.html。設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)縮略圖時(shí)，顯示翻轉(zhuǎn)圖像。

第2步，將鼠標(biāo)指針定位到文檔中要插入鏈接圖片的位置。選擇【插入】|【圖像】|【圖像】命令，在打開(kāi)的【選擇圖像源文件】對(duì)話(huà)框中選擇要插入的圖片，完成后單擊【確定】按鈕。

第3步，選中該圖片，并打開(kāi)【屬性】面板，在【鏈接】文本框中輸入要鏈接的URL地址，并命名圖像，即設(shè)置圖像的id屬性值。

第4步，選擇【窗口】|【行為】命令，打開(kāi)【行為】面板，并單擊其中的按鈕，在打開(kāi)的菜單中選擇【交換圖像】命令。

第5步，打開(kāi)【交換圖像】對(duì)話(huà)框，如圖7.28所示，單擊【瀏覽】按鈕，在【選擇圖像源文件】對(duì)話(huà)框中選擇要替換的按鈕圖片。

第6步，完成后單擊【確定】按鈕，返回到【交換圖像】對(duì)話(huà)框。在【交換圖像】對(duì)話(huà)框中，有兩個(gè)復(fù)選框可供設(shè)置。   

?預(yù)先載入圖像：選中該復(fù)選框后，在瀏覽網(wǎng)頁(yè)時(shí)系統(tǒng)同時(shí)將該圖片載入緩存中，而不是在調(diào)用JavaScript時(shí)才下載，以防止在圖片切換時(shí)延時(shí)。   

?鼠標(biāo)滑開(kāi)時(shí)恢復(fù)圖像：選中該復(fù)選框后，當(dāng)鼠標(biāo)指針移出圖片時(shí)，將恢復(fù)原來(lái)的按鈕圖片。

第7步，單擊【確定】按鈕，返回【行為】面板。此時(shí)便可看到所加入的“交換圖像”行為，其默認(rèn)的觸發(fā)事件為onMouseOver，即當(dāng)鼠標(biāo)指針移過(guò)圖片時(shí)觸發(fā)換圖動(dòng)作。

提示：在【交換圖像】對(duì)話(huà)框中，如果選中【鼠標(biāo)滑開(kāi)時(shí)恢復(fù)圖像】復(fù)選框，在【行為】面板中將加入一個(gè)新的行為—【恢復(fù)交換圖像】，其默認(rèn)的觸發(fā)事件為onMouseOut，它的意思是當(dāng)鼠標(biāo)指針移開(kāi)時(shí)觸發(fā)動(dòng)作。正是該行為使按鈕在鼠標(biāo)指針移開(kāi)時(shí)自動(dòng)恢復(fù)原來(lái)的樣子。

第8步，設(shè)置完成后，按F12鍵，打開(kāi)瀏覽器預(yù)覽。此時(shí)如果按上述方法正確設(shè)置，則將鼠標(biāo)指針移到按鈕上時(shí)，即可改變按鈕的外觀。

在網(wǎng)站建設(shè)中使用【交換圖像】行為時(shí)必須注意，由于該行為所改變的只是圖片的信息源屬性，即SRC屬性，所以要切換的圖片必須與原圖片具有相同的尺寸，以免圖片在切換時(shí)變形。