<output id="jbxdv"></output>

      1. 制作提示對話框

        • 2019-11-12 10:41:15
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        Dreamweaver的“彈出信息”行為可以用來顯示指定的信息,例如當網站中某個網頁正在更新,此時便可在主頁中,連接該網頁的文字、圖片或在導航欄按鈕上加入該行為。單擊該鏈接時,系統將彈出一個對話框提示稍后再訪問。

        【操作步驟】

        第1步,啟動Dreamweaver,新建文檔,保存為test.html。在空白頁面中設計一個簡單的表單。

        第2步,在主頁中選中要在其上加入“彈出信息”行為的文字、圖片或導航欄按鈕。選擇【窗口】|【行為】命令,打開【行為】面板。

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

        第4步,在【消息】列表框中輸入要顯示的提示信息,如“確認要提交輸入的姓名和職業信息?!?。

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

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

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

        顯示和隱藏元素

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

        【操作步驟】

        第1步,打開本節示例中的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規則,設置定位樣式,Position: absolute、Width:1003px、Height: 580px、Z-Index: 4、Left: 0px、Top: 89px。

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

        第5步,選中<div id="apDiv1">,在CSS樣式面板中單擊【新建CSS規則】按鈕,設置定位樣式,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">標簽的完整結構。

        第10步,單擊【行為】面板中的按鈕,從中選擇【顯示-隱藏元素】選項。在打開的【顯示-隱藏元素】對話框中選中相應的AP元素并設置元素的顯示或隱藏屬性。

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

        第12步,設置完成后保存為頁面,瀏覽效果如圖7.43所示。當單擊【換臺】按鈕,則會切換到選臺頁面,此時按鈕顯示為“返回”,如果單擊【返回】按鈕,則返回到前面頁面。

        提示:為了便于參考,下面給出行為的觸發事件的動作、說明列表。

        8b8bfb13b732157829e2ae55548d8af5.jpg

        當前文章標題:制作提示對話框

        當前URL:http://www.freenetsites.com/news/wzzz/3125.html

        上一篇:在網頁設計中改變顯示屬性

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

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>