制作提示對(duì)話框

  • 2019-11-12 10:41:15
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.iy5y368.cn

Dreamweaver的“彈出信息”行為可以用來(lái)顯示指定的信息,例如當(dāng)網(wǎng)站中某個(gè)網(wǎng)頁(yè)正在更新,此時(shí)便可在主頁(yè)中,連接該網(wǎng)頁(yè)的文字、圖片或在導(dǎo)航欄按鈕上加入該行為。單擊該鏈接時(shí),系統(tǒng)將彈出一個(gè)對(duì)話框提示稍后再訪問(wèn)。

【操作步驟】

第1步,啟動(dòng)Dreamweaver,新建文檔,保存為test.html。在空白頁(yè)面中設(shè)計(jì)一個(gè)簡(jiǎn)單的表單。

第2步,在主頁(yè)中選中要在其上加入“彈出信息”行為的文字、圖片或?qū)Ш綑诎粹o。選擇【窗口】|【行為】命令,打開(kāi)【行為】面板。

第3步,單擊【行為】面板中的按鈕,在打開(kāi)的菜單中選擇【彈出信息】命令,打開(kāi)【彈出信息】對(duì)話框。

第4步,在【消息】列表框中輸入要顯示的提示信息,如“確認(rèn)要提交輸入的姓名和職業(yè)信息?!薄?/p>

第5步,單擊【確定】按鈕,返回【行為】面板。此時(shí)可看到面板中新加入的行為,其默認(rèn)的觸發(fā)事件為onClick,即單擊該對(duì)象后的觸發(fā)事件。如果想使用其他觸發(fā)事件的動(dòng)作,可單擊【事件】列表的向下三角按鈕,在彈出的菜單中選擇一個(gè)動(dòng)作,例如onMouseOver。

第6步,完成設(shè)置后按F12鍵預(yù)覽。在頁(yè)面中單擊【提交】按鈕,便可彈出含有指定信息的對(duì)話框。

提示:在“彈出信息”行為所顯示的JavaScript提示對(duì)話框中只有一個(gè)【確定】按鈕,所以它只能作為一個(gè)提示對(duì)話框來(lái)使用,而不能進(jìn)行更進(jìn)一步的交互操作。

顯示和隱藏元素

Dreamweaver中的“顯示-隱藏元素”行為具有顯示和隱藏元素的功能,通過(guò)事件隱藏或顯示所指定的對(duì)象,一般常被用作與網(wǎng)頁(yè)交互時(shí)的信息。例如,當(dāng)鼠標(biāo)指針指向某個(gè)圖片和文字時(shí),即可顯示有關(guān)詳細(xì)信息。利用“顯示-隱藏元素”行為,可在站點(diǎn)的主頁(yè)上,為每個(gè)導(dǎo)航按鈕所鏈接的網(wǎng)頁(yè)設(shè)置一個(gè)包含該網(wǎng)頁(yè)主要信息的層,并為每個(gè)導(dǎo)航按鈕加入行為。在瀏覽網(wǎng)頁(yè)時(shí),層一開(kāi)始處于隱藏狀態(tài),只有將鼠標(biāo)指針指向該導(dǎo)航按鈕時(shí),才可顯示該層;移開(kāi)按鈕后層自動(dòng)消失,單擊該按鈕又可跳轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)上。

【操作步驟】

第1步,打開(kāi)本節(jié)示例中的orig.html文件,另存為effect.html。本例將利用“顯示-隱藏元素”行為制作切換面板。

第2步,單擊【代碼】視圖,切換到代碼編輯窗口下,在<body>標(biāo)簽中添加如下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ī)則,設(shè)置定位樣式,Position: absolute、Width:1003px、Height: 580px、Z-Index: 4、Left: 0px、Top: 89px。

第4步,選中<div id="apDiv4">,新建CSS規(guī)則,設(shè)置定位樣式,設(shè)置參數(shù)與apDiv3相同,不同點(diǎn)是Z-Index: 3,即讓apDiv3顯示在上面,如圖7.35所示。

第5步,選中<div id="apDiv1">,在CSS樣式面板中單擊【新建CSS規(guī)則】按鈕,設(shè)置定位樣式,Position: absolute、Width: 56px、Height:31px、Z-Index: 2、Left: 500px、Top: 37px。

第6步,選中<div id="apDiv1">,然后在【行為】面板中單擊按鈕,在彈出的下拉列表中選擇【顯示-隱藏元素】選項(xiàng),打開(kāi)【顯示-隱藏元素】對(duì)話框。

第7步,在【元素】列表中選中相應(yīng)的AP元素并設(shè)置元素的顯示或隱藏屬性,例如,選中div"apDiv1"元素,然后單擊【隱藏】按鈕,表示隱藏該AP元素;選中div "apDiv 2"元素,單擊【顯示】按鈕,表示顯示該AP元素。而【默認(rèn)】按鈕表示使用【屬性】面板上設(shè)置的AP元素的顯示或隱藏屬性。最后,設(shè)置<div id="apDiv3">隱藏,而<div id="apDiv4">顯示。

第8步,設(shè)置完成后單擊【確定】按鈕。在【行為】面板上查看行為的事件是否正確。如果不正確,單擊事件旁的向下按鈕,在彈出的菜單中選擇相應(yīng)的事件。在本例中設(shè)置鼠標(biāo)事件為onClick。

第9步,選中<div id="apDiv2">,由于<divid="apDiv2">被<div id="apDiv1">標(biāo)簽覆蓋住,在【設(shè)計(jì)】視圖下看不到該標(biāo)簽,因此單擊【代碼】視圖,在【代碼】視圖下拖選<div id="apDiv2">標(biāo)簽的完整結(jié)構(gòu)。

第10步,單擊【行為】面板中的按鈕,從中選擇【顯示-隱藏元素】選項(xiàng)。在打開(kāi)的【顯示-隱藏元素】對(duì)話框中選中相應(yīng)的AP元素并設(shè)置元素的顯示或隱藏屬性。

第11步,單擊【確定】按鈕后,在【行為】面板中將鼠標(biāo)事件更改為onClick。

第12步,設(shè)置完成后保存為頁(yè)面,瀏覽效果如圖7.43所示。當(dāng)單擊【換臺(tái)】按鈕,則會(huì)切換到選臺(tái)頁(yè)面,此時(shí)按鈕顯示為“返回”,如果單擊【返回】按鈕,則返回到前面頁(yè)面。

提示:為了便于參考,下面給出行為的觸發(fā)事件的動(dòng)作、說(shuō)明列表。

8b8bfb13b732157829e2ae55548d8af5.jpg

當(dāng)前文章標(biāo)題:制作提示對(duì)話框

當(dāng)前URL:http://www.iy5y368.cn/news/wzzz/3125.html

上一篇:在網(wǎng)頁(yè)設(shè)計(jì)中改變顯示屬性

下一篇:制作高亮顯示文本

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))