制作提示對話框
Dreamweaver的“彈出信息”行為可以用來顯示指定的信息，例如當網(wǎng)站中某個網(wǎng)頁正在更新，此時便可在主頁中，連接該網(wǎng)頁的文字、圖片或在導航欄按鈕上加入該行為。單擊該鏈接時，系統(tǒng)將彈出一個對話框提示稍后再訪問。
【操作步驟】
第1步，啟動Dreamweaver，新建文檔，保存為test.html。在空白頁面中設計一個簡單的表單。
第2步，在主頁中選中要在其上加入“彈出信息”行為的文字、圖片或?qū)Ш綑诎粹o。選擇【窗口】|【行為】命令，打開【行為】面板。
第3步，單擊【行為】面板中的按鈕，在打開的菜單中選擇【彈出信息】命令，打開【彈出信息】對話框。
第4步，在【消息】列表框中輸入要顯示的提示信息，如“確認要提交輸入的姓名和職業(yè)信息?！?。
第5步，單擊【確定】按鈕，返回【行為】面板。此時可看到面板中新加入的行為，其默認的觸發(fā)事件為onClick，即單擊該對象后的觸發(fā)事件。如果想使用其他觸發(fā)事件的動作，可單擊【事件】列表的向下三角按鈕，在彈出的菜單中選擇一個動作，例如onMouseOver。
第6步，完成設置后按F12鍵預覽。在頁面中單擊【提交】按鈕，便可彈出含有指定信息的對話框。
提示：在“彈出信息”行為所顯示的JavaScript提示對話框中只有一個【確定】按鈕，所以它只能作為一個提示對話框來使用，而不能進行更進一步的交互操作。
顯示和隱藏元素
Dreamweaver中的“顯示-隱藏元素”行為具有顯示和隱藏元素的功能，通過事件隱藏或顯示所指定的對象，一般常被用作與網(wǎng)頁交互時的信息。例如，當鼠標指針指向某個圖片和文字時，即可顯示有關(guān)詳細信息。利用“顯示-隱藏元素”行為，可在站點的主頁上，為每個導航按鈕所鏈接的網(wǎng)頁設置一個包含該網(wǎng)頁主要信息的層，并為每個導航按鈕加入行為。在瀏覽網(wǎng)頁時，層一開始處于隱藏狀態(tài)，只有將鼠標指針指向該導航按鈕時，才可顯示該層；移開按鈕后層自動消失，單擊該按鈕又可跳轉(zhuǎn)到目標網(wǎng)頁上。
【操作步驟】
第1步，打開本節(jié)示例中的orig.html文件，另存為effect.html。本例將利用“顯示-隱藏元素”行為制作切換面板。
第2步，單擊【代碼】視圖，切換到代碼編輯窗口下，在<body>標簽中添加如下4行代碼，如圖7.34所示。
<div id="apDiv1">
<img src="images/e1.png" />
</div><div id="apDiv2">
<img src="images/e2.png" />
</div><div id="apDiv3">
<img src="images/1.png" />
</div><div id="apDiv4">
<img src="images/2.png" />
</div>
第3步，選中<div id="apDiv3">，新建CSS規(guī)則，設置定位樣式，Position: absolute、Width:1003px、Height: 580px、Z-Index: 4、Left: 0px、Top: 89px。
第4步，選中<div id="apDiv4">，新建CSS規(guī)則，設置定位樣式，設置參數(shù)與apDiv3相同，不同點是Z-Index: 3，即讓apDiv3顯示在上面，如圖7.35所示。
第5步，選中<div id="apDiv1">，在CSS樣式面板中單擊【新建CSS規(guī)則】按鈕，設置定位樣式，Position: absolute、Width: 56px、Height:31px、Z-Index: 2、Left: 500px、Top: 37px。
第6步，選中<div id="apDiv1">，然后在【行為】面板中單擊按鈕，在彈出的下拉列表中選擇【顯示-隱藏元素】選項，打開【顯示-隱藏元素】對話框。
第7步，在【元素】列表中選中相應的AP元素并設置元素的顯示或隱藏屬性，例如，選中div"apDiv1"元素，然后單擊【隱藏】按鈕，表示隱藏該AP元素；選中div "apDiv 2"元素，單擊【顯示】按鈕，表示顯示該AP元素。而【默認】按鈕表示使用【屬性】面板上設置的AP元素的顯示或隱藏屬性。最后，設置<div id="apDiv3">隱藏，而<div id="apDiv4">顯示。
第8步，設置完成后單擊【確定】按鈕。在【行為】面板上查看行為的事件是否正確。如果不正確，單擊事件旁的向下按鈕，在彈出的菜單中選擇相應的事件。在本例中設置鼠標事件為onClick。
第9步，選中<div id="apDiv2">，由于<divid="apDiv2">被<div id="apDiv1">標簽覆蓋住，在【設計】視圖下看不到該標簽，因此單擊【代碼】視圖，在【代碼】視圖下拖選<div id="apDiv2">標簽的完整結(jié)構(gòu)。
第10步，單擊【行為】面板中的按鈕，從中選擇【顯示-隱藏元素】選項。在打開的【顯示-隱藏元素】對話框中選中相應的AP元素并設置元素的顯示或隱藏屬性。
第11步，單擊【確定】按鈕后，在【行為】面板中將鼠標事件更改為onClick。
第12步，設置完成后保存為頁面，瀏覽效果如圖7.43所示。當單擊【換臺】按鈕，則會切換到選臺頁面，此時按鈕顯示為“返回”，如果單擊【返回】按鈕，則返回到前面頁面。
提示：為了便于參考，下面給出行為的觸發(fā)事件的動作、說明列表。
當前文章標題：制作提示對話框
當前URL：http://www.kigisgallery.com/news/wzzz/3125.html
下一篇：制作高亮顯示文本
