用Dreamweaver設(shè)計自動關(guān)閉的網(wǎng)頁_Dreamweaver教程
本例中制作了兩個頁面,如圖1所示, Index.html是顯示于子窗口中的頁面,而在名為firstpage.html的頁面中,包含在子窗口中打開Index.html的鏈接。單擊鏈接時,將在子窗口中打開index.html。可以直接單擊子窗口中的“關(guān)閉”鏈接關(guān)閉子窗口,也可以不去理睬它,在15秒之后,子窗口也會自動關(guān)閉。

圖1 瀏覽器的彈出頁面
具體操作如下:
1. 在本地站點中生成一個Smlple文件夾。
2. 在Smlple文件夾中,生成名為Index.html以及名為firstpage.html的文件。
3. 雙擊Index.html,打開該文檔,進(jìn)入到文檔的設(shè)計視圖窗口中。
4. 單擊菜單View/Head Content,顯示文檔的頭部區(qū)域。
5. 單擊設(shè)計視圖窗口中的文檔頭部窗格。選擇菜單Insert/Invisible Tags/Script,打開Inset Script對話框。如圖2所示,在Language下拉列表框中選擇javascript選項,并在Coctento文本框中輸入“setTimeout("self.close()",15000)”。單擊OK按鈕,完成在文檔頭部插入15秒后自動關(guān)閉子窗口的腳本。在代碼中,15000表示15000毫秒,也即15秒,也可以根據(jù)需要將之修改為自己需要的時間毫秒數(shù)。

圖2 設(shè)置時間
6. 在文檔窗口中輸入“關(guān)閉”字樣,在屬性面板上的Link文本框中輸入“###”,將其設(shè)置為一個空鏈接。
7. 在狀態(tài)欄左端的快速標(biāo)記編輯器上,單擊標(biāo)記按鈕。選中“關(guān)閉”鏈接,然后按下Ctrl T組合鍵,打開快速標(biāo)記編輯器,進(jìn)入到快速標(biāo)記編輯器的編輯標(biāo)記模式。然后在“>”前輸入“onclick="selfclose()"”。 如圖3所示,設(shè)置完畢,單擊OK按鈕,確認(rèn)操作。這樣在Index.html被作為子窗口打開后,單擊該鏈接就可以馬上關(guān)閉該子窗口。

圖3 設(shè)置時間
8. 保存Index.html文件,并退出index.html的Dremweaver窗口。
9. 現(xiàn)在開始設(shè)計fristpage.html頁面。在本地站點的Smlple文件夾中,雙擊 fristpage.html,打開該文檔,進(jìn)入到文檔的設(shè)計視圖窗口中。
10. 在文檔中輸入“單擊這里打開會自動關(guān)閉的子窗口”字樣。然后在屬性面板上的 Link文本框中輸入“###”,將之設(shè)置為空鏈接。
11. 可以通過為該鏈接應(yīng)用Open Browser Window行為來設(shè)置單擊鏈接時打開Index.html窗口,不過更方便的方法是利用快速標(biāo)識編輯器。方法是首先將插入點放置到鏈接中,然后在狀態(tài)欄左端的標(biāo)識選擇器上,單擊標(biāo)識按鈕,選中整個鏈接。然后按下Ctrl T組合鍵,打開快速標(biāo)記編輯器,進(jìn)入到快速標(biāo)記編輯器的 編輯標(biāo)識模式。再在“>”前輸入“onclick="window.open('index.html',null','width=200px,height=200px')"”(如圖4所示)。設(shè)置完畢,按下回車鍵,確認(rèn)操作。

圖4 設(shè)置單擊鏈接時打開
12.上述操作就完成了本例的設(shè)置。可以單擊菜單用File/save,保存所做的工作。然后按下F12鍵,在瀏覽器中預(yù)覽頁面效果。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 用Dreamweaver MX 2004的Flash動畫元素
- DreamWeaver表格應(yīng)用之細(xì)線框的制作
- Dreamweaver MX進(jìn)階教程(十六)制作可拖動表格
- 用Dreamweaver8學(xué)習(xí)網(wǎng)頁滾動字幕的制作
- Dreamweaver的行為事件
- 管理員頁面的實現(xiàn)-Dreamweaver構(gòu)建Blog全程實錄
- 教你如何用Dreamweaver制作特色分隔線
- 細(xì)品DW MX 2004內(nèi)建FW技術(shù)
- Dreamweaver MX2004視頻寶典教程 HTML與渲染
- 使用Dreamweaver插件制作網(wǎng)頁滾動布告欄
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver設(shè)計自動關(guān)閉的網(wǎng)頁
。